@datarobot/design-system 28.9.2 → 28.10.0

package/cjs/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/cjs/floating-panel/use-floating-panel-state.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingPanelState = useFloatingPanelState;
+var _react = require("react");
+var _hooks = require("../hooks");
+var _useFloatingPanelRoot = require("./use-floating-panel-root");
+var _constants = require("./constants");
+const step = 80;
+const dockAreaWidth = 26;
+const delta = {
+  [_constants.MOVE_KEYS.UP]: {
+    dx: 0,
+    dy: -step
+  },
+  [_constants.MOVE_KEYS.RIGHT]: {
+    dx: step,
+    dy: 0
+  },
+  [_constants.MOVE_KEYS.DOWN]: {
+    dx: 0,
+    dy: step
+  },
+  [_constants.MOVE_KEYS.LEFT]: {
+    dx: -step,
+    dy: 0
+  }
+};
+function useFloatingPanelState({
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  isDocked: isDockedExternal,
+  setIsDocked: setIsDockedExternal,
+  initialState,
+  containerElement,
+  pageContentElement
+}) {
+  const [isDocked, setIsDocked] = (0, _react.useState)(isDockedExternal);
+  const [isMoving, setIsMoving] = (0, _react.useState)(false);
+  const animationRef = (0, _react.useRef)(null);
+  const headerRef = (0, _react.useRef)(null);
+  const headerHeightRef = (0, _react.useRef)(36);
+  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,
+    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
+  });
+  lastPositionRef.current = state;
+  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]);
+  const onDrag = (0, _react.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 = (0, _react.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 = (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);
+    }
+    setIsMoving(false);
+  }, []);
+  const onResize = (0, _react.useCallback)(e => {
+    if (animationRef.current) {
+      return;
+    }
+    animationRef.current = requestAnimationFrame(() => {
+      const start = dragStartPositionsRef.current;
+      const statePatch = {};
+      const resize = _constants.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 = (0, _react.useCallback)(() => {
+    setIsMoving(false);
+  }, []);
+  const setIsDockedHandler = (0, _react.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 = (0, _react.useCallback)(event => {
+    if (!_constants.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 = (0, _react.useCallback)(() => {
+    return lastPositionRef.current;
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isDockedExternal !== isDocked) {
+      setIsDockedHandler(isDockedExternal);
+    }
+  }, [isDockedExternal]);
+
+  // update position on window resize
+  (0, _react.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;
+      }
+    };
+  }, []);
+  (0, _hooks.useFocusTrap)(panelRef);
+  // update style according to content and header height
+  (0, _useFloatingPanelRoot.useFloatingPanelRoot)({
+    containerElement,
+    pageContentElement
+  });
+  const context = (0, _react.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 (0, _react.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(_constants.HIGHLIGHTED_CLASSNAME);
+  } else {
+    element.classList.remove(_constants.HIGHLIGHTED_CLASSNAME);
+  }
+}
+function between(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}

package/cjs/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/cjs/floating-panel/use-floating-panel.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingPanel = useFloatingPanel;
+var _react = require("react");
+var _constants = require("./constants");
+/**
+ * Use inside the content component for FloatingPanel in order to get access to context
+ */
+function useFloatingPanel() {
+  return (0, _react.useContext)(_constants.FloatingPanelContext);
+}

package/cjs/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/cjs/index.js

@@ -454,6 +454,17 @@ Object.keys(_filteringPanel).forEach(function (key) {
     }
   });
 });
+var _floatingPanel = require("./floating-panel");
+Object.keys(_floatingPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _floatingPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _floatingPanel[key];
+    }
+  });
+});
 var _fontAwesomeIcon = require("./font-awesome-icon");
 Object.keys(_fontAwesomeIcon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/table-react/hooks/useColumns.js

@@ -14,14 +14,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visibility = {}) {
   // we are interested only in visible columns
   const visibleColumns = columns.filter(({
-    accessorKey
-  }) => visibility[accessorKey] !== false);
+    accessorKey,
+    id
+  }) => {
+    // visibility state uses column ids for setting visibility, and for most cases it's the same as accessorKey
+    // but for the case when either 1) user provided an explicit id to the columnDef or 2) accessorKey is a complex get object path like `<object_name>.<object_property_name>`
+    // accessorKey would be different from id. Thus we should add a check on columnDef.id here
+    const visibilityValue = visibility[id] ?? visibility[accessorKey];
+    return visibilityValue !== false;
+  });
   // we need to know columns that do have maxSize set, as it will influence how free space is distributed
   const columnsWithMaxSize = visibleColumns.filter(column => !!column.maxSize);
 
   // calculation of all current columns width
   const currentWidth = visibleColumns.reduce((acc, current) => {
-    const resizeValue = columnSizing[current.accessorKey];
+    const resizeValue = columnSizing[current.id] || columnSizing[current.accessorKey];
     const minWidth = current.minSize || _types.COLUMN_SIZE.MIN_WIDTH;
     const resizeWidth = resizeValue ? Math.max(resizeValue, minWidth) : 0;
     const columnSize = Math.max(current.size || _types.COLUMN_SIZE.WIDTH, minWidth);
@@ -39,8 +46,9 @@ function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visib
   // whose size was altered manually by drag-n-drop in UI)
   const notSettedColumns = visibleColumns.filter(({
     size,
-    accessorKey
-  }) => !size && !columnSizing[accessorKey]);
+    accessorKey,
+    id
+  }) => !size && !(columnSizing[id] || columnSizing[accessorKey]));
   const evenDistribution = delta / notSettedColumns.length;
 
   // if there is no max size on any columns - distribute free space evenly across columns

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { FloatingPanelContextType } from './types';
+export declare const FloatingPanelContext: import("react").Context<FloatingPanelContextType>;
+export declare const MOVE_KEYS: {
+    readonly UP: "ArrowUp";
+    readonly DOWN: "ArrowDown";
+    readonly RIGHT: "ArrowRight";
+    readonly LEFT: "ArrowLeft";
+};
+export declare const MOVE_KEYS_VALUES: ("ArrowUp" | "ArrowDown" | "ArrowRight" | "ArrowLeft")[];
+export declare const HIGHLIGHTED_CLASSNAME = "highlighted";
+export type ResizeHandle = {
+    id: string;
+    left: boolean;
+    top: boolean;
+    bottom: boolean;
+    right: boolean;
+};
+export declare const resizeHandles: readonly ResizeHandle[];
+export declare const resizeHandlesMap: Map<string, ResizeHandle>;
+export declare function getHtmlElement(anchorEl: any): HTMLElement | null;

package/esm/floating-panel/constants.js

@@ -0,0 +1,86 @@
+import { createContext } from 'react';
+export const FloatingPanelContext = /*#__PURE__*/createContext({
+  onDrag: () => {},
+  onDragStart: () => {},
+  onDragEnd: () => {},
+  isDocked: false,
+  isMoving: false,
+  setIsDocked: () => {},
+  onMoveWithArrows: () => {},
+  getPosition: () => ({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  })
+});
+export const MOVE_KEYS = {
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
+  RIGHT: 'ArrowRight',
+  LEFT: 'ArrowLeft'
+};
+export const MOVE_KEYS_VALUES = Object.values(MOVE_KEYS);
+export const HIGHLIGHTED_CLASSNAME = 'highlighted';
+export const resizeHandles = [{
+  id: 'top-left',
+  left: true,
+  top: true,
+  bottom: false,
+  right: false
+}, {
+  id: 'top',
+  left: false,
+  top: true,
+  bottom: false,
+  right: false
+}, {
+  id: 'top-right',
+  left: false,
+  top: true,
+  bottom: false,
+  right: true
+}, {
+  id: 'right',
+  left: false,
+  top: false,
+  bottom: false,
+  right: true
+}, {
+  id: 'bottom-right',
+  left: false,
+  top: false,
+  bottom: true,
+  right: true
+}, {
+  id: 'bottom',
+  left: false,
+  top: false,
+  bottom: true,
+  right: false
+}, {
+  id: 'bottom-left',
+  left: true,
+  top: false,
+  bottom: true,
+  right: false
+}, {
+  id: 'left',
+  left: true,
+  top: false,
+  bottom: false,
+  right: false
+}];
+export const resizeHandlesMap = new Map(resizeHandles.map(handle => [handle.id, handle]));
+export function getHtmlElement(anchorEl) {
+  if (typeof anchorEl === 'function') {
+    return anchorEl();
+  }
+  if (anchorEl?.ref?.current) {
+    return anchorEl.ref.current;
+  }
+  if (anchorEl?.current) {
+    return anchorEl.current;
+  }
+  return anchorEl;
+}

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

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+import { DraggableEvent } from './types';
+export type DraggableAreaProps = {
+    areaId: string;
+    className: string;
+    onDragStart?: (event: DraggableEvent) => void;
+    onDrag: (event: DraggableEvent) => void;
+    onDragEnd?: (event: DraggableEvent | string) => void;
+    children?: React.ReactNode;
+    testId?: string;
+} & 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

@@ -0,0 +1,65 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DraggableArea({
+  areaId,
+  testId,
+  className,
+  onDragStart = () => {},
+  onDrag,
+  onDragEnd = () => {},
+  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]);
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    onMouseDown: onStart,
+    "test-id": testId,
+    role: "none",
+    ...props,
+    children: children
+  });
+}

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

@@ -0,0 +1,5 @@
+export type FloatingPanelDockButtonProps = {
+    isDocked: boolean;
+    setIsDocked: (docked: boolean) => void;
+};
+export declare function FloatingPanelDockButton({ isDocked, setIsDocked, }: FloatingPanelDockButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { faThumbtackSlash } from '@fortawesome/pro-solid-svg-icons/faThumbtackSlash';
+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 { jsx as _jsx } from "react/jsx-runtime";
+export function FloatingPanelDockButton({
+  isDocked,
+  setIsDocked
+}) {
+  const {
+    t
+  } = useTranslation();
+  const ariaLabel = isDocked ? t('Unlock from sidebar') : t('Dock to sidebar');
+  return /*#__PURE__*/_jsx(Button, {
+    testId: "floating-panel-dock-button",
+    accentType: ACCENT_TYPES.ROUND_ICON,
+    onClick: () => setIsDocked(!isDocked),
+    "aria-label": ariaLabel,
+    tooltipText: ariaLabel,
+    tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
+    children: isDocked ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      icon: faThumbtackSlash
+    }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      icon: faThumbtack
+    })
+  });
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type FloatingPanelDragHandleProps = {
+    children?: React.ReactNode;
+};
+export declare function FloatingPanelDragHandle({ children, }: FloatingPanelDragHandleProps): import("react/jsx-runtime").JSX.Element;