@datarobot/design-system 29.1.1 → 29.2.0

package/esm/floating-panel/floating-panel-header.js

@@ -1,10 +1,13 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Button, ACCENT_TYPES } from '../button';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { useTranslation } from '../hooks/use-translation';
 import { FloatingPanelDockButton } from './floating-panel-dock-button';
 import { FloatingPanelDragHandle } from './floating-panel-drag-handle';
+import { useDraggableArea } from './use-draggable-area';
+import { FloatingPanelContext } from './constants';
+import { FloatingPanelCollapseButton } from './floating-panel-collapse-button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
   actions = null,
@@ -17,26 +20,52 @@ export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
   const {
     t
   } = useTranslation();
-  return /*#__PURE__*/_jsxs("header", {
-    ref: ref,
-    className: "floating-panel-header",
-    children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {
-      dragIcon: dragIcon
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "actions",
-      children: [actions, /*#__PURE__*/_jsx(FloatingPanelDockButton, {
-        isDocked: isDocked,
-        setIsDocked: setIsDocked
-      }), /*#__PURE__*/_jsx(Button, {
-        testId: "floating-panel-close-action",
-        accentType: ACCENT_TYPES.ROUND_ICON,
-        onClick: () => onClose(getPosition()),
-        "aria-label": t('Close'),
-        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-          icon: faXmark
-        })
-      })]
-    })]
+  const {
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    isCollapsed,
+    setIsCollapsed
+  } = useContext(FloatingPanelContext);
+  const onStart = useDraggableArea({
+    areaId: 'drag-header',
+    onDrag,
+    onDragStart,
+    onDragEnd
   });
+  return (
+    /*#__PURE__*/
+    // FloatingPanelDragHandle is responsible for accessibility of the drag handle
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("header", {
+      ref: ref,
+      className: "floating-panel-header",
+      onMouseDown: onStart,
+      children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {
+        dragIcon: dragIcon
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "actions",
+        onMouseDown: event => {
+          // Prevent dragging when clicking on action buttons
+          event.stopPropagation();
+        },
+        children: [actions, /*#__PURE__*/_jsx(FloatingPanelCollapseButton, {
+          isCollapsed: isCollapsed,
+          setIsCollapsed: setIsCollapsed
+        }), /*#__PURE__*/_jsx(FloatingPanelDockButton, {
+          isDocked: isDocked,
+          setIsDocked: setIsDocked
+        }), /*#__PURE__*/_jsx(Button, {
+          testId: "floating-panel-close-action",
+          accentType: ACCENT_TYPES.ROUND_ICON,
+          onClick: () => onClose(getPosition()),
+          "aria-label": t('Close'),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faXmark
+          })
+        })]
+      })]
+    })
+  );
 });
 FloatingPanelHeader.displayName = 'FloatingPanelHeader';

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

@@ -49,6 +49,14 @@ export type FloatingPanelProps = {
      * Use this to sync up the docked state with consumer when controlled outside
      */
     setIsDocked?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Use this to control collapsed state outside the component
+     */
+    isCollapsed?: boolean;
+    /**
+     * Use this to sync up the collapsed state with consumer when controlled outside
+     */
+    setIsCollapsed?: Dispatch<SetStateAction<boolean>>;
     /**
      * Use this in consumer to update `initialState` in order to preserve last position
      */

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

@@ -48,8 +48,9 @@ export function FloatingPanel({
     onResize,
     onMovementStart,
     onResizeEnd,
-    setState,
+    setPosition,
     isDocked,
+    isCollapsed,
     setIsDocked,
     getPosition,
     context
@@ -61,6 +62,8 @@ export function FloatingPanel({
     initialState,
     isDocked: props.isDocked ?? false,
     setIsDocked: props.setIsDocked ?? noop,
+    isCollapsed: props.isCollapsed ?? false,
+    setIsCollapsed: props.setIsCollapsed ?? noop,
     containerElement,
     pageContentElement: getHtmlElement(pageContentEl)
   });
@@ -73,7 +76,7 @@ export function FloatingPanel({
     panelRef.current.focus();
     if (initialState && !initialStateAppliedOnce.current) {
       initialStateAppliedOnce.current = true;
-      return setState(initialState);
+      return setPosition(initialState);
     }
     if (!anchorEl) {
       return;
@@ -87,7 +90,7 @@ export function FloatingPanel({
           left,
           top
         } = panelRef.current.getBoundingClientRect();
-        setState(state => ({
+        setPosition(state => ({
           ...state,
           left,
           top
@@ -102,7 +105,8 @@ export function FloatingPanel({
       ref: panelRef,
       "test-id": testId,
       className: classnames('floating-panel', {
-        docked: isDocked
+        docked: isDocked,
+        collapsed: isCollapsed
       })
       /* eslint-disable-next-line react/forbid-dom-props */,
       style: style,

package/esm/floating-panel/types.d.ts

@@ -8,6 +8,12 @@ export type PanelState = {
 export type DraggableEvent = MouseEvent & {
     areaId: string;
 };
+export declare enum PANEL_STATE {
+    FLOATING = "floating",
+    COLLAPSED = "collapsed",
+    DOCKED = "docked",
+    TO_BE_DOCKED = "to-be-docked"
+}
 export type FloatingPanelContextType = {
     onDrag: (event: DraggableEvent) => void;
     onDragStart: (event: DraggableEvent) => void;
@@ -15,6 +21,8 @@ export type FloatingPanelContextType = {
     onMoveWithArrows: (event: React.KeyboardEvent) => void;
     isDocked: boolean;
     setIsDocked: (docked: boolean) => void;
+    isCollapsed: boolean;
+    setIsCollapsed: (docked: boolean) => void;
     isMoving: boolean;
     getPosition: () => PanelState;
 };

package/esm/floating-panel/types.js

@@ -1 +1,7 @@
-export {};
+export let 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;
+}({});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DraggableEvent } from '@datarobot/design-system/floating-panel/types';
+export type DraggableArea = {
+    areaId: string;
+    onDragStart?: (event: DraggableEvent) => void;
+    onDrag: (event: DraggableEvent) => void;
+    onDragEnd?: (event: DraggableEvent | string) => void;
+};
+/**
+ *
+ * @param areaId
+ * @param onDragStart
+ * @param onDrag
+ * @param onDragEnd
+ * @returns onStart function to be used in onMouseDown event
+ */
+export declare function useDraggableArea({ areaId, onDragStart, onDrag, onDragEnd, }: DraggableArea): (e: React.MouseEvent<Element>) => void;

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

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+/**
+ *
+ * @param areaId
+ * @param onDragStart
+ * @param onDrag
+ * @param onDragEnd
+ * @returns onStart function to be used in onMouseDown event
+ */
+export function useDraggableArea({
+  areaId,
+  onDragStart = () => {},
+  onDrag,
+  onDragEnd = () => {}
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const onStart = e => {
+    const draggableEvent = Object.assign(e, {
+      areaId
+    });
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    onDragStart(draggableEvent);
+  };
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    function onDragHandler(e) {
+      const draggableEvent = Object.assign(e, {
+        areaId
+      });
+      e.preventDefault();
+      e.stopPropagation();
+      onDrag(draggableEvent);
+    }
+    function onDragEndHandler(e) {
+      const draggableEvent = Object.assign(e, {
+        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;
+}

package/esm/floating-panel/use-floating-panel-state.d.ts

@@ -8,9 +8,11 @@ export type UseFloatingPanelHook = {
     onResize: (event: DraggableEvent) => void;
     onMovementStart: (event: DraggableEvent) => void;
     onResizeEnd: (event: DraggableEvent | string) => void;
-    setState: Dispatch<SetStateAction<PanelState>>;
+    setPosition: Dispatch<SetStateAction<PanelState>>;
     isDocked: boolean;
     setIsDocked: (docked: boolean) => void;
+    isCollapsed: boolean;
+    setIsCollapsed: (collapsed: boolean) => void;
     getPosition: () => PanelState;
 };
 export type UseFloatingPanelParams = {
@@ -20,8 +22,10 @@ export type UseFloatingPanelParams = {
     maxHeight: number;
     isDocked: boolean;
     setIsDocked: Dispatch<SetStateAction<boolean>>;
+    isCollapsed: boolean;
+    setIsCollapsed: Dispatch<SetStateAction<boolean>>;
     initialState?: PanelState;
     containerElement: HTMLElement;
     pageContentElement?: HTMLElement;
 };
-export declare function useFloatingPanelState({ minWidth, minHeight, maxWidth, maxHeight, isDocked: isDockedExternal, setIsDocked: setIsDockedExternal, initialState, containerElement, pageContentElement, }: UseFloatingPanelParams): UseFloatingPanelHook;
+export declare function useFloatingPanelState({ minWidth, minHeight, maxWidth, maxHeight, isDocked: isDockedExternal, setIsDocked: setIsDockedExternal, isCollapsed: isCollapsedExternal, setIsCollapsed: setIsCollapsedExternal, initialState, containerElement, pageContentElement, }: UseFloatingPanelParams): UseFloatingPanelHook;