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

package/components/grid/grid.d.ts

@@ -1,13 +0,0 @@
-import { Component, type HTMLAttributes } from 'react';
-export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Grid
- * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
- */
-export declare class Grid extends Component<GridProps> {
-    render(): import("react").JSX.Element;
-}
-export { default as Row } from './row';
-export { default as Col } from './col';

package/components/grid/grid.js

@@ -1,19 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import styles from './grid.css';
-/**
- * @name Grid
- * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
- */
-export class Grid extends Component {
-    render() {
-        const { children, className, 'data-test': dataTest, ...restProps } = this.props;
-        const classes = classNames(styles['container-fluid'], className);
-        return (<div data-test={dataTests('ring-grid', dataTest)} {...restProps} className={classes}>
-        {children}
-      </div>);
-    }
-}
-export { default as Row } from './row';
-export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -1,21 +0,0 @@
-import { Component, type HTMLAttributes } from 'react';
-type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
-export interface RowProps extends HTMLAttributes<HTMLDivElement> {
-    'data-test'?: string | null | undefined;
-    reverse?: boolean | null | undefined;
-    start?: ModifierType | null | undefined;
-    center?: ModifierType | null | undefined;
-    end?: ModifierType | null | undefined;
-    top?: ModifierType | null | undefined;
-    middle?: ModifierType | null | undefined;
-    baseline?: ModifierType | null | undefined;
-    bottom?: ModifierType | null | undefined;
-    around?: ModifierType | null | undefined;
-    between?: ModifierType | null | undefined;
-    first?: ModifierType | null | undefined;
-    last?: ModifierType | null | undefined;
-}
-export default class Row extends Component<RowProps> {
-    render(): import("react").JSX.Element;
-}
-export {};

package/components/grid/row.js

@@ -1,41 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import styles from './grid.css';
-const modifierKeys = [
-    'start',
-    'center',
-    'end', // text-align, justify-content
-    'around',
-    'between', // justify-content
-    'top',
-    'middle',
-    'baseline',
-    'bottom', // align-items
-    'first',
-    'last', // order
-];
-/**
- * Converts xs="middle" to class "middle-xs"
- * @param {Object} props incoming props
- * @mockReturnValue {Array} result modifier classes
- */
-function getModifierClassNames(props) {
-    return modifierKeys.reduce((result, key) => {
-        if (props[key]) {
-            return result.concat(styles[`${key}-${props[key]}`]);
-        }
-        return result;
-    }, []);
-}
-export default class Row extends Component {
-    render() {
-        const { children, className, 'data-test': dataTest, reverse, start, center, end, top, middle, baseline, bottom, around, between, first, last, ...restProps } = this.props;
-        const classes = classNames(className, styles.row, getModifierClassNames({ start, center, end, top, middle, baseline, bottom, around, between, first, last }), {
-            [styles.reverse]: reverse,
-        });
-        return (<div {...restProps} className={classes} data-test={dataTests('ring-grid-row', dataTest)}>
-        {children}
-      </div>);
-    }
-}

package/components/old-browsers-message/__mocks__/old-browsers-message.js

@@ -1 +0,0 @@
-export function stop() {}

package/components/old-browsers-message/old-browsers-message-stop.d.ts

@@ -1 +0,0 @@
-export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/old-browsers-message-stop.js

@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/old-browsers-message.css

@@ -1,26 +0,0 @@
-@import '../global/variables.css';
-
-:global(.ring-old-browsers-message) {
-  display: block;
-
-  margin-top: 15%;
-
-  text-align: center;
-
-  color: var(--ring-text-color);
-
-  font-family: system-ui, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
-  font-size: var(--ring-font-size-larger);
-  line-height: calc(2.5 * var(--ring-unit));
-}
-
-:global(.ring-old-browsers-message_hidden) {
-  display: none;
-}
-
-:global(.ring-old-browsers-message__smile) {
-  cursor: pointer;
-  user-select: none;
-
-  font-size: calc(3 * var(--ring-unit));
-}

package/components/old-browsers-message/old-browsers-message.d.ts

@@ -1,5 +0,0 @@
-/**
- * @deprecated Will be removed in Ring UI 8.0.
- */
-declare function stopOldBrowserDetector(): void;
-export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/old-browsers-message.js

@@ -1,86 +0,0 @@
-import { isBrowserInWhiteList } from './white-list';
-/**
- * @name Old Browsers Message
- */
-/**
-  The list of versions which are definitely supported. "Browser is unsupported"
-  won't be displayed for those and higher versions even when a JS error occurs
-  on application start.
- */
-let smileChanges = 0;
-const MAX_SMILE_CHANGES = 50;
-let previousWindowErrorHandler;
-function changeSmileClickListener(event) {
-    const eyes = ['O', 'o', '-', '>', '<'];
-    const target = (event.target || event.srcElement);
-    smileChanges++;
-    function rand(min, max) {
-        return Math.round(Math.random() * (max - min)) + min;
-    }
-    function getRandomEye() {
-        return eyes[rand(0, eyes.length - 1)];
-    }
-    function getRandomSmile() {
-        if (smileChanges >= MAX_SMILE_CHANGES) {
-            return '\\\\ (x_x) //';
-        }
-        return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
-    }
-    target.innerHTML = getRandomSmile();
-}
-function attachSmileClickListener(smileNode) {
-    if (smileNode.addEventListener) {
-        smileNode.addEventListener('click', changeSmileClickListener);
-        /* eslint-disable @typescript-eslint/no-explicit-any */
-    }
-    else if (smileNode.attachEvent) {
-        smileNode.attachEvent('onclick', changeSmileClickListener);
-        /* eslint-enable */
-    }
-}
-/**
- * Listens to unhandled errors and displays passed node
- */
-function startOldBrowsersDetector(onOldBrowserDetected) {
-    previousWindowErrorHandler = window.onerror;
-    window.onerror = function oldBrowsersMessageShower(errorMsg, url, lineNumber) {
-        if (onOldBrowserDetected) {
-            onOldBrowserDetected();
-        }
-        if (previousWindowErrorHandler) {
-            return previousWindowErrorHandler(errorMsg, url, lineNumber);
-        }
-        return false;
-    };
-}
-/**
- * @deprecated Will be removed in Ring UI 8.0.
- */
-function stopOldBrowserDetector() {
-    window.onerror = previousWindowErrorHandler;
-}
-//Start javascript error detection
-startOldBrowsersDetector(() => {
-    const oldBrowsersMessageContainer = document.getElementById('ring-old-browsers-message');
-    const browserMessage = document.getElementById('ring-old-browsers-message__browser-message');
-    const errorMessage = document.getElementById('ring-old-browsers-message__error-message');
-    const smileNode = document.getElementById('ring-old-browsers-message__smile');
-    if (browserMessage && errorMessage) {
-        if (isBrowserInWhiteList()) {
-            browserMessage.style.display = 'none';
-            errorMessage.style.display = 'block';
-        }
-        else {
-            browserMessage.style.display = 'block';
-            errorMessage.style.display = 'none';
-        }
-    }
-    if (oldBrowsersMessageContainer) {
-        oldBrowsersMessageContainer.hidden = false;
-        oldBrowsersMessageContainer.style.display = 'block';
-    }
-    if (smileNode) {
-        attachSmileClickListener(smileNode);
-    }
-});
-export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/white-list.d.ts

@@ -1,2 +0,0 @@
-export declare const WHITE_LIST: Record<string, number>;
-export declare function isBrowserInWhiteList(): boolean;

package/components/old-browsers-message/white-list.js

@@ -1,24 +0,0 @@
-import sniffer from '../global/sniffer';
-const MAJOR_VERSION_INDEX = 0;
-/**
- * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
- */
-if (!SUPPORTED_BROWSERS) {
-    // eslint-disable-next-line no-console
-    console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
-}
-const SUPPORTED = SUPPORTED_BROWSERS || [];
-const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
-export const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
-    const [, browserName, version] = item.match(/(\S+)\s(\S+)/) ?? [];
-    if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
-        return acc;
-    }
-    return {
-        ...acc,
-        [browserName]: parseInt(version, 10),
-    };
-}, {});
-export function isBrowserInWhiteList() {
-    return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
-}

package/components/table/table-base.d.ts

@@ -1,24 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export declare function SortButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
-/**
- * Include it in a column header to make the column deletable.
- * Beware that `column.name ?? String(column.key)` is used in the aria-label.
- * Handle clicks with {@link TableProps.onColumnDelete}.
- */
-export declare function DeleteColumnButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-export declare function TableRow(props: {
-    ref?: React.Ref<HTMLTableRowElement>;
-} & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
-/**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
- */
-export declare function TableCell(props: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;

package/components/table/table-base.js

@@ -1,79 +0,0 @@
-import { useContext } from 'react';
-import classNames from 'classnames';
-import unsortedIcon from '@jetbrains/icons/unsorted-12px';
-import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
-import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
-import trashIcon from '@jetbrains/icons/trash-12px';
-import Icon from '../icon/icon';
-import { ColumnIndexContext, TablePropsContext } from './table-const';
-import styles from './table.css';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export function SortButton(props) {
-    const tableProps = useContext(TablePropsContext);
-    const columnIndex = useContext(ColumnIndexContext);
-    const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const sortOrder = column.sortOrder ?? 'none';
-    // eslint-disable-next-line no-nested-ternary, prettier/prettier
-    const glyph = sortOrder === 'none' ? unsortedIcon
-        : sortOrder === 'ascending' ? arrowUpIcon
-            : arrowDownIcon;
-    const { className, children, onClick, ...restProps } = props;
-    function handleClick(e) {
-        onClick?.(e);
-        if (!e.defaultPrevented) {
-            const sequence = ['none', 'ascending', 'descending'];
-            const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
-            tableProps.onSort?.(columnIndex, nextOrder);
-        }
-    }
-    return (<button type='button' className={classNames(styles.headerButton, className)} onClick={handleClick} {...restProps}>
-      {children} <Icon glyph={glyph} aria-hidden/>
-    </button>);
-}
-/**
- * Include it in a column header to make the column deletable.
- * Beware that `column.name ?? String(column.key)` is used in the aria-label.
- * Handle clicks with {@link TableProps.onColumnDelete}.
- */
-export function DeleteColumnButton(props) {
-    const tableProps = useContext(TablePropsContext);
-    const columnIndex = useContext(ColumnIndexContext);
-    const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const { className, onClick, ...restProps } = props;
-    function handleClick(e) {
-        onClick?.(e);
-        if (!e.defaultPrevented) {
-            tableProps.onColumnDelete?.(columnIndex);
-        }
-    }
-    return (<button type='button' className={classNames(styles.headerButton, styles.deleteColumnButton, className)} onClick={handleClick} aria-label={`Delete column ${column.name ?? String(column.key)}`} {...restProps}>
-      <Icon glyph={trashIcon}/>
-    </button>);
-}
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-export function TableRow(props) {
-    const { ref, className, ...restProps } = props;
-    const classes = classNames(styles.row, className);
-    return <tr ref={ref} className={classes} {...restProps}/>;
-}
-/**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
- */
-export function TableCell(props) {
-    const { className, ...restProps } = props;
-    const classes = classNames(styles.cell, className);
-    return <td className={classes} {...restProps}/>;
-}

package/components/table/table-component.d.ts

@@ -1,53 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import type { TableProps } from './table';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * Minimal usage requires the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `renderCell` (not required, but usually needed)
- *
- * ## Selection
- *
- * Following three props support the selection:
- *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
- *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
- *
- * ## Sorting
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the accessibility reasons.
- * - Handle `TableProps.onSort` callback in the client code. It is expected
- * to update `columns`, by setting the new `sortOrder` value for
- * the corresponding column, and updating the data accordingly.
- *
- * ## Deleting columns
- * You need the following to support deleting columns:
- *
- * - Make sure the `column` has a proper `name` or `key` prop, which will be
- * automatically included in the aria-label of `<DeleteColumnButton />`.
- * - Include `<DeleteColumnButton />` in a column header
- * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
- * to update `columns` by removing the corresponding column.
- *
- * ## Row virtualization
- *
- * To render only rows near the viewport and replace others with spacers, use:
- *
- * - `virtualizeRows`
- * - `scrollerRef` — required when the scrollable container is not the whole document
- * - `estimateHeight` — recommended when rows are expected to be taller than
- *   the default height (e.g. multiline or custom content)
- * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
- */
-export default function Table<T>(props: TableProps<T> & ComponentPropsWithoutRef<'table'>): import("react").JSX.Element;

package/components/table/table-component.js

@@ -1,101 +0,0 @@
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { IntersectionObserverContext } from '../global/intersection-observer-context';
-import { SpacerRow, useTableVirtualize } from './table-virtualize';
-import { DefaultItemRenderer } from './default-item-renderer';
-import { CollapseItemIntoSpacerContext, ColumnIndexContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight, TablePropsContext, } from './table-const';
-import styles from './table.css';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * Minimal usage requires the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `renderCell` (not required, but usually needed)
- *
- * ## Selection
- *
- * Following three props support the selection:
- *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
- *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
- *
- * ## Sorting
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the accessibility reasons.
- * - Handle `TableProps.onSort` callback in the client code. It is expected
- * to update `columns`, by setting the new `sortOrder` value for
- * the corresponding column, and updating the data accordingly.
- *
- * ## Deleting columns
- * You need the following to support deleting columns:
- *
- * - Make sure the `column` has a proper `name` or `key` prop, which will be
- * automatically included in the aria-label of `<DeleteColumnButton />`.
- * - Include `<DeleteColumnButton />` in a column header
- * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
- * to update `columns` by removing the corresponding column.
- *
- * ## Row virtualization
- *
- * To render only rows near the viewport and replace others with spacers, use:
- *
- * - `virtualizeRows`
- * - `scrollerRef` — required when the scrollable container is not the whole document
- * - `estimateHeight` — recommended when rows are expected to be taller than
- *   the default height (e.g. multiline or custom content)
- * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
- */
-export default function Table(props) {
-    const { data, columns, getKey, selection, isItemKeyboardFocusable, onItemFocus, onItemMove, onSort, onColumnDelete, onColumnMove, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, lookaheadPx = defaultLookaheadPx, retentionMarginPx = defaultRetentionMarginPx, minScrollAndResizeDeltaPx = defaultMinScrollAndResizeDeltaPx, columnEditButton, ref: userRef, className, theadClassName, theadTrClassName, tbodyClassName, ...restProps } = props;
-    const selfRef = useRef(null);
-    const tableRef = userRef ?? selfRef;
-    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useTableVirtualize({
-        enabled: virtualizeRows,
-        length: data.length,
-        scrollerRef,
-        tableRef,
-        estimateHeight,
-        lookaheadPx,
-        retentionMarginPx,
-        minScrollAndResizeDeltaPx,
-    });
-    return (<TablePropsContext.Provider value={props}>
-      <IntersectionObserverContext.Provider value={intersectionObserverHandle}>
-        <table className={classNames(styles.table, className)} ref={tableRef} {...restProps}>
-          <thead className={theadClassName}>
-            <tr className={classNames(styles.headerRow, theadTrClassName)}>
-              {columns.map((column, columnIndex) => (<th key={column.key} className={classNames(styles.headerCell, column.thClassName)} aria-sort={column.sortOrder}>
-                  <ColumnIndexContext.Provider value={columnIndex}>
-                    {column.renderHeader?.() ?? column.name ?? String(column.key)}
-                  </ColumnIndexContext.Provider>
-                </th>))}
-            </tr>
-          </thead>
-
-          <tbody className={tbodyClassName}>
-            {virtualItems.map(virtualItem => {
-            if (virtualItem.type === 'spacer') {
-                return <SpacerRow key={virtualItem.key} spacer={virtualItem} colSpan={columns.length}/>;
-            }
-            const index = virtualItem.index;
-            const item = data[index];
-            const key = props.getKey(item, index);
-            return (<CollapseItemIntoSpacerContext.Provider value={height => collapseItemIntoSpacer(index, height)} key={key}>
-                  {renderItem ? renderItem(item, index, data) : <DefaultItemRenderer index={index}/>}
-                </CollapseItemIntoSpacerContext.Provider>);
-        })}
-          </tbody>
-        </table>
-      </IntersectionObserverContext.Provider>
-    </TablePropsContext.Provider>);
-}

package/components/table/table-virtualize.d.ts

@@ -1,32 +0,0 @@
-import { type RefObject } from 'react';
-export type VirtualItem = RenderedItem | Spacer;
-interface RenderedItem {
-    type: 'rendered';
-    index: number;
-}
-interface Spacer {
-    type: 'spacer';
-    from: number;
-    to: number;
-    height: number;
-    key: string;
-}
-export declare function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
-    enabled: boolean;
-    length: number;
-    scrollerRef: RefObject<HTMLElement | null> | undefined;
-    tableRef: RefObject<HTMLTableElement | null>;
-    estimateHeight: (index: number) => number;
-    lookaheadPx: number;
-    retentionMarginPx: number;
-    minScrollAndResizeDeltaPx: number;
-}): {
-    virtualItems: VirtualItem[];
-    intersectionObserverHandle: import("../global/intersection-observer-context").IntersectionObserverHandle | null;
-    collapseItemIntoSpacer: (index: number, height: number) => void;
-};
-export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
-    spacer: Spacer;
-    colSpan: number;
-}): import("react").JSX.Element;
-export {};