@jetbrains/ring-ui 8.0.0-beta.7 → 8.0.0-beta.9

package/components/select/select-popup.d.ts

@@ -4,7 +4,7 @@
 import { type ComponentType, type CSSProperties, PureComponent, type ReactNode, type Ref, type SyntheticEvent } from 'react';
 import * as React from 'react';
 import { type IconType } from '../icon/icon';
-import Popup from '../popup/popup';
+import Popup, { type PopupAttrs } from '../popup/popup';
 import { type Directions } from '../popup/position';
 import List, { type SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
@@ -60,6 +60,7 @@ export interface SelectPopupProps<T = unknown> {
     ringPopupTarget: string | null;
     onSelectAll: (isSelectAll: boolean) => void;
     onEmptyPopupEnter: (e: KeyboardEvent) => void;
+    popupProps?: Partial<PopupAttrs> | undefined;
     className?: string | null | undefined;
     compact?: boolean | null | undefined;
     dir?: 'ltr' | 'rtl' | undefined;

package/components/select/select-popup.js

@@ -323,8 +323,8 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event),
     };
     render() {
-        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
-        const classes = classNames(styles.popup, className);
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, popupProps, } = this.props;
+        const classes = classNames(styles.popup, className, popupProps?.className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
@@ -332,7 +332,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || normalizePopupTarget(ringPopupTarget));
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
+                return (<Popup {...popupProps} trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={{ ...popupProps?.style, ...style }} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

package/components/select/select.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, Component, type ComponentType, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, type RefCallback, type SyntheticEvent } from 'react';
 import * as React from 'react';
+import { type PopupAttrs } from '../popup/popup';
 import { type SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { type LabelType } from '../control-label/control-label';
@@ -99,6 +100,7 @@ export interface BaseSelectProps<T = unknown> {
     getInitial?: (() => string) | null | undefined;
     minWidth?: number | undefined;
     popupClassName?: string | null | undefined;
+    popupProps?: Partial<PopupAttrs> | undefined;
     popupStyle?: CSSProperties | undefined;
     top?: number | undefined;
     left?: number | undefined;

package/components/select/select.js

@@ -454,7 +454,7 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
+                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} popupProps={this.props.popupProps} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
                  filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId} preventListOverscroll={this.props.preventListOverscroll}/>);
             }}
       </I18nContext.Consumer>);

package/components/selection-toolbar/selection-toolbar.css

@@ -0,0 +1,86 @@
+@import '../global/variables.css';
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 100%;
+  height: calc(var(--ring-unit) * 5);
+  padding: 10px calc(var(--ring-unit) * 2);
+
+  pointer-events: auto;
+
+  color: var(--ring-white-text-color);
+  border-radius: var(--ring-border-radius-large);
+  background-color: var(--ring-sidebar-background-color);
+  box-shadow:
+    0 2px 8px rgb(0 28 54 / 10%),
+    0 1px 2px rgb(0 28 54 / 4%);
+
+  line-height: var(--ring-line-height);
+  gap: calc(var(--ring-unit) * 2);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 3);
+}
+
+.selectAll {
+  flex: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 2);
+
+  min-width: 0;
+}
+
+.closeAction {
+  flex: none;
+}
+
+.separator {
+  flex: none;
+
+  width: 1px;
+  height: calc(var(--ring-unit) * 2);
+  margin-inline: var(--ring-unit);
+
+  background-color: var(--ring-line-color);
+}
+
+.compact {
+  min-width: 0;
+  max-width: 100%;
+  padding-inline: 12px;
+}
+
+.compact .content {
+  min-width: 0;
+  gap: var(--ring-unit);
+}
+
+.compact .label {
+  overflow: hidden;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+}
+
+.compact .actions {
+  flex-shrink: 1;
+}
+
+.compact .separator {
+  margin-inline: 2px;
+}

package/components/selection-toolbar/selection-toolbar.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface SelectionToolbarProps extends ComponentPropsWithRef<'div'> {
+    label: ReactNode;
+    selectAll?: ReactNode;
+    closeAction: ReactNode;
+    compact?: boolean;
+    'data-test'?: string | null;
+}
+export declare function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }: SelectionToolbarProps): import("react").JSX.Element;
+export declare function SelectionToolbarSeparator(): import("react").JSX.Element;
+export default SelectionToolbar;

package/components/selection-toolbar/selection-toolbar.js

@@ -0,0 +1,23 @@
+import { useId } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import Theme, { ThemeProvider } from '../global/theme';
+import styles from './selection-toolbar.css';
+export function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }) {
+    const labelId = useId();
+    const hasSelectAll = selectAll != null;
+    return (<ThemeProvider {...restProps} ref={ref} theme={Theme.DARK} role='group' aria-label={ariaLabel} aria-labelledby={ariaLabelledBy ?? (ariaLabel == null ? labelId : undefined)} data-test={dataTests('ring-selection-toolbar', dataTest)} className={classNames(styles.toolbar, { [styles.compact]: compact }, className)}>
+      <div className={styles.content}>
+        <span id={labelId} className={styles.label}>
+          {label}
+        </span>
+        {hasSelectAll && <span className={styles.selectAll}>{selectAll}</span>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+      <div className={styles.closeAction}>{closeAction}</div>
+    </ThemeProvider>);
+}
+export function SelectionToolbarSeparator() {
+    return <span role='separator' aria-orientation='vertical' className={styles.separator}/>;
+}
+export default SelectionToolbar;

package/components/tooltip/tooltip.d.ts

@@ -8,7 +8,8 @@ interface Context {
     onNestedTooltipHide: () => void;
 }
 declare const TooltipContext: React.Context<Context | undefined>;
-export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, 'title'> {
+export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLElement>, 'title'> {
+    TagName?: 'span' | 'div' | null | undefined;
     delay?: number | null | undefined;
     selfOverflowOnly?: boolean | null | undefined;
     popupProps?: Partial<PopupAttrs> | null | undefined;

package/components/tooltip/tooltip.js

@@ -129,19 +129,20 @@ export default class Tooltip extends Component {
         this.setState({ showNestedPopup: false });
     };
     render() {
-        const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, hide, ...restProps } = this.props;
+        const { children, TagName, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, hide, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && Tooltip.isShow({ title, hide }) ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
+        const WrapperElement = TagName || 'span';
         const popup = (<Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} attached={false} onMouseOut={this.hideIfMovedOutsidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps} className={classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className)}>
         {title}
       </Popup>);
         return (<TooltipContext value={{ onNestedTooltipShow, onNestedTooltipHide }}>
-        <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
+        <WrapperElement {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
           {children}
           {theme === 'inherit' ? (popup) : (<ThemeProvider theme={theme} passToPopups WrapperComponent={props => <span {...props}/>}>
               {popup}
             </ThemeProvider>)}
-        </span>
+        </WrapperElement>
       </TooltipContext>);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.7",
+  "version": "8.0.0-beta.9",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"