@datarobot/design-system 28.9.2 → 28.10.0

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MOVE_KEYS_VALUES = exports.MOVE_KEYS = exports.HIGHLIGHTED_CLASSNAME = exports.FloatingPanelContext = void 0;
+exports.getHtmlElement = getHtmlElement;
+exports.resizeHandlesMap = exports.resizeHandles = void 0;
+var _react = require("react");
+const FloatingPanelContext = exports.FloatingPanelContext = /*#__PURE__*/(0, _react.createContext)({
+  onDrag: () => {},
+  onDragStart: () => {},
+  onDragEnd: () => {},
+  isDocked: false,
+  isMoving: false,
+  setIsDocked: () => {},
+  onMoveWithArrows: () => {},
+  getPosition: () => ({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  })
+});
+const MOVE_KEYS = exports.MOVE_KEYS = {
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
+  RIGHT: 'ArrowRight',
+  LEFT: 'ArrowLeft'
+};
+const MOVE_KEYS_VALUES = exports.MOVE_KEYS_VALUES = Object.values(MOVE_KEYS);
+const HIGHLIGHTED_CLASSNAME = exports.HIGHLIGHTED_CLASSNAME = 'highlighted';
+const resizeHandles = exports.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
+}];
+const resizeHandlesMap = exports.resizeHandlesMap = new Map(resizeHandles.map(handle => [handle.id, handle]));
+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/cjs/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/cjs/floating-panel/draggable-area.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableArea = DraggableArea;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function DraggableArea({
+  areaId,
+  testId,
+  className,
+  onDragStart = () => {},
+  onDrag,
+  onDragEnd = () => {},
+  children = null,
+  ...props
+}) {
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const onStart = (0, _react.useCallback)(e => {
+    const draggableEvent = Object.assign(e, {
+      areaId
+    });
+    e.preventDefault();
+    setIsDragging(true);
+    onDragStart(draggableEvent);
+  }, []);
+  (0, _react.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__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    onMouseDown: onStart,
+    "test-id": testId,
+    role: "none",
+    ...props,
+    children: children
+  });
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanelDockButton = FloatingPanelDockButton;
+var _react = _interopRequireDefault(require("react"));
+var _faThumbtackSlash = require("@fortawesome/pro-solid-svg-icons/faThumbtackSlash");
+var _faThumbtack = require("@fortawesome/free-solid-svg-icons/faThumbtack");
+var _button = require("../button");
+var _hooks = require("../hooks");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _tooltip = require("../tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function FloatingPanelDockButton({
+  isDocked,
+  setIsDocked
+}) {
+  const {
+    t
+  } = (0, _hooks.useTranslation)();
+  const ariaLabel = isDocked ? t('Unlock from sidebar') : t('Dock to sidebar');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+    testId: "floating-panel-dock-button",
+    accentType: _button.ACCENT_TYPES.ROUND_ICON,
+    onClick: () => setIsDocked(!isDocked),
+    "aria-label": ariaLabel,
+    tooltipText: ariaLabel,
+    tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+    children: isDocked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faThumbtackSlash.faThumbtackSlash
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faThumbtack.faThumbtack
+    })
+  });
+}

package/cjs/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;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanelDragHandle = FloatingPanelDragHandle;
+var _react = _interopRequireWildcard(require("react"));
+var _faGripDotsVertical = require("@fortawesome/pro-solid-svg-icons/faGripDotsVertical");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _hooks = require("../hooks");
+var _constants = require("./constants");
+var _draggableArea = require("./draggable-area");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function FloatingPanelDragHandle({
+  children
+}) {
+  const content = children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+    icon: _faGripDotsVertical.faGripDotsVertical
+  });
+  const {
+    t
+  } = (0, _hooks.useTranslation)();
+  const {
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    onMoveWithArrows,
+    isDocked
+  } = (0, _react.useContext)(_constants.FloatingPanelContext);
+  if (isDocked) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "drag-handle disabled",
+      "test-id": "floating-area-drag-handle",
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableArea.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/cjs/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/cjs/floating-panel/floating-panel-header.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanelHeader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
+var _button = require("../button");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _useTranslation = require("../hooks/use-translation");
+var _floatingPanelDockButton = require("./floating-panel-dock-button");
+var _floatingPanelDragHandle = require("./floating-panel-drag-handle");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FloatingPanelHeader = exports.FloatingPanelHeader = /*#__PURE__*/(0, _react.forwardRef)(({
+  actions = null,
+  onClose,
+  isDocked,
+  setIsDocked,
+  getPosition
+}, ref) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+    ref: ref,
+    className: "floating-panel-header",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelDragHandle.FloatingPanelDragHandle, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "actions",
+      children: [actions, /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelDockButton.FloatingPanelDockButton, {
+        isDocked: isDocked,
+        setIsDocked: setIsDocked
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        testId: "floating-panel-close-action",
+        accentType: _button.ACCENT_TYPES.ROUND_ICON,
+        onClick: () => onClose(getPosition()),
+        "aria-label": t('Close'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+          icon: _faXmark.faXmark
+        })
+      })]
+    })]
+  });
+});
+FloatingPanelHeader.displayName = 'FloatingPanelHeader';

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

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanel = FloatingPanel;
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@popperjs/core");
+var _reactPopper = require("../react-popper");
+var _hooks = require("../hooks");
+var _constants = require("./constants");
+var _useFloatingPanelState = require("./use-floating-panel-state");
+var _draggableArea = require("./draggable-area");
+var _floatingPanelHeader = require("./floating-panel-header");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const noop = () => false;
+
+/**
+ * Floating panel
+ * @midnight-gray-supported
+ * @uxr-only-supported
+ * @alpine-light-supported
+ */
+function FloatingPanel({
+  children,
+  minHeight = 648,
+  minWidth = 380,
+  maxWidth = 900,
+  maxHeight = 800,
+  anchorEl,
+  dockEl,
+  pageContentEl,
+  initialState,
+  testId = 'floating-panel',
+  placement = 'bottom',
+  popperModifiers = [_reactPopper.OFFSET_MODIFIER],
+  onClose = noop,
+  actions,
+  ...props
+}) {
+  const containerElement = (0, _constants.getHtmlElement)(dockEl) || document.getElementById('floating-panel-root') || document.body;
+  const initialStateAppliedOnce = (0, _react.useRef)(false);
+  const {
+    t
+  } = (0, _hooks.useTranslation)();
+  const {
+    panelRef,
+    headerRef,
+    style,
+    onResize,
+    onMovementStart,
+    onResizeEnd,
+    setState,
+    isDocked,
+    setIsDocked,
+    getPosition,
+    context
+  } = (0, _useFloatingPanelState.useFloatingPanelState)({
+    minHeight,
+    minWidth,
+    maxWidth,
+    maxHeight,
+    initialState,
+    isDocked: props.isDocked ?? false,
+    setIsDocked: props.setIsDocked ?? noop,
+    containerElement,
+    pageContentElement: (0, _constants.getHtmlElement)(pageContentEl)
+  });
+
+  // use @popperjs/core to set initial position for the panel
+  (0, _react.useLayoutEffect)(() => {
+    if (!panelRef.current) {
+      return;
+    }
+    panelRef.current.focus();
+    if (initialState && !initialStateAppliedOnce.current) {
+      initialStateAppliedOnce.current = true;
+      return setState(initialState);
+    }
+    if (!anchorEl) {
+      return;
+    }
+    const popperInstance = (0, _core.createPopper)((0, _constants.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__*/(0, _jsxRuntime.jsx)(_constants.FloatingPanelContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+      ref: panelRef,
+      "test-id": testId,
+      className: (0, _classnames.default)('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__*/(0, _jsxRuntime.jsx)(_floatingPanelHeader.FloatingPanelHeader, {
+        ref: headerRef,
+        onClose: onClose,
+        getPosition: getPosition,
+        isDocked: isDocked,
+        setIsDocked: setIsDocked,
+        actions: actions
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        id: "floating-panel-content",
+        className: "floating-panel-content",
+        children: children
+      }), !isDocked && _constants.resizeHandles.map(handle => /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableArea.DraggableArea, {
+        areaId: handle.id,
+        className: (0, _classnames.default)('resize-handle', handle.id),
+        onDrag: onResize,
+        onDragStart: onMovementStart,
+        onDragEnd: onResizeEnd
+      }, handle.id))]
+    }), containerElement)
+  });
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FloatingPanel", {
+  enumerable: true,
+  get: function () {
+    return _floatingPanel.FloatingPanel;
+  }
+});
+Object.defineProperty(exports, "useFloatingPanel", {
+  enumerable: true,
+  get: function () {
+    return _useFloatingPanel.useFloatingPanel;
+  }
+});
+var _floatingPanel = require("./floating-panel");
+var _useFloatingPanel = require("./use-floating-panel");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingPanelRoot = useFloatingPanelRoot;
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function useFloatingPanelRoot({
+  containerElement,
+  pageContentElement
+}) {
+  (0, _react.useEffect)(() => {
+    // this is not an exceptional case: when there is no header this could be omitted
+    if (!containerElement || !pageContentElement) {
+      return;
+    }
+    const onResize = (0, _debounce.default)(() => {
+      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]);
+}