@datarobot/design-system 28.9.2 → 28.10.0

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/esm/table-react/hooks/useColumns.js

@@ -7,14 +7,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 || COLUMN_SIZE.MIN_WIDTH;
     const resizeWidth = resizeValue ? Math.max(resizeValue, minWidth) : 0;
     const columnSize = Math.max(current.size || COLUMN_SIZE.WIDTH, minWidth);
@@ -32,8 +39,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/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"
+}