@datarobot/design-system 28.9.2 → 28.10.0

package/js/bundle/index.d.ts

@@ -9,9 +9,9 @@
 //   ../packages/lib/moment
 //   ../packages/lib/react-datetime
 //   ../packages/lib/dnd-core
+//   ../packages/lib/@popperjs/core
 //   ../packages/lib/@fortawesome/react-fontawesome
 //   ../packages/lib/@fortawesome/fontawesome-common-types
-//   ../packages/lib/@popperjs/core
 //   ../packages/lib/@tanstack/react-table
 //   ../packages/lib/slate-history
 
@@ -56,6 +56,9 @@ import { ElementType, ReactNode } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ReactElement, InputHTMLAttributes } from 'react';
 import { ReactNode, SyntheticEvent } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
+import { Modifier, Placement } from '@popperjs/core';
+import React, { MutableRefObject } from 'react';
 import { FontAwesomeIcon as FontAwesomeIconOriginal } from '@fortawesome/react-fontawesome';
 import React, { ReactNode, ReactElement } from 'react';
 import React, { ChangeEvent, FocusEvent } from 'react';
@@ -3029,6 +3032,96 @@ export type FilteringPanelProps = {
 /** Button which slides in a modal from the left for filtering selection. */
 export function FilteringPanel({ buttonTestId, buttonText, titleText, clearFiltersText, applyFiltersText, closeOnClear, isValid, modalProps, isInitial, children, onApply, onClear, buttonProps, }: FilteringPanelProps): import("react/jsx-runtime").JSX.Element;
 
+import './floating-panel.less';
+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 function FloatingPanel({ children, minHeight, minWidth, maxWidth, maxHeight, anchorEl, dockEl, pageContentEl, initialState, testId, placement, popperModifiers, onClose, actions, ...props }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element;
+
+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;
+
+/**
+  * Use inside the content component for FloatingPanel in order to get access to context
+  */
+export function useFloatingPanel(): import("./types").FloatingPanelContextType;
+
 export const FontAwesomeIcon: import("react").MemoExoticComponent<typeof FontAwesomeIconOriginal>;
 
 import './form-field.less';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "28.9.2",
+  "version": "28.10.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -7624,6 +7624,7 @@ li.CodeMirror-hint-active {
 .custom-card-header .right-content {
   display: flex;
   align-items: center;
+  gap: 0.25rem;
 }
 
 /*!**************************************************************************************************************************************************************************************************************************************************************!*\
@@ -9557,6 +9558,155 @@ td.rdtYear {
   animation-name: FilterPanelShow;
 }
 
+/*!**********************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/floating-panel/floating-panel.less ***!
+  \**********************************************************************************************************************************************************************************************************************************************************/
+/* stylelint-disable dr-custom/no-several-root-selectors */
+.floating-panel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  background: var(--floating-panel-bg);
+  border: 0.0625rem solid var(--floating-panel-border-color);
+  border-radius: var(--floating-panel-border-radius);
+  box-shadow: var(--floating-panel-border-shadow);
+  z-index: 101;
+  /* keep for translate3d positioning */
+  inset: 0 auto auto 0;
+  /* keep for translate3d positioning */
+}
+.floating-panel.docked {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(-1 * var(--floating-panel-docked-width));
+  height: unset;
+  width: var(--floating-panel-docked-width);
+  border-radius: unset;
+  transform: unset;
+}
+.floating-panel.docked .floating-panel-header {
+  border-radius: unset;
+}
+.floating-panel .floating-panel-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  background-color: var(--floating-panel-header-bg);
+  border-radius: var(--floating-panel-border-radius) var(--floating-panel-border-radius) 0 0;
+}
+.floating-panel .floating-panel-header .drag-handle {
+  justify-self: left;
+  padding: 0.5rem;
+  color: var(--floating-panel-drag-handle-color);
+  border-radius: var(--button-border-radius);
+  cursor: move;
+}
+.floating-panel .floating-panel-header .drag-handle > svg {
+  margin: 0 0.25rem;
+}
+.floating-panel .floating-panel-header .drag-handle:focus-visible {
+  outline: var(--focus-outline-color) solid 0.0625rem;
+  outline-offset: 0.125rem;
+}
+.floating-panel .floating-panel-header .drag-handle.disabled {
+  cursor: default;
+}
+.floating-panel .floating-panel-header .actions {
+  display: flex;
+  flex-direction: row;
+  justify-self: right;
+  gap: 0.25rem;
+}
+.floating-panel .floating-panel-header .actions > * {
+  color: var(--floating-panel-header-color);
+}
+.floating-panel .floating-panel-content {
+  padding: 1rem;
+  border-top: 0.0625rem solid var(--floating-panel-border-color);
+}
+.floating-panel .resize-handle {
+  position: absolute;
+  z-index: 1;
+}
+.floating-panel .resize-handle.top-left {
+  top: calc(var(--floating-panel-resizer-width) / -2);
+  left: calc(var(--floating-panel-resizer-width) / -2);
+  height: var(--floating-panel-resizer-width);
+  width: var(--floating-panel-resizer-width);
+  cursor: nwse-resize;
+}
+.floating-panel .resize-handle.top {
+  top: calc(var(--floating-panel-resizer-width) / -2);
+  right: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  left: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  height: var(--floating-panel-resizer-width);
+  cursor: ns-resize;
+}
+.floating-panel .resize-handle.top-right {
+  top: calc(var(--floating-panel-resizer-width) / -2);
+  right: calc(var(--floating-panel-resizer-width) / -2);
+  height: var(--floating-panel-resizer-width);
+  width: var(--floating-panel-resizer-width);
+  cursor: nesw-resize;
+}
+.floating-panel .resize-handle.right {
+  top: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  right: calc(var(--floating-panel-resizer-width) / -2);
+  bottom: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  width: var(--floating-panel-resizer-width);
+  cursor: ew-resize;
+}
+.floating-panel .resize-handle.bottom-right {
+  right: calc(var(--floating-panel-resizer-width) / -2);
+  bottom: calc(var(--floating-panel-resizer-width) / -2);
+  height: var(--floating-panel-resizer-width);
+  width: var(--floating-panel-resizer-width);
+  cursor: nwse-resize;
+}
+.floating-panel .resize-handle.bottom {
+  right: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  bottom: calc(var(--floating-panel-resizer-width) / -2);
+  left: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  height: var(--floating-panel-resizer-width);
+  cursor: ns-resize;
+}
+.floating-panel .resize-handle.bottom-left {
+  bottom: calc(var(--floating-panel-resizer-width) / -2);
+  left: calc(var(--floating-panel-resizer-width) / -2);
+  height: var(--floating-panel-resizer-width);
+  width: var(--floating-panel-resizer-width);
+  cursor: nesw-resize;
+}
+.floating-panel .resize-handle.left {
+  top: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  bottom: calc(var(--floating-panel-resizer-width) - var(--floating-panel-resizer-width) / 2);
+  left: calc(var(--floating-panel-resizer-width) / -2);
+  width: var(--floating-panel-resizer-width);
+  cursor: ew-resize;
+}
+#floating-panel-root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+#floating-panel-root.highlighted:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 0.1875rem;
+  margin: 0.75rem;
+  background: var(--floating-panel-dock-highlight-color);
+  pointer-events: none;
+  z-index: 1;
+}
+
 /*!******************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/full-screen-drawer/full-screen-drawer.less ***!
   \******************************************************************************************************************************************************************************************************************************************************************/