@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.11

package/components/data-list/data-list.d.ts

@@ -5,7 +5,7 @@ import { Component } from 'react';
 import { type FocusSensorOuterProps } from '../global/focus-sensor-hoc';
 import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../legacy-table/selection-shortcuts-hoc';
 import { type DisableHoverAddProps } from '../legacy-table/disable-hover-hoc';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 import { type FormattedItem, moreLessButtonStates } from './item';
 export interface DataListBaseProps<T extends SelectionItem> {
     data: readonly T[];

package/components/data-list/data-list.mock.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 export interface Item extends SelectionItem {
     title: ReactNode;
     collapsible?: boolean;

package/components/data-list/item.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent, type ReactNode } from 'react';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 import type Selection from './selection';
 export declare enum moreLessButtonStates {
     UNUSED = 0,

package/components/data-list/selection.d.ts

@@ -1,4 +1,4 @@
-import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../legacy-table/selection';
+import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../global/table-selection';
 interface DataListSelectionConfig<T extends SelectionItem> extends TableSelectionConfig<T> {
     partialSelected?: Set<T> | undefined;
 }

package/components/data-list/selection.js

@@ -1,4 +1,4 @@
-import TableSelection from '../legacy-table/selection';
+import TableSelection from '../global/table-selection';
 export default class Selection extends TableSelection {
     _partialSelected;
     constructor({ partialSelected = new Set(), ...props }) {

package/components/date-picker/consts.d.ts

@@ -34,6 +34,7 @@ export interface DateInputTranslations {
     addSecondDate?: string;
     addTime?: string;
     selectName?: string;
+    selectDate?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;

package/components/date-picker/date-input.js

@@ -47,7 +47,7 @@ export default class DateInput extends React.PureComponent {
     };
     render() {
         const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale, } = this.props;
-        const { translate } = this.context;
+        const { messages, translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
             displayText = displayFormat(hoverDate, locale);
@@ -70,7 +70,11 @@ export default class DateInput extends React.PureComponent {
                 case 'time':
                     return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return (translations?.selectName ?? translate('selectName'))
+                    return (translations?.selectDate ??
+                        translations?.selectName ??
+                        messages.selectDate ??
+                        messages.selectName ??
+                        translate('selectDate'))
                         .replace('%name%', name)
                         .replace('{{name}}', name);
             }

package/components/date-picker/months.js

@@ -29,9 +29,9 @@ const intersectionObserverRootMargin = units.cellSize * 2;
 export default function Months(props) {
     const { scrollDate, setScrollDate, locale } = props;
     const { containerRef, items } = useScrollBehavior(scrollDate, setScrollDate, locale, 'monthsScroll', scrollArith, scheduleScroll);
-    return (<IntersectionObserverContext.Provider value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
+    return (<IntersectionObserverContext value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
       <div className={styles.months} ref={containerRef} data-test='ring-date-popup--months'>
         {items.map(month => (<Month {...props} month={month} key={+month}/>))}
       </div>
-    </IntersectionObserverContext.Provider>);
+    </IntersectionObserverContext>);
 }

package/components/date-picker/use-scroll-behavior.js

@@ -1,11 +1,10 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import units, { isSafariOnIPhone, scrollerReRenderDelayIPhone } from './consts';
-import useEventCallback from '../global/use-event-callback';
 export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDateSource, arith, scheduleScroll) {
     const [items, setItems] = useState(() => arith.getItems(scrollDate.date));
     const [scrollTop, setScrollTop] = useState(() => arith.getScrollTop(items, scrollDate.date, locale));
     const containerRef = useRef(null);
-    const syncSelfState = useEventCallback((newScrollDate) => {
+    const syncSelfState = useEffectEvent((newScrollDate) => {
         const newScrollTopOnExistingItems = arith.getScrollTop(items, newScrollDate, locale);
         if (isNearEdge(newScrollTopOnExistingItems, containerRef.current)) {
             const { newItems, newScrollTop } = arith.getItemsAndScrollTop(newScrollDate, locale);
@@ -28,7 +27,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
         if (scrollDate.source === selfScrollDateSource)
             return;
         syncSelfState(scrollDate.date);
-    }, [scrollDate, selfScrollDateSource, syncSelfState]);
+    }, [scrollDate, selfScrollDateSource]);
     const ignoreNextScrollEventRef = useRef(true);
     useLayoutEffect(function setContainerScrollFromState() {
         const container = containerRef.current;
@@ -38,7 +37,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
         container.scrollTop = scrollTop;
     }, [items, scrollTop]);
     const updateStateTimerRef = useRef(null);
-    const handleScroll = useEventCallback(() => {
+    const handleScroll = useEffectEvent(() => {
         scheduleScroll(() => {
             if (updateStateTimerRef.current != null) {
                 window.clearTimeout(updateStateTimerRef.current);
@@ -83,7 +82,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
                 updateStateTimerRef.current = null;
             }
         };
-    }, [handleScroll]);
+    }, []);
     return { containerRef, items };
 }
 function isNearEdge(scrollTop, container) {

package/components/date-picker/years.js

@@ -87,11 +87,11 @@ export default function Years({ scrollDate, setScrollDate }) {
         }, yearsAnimationDuration);
     }, [localScrollDate.date, setScrollDate]);
     const { containerRef, items } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, 'yearsScroll', scrollArith, scheduleScroll);
-    return (<IntersectionObserverContext.Provider value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
+    return (<IntersectionObserverContext value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
       <div className={styles.years} ref={containerRef} data-test='ring-date-popup--years'>
         {items.map(year => (<Year year={year} scrollDate={localScrollDate.date} handleYearClick={handleYearClick} key={+year}/>))}
       </div>
-    </IntersectionObserverContext.Provider>);
+    </IntersectionObserverContext>);
 }
 function Year({ year, scrollDate, handleYearClick, }) {
     const buttonRef = useRef(null);

package/components/dialog/dialog-controls.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { InteractionDirection } from './dialog-geometry';
+interface DialogControlsProps {
+    movable: boolean | undefined;
+    resizable: boolean | undefined;
+    showCloseButton: boolean;
+    closeButtonTitle: string | undefined;
+    onCloseClick: React.MouseEventHandler<HTMLElement>;
+    onStartInteraction: (event: React.PointerEvent<HTMLElement>, direction: InteractionDirection) => void;
+    onStopInteraction: React.PointerEventHandler<HTMLElement>;
+}
+export default function DialogControls({ movable, resizable, showCloseButton, closeButtonTitle, onCloseClick, onStartInteraction, onStopInteraction, }: DialogControlsProps): React.JSX.Element;
+export {};

package/components/dialog/dialog-controls.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import closeIcon from '@jetbrains/icons/close';
+import resizeIcon from '@jetbrains/icons/resize-corner-12px';
+import Button from '../button/button';
+import Icon from '../icon/icon';
+import styles from './dialog.css';
+const resizeDirections = ['n', 'ne', 'e', 's', 'sw', 'w', 'nw', 'se'];
+export default function DialogControls({ movable, resizable, showCloseButton, closeButtonTitle, onCloseClick, onStartInteraction, onStopInteraction, }) {
+    return (<>
+      {movable && (<div aria-hidden='true' className={styles.moveHandle} data-ring-dialog-move-handle='' data-test='ring-dialog-move-handle' onLostPointerCapture={onStopInteraction}/>)}
+      {showCloseButton && (<Button icon={closeIcon} data-test='ring-dialog-close-button' className={styles.closeButton} iconClassName={styles.closeIcon} onClick={onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+      {resizable && (<>
+          {resizeDirections.map(direction => (<div aria-hidden='true' className={styles.resizeHandle} data-resize-direction={direction} data-test={`ring-dialog-resize-handle-${direction}`} key={direction} onPointerDown={event => onStartInteraction(event, direction)} onPointerUp={onStopInteraction} onPointerCancel={onStopInteraction} onLostPointerCapture={onStopInteraction}/>))}
+          <Icon aria-hidden='true' className={styles.resizeMarker} data-test='ring-dialog-resize-marker' glyph={resizeIcon}/>
+        </>)}
+    </>);
+}

package/components/dialog/dialog-geometry.d.ts

@@ -0,0 +1,31 @@
+export type ResizeDirection = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+export type InteractionDirection = 'move' | ResizeDirection;
+export interface Geometry {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface DialogState {
+    shortcutsScope: string;
+    geometry: Geometry | null;
+    resized: boolean;
+}
+export interface Interaction {
+    pointerId: number;
+    direction: InteractionDirection;
+    startX: number;
+    startY: number;
+    minWidth: number;
+    minHeight: number;
+    geometry: Geometry;
+}
+export declare const getNativeTabIndex: (autoFocusFirst: boolean | undefined) => -1 | undefined;
+export declare const getTrapDisabled: (trapFocus: boolean, trapDisabled: boolean | undefined) => boolean;
+export declare const getResizeMinimum: (element: Element) => {
+    minWidth: number;
+    minHeight: number;
+};
+export declare const moveGeometry: (start: Geometry, dx: number, dy: number, viewportWidth: number, viewportHeight: number) => Geometry;
+export declare const fitGeometry: (geometry: Geometry, viewportWidth: number, viewportHeight: number) => Geometry;
+export declare const resizeGeometry: ({ geometry: start, direction, minWidth, minHeight }: Interaction, dx: number, dy: number, viewportWidth: number, viewportHeight: number) => Geometry;

package/components/dialog/dialog-geometry.js

@@ -0,0 +1,48 @@
+const MIN_WIDTH = 256;
+const MIN_HEIGHT = 160;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const getNativeTabIndex = (autoFocusFirst) => (autoFocusFirst ? undefined : -1);
+export const getTrapDisabled = (trapFocus, trapDisabled) => trapDisabled ?? !trapFocus;
+export const getResizeMinimum = (element) => {
+    const { minWidth, minHeight } = getComputedStyle(element);
+    const parsedWidth = parseFloat(minWidth);
+    const parsedHeight = parseFloat(minHeight);
+    return {
+        minWidth: Number.isNaN(parsedWidth) ? MIN_WIDTH : parsedWidth,
+        minHeight: Number.isNaN(parsedHeight) ? MIN_HEIGHT : parsedHeight,
+    };
+};
+export const moveGeometry = (start, dx, dy, viewportWidth, viewportHeight) => ({
+    ...start,
+    left: clamp(start.left + dx, 0, Math.max(0, viewportWidth - start.width)),
+    top: clamp(start.top + dy, 0, Math.max(0, viewportHeight - start.height)),
+});
+export const fitGeometry = (geometry, viewportWidth, viewportHeight) => {
+    const width = Math.min(geometry.width, viewportWidth);
+    const height = Math.min(geometry.height, viewportHeight);
+    return {
+        left: clamp(geometry.left, 0, Math.max(0, viewportWidth - width)),
+        top: clamp(geometry.top, 0, Math.max(0, viewportHeight - height)),
+        width,
+        height,
+    };
+};
+export const resizeGeometry = ({ geometry: start, direction, minWidth, minHeight }, dx, dy, viewportWidth, viewportHeight) => {
+    let left = start.left;
+    let right = start.left + start.width;
+    let top = start.top;
+    let bottom = start.top + start.height;
+    if (direction.includes('w')) {
+        left = clamp(start.left + dx, 0, right - Math.min(minWidth, right));
+    }
+    else if (direction.includes('e')) {
+        right = clamp(right + dx, left + Math.min(minWidth, viewportWidth - left), viewportWidth);
+    }
+    if (direction.includes('n')) {
+        top = clamp(start.top + dy, 0, bottom - Math.min(minHeight, bottom));
+    }
+    else if (direction.includes('s')) {
+        bottom = clamp(bottom + dy, top + Math.min(minHeight, viewportHeight - top), viewportHeight);
+    }
+    return { left, top, width: right - left, height: bottom - top };
+};

package/components/dialog/dialog.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value header, scrollableWrapper from '../island/island.css';
+@value content as islandContent, header, title as islandTitle, scrollableWrapper from '../island/island.css';
 @value panel from '../panel/panel.css';
 
 .container {
@@ -41,40 +41,58 @@
 }
 
 .content {
+  --dialog-padding: calc(var(--ring-unit) * 2.5);
+
   position: relative;
 
-  width: calc(var(--ring-unit) * 58);
-  min-height: calc(var(--ring-unit) * 15);
+  box-sizing: border-box;
+  width: calc(var(--ring-unit) * 57.5);
+  min-width: var(--ring-dialog-min-width, calc(var(--ring-unit) * 32));
+  min-height: var(--ring-dialog-min-height, calc(var(--ring-unit) * 20));
   margin: auto;
+  padding: var(--dialog-padding);
 
   cursor: default;
   overflow-wrap: break-word;
 
   & .scrollableWrapper {
-    padding-bottom: var(--ring-unit);
+    padding: var(--ring-unit) var(--dialog-padding) 0;
+  }
+
+  & .islandContent {
+    width: calc(100% + var(--dialog-padding) * 2);
+    min-height: calc(var(--ring-unit) * 5);
+    margin-inline: calc(var(--dialog-padding) * -1);
   }
 
   & .panel {
-    margin-top: 0;
-    padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
+    margin-top: auto;
+    padding: calc(var(--ring-unit) * 3) 0 0;
 
-    border-top: 0;
+    text-align: end;
 
+    border-top: 0;
     background-color: transparent;
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .panel > button:not(:last-child) {
-    margin-right: var(--ring-unit);
+    margin-inline-end: var(--ring-unit);
   }
 }
 
-.contentCloseButtonOutside {
-  max-width: calc(100dvw - var(--ring-unit) * 8);
+.content {
+  max-width: calc(100dvw - var(--ring-unit) * 4);
+  max-height: calc(100dvh - var(--ring-unit) * 8);
 }
 
-.contentCloseButtonInside {
-  max-width: calc(100dvw - var(--ring-unit) * 4);
+.resized .content.content {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
 }
 
 .content.content {
@@ -91,10 +109,6 @@
   cursor: pointer;
 }
 
-.closeIconOutside.closeIconOutside {
-  color: var(--ring-icon-hover-color);
-}
-
 .clickableOverlay:hover + * .closeIcon {
   color: var(--ring-link-hover-color);
 }
@@ -105,18 +119,132 @@
 
 .closeButton.closeButton {
   position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  inset-block-start: calc(var(--ring-unit) * 2);
+  inset-inline-end: calc(var(--ring-unit) * 2);
 
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.closeButtonOutside {
+.moveHandle {
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+  right: 0;
+  left: 0;
+
+  height: var(--dialog-padding);
+
+  cursor: move;
+  touch-action: none;
+}
+
+.movable .header {
+  cursor: move;
+  touch-action: none;
+}
+
+.resizeHandle {
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+
+  touch-action: none;
+}
+
+.resizeHandle[data-resize-direction='n'],
+.resizeHandle[data-resize-direction='s'] {
+  right: var(--ring-unit);
+  left: var(--ring-unit);
+
+  height: var(--ring-unit);
+
+  cursor: ns-resize;
+}
+
+.resizeHandle[data-resize-direction='n'] {
+  top: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='s'] {
+  bottom: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='e'],
+.resizeHandle[data-resize-direction='w'] {
   top: var(--ring-unit);
-  right: calc(var(--ring-unit) * -3);
+  bottom: var(--ring-unit);
+
+  width: var(--ring-unit);
+
+  cursor: ew-resize;
 }
 
-.closeButtonInside {
-  top: calc(var(--ring-unit) * 2);
-  right: calc(var(--ring-unit) * 2);
+.resizeHandle[data-resize-direction='e'] {
+  right: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='w'] {
+  left: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='ne'],
+.resizeHandle[data-resize-direction='se'],
+.resizeHandle[data-resize-direction='sw'],
+.resizeHandle[data-resize-direction='nw'] {
+  width: calc(var(--ring-unit) * 1.5);
+  height: calc(var(--ring-unit) * 1.5);
+}
+
+.resizeHandle[data-resize-direction='ne'] {
+  top: calc(var(--ring-unit) * -0.5);
+  right: calc(var(--ring-unit) * -0.5);
+
+  cursor: nesw-resize;
+}
+
+.resizeHandle[data-resize-direction='se'] {
+  right: calc(var(--ring-unit) * -0.5);
+  bottom: calc(var(--ring-unit) * -0.5);
+
+  width: calc(var(--ring-unit) * 2.5);
+  height: calc(var(--ring-unit) * 2.5);
+
+  cursor: nwse-resize;
+}
+
+.resizeHandle[data-resize-direction='sw'] {
+  bottom: calc(var(--ring-unit) * -0.5);
+  left: calc(var(--ring-unit) * -0.5);
+
+  cursor: nesw-resize;
+}
+
+.resizeHandle[data-resize-direction='nw'] {
+  top: calc(var(--ring-unit) * -0.5);
+  left: calc(var(--ring-unit) * -0.5);
+
+  cursor: nwse-resize;
+}
+
+.resizeMarker {
+  position: absolute;
+  bottom: calc(var(--ring-unit) * 0.5);
+  inset-inline-end: calc(var(--ring-unit) * 0.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: calc(var(--ring-unit) * 1.5);
+  height: calc(var(--ring-unit) * 1.5);
+
+  pointer-events: none;
+
+  color: var(--ring-secondary-color);
+
+  &:dir(rtl) {
+    transform: scaleX(-1);
+  }
 }
 
 .documentWithoutScroll {
@@ -141,16 +269,27 @@
 }
 
 .innerContainer .header {
-  padding-top: calc(var(--ring-unit) * 4);
+  width: calc(100% + var(--dialog-padding) * 2);
+  margin-inline: calc(var(--dialog-padding) * -1);
 
-  font-size: 24px;
-  line-height: 28px;
+  padding-block: 0;
+  padding-inline: var(--dialog-padding) calc(var(--dialog-padding) + var(--ring-unit) * 3);
+  padding-block-start: 0 !important;
+
+  font-size: calc(var(--ring-unit) * 2.5);
+  line-height: calc(var(--ring-unit) * 3);
 }
 
-.dense .header {
-  padding-top: calc(var(--ring-unit) * 2);
+.innerContainer .islandTitle {
+  float: none;
+
+  text-align: start;
+}
+
+.dense {
+  --dialog-padding: calc(var(--ring-unit) * 2);
 }
 
 .dense .panel {
-  padding-bottom: calc(var(--ring-unit) * 2);
+  padding-top: calc(var(--ring-unit) * 2);
 }

package/components/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
-import TabTrap, { type TabTrapProps } from '../tab-trap/tab-trap';
+import { type TabTrapObject, type TabTrapProps } from '../tab-trap/tab-trap';
+import { type DialogState, type Interaction, type InteractionDirection } from './dialog-geometry';
 import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;
@@ -11,8 +12,9 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
     shortcutOptions: ShortcutsScopeOptions;
-    closeButtonInside: boolean;
     closeButtonTitle?: string;
+    movable?: boolean;
+    resizable?: boolean;
     trapFocus: boolean;
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
@@ -22,11 +24,9 @@ export interface DialogProps extends Partial<TabTrapProps> {
     modal?: boolean;
     preventBodyScroll?: boolean;
 }
-export default class Dialog extends PureComponent<DialogProps> {
+export default class Dialog extends PureComponent<DialogProps, DialogState> {
     static defaultProps: Partial<DialogProps>;
-    state: {
-        shortcutsScope: string;
-    };
+    state: DialogState;
     componentDidMount(): void;
     componentDidUpdate(prevProps: DialogProps): void;
     componentWillUnmount(): void;
@@ -43,8 +43,16 @@ export default class Dialog extends PureComponent<DialogProps> {
         esc: (event: KeyboardEvent) => void;
     };
     dialog?: HTMLElement | null;
-    dialogRef: (tabTrap: TabTrap | null) => void;
+    dialogRef: (tabTrapObj: TabTrapObject | null) => void;
     nativeDialog: React.RefObject<HTMLDialogElement | null>;
+    innerContainer: React.RefObject<HTMLDivElement | null>;
+    interaction: Interaction | null;
+    resizeMinimum: Pick<Interaction, 'minWidth' | 'minHeight'> | null;
+    fitGeometryToViewport: () => void;
+    startInteraction: (event: React.PointerEvent<HTMLElement>, direction: InteractionDirection) => void;
+    continueInteraction: (event: React.PointerEvent<HTMLElement>) => void;
+    stopInteraction: (event: React.PointerEvent<HTMLElement>) => void;
+    startMove: (event: React.PointerEvent<HTMLElement>) => void;
     render(): false | React.JSX.Element;
 }
 export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;