@datarobot/design-system 28.9.2 → 28.10.0

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

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { useTranslation } from '../hooks';
+import { FloatingPanelContext } from './constants';
+import { DraggableArea } from './draggable-area';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FloatingPanelDragHandle({
+  children
+}) {
+  const content = children || /*#__PURE__*/_jsx(FontAwesomeIcon, {
+    icon: faGripDotsVertical
+  });
+  const {
+    t
+  } = useTranslation();
+  const {
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    onMoveWithArrows,
+    isDocked
+  } = 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",
+    areaId: "drag-handle",
+    className: "drag-handle",
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    onKeyDown: onMoveWithArrows,
+    "aria-label": t('Draggable handle: use arrows to change position of the panel'),
+    role: "button",
+    children: content
+  });
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { PanelState } from './types';
+type FloatingPanelHeaderProps = {
+    onClose: (State: PanelState) => void;
+    isDocked: boolean;
+    setIsDocked: (docked: boolean) => void;
+    actions?: React.ReactNode;
+    getPosition: () => PanelState;
+};
+export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<FloatingPanelHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

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;