@datarobot/design-system 29.1.1 → 29.2.0

package/cjs/datetime-range-picker/datetime-range-picker-panel.d.ts

@@ -10,7 +10,8 @@ export declare enum DATE_RANGE_ERROR_TYPES {
     END_AFTER_MIN = "END_AFTER_MIN",
     START_AFTER_MAX = "START_AFTER_MAX",
     INVALID_START_DATE = "INVALID_START_DATE",
-    INVALID_END_DATE = "INVALID_END_DATE"
+    INVALID_END_DATE = "INVALID_END_DATE",
+    START_END_SAME = "START_END_SAME"
 }
 export type DateRangeErrors = {
     [DATE_RANGE_ERROR_TYPES.INVALID_DATETIME]?: string;

package/cjs/datetime-range-picker/datetime-range-picker-panel.js

@@ -27,6 +27,7 @@ let DATE_RANGE_ERROR_TYPES = exports.DATE_RANGE_ERROR_TYPES = /*#__PURE__*/funct
   DATE_RANGE_ERROR_TYPES["START_AFTER_MAX"] = "START_AFTER_MAX";
   DATE_RANGE_ERROR_TYPES["INVALID_START_DATE"] = "INVALID_START_DATE";
   DATE_RANGE_ERROR_TYPES["INVALID_END_DATE"] = "INVALID_END_DATE";
+  DATE_RANGE_ERROR_TYPES["START_END_SAME"] = "START_END_SAME";
   return DATE_RANGE_ERROR_TYPES;
 }({});
 const DATE_RANGE_INPUT_TYPES = exports.DATE_RANGE_INPUT_TYPES = {

package/cjs/floating-panel/constants.js

@@ -11,9 +11,11 @@ const FloatingPanelContext = exports.FloatingPanelContext = /*#__PURE__*/(0, _re
   onDrag: () => {},
   onDragStart: () => {},
   onDragEnd: () => {},
-  isDocked: false,
   isMoving: false,
+  isDocked: false,
   setIsDocked: () => {},
+  isCollapsed: false,
+  setIsCollapsed: () => {},
   onMoveWithArrows: () => {},
   getPosition: () => ({
     left: 0,

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

@@ -8,5 +8,6 @@ export type DraggableAreaProps = {
     onDragEnd?: (event: DraggableEvent | string) => void;
     children?: React.ReactNode;
     testId?: string;
+    tagName?: keyof JSX.IntrinsicElements;
 } & 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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableArea = DraggableArea;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _useDraggableArea = require("./use-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function DraggableArea({
   areaId,
   testId,
@@ -17,50 +18,12 @@ function DraggableArea({
   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]);
+  const onStart = (0, _useDraggableArea.useDraggableArea)({
+    areaId,
+    onDragStart,
+    onDrag,
+    onDragEnd
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: className,
     onMouseDown: onStart,

package/cjs/floating-panel/floating-panel-collapse-button.d.ts

@@ -0,0 +1,5 @@
+export type FloatingPanelCollapseButtonProps = {
+    isCollapsed: boolean;
+    setIsCollapsed: (collapsed: boolean) => void;
+};
+export declare function FloatingPanelCollapseButton({ isCollapsed, setIsCollapsed, }: FloatingPanelCollapseButtonProps): import("react/jsx-runtime").JSX.Element;

package/cjs/floating-panel/floating-panel-collapse-button.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanelCollapseButton = FloatingPanelCollapseButton;
+var _react = _interopRequireDefault(require("react"));
+var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+var _faChevronUp = require("@fortawesome/free-solid-svg-icons/faChevronUp");
+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 FloatingPanelCollapseButton({
+  isCollapsed,
+  setIsCollapsed
+}) {
+  const {
+    t
+  } = (0, _hooks.useTranslation)();
+  const ariaLabel = isCollapsed ? t('Expand') : t('Collapse');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+    testId: "floating-panel-collapse-button",
+    accentType: _button.ACCENT_TYPES.ROUND_ICON,
+    onClick: () => setIsCollapsed(!isCollapsed),
+    "aria-label": ariaLabel,
+    tooltipText: ariaLabel,
+    tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: _tooltip.TOOLTIP_DELAY_TYPES.SLOW,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: isCollapsed ? _faChevronUp.faChevronUp : _faChevronDown.faChevronDown
+    })
+  });
+}

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

@@ -28,6 +28,7 @@ function FloatingPanelDockButton({
     "aria-label": ariaLabel,
     tooltipText: ariaLabel,
     tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+    tooltipDelayType: _tooltip.TOOLTIP_DELAY_TYPES.SLOW,
     children: isDocked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
       icon: _faThumbtackSlash.faThumbtackSlash
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {

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

@@ -24,16 +24,8 @@ function FloatingPanelDragHandle({
     onDrag,
     onDragStart,
     onDragEnd,
-    onMoveWithArrows,
-    isDocked
+    onMoveWithArrows
   } = (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",

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

@@ -11,6 +11,9 @@ 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 _useDraggableArea = require("./use-draggable-area");
+var _constants = require("./constants");
+var _floatingPanelCollapseButton = require("./floating-panel-collapse-button");
 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)(({
@@ -24,26 +27,52 @@ const FloatingPanelHeader = exports.FloatingPanelHeader = /*#__PURE__*/(0, _reac
   const {
     t
   } = (0, _useTranslation.useTranslation)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
-    ref: ref,
-    className: "floating-panel-header",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelDragHandle.FloatingPanelDragHandle, {
-      dragIcon: dragIcon
-    }), /*#__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
-        })
-      })]
-    })]
+  const {
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    isCollapsed,
+    setIsCollapsed
+  } = (0, _react.useContext)(_constants.FloatingPanelContext);
+  const onStart = (0, _useDraggableArea.useDraggableArea)({
+    areaId: 'drag-header',
+    onDrag,
+    onDragStart,
+    onDragEnd
   });
+  return (
+    /*#__PURE__*/
+    // FloatingPanelDragHandle is responsible for accessibility of the drag handle
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("header", {
+      ref: ref,
+      className: "floating-panel-header",
+      onMouseDown: onStart,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelDragHandle.FloatingPanelDragHandle, {
+        dragIcon: dragIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "actions",
+        onMouseDown: event => {
+          // Prevent dragging when clicking on action buttons
+          event.stopPropagation();
+        },
+        children: [actions, /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelCollapseButton.FloatingPanelCollapseButton, {
+          isCollapsed: isCollapsed,
+          setIsCollapsed: setIsCollapsed
+        }), /*#__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

@@ -49,6 +49,14 @@ export type FloatingPanelProps = {
      * Use this to sync up the docked state with consumer when controlled outside
      */
     setIsDocked?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Use this to control collapsed state outside the component
+     */
+    isCollapsed?: boolean;
+    /**
+     * Use this to sync up the collapsed state with consumer when controlled outside
+     */
+    setIsCollapsed?: Dispatch<SetStateAction<boolean>>;
     /**
      * Use this in consumer to update `initialState` in order to preserve last position
      */

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

@@ -56,8 +56,9 @@ function FloatingPanel({
     onResize,
     onMovementStart,
     onResizeEnd,
-    setState,
+    setPosition,
     isDocked,
+    isCollapsed,
     setIsDocked,
     getPosition,
     context
@@ -69,6 +70,8 @@ function FloatingPanel({
     initialState,
     isDocked: props.isDocked ?? false,
     setIsDocked: props.setIsDocked ?? noop,
+    isCollapsed: props.isCollapsed ?? false,
+    setIsCollapsed: props.setIsCollapsed ?? noop,
     containerElement,
     pageContentElement: (0, _constants.getHtmlElement)(pageContentEl)
   });
@@ -81,7 +84,7 @@ function FloatingPanel({
     panelRef.current.focus();
     if (initialState && !initialStateAppliedOnce.current) {
       initialStateAppliedOnce.current = true;
-      return setState(initialState);
+      return setPosition(initialState);
     }
     if (!anchorEl) {
       return;
@@ -95,7 +98,7 @@ function FloatingPanel({
           left,
           top
         } = panelRef.current.getBoundingClientRect();
-        setState(state => ({
+        setPosition(state => ({
           ...state,
           left,
           top
@@ -110,7 +113,8 @@ function FloatingPanel({
       ref: panelRef,
       "test-id": testId,
       className: (0, _classnames.default)('floating-panel', {
-        docked: isDocked
+        docked: isDocked,
+        collapsed: isCollapsed
       })
       /* eslint-disable-next-line react/forbid-dom-props */,
       style: style,

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

@@ -8,6 +8,12 @@ export type PanelState = {
 export type DraggableEvent = MouseEvent & {
     areaId: string;
 };
+export declare enum PANEL_STATE {
+    FLOATING = "floating",
+    COLLAPSED = "collapsed",
+    DOCKED = "docked",
+    TO_BE_DOCKED = "to-be-docked"
+}
 export type FloatingPanelContextType = {
     onDrag: (event: DraggableEvent) => void;
     onDragStart: (event: DraggableEvent) => void;
@@ -15,6 +21,8 @@ export type FloatingPanelContextType = {
     onMoveWithArrows: (event: React.KeyboardEvent) => void;
     isDocked: boolean;
     setIsDocked: (docked: boolean) => void;
+    isCollapsed: boolean;
+    setIsCollapsed: (docked: boolean) => void;
     isMoving: boolean;
     getPosition: () => PanelState;
 };

package/cjs/floating-panel/types.js

@@ -2,4 +2,12 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.PANEL_STATE = void 0;
+let PANEL_STATE = exports.PANEL_STATE = /*#__PURE__*/function (PANEL_STATE) {
+  PANEL_STATE["FLOATING"] = "floating";
+  PANEL_STATE["COLLAPSED"] = "collapsed";
+  PANEL_STATE["DOCKED"] = "docked";
+  PANEL_STATE["TO_BE_DOCKED"] = "to-be-docked";
+  return PANEL_STATE;
+}({});

package/cjs/floating-panel/use-draggable-area.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DraggableEvent } from '@datarobot/design-system/floating-panel/types';
+export type DraggableArea = {
+    areaId: string;
+    onDragStart?: (event: DraggableEvent) => void;
+    onDrag: (event: DraggableEvent) => void;
+    onDragEnd?: (event: DraggableEvent | string) => void;
+};
+/**
+ *
+ * @param areaId
+ * @param onDragStart
+ * @param onDrag
+ * @param onDragEnd
+ * @returns onStart function to be used in onMouseDown event
+ */
+export declare function useDraggableArea({ areaId, onDragStart, onDrag, onDragEnd, }: DraggableArea): (e: React.MouseEvent<Element>) => void;

package/cjs/floating-panel/use-draggable-area.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDraggableArea = useDraggableArea;
+var _react = require("react");
+/**
+ *
+ * @param areaId
+ * @param onDragStart
+ * @param onDrag
+ * @param onDragEnd
+ * @returns onStart function to be used in onMouseDown event
+ */
+function useDraggableArea({
+  areaId,
+  onDragStart = () => {},
+  onDrag,
+  onDragEnd = () => {}
+}) {
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const onStart = e => {
+    const draggableEvent = Object.assign(e, {
+      areaId
+    });
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    onDragStart(draggableEvent);
+  };
+  (0, _react.useEffect)(() => {
+    if (!isDragging) {
+      return;
+    }
+    function onDragHandler(e) {
+      const draggableEvent = Object.assign(e, {
+        areaId
+      });
+      e.preventDefault();
+      e.stopPropagation();
+      onDrag(draggableEvent);
+    }
+    function onDragEndHandler(e) {
+      const draggableEvent = Object.assign(e, {
+        areaId
+      });
+      e.preventDefault();
+      e.stopPropagation();
+      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 onStart;
+}

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

@@ -8,9 +8,11 @@ export type UseFloatingPanelHook = {
     onResize: (event: DraggableEvent) => void;
     onMovementStart: (event: DraggableEvent) => void;
     onResizeEnd: (event: DraggableEvent | string) => void;
-    setState: Dispatch<SetStateAction<PanelState>>;
+    setPosition: Dispatch<SetStateAction<PanelState>>;
     isDocked: boolean;
     setIsDocked: (docked: boolean) => void;
+    isCollapsed: boolean;
+    setIsCollapsed: (collapsed: boolean) => void;
     getPosition: () => PanelState;
 };
 export type UseFloatingPanelParams = {
@@ -20,8 +22,10 @@ export type UseFloatingPanelParams = {
     maxHeight: number;
     isDocked: boolean;
     setIsDocked: Dispatch<SetStateAction<boolean>>;
+    isCollapsed: boolean;
+    setIsCollapsed: 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;
+export declare function useFloatingPanelState({ minWidth, minHeight, maxWidth, maxHeight, isDocked: isDockedExternal, setIsDocked: setIsDockedExternal, isCollapsed: isCollapsedExternal, setIsCollapsed: setIsCollapsedExternal, initialState, containerElement, pageContentElement, }: UseFloatingPanelParams): UseFloatingPanelHook;