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

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.8",
+  "version": "8.0.0-beta.9",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"