@datarobot/design-system 28.9.3 → 28.10.0

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

@@ -0,0 +1,39 @@
+import React, { forwardRef } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
+  actions = null,
+  onClose,
+  isDocked,
+  setIsDocked,
+  getPosition
+}, ref) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/_jsxs("header", {
+    ref: ref,
+    className: "floating-panel-header",
+    children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {}), /*#__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
+        })
+      })]
+    })]
+  });
+});
+FloatingPanelHeader.displayName = 'FloatingPanelHeader';

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

@@ -0,0 +1,66 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Modifier, Placement } from '@popperjs/core';
+import './floating-panel.less';
+import type { ElementReference, PanelState } from './types';
+export type FloatingPanelProps = {
+    /**
+     * Panel's content
+     */
+    children: React.ReactNode;
+    /**
+     * Pass custom header action buttons here
+     */
+    actions?: React.ReactNode;
+    minHeight?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /**
+     * Position panel relative to this element. Alternative use `initialState`
+     */
+    anchorEl?: ElementReference;
+    /**
+     * Dock element. It should be placed after id="full-screen-modal-root"
+     */
+    dockEl?: ElementReference;
+    /**
+     * Pass an element where the main page content is rendered, this will help calculate the header size
+     */
+    pageContentEl?: ElementReference;
+    /**
+     * Popper's placement, used for initial position if `initialState` is not defined
+     */
+    placement?: Placement;
+    /**
+     * Popper modifies which will override default set of modifiers
+     */
+    popperModifiers?: Partial<Modifier<any, any>>[];
+    testId?: string;
+    /**
+     * Use this to set initial state. Update it in `onClose` handler to preserve last position.
+     */
+    initialState?: PanelState;
+    /**
+     * Use this to control docked state outside the component
+     */
+    isDocked?: boolean;
+    /**
+     * Use this to sync up the docked state with consumer when controlled outside
+     */
+    setIsDocked?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Use this in consumer to update `initialState` in order to preserve last position
+     */
+    onClose?: (State: PanelState) => void;
+    /**
+     * Aria label for the floating panel
+     */
+    ariaLabel?: string;
+};
+/**
+ * Floating panel
+ * @midnight-gray-supported
+ * @uxr-only-supported
+ * @alpine-light-supported
+ */
+export declare function FloatingPanel({ children, minHeight, minWidth, maxWidth, maxHeight, anchorEl, dockEl, pageContentEl, initialState, testId, placement, popperModifiers, onClose, actions, ...props }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,132 @@
+import ReactDOM from 'react-dom';
+import React, { useLayoutEffect, useRef } from 'react';
+import classnames from 'classnames';
+import { createPopper } from '@popperjs/core';
+import { OFFSET_MODIFIER } from '../react-popper';
+import { useTranslation } from '../hooks';
+import { FloatingPanelContext, resizeHandles, getHtmlElement } from './constants';
+import { useFloatingPanelState } from './use-floating-panel-state';
+import { DraggableArea } from './draggable-area';
+import { FloatingPanelHeader } from './floating-panel-header';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => false;
+
+/**
+ * Floating panel
+ * @midnight-gray-supported
+ * @uxr-only-supported
+ * @alpine-light-supported
+ */
+export function FloatingPanel({
+  children,
+  minHeight = 648,
+  minWidth = 380,
+  maxWidth = 900,
+  maxHeight = 800,
+  anchorEl,
+  dockEl,
+  pageContentEl,
+  initialState,
+  testId = 'floating-panel',
+  placement = 'bottom',
+  popperModifiers = [OFFSET_MODIFIER],
+  onClose = noop,
+  actions,
+  ...props
+}) {
+  const containerElement = getHtmlElement(dockEl) || document.getElementById('floating-panel-root') || document.body;
+  const initialStateAppliedOnce = useRef(false);
+  const {
+    t
+  } = useTranslation();
+  const {
+    panelRef,
+    headerRef,
+    style,
+    onResize,
+    onMovementStart,
+    onResizeEnd,
+    setState,
+    isDocked,
+    setIsDocked,
+    getPosition,
+    context
+  } = useFloatingPanelState({
+    minHeight,
+    minWidth,
+    maxWidth,
+    maxHeight,
+    initialState,
+    isDocked: props.isDocked ?? false,
+    setIsDocked: props.setIsDocked ?? noop,
+    containerElement,
+    pageContentElement: getHtmlElement(pageContentEl)
+  });
+
+  // use @popperjs/core to set initial position for the panel
+  useLayoutEffect(() => {
+    if (!panelRef.current) {
+      return;
+    }
+    panelRef.current.focus();
+    if (initialState && !initialStateAppliedOnce.current) {
+      initialStateAppliedOnce.current = true;
+      return setState(initialState);
+    }
+    if (!anchorEl) {
+      return;
+    }
+    const popperInstance = createPopper(getHtmlElement(anchorEl), panelRef.current, {
+      placement,
+      strategy: 'fixed',
+      modifiers: popperModifiers,
+      onFirstUpdate: () => {
+        const {
+          left,
+          top
+        } = panelRef.current.getBoundingClientRect();
+        setState(state => ({
+          ...state,
+          left,
+          top
+        }));
+        popperInstance.destroy();
+      }
+    });
+  }, [placement]);
+  return /*#__PURE__*/_jsx(FloatingPanelContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsxs("section", {
+      ref: panelRef,
+      "test-id": testId,
+      className: classnames('floating-panel', {
+        docked: isDocked
+      })
+      /* eslint-disable-next-line react/forbid-dom-props */,
+      style: style,
+      "aria-modal": "true",
+      role: "dialog",
+      "aria-label": props.ariaLabel || t('Floating panel'),
+      "aria-describedby": "floating-panel-content",
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsx(FloatingPanelHeader, {
+        ref: headerRef,
+        onClose: onClose,
+        getPosition: getPosition,
+        isDocked: isDocked,
+        setIsDocked: setIsDocked,
+        actions: actions
+      }), /*#__PURE__*/_jsx("div", {
+        id: "floating-panel-content",
+        className: "floating-panel-content",
+        children: children
+      }), !isDocked && resizeHandles.map(handle => /*#__PURE__*/_jsx(DraggableArea, {
+        areaId: handle.id,
+        className: classnames('resize-handle', handle.id),
+        onDrag: onResize,
+        onDragStart: onMovementStart,
+        onDragEnd: onResizeEnd
+      }, handle.id))]
+    }), containerElement)
+  });
+}

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

@@ -0,0 +1,4 @@
+export type { FloatingPanelProps } from './floating-panel';
+export type { PanelState, FloatingPanelContextType } from './types';
+export { FloatingPanel } from './floating-panel';
+export { useFloatingPanel } from './use-floating-panel';

package/esm/floating-panel/index.js

@@ -0,0 +1,2 @@
+export { FloatingPanel } from './floating-panel';
+export { useFloatingPanel } from './use-floating-panel';

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

@@ -0,0 +1,21 @@
+import React, { MutableRefObject } from 'react';
+export type PanelState = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type DraggableEvent = MouseEvent & {
+    areaId: string;
+};
+export type FloatingPanelContextType = {
+    onDrag: (event: DraggableEvent) => void;
+    onDragStart: (event: DraggableEvent) => void;
+    onDragEnd: (event: DraggableEvent | string) => void;
+    onMoveWithArrows: (event: React.KeyboardEvent) => void;
+    isDocked: boolean;
+    setIsDocked: (docked: boolean) => void;
+    isMoving: boolean;
+    getPosition: () => PanelState;
+};
+export type ElementReference = HTMLElement | Element | MutableRefObject<HTMLElement> | (() => HTMLElement) | null;

package/esm/floating-panel/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+type UseFloatingPanelRootParams = {
+    containerElement: HTMLElement;
+    pageContentElement?: HTMLElement;
+};
+export declare function useFloatingPanelRoot({ containerElement, pageContentElement, }: UseFloatingPanelRootParams): void;
+export {};

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

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import debounce from 'lodash-es/debounce';
+export function useFloatingPanelRoot({
+  containerElement,
+  pageContentElement
+}) {
+  useEffect(() => {
+    // this is not an exceptional case: when there is no header this could be omitted
+    if (!containerElement || !pageContentElement) {
+      return;
+    }
+    const onResize = debounce(() => {
+      const contentRect = pageContentElement.getBoundingClientRect();
+      containerElement.style.top = `${contentRect.top}px`;
+    }, 100);
+    onResize();
+    const resizeObserver = new ResizeObserver(onResize);
+    resizeObserver.observe(pageContentElement);
+    return () => {
+      onResize.cancel();
+      resizeObserver.disconnect();
+    };
+  }, [containerElement, pageContentElement]);
+}

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

@@ -0,0 +1,27 @@
+import React, { CSSProperties, Dispatch, SetStateAction } from 'react';
+import { DraggableEvent, FloatingPanelContextType, PanelState } from './types';
+export type UseFloatingPanelHook = {
+    style: CSSProperties;
+    context: FloatingPanelContextType;
+    panelRef: React.MutableRefObject<HTMLDivElement | null>;
+    headerRef: React.MutableRefObject<HTMLHeadElement | null>;
+    onResize: (event: DraggableEvent) => void;
+    onMovementStart: (event: DraggableEvent) => void;
+    onResizeEnd: (event: DraggableEvent | string) => void;
+    setState: Dispatch<SetStateAction<PanelState>>;
+    isDocked: boolean;
+    setIsDocked: (docked: boolean) => void;
+    getPosition: () => PanelState;
+};
+export type UseFloatingPanelParams = {
+    minHeight: number;
+    minWidth: number;
+    maxWidth: number;
+    maxHeight: number;
+    isDocked: boolean;
+    setIsDocked: 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;

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

@@ -0,0 +1,310 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useFocusTrap } from '../hooks';
+import { useFloatingPanelRoot } from './use-floating-panel-root';
+import { MOVE_KEYS, MOVE_KEYS_VALUES, HIGHLIGHTED_CLASSNAME, resizeHandlesMap } from './constants';
+const step = 80;
+const dockAreaWidth = 26;
+const delta = {
+  [MOVE_KEYS.UP]: {
+    dx: 0,
+    dy: -step
+  },
+  [MOVE_KEYS.RIGHT]: {
+    dx: step,
+    dy: 0
+  },
+  [MOVE_KEYS.DOWN]: {
+    dx: 0,
+    dy: step
+  },
+  [MOVE_KEYS.LEFT]: {
+    dx: -step,
+    dy: 0
+  }
+};
+export function useFloatingPanelState({
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  isDocked: isDockedExternal,
+  setIsDocked: setIsDockedExternal,
+  initialState,
+  containerElement,
+  pageContentElement
+}) {
+  const [isDocked, setIsDocked] = useState(isDockedExternal);
+  const [isMoving, setIsMoving] = useState(false);
+  const animationRef = useRef(null);
+  const headerRef = useRef(null);
+  const headerHeightRef = useRef(36);
+  const panelRef = useRef(null);
+  const dragStartPositionsRef = useRef();
+  const isDockHighlightedRef = useRef(false);
+  const containerRef = useRef(containerElement);
+  const lastPositionRef = useRef({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  });
+  const [state, setState] = 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
+  });
+  lastPositionRef.current = state;
+  containerRef.current = containerElement;
+  const style = useMemo(() => isDocked ? {} : {
+    transform: `translate3d(${state.left}px, ${state.top}px, 0px)`,
+    width: `${state.width}px`,
+    height: `${state.height}px`
+  }, [state, isDocked]);
+  const onDrag = useCallback(event => {
+    if (animationRef.current) {
+      return;
+    }
+    animationRef.current = requestAnimationFrame(() => {
+      const start = dragStartPositionsRef.current;
+      const maxLeft = window.innerWidth - start.width * 0.25;
+      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;
+      });
+      animationRef.current = null;
+    });
+  }, []);
+  const onMovementStart = useCallback(event => {
+    const element = panelRef.current;
+    const header = headerRef.current;
+    if (!element || !header) {
+      return;
+    }
+    headerHeightRef.current = header.getBoundingClientRect().height;
+    const mouseX = event.pageX;
+    const mouseY = event.pageY;
+    dragStartPositionsRef.current = {
+      ...getPanelStateFromElement(element),
+      mouseX,
+      mouseY
+    };
+    lastPositionRef.current = dragStartPositionsRef.current;
+    setIsMoving(true);
+  }, []);
+  const onDragEnd = 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);
+    }
+    setIsMoving(false);
+  }, []);
+  const onResize = useCallback(e => {
+    if (animationRef.current) {
+      return;
+    }
+    animationRef.current = requestAnimationFrame(() => {
+      const start = dragStartPositionsRef.current;
+      const statePatch = {};
+      const resize = resizeHandlesMap.get(e.areaId);
+      if (resize?.right) {
+        const width = between(start.width + (e.pageX - start.mouseX), minWidth, maxWidth);
+        if (width !== start.width) {
+          statePatch.width = width;
+        }
+      }
+      if (resize?.bottom) {
+        const height = between(start.height + (e.pageY - start.mouseY), minHeight, maxHeight);
+        if (height !== start.height) {
+          statePatch.height = height;
+        }
+      }
+      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) {
+          statePatch.height = height;
+          statePatch.top = nextTop;
+        }
+      }
+      if (resize?.left) {
+        const width = start.width - (e.pageX - start.mouseX);
+        if (width > minWidth && width <= maxWidth) {
+          statePatch.width = width;
+          statePatch.left = start.left + (e.pageX - start.mouseX);
+        }
+      }
+      if (Object.keys(statePatch).length) {
+        setState(state => ({
+          ...state,
+          ...statePatch
+        }));
+      }
+      animationRef.current = null;
+    });
+  }, [minWidth, minHeight, maxWidth, maxHeight]);
+  const onResizeEnd = useCallback(() => {
+    setIsMoving(false);
+  }, []);
+  const setIsDockedHandler = useCallback(docked => {
+    const element = panelRef.current;
+    if (!element || docked === isDocked) {
+      return;
+    }
+    if (docked) {
+      setIsDocked(true);
+    } else {
+      setIsDocked(false);
+    }
+    if (isDockedExternal !== docked) {
+      setIsDockedExternal(docked);
+    }
+  }, [isDockedExternal, isDocked, setIsDockedExternal]);
+  const onMoveWithArrows = useCallback(event => {
+    if (!MOVE_KEYS_VALUES.includes(event.key)) {
+      return;
+    }
+    const element = panelRef.current;
+    if (!element) {
+      return;
+    }
+    const dx = delta[event.key].dx;
+    const dy = delta[event.key].dy;
+    const currentState = getPanelStateFromElement(element);
+    const maxLeft = window.innerWidth - currentState.width * 0.25;
+    const maxTop = window.innerHeight - headerHeightRef.current;
+    const nextLeft = currentState.left + dx;
+    const nextTop = currentState.top + dy;
+    let shouldDockInsteadOfMove = false;
+    const nextState = {
+      ...state,
+      top: between(nextTop, 0, maxTop),
+      left: between(nextLeft, 0, maxLeft)
+    };
+    shouldDockInsteadOfMove = isInDockArea(nextState) !== isDocked;
+    if (shouldDockInsteadOfMove) {
+      setIsDocked(true);
+      setIsDockedExternal(true);
+    } else {
+      setState(nextState);
+    }
+  }, [isDocked, state, setIsDockedExternal]);
+  const getPosition = useCallback(() => {
+    return lastPositionRef.current;
+  }, []);
+  useEffect(() => {
+    if (isDockedExternal !== isDocked) {
+      setIsDockedHandler(isDockedExternal);
+    }
+  }, [isDockedExternal]);
+
+  // update position on window resize
+  useEffect(() => {
+    const header = headerRef.current;
+    headerHeightRef.current = header.getBoundingClientRect().height;
+    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 => ({
+          ...state,
+          top: between(start.top, 0, maxTop),
+          left: between(start.left, 0, maxLeft)
+        }));
+      }
+    };
+    window.addEventListener('resize', onResizeHandler);
+    return () => {
+      window.removeEventListener('resize', onResizeHandler);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, []);
+  useFocusTrap(panelRef);
+  // update style according to content and header height
+  useFloatingPanelRoot({
+    containerElement,
+    pageContentElement
+  });
+  const context = useMemo(() => ({
+    onDrag,
+    onDragStart: onMovementStart,
+    onDragEnd,
+    onMoveWithArrows,
+    isDocked,
+    setIsDocked: setIsDockedHandler,
+    getPosition,
+    isMoving
+  }), [isDocked, setIsDockedHandler, onDrag, onDragEnd, onMovementStart, onMoveWithArrows, getPosition, isMoving]);
+  const api = {
+    style,
+    panelRef,
+    headerRef,
+    onResize,
+    onMovementStart,
+    onResizeEnd,
+    setState,
+    context,
+    isDocked,
+    setIsDocked: setIsDockedHandler,
+    getPosition
+  };
+  return useMemo(() => api, Object.values(api));
+}
+function getPanelStateFromElement(element) {
+  const bbox = element.getBoundingClientRect();
+  return {
+    width: bbox.width,
+    height: bbox.height,
+    left: bbox.x,
+    top: bbox.y
+  };
+}
+function isInDockArea(panelPosition) {
+  return panelPosition.left + panelPosition.width > window.innerWidth - dockAreaWidth;
+}
+function toggleDockHighlight(isDockHighlighted, element) {
+  if (!element) {
+    return;
+  }
+  if (isDockHighlighted) {
+    element.classList.add(HIGHLIGHTED_CLASSNAME);
+  } else {
+    element.classList.remove(HIGHLIGHTED_CLASSNAME);
+  }
+}
+function between(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Use inside the content component for FloatingPanel in order to get access to context
+ */
+export declare function useFloatingPanel(): import("./types").FloatingPanelContextType;

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

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FloatingPanelContext } from './constants';
+
+/**
+ * Use inside the content component for FloatingPanel in order to get access to context
+ */
+export function useFloatingPanel() {
+  return useContext(FloatingPanelContext);
+}

package/esm/index.d.ts

@@ -39,6 +39,7 @@ export * from './file-upload';
 export * from './file-uploader';
 export * from './files-upload-area';
 export * from './filtering-panel';
+export * from './floating-panel';
 export * from './font-awesome-icon';
 export * from './form-field';
 export * from './full-screen-drawer';

package/esm/index.js

@@ -39,6 +39,7 @@ export * from './file-upload';
 export * from './file-uploader';
 export * from './files-upload-area';
 export * from './filtering-panel';
+export * from './floating-panel';
 export * from './font-awesome-icon';
 export * from './form-field';
 export * from './full-screen-drawer';

package/floating-panel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@datarobot/design-system/floating-panel",
+  "private": true,
+  "main": "../cjs/floating-panel",
+  "module": "../esm/floating-panel",
+  "types": "../esm/index.d.ts"
+}