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

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

@@ -3,9 +3,9 @@
  */
 import { Component } from 'react';
 import { type FocusSensorOuterProps } from '../global/focus-sensor-hoc';
-import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';
-import { type DisableHoverAddProps } from '../table/disable-hover-hoc';
-import { type SelectionItem } from '../table/selection';
+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 FormattedItem, moreLessButtonStates } from './item';
 export interface DataListBaseProps<T extends SelectionItem> {
     data: readonly T[];
@@ -20,7 +20,7 @@ export interface DataListBaseProps<T extends SelectionItem> {
 type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
 export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>;
 export default class DataListContainer<T extends SelectionItem> extends Component<DataListContainerProps<T>> {
-    DataList: import("react").ComponentClass<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
+    DataList: import("react").ComponentClass<import("../legacy-table/disable-hover-hoc").DisableHoverProps<import("../legacy-table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
     render(): import("react").JSX.Element;
 }
 export {};

package/components/data-list/data-list.js

@@ -4,8 +4,8 @@
 import { PureComponent, Component } from 'react';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';
-import selectionShortcutsHOC from '../table/selection-shortcuts-hoc';
-import disableHoverHOC from '../table/disable-hover-hoc';
+import selectionShortcutsHOC from '../legacy-table/selection-shortcuts-hoc';
+import disableHoverHOC from '../legacy-table/disable-hover-hoc';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
 import Loader from '../loader/loader';

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SelectionItem } from '../table/selection';
+import { type SelectionItem } from '../legacy-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 '../table/selection';
+import { type SelectionItem } from '../legacy-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 '../table/selection';
+import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../legacy-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 '../table/selection';
+import TableSelection from '../legacy-table/selection';
 export default class Selection extends TableSelection {
     _partialSelected;
     constructor({ partialSelected = new Set(), ...props }) {

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

@@ -97,8 +97,16 @@ export default class DatePicker extends PureComponent {
     static contextType = I18nContext;
     handleChange = (change) => {
         const { onChange, withTime, applyTimeInput } = this.props;
-        const adjustedChange = withTime && !(change instanceof Date) && change?.date ? applyTimeInput(change.date, change.time) : change;
-        onChange(adjustedChange);
+        if (withTime && !(change instanceof Date) && change && 'date' in change && 'time' in change) {
+            const { date, time } = change;
+            if (date) {
+                const dateWithTime = applyTimeInput(date, time);
+                onChange(dateWithTime);
+            }
+        }
+        else {
+            onChange(change);
+        }
     };
     clear = () => {
         let change = null;
@@ -116,14 +124,18 @@ export default class DatePicker extends PureComponent {
         this.popup?._onCloseAttempt();
     };
     parse = memoize((date) => {
-        const { parseDateInput } = this.props;
+        let normalizedDate;
         if (date instanceof Date) {
-            return date;
+            normalizedDate = date;
+        }
+        else if (typeof date === 'number') {
+            normalizedDate = new Date(date);
         }
-        if (typeof date === 'number') {
-            return new Date(date);
+        else {
+            const { parseDateInput } = this.props;
+            normalizedDate = parseDateInput(date);
         }
-        return parseDateInput(date);
+        return normalizedDate && isValid(normalizedDate) ? normalizedDate : null;
     });
     formatTime() {
         const { displayTimeFormat, locale } = this.props;

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

@@ -1,9 +1,7 @@
 import { type Locale } from 'date-fns';
 import { type MonthsProps } from './consts';
-import { type IntersectionObserverHandle } from './use-intersection-observer';
 export interface MonthProps extends MonthsProps {
     month: Date;
-    intersectionObserverHandle: IntersectionObserverHandle | null;
 }
 export default function Month(props: MonthProps): import("react").JSX.Element;
 export declare function getMonthHeight(monthStart: Date | number, locale: Locale | undefined): number;

package/components/date-picker/month.js

@@ -4,14 +4,14 @@ import { getDaysInMonth, setDate } from 'date-fns';
 import { useRef } from 'react';
 import Day from './day';
 import units, { WEEK, getWeekStartsOn } from './consts';
-import { useVisibility } from './use-intersection-observer';
+import { useIsIntersecting } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 export default function Month(props) {
-    const { month, locale, intersectionObserverHandle } = props;
+    const { month, locale } = props;
     const containerRef = useRef(null);
-    const visible = useVisibility(intersectionObserverHandle, containerRef);
-    return (<div className={styles.month} ref={containerRef} style={visible ? {} : { height: getMonthHeight(month, locale) }}>
-      {visible && (<>
+    const isIntersecting = useIsIntersecting(containerRef);
+    return (<div className={styles.month} ref={containerRef} style={isIntersecting ? {} : { height: getMonthHeight(month, locale) }}>
+      {isIntersecting && (<>
           <span className={styles.monthTitle}>{format(month, 'LLLL', { locale })}</span>
 
           {Array.from({ length: getPaddingCellsNum(month, locale) }, (_, i) => (<Day {...props} day={new Date(0)} empty key={`e_${i}`}/>))}

package/components/date-picker/months.js

@@ -5,7 +5,7 @@ import units from './consts';
 import { ScrollArith } from './scroll-arith';
 import { useScrollBehavior } from './use-scroll-behavior';
 import scheduleRAF from '../global/schedule-raf';
-import { useIntersectionObserver } from './use-intersection-observer';
+import { useIntersectionObserverHandle, IntersectionObserverContext } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 function getMonthHeightWithMargin(date, locale) {
     return units.unit * 2 + getMonthHeight(date, locale);
@@ -23,14 +23,15 @@ const scheduleScroll = scheduleRAF();
  *
  * To avoid an unpainted gap at the viewport boundary, the next month must be reported
  * as visible slightly before it actually enters the viewport. We achieve this by
- * extending the IntersectionObserver scrollMargin.
+ * extending the IntersectionObserver rootMargin.
  */
-const intersectionObserverScrollMargin = units.cellSize * 2;
+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);
-    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-    return (<div className={styles.months} ref={containerRef} data-test='ring-date-popup--months'>
-      {items.map(month => (<Month {...props} month={month} key={+month} intersectionObserverHandle={intersectionObserverHandle}/>))}
-    </div>);
+    return (<IntersectionObserverContext.Provider 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>);
 }

package/components/date-picker/years.js

@@ -12,7 +12,7 @@ import { ScrollArith } from './scroll-arith';
 import { useScrollBehavior } from './use-scroll-behavior';
 import { animateDate } from './animate-date';
 import scheduleRAF from '../global/schedule-raf';
-import { useIntersectionObserver, useVisibility } from './use-intersection-observer';
+import { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting, } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 const { yearHeight } = units;
 const scrollArith = new ScrollArith({
@@ -25,7 +25,7 @@ const scheduleScroll = scheduleRAF();
 /**
  * Reduces "empty" years during fast scrolling.
  */
-const intersectionObserverScrollMargin = units.calHeight / 2;
+const intersectionObserverRootMargin = units.calHeight / 2;
 export default function Years({ scrollDate, setScrollDate }) {
     const [localScrollDate, setLocalScrollDate] = useState(scrollDate);
     const syncCleanupRef = useRef(null);
@@ -87,15 +87,16 @@ export default function Years({ scrollDate, setScrollDate }) {
         }, yearsAnimationDuration);
     }, [localScrollDate.date, setScrollDate]);
     const { containerRef, items } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, 'yearsScroll', scrollArith, scheduleScroll);
-    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-    return (<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} intersectionObserverHandle={intersectionObserverHandle}/>))}
-    </div>);
+    return (<IntersectionObserverContext.Provider 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>);
 }
-function Year({ year, scrollDate, handleYearClick, intersectionObserverHandle, }) {
+function Year({ year, scrollDate, handleYearClick, }) {
     const buttonRef = useRef(null);
-    const visible = useVisibility(intersectionObserverHandle, buttonRef);
-    return (<button type='button' ref={buttonRef} key={+year} disabled={!visible} className={classNames(styles.year, visible && isSameYear(year, scrollDate) && styles.currentYear, visible && isThisYear(year) && styles.today)} onClick={visible ? () => handleYearClick(year) : undefined}>
-      {visible ? format(year, 'yyyy') : '\u00A0'}
+    const isIntersecting = useIsIntersecting(buttonRef);
+    return (<button type='button' ref={buttonRef} key={+year} disabled={!isIntersecting} className={classNames(styles.year, isIntersecting && isSameYear(year, scrollDate) && styles.currentYear, isIntersecting && isThisYear(year) && styles.today)} onClick={isIntersecting ? () => handleYearClick(year) : undefined}>
+      {isIntersecting ? format(year, 'yyyy') : '\u00A0'}
     </button>);
 }

package/components/global/intersection-observer-context.d.ts

@@ -0,0 +1,26 @@
+import { type RefObject } from 'react';
+/**
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext.Provider>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *   // Or, to get updates instead:
+ *   useIsIntersectingListener(elementRef, newIsIntersecting => {
+ *     // ...
+ *   })
+ * }
+ * ```
+ */
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle | null>;
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle | null;
+export interface IntersectionObserverHandle {
+    observe(element: Element, setIsIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;
+export declare function useIsIntersectingListener(elementRef: RefObject<Element | null>, onChange: (isIntersecting: boolean) => void): void;

package/components/global/intersection-observer-context.js

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+/**
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext.Provider>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *   // Or, to get updates instead:
+ *   useIsIntersectingListener(elementRef, newIsIntersecting => {
+ *     // ...
+ *   })
+ * }
+ * ```
+ */
+export const IntersectionObserverContext = createContext(null);
+export function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
+    const [handle, setHandle] = useState(null);
+    useEffect(() => {
+        const root = rootRef?.current;
+        const elementToOnChange = new Map();
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const onChange = elementToOnChange.get(entry.target);
+                onChange?.(entry.isIntersecting);
+            }
+        }, {
+            root,
+            rootMargin: rootMargin != null ? `${rootMargin}px` : undefined,
+            scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined,
+        });
+        setHandle({
+            observe(element, onChange) {
+                elementToOnChange.set(element, onChange);
+                observer.observe(element);
+                return () => {
+                    elementToOnChange.delete(element);
+                    observer.unobserve(element);
+                };
+            },
+        });
+        return () => {
+            observer.disconnect();
+            setHandle(null);
+        };
+    }, [rootRef, rootMargin, scrollMargin]);
+    return handle;
+}
+export function useIsIntersecting(elementRef) {
+    const handle = useContext(IntersectionObserverContext);
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element || !handle)
+            return;
+        return handle.observe(element, setIsIntersecting);
+    }, [handle, elementRef, setIsIntersecting]);
+    return isIntersecting;
+}
+export function useIsIntersectingListener(elementRef, onChange) {
+    const handle = useContext(IntersectionObserverContext);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element || !handle)
+            return;
+        return handle.observe(element, onChange);
+    }, [handle, elementRef, onChange]);
+}

package/components/{table → legacy-table}/selection.d.ts

@@ -4,7 +4,7 @@
 export interface SelectionItem {
     id: string | number;
 }
-export interface TableSelectionConfig<T extends object> {
+export interface TableSelectionConfig<T> {
     data?: readonly T[] | undefined;
     selected?: Set<T> | undefined;
     focused?: T | null | undefined;
@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T extends object> {
+export default class Selection<T> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;

package/components/{table → legacy-table}/selection.js

@@ -11,7 +11,7 @@ export default class Selection {
     _isItemSelectable;
     constructor({ data = [], selected = new Set(), focused = null, getKey = (item) => {
         // Default behavior stays backward compatible: use item's "id" if present
-        if ('id' in item) {
+        if (item && typeof item === 'object' && 'id' in item) {
             return item.id;
         }
         // If there's no id provided on item and no getKey supplied, fail fast with a clear message

package/components/legacy-table/table.css

@@ -0,0 +1,260 @@
+@import '../global/variables.css';
+
+.tableWrapper {
+  --ring-table-compensate: 2px;
+  --ring-table-compensated: calc(calc(4 * var(--ring-unit)) - var(--ring-table-compensate));
+  --ring-table-top: -3px;
+
+  position: relative;
+  font-variant-numeric: var(--ring-font-variant-numeric);
+}
+
+.table {
+  width: 100%;
+
+  border-spacing: 0;
+}
+
+.userSelectNone {
+  user-select: none;
+}
+
+.headerCell {
+  composes: font-smaller-lower from '../global/global.css';
+
+  box-sizing: border-box;
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
+
+  text-align: left;
+  white-space: nowrap;
+
+  color: var(--ring-secondary-color);
+
+  font-weight: normal;
+}
+
+.headerCell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:last-child {
+  width: 100%;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.headerCell.headerCellSorted {
+  font-weight: var(--ring-font-weight-bold);
+}
+
+.headerCell.headerCellSortable {
+  cursor: pointer;
+}
+
+.headerCell .sorter {
+  position: absolute;
+  top: 5px;
+
+  display: none;
+
+  margin-left: 5px;
+
+  user-select: none;
+}
+
+.headerCell.headerCellSortable .sorter {
+  display: inline-block;
+}
+
+.sortedUp .icon {
+  transform: rotate(180deg);
+  transform-origin: center 44%;
+}
+
+.caption {
+  padding-top: var(--ring-unit);
+  padding-bottom: 6px;
+
+  color: var(--ring-text-color);
+  border-bottom: 0;
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height-lower);
+}
+
+.tableHead::after {
+  position: absolute;
+
+  width: 100%;
+
+  height: 1px;
+
+  content: '';
+
+  background-color: var(--ring-line-color);
+}
+
+.subHeaderSticky {
+  position: sticky;
+
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+
+  background-color: rgba(var(--ring-content-background-components), 0.9);
+}
+
+.row {
+  outline: none;
+
+  line-height: var(--ring-table-compensated);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.table:not(.disabledHover) .row:hover {
+  background-color: var(--ring-hover-background-color);
+}
+
+.rowSelected {
+  background-color: var(--ring-selected-background-color);
+}
+
+.rowFocused {
+  background-color: var(--ring-hover-background-color);
+}
+/* stylelint-disable-next-line selector-max-specificity */
+.rowFocused .cell:nth-child(1) {
+  box-shadow: inset 2px 0 var(--ring-main-color);
+}
+
+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(--ring-table-loader-background-color);
+}
+
+.cell {
+  composes: ellipsis from '../global/global.css';
+
+  box-sizing: content-box;
+
+  min-width: 0;
+
+  height: calc(4 * var(--ring-unit));
+  padding: 0;
+  padding-right: calc(var(--ring-unit) * 5);
+
+  color: var(--ring-text-color);
+}
+
+.cell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.cell:last-child {
+  width: 100%;
+
+  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
+
+  max-width: 0;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.wideFirstColumn .cell:first-child {
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
+}
+
+.cell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.cellUnlimited {
+  width: 100%;
+}
+
+.cellRight {
+  text-align: right;
+}
+
+.metaColumn {
+  position: relative;
+
+  float: left;
+
+  height: 16px;
+  padding-right: var(--ring-table-compensate);
+}
+
+.metaColumn.headerMetaColumn {
+  padding-top: 1px;
+}
+
+.dragHandle {
+  top: var(--ring-table-top);
+  left: calc(-2 * var(--ring-unit));
+
+  cursor: grab;
+
+  opacity: 0;
+}
+
+/* override button */
+.dragHandle.dragHandle {
+  position: absolute;
+
+  height: calc(calc(4 * var(--ring-unit)) - var(--ring-table-top));
+  padding: 0;
+}
+
+.dragHandle.visibleDragHandle,
+.row:hover .dragHandle {
+  opacity: 1;
+}
+
+.rowCollapseExpandButton {
+  padding-right: calc(var(--ring-unit) / 2);
+  padding-left: 7px;
+}
+
+.draggingRow {
+  z-index: var(--ring-overlay-z-index);
+
+  background-color: var(--ring-hover-background-color);
+}
+
+.draggingRow .dragHandle {
+  cursor: grabbing;
+
+  opacity: 1;
+}
+
+.draggingRow .dragHandle svg {
+  color: var(--ring-main-color);
+}
+
+.draggingTable {
+  z-index: var(--ring-overlay-z-index);
+
+  border-spacing: 0;
+}
+
+.tableMessage {
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+
+  color: var(--ring-secondary-color);
+}