@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/date-picker/years.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addYears from 'date-fns/addYears';
@@ -23,9 +23,19 @@ export default class Years extends PureComponent {
         onScrollChange: PropTypes.func
     };
     state = { scrollDate: null };
+    componentDidMount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.addEventListener('wheel', this.handleWheel);
+        }
+    }
     componentDidUpdate(prevProps, prevState) {
         this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
     }
+    componentWillUnmount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+        }
+    }
     stoppedScrolling;
     setYear(date) {
         if (scrollTO) {
@@ -35,6 +45,20 @@ export default class Years extends PureComponent {
         this.setState({ scrollDate: null });
         this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
     }
+    componentRef = createRef();
+    handleWheel = (e) => {
+        const { scrollDate } = this.props;
+        const date = this.state.scrollDate || scrollDate;
+        e.preventDefault();
+        const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+        this.setState({
+            scrollDate: newScrollDate
+        });
+        if (scrollTO) {
+            window.clearTimeout(scrollTO);
+        }
+        scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+    };
     render() {
         const { onScrollChange, scrollDate } = this.props;
         const date = this.state.scrollDate || scrollDate;
@@ -46,19 +70,7 @@ export default class Years extends PureComponent {
             years.push(year);
         }
         const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-        const handleWheel = (e) => {
-            e.preventDefault();
-            const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).
-                y(e.deltaY);
-            this.setState({
-                scrollDate: newScrollDate
-            });
-            if (scrollTO) {
-                window.clearTimeout(scrollTO);
-            }
-            scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
-        };
-        return (<div className={styles.years} onWheel={handleWheel} style={{
+        return (<div className={styles.years} ref={this.componentRef} style={{
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
                 top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
             }}>

package/components/dialog/dialog.css

@@ -48,7 +48,7 @@
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
-  & .panel button {
+  & .panel > button:not(:last-child) {
     margin-right: unit;
   }
 }

package/components/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
+import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;
     label: string;
@@ -9,6 +10,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
+    shortcutOptions: ShortcutsScopeOptions;
     closeButtonInside: boolean;
     closeButtonTitle?: string;
     trapFocus: boolean;
@@ -17,10 +19,6 @@ export interface DialogProps extends Partial<TabTrapProps> {
     'data-test'?: string | null | undefined;
     dense?: boolean | null | undefined;
 }
-/**
- * @name Dialog
- */
-declare function noop(): void;
 export default class Dialog extends PureComponent<DialogProps> {
     static propTypes: {
         label: PropTypes.Requireable<string>;
@@ -34,23 +32,14 @@ export default class Dialog extends PureComponent<DialogProps> {
         onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
         onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
         onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
+        shortcutOptions: PropTypes.Requireable<object>;
         onCloseAttempt: PropTypes.Requireable<(...args: any[]) => any>;
         trapFocus: PropTypes.Requireable<boolean>;
         portalTarget: PropTypes.Requireable<HTMLElement>;
         autoFocusFirst: PropTypes.Requireable<boolean>;
         'data-test': PropTypes.Requireable<string>;
     };
-    static defaultProps: {
-        label: string;
-        onOverlayClick: typeof noop;
-        onEscPress: typeof noop;
-        onCloseClick: typeof noop;
-        onCloseAttempt: typeof noop;
-        showCloseButton: boolean;
-        closeButtonInside: boolean;
-        trapFocus: boolean;
-        autoFocusFirst: boolean;
-    };
+    static defaultProps: Partial<DialogProps>;
     state: {
         shortcutsScope: string;
     };
@@ -73,4 +62,3 @@ export default class Dialog extends PureComponent<DialogProps> {
     render(): false | React.ReactPortal;
 }
 export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
-export {};

package/components/dialog/dialog.js

@@ -32,6 +32,7 @@ export default class Dialog extends PureComponent {
         onOverlayClick: PropTypes.func,
         onEscPress: PropTypes.func,
         onCloseClick: PropTypes.func,
+        shortcutOptions: PropTypes.object,
         // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
         // Use it if you don't need different behaviors for this cases.
         onCloseAttempt: PropTypes.func,
@@ -49,6 +50,7 @@ export default class Dialog extends PureComponent {
         onCloseAttempt: noop,
         showCloseButton: false,
         closeButtonInside: false,
+        shortcutOptions: { modal: false },
         trapFocus: false,
         autoFocusFirst: true
     };
@@ -100,12 +102,12 @@ export default class Dialog extends PureComponent {
         this.dialog = tabTrap && tabTrap.node;
     };
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
         {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
-              <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope}/>
+              <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
               {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
                 // click handler is duplicated in close button
                 role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}

package/components/dropdown/anchor.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonAttrs } from '../button/button';
 declare const _default: React.MemoExoticComponent<{
-    ({ children, className, ...restProps }: ButtonAttrs): JSX.Element;
+    ({ children, className, ...restProps }: ButtonAttrs): React.JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;

package/components/dropdown/dropdown.d.ts

@@ -6,6 +6,13 @@ export interface AnchorProps {
     active: boolean;
     pinned: boolean;
 }
+export interface DropdownChildProps {
+    hidden: boolean;
+    onCloseAttempt: () => void;
+    onMouseDown?: () => void | undefined;
+    onContextMenu?: () => void | undefined;
+    dontCloseOnAnchorClick: boolean;
+}
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
     children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
@@ -74,7 +81,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
     toggle(show?: boolean): void;
     _toggle(show: boolean, pinned?: boolean): void;
     _clearTimer(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
 export { Anchor };

package/components/editable-heading/editable-heading.css

@@ -22,6 +22,7 @@
   padding: 0;
 
   cursor: pointer;
+  user-select: text;
 
   text-align: inherit;
 
@@ -29,23 +30,33 @@
 
   border: none;
   border-radius: var(--ring-border-radius);
+  outline: none;
   background: inherit;
 
   font-size: inherit;
 
-  &:focus {
-    outline: 1px solid var(--ring-border-hover-color);
+  .disabled &,
+  .selectionMode & {
+    user-select: text;
+
+    border-radius: 0;
   }
 
-  @nest .disabled &:focus {
-    outline: none;
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--ring-border-hover-color);
+  }
+
+  .disabled &:focus,
+  .selectionMode &:focus {
+    box-shadow: none;
   }
 
   &:hover {
     background-color: var(--ring-hover-background-color);
   }
 
-  @nest .disabled &:hover {
+  .disabled &:hover,
+  .selectionMode &:hover {
     cursor: initial;
 
     background-color: initial;
@@ -59,9 +70,11 @@
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 
+  word-wrap: break-word;
+
   border-radius: var(--ring-border-radius);
 
-  @nest .multiline & {
+  .multiline & {
     -webkit-line-clamp: 3;
   }
 }
@@ -106,7 +119,7 @@
     background-color: initial;
   }
 
-  @nest .error & {
+  .error & {
     margin-bottom: 1px;
 
     border-bottom-width: 2px;

package/components/editable-heading/editable-heading.d.ts

@@ -26,6 +26,6 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };
-export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
+export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
 export default _default;

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
@@ -17,29 +17,48 @@ export const EditableHeading = (props) => {
     }, ...restProps } = props;
     const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
     const [isInFocus, setIsInFocus] = React.useState(false);
+    const [isMouseDown, setIsMouseDown] = React.useState(false);
+    const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
     const hasError = error !== undefined;
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
     const isShortcutsDisabled = !isInFocus || isSaving;
-    const shortcutsMap = React.useMemo(() => ({
-        enter: isSaveDisabled ? noop : onSave,
-        esc: isCancelDisabled ? noop : onCancel
-    }), [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
+    const shortcutsMap = React.useMemo(() => {
+        const map = {};
+        if (!isSaveDisabled) {
+            map.enter = onSave;
+        }
+        if (isCancelDisabled) {
+            map.esc = onCancel;
+        }
+        return map;
+    }, [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
     const classes = classNames(styles.editableHeading, className, {
         [styles.fullSize]: isEditing && size === Size.FULL,
         [styles.isEditing]: isEditing,
         [styles.error]: hasError,
         [styles.disabled]: disabled,
-        [styles.multiline]: multiline
+        [styles.multiline]: multiline,
+        [styles.selectionMode]: isInSelectionMode
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const onHeadingClick = React.useCallback(() => {
-        if (disabled) {
-            return undefined;
+    const onHeadingMouseDown = React.useCallback(() => {
+        setIsMouseDown(true);
+    }, []);
+    const onMouseMove = React.useCallback(() => {
+        if (!isMouseDown) {
+            return;
         }
-        return onEdit();
-    }, [disabled, onEdit]);
+        setIsInSelectionMode(true);
+    }, [isMouseDown]);
+    const onMouseUp = React.useCallback(() => {
+        if (isMouseDown && !isInSelectionMode && !disabled) {
+            onEdit();
+        }
+        setIsMouseDown(false);
+        setIsInSelectionMode(false);
+    }, [isMouseDown, isInSelectionMode, disabled, onEdit]);
     const onInputFocus = React.useCallback((e) => {
         setIsInFocus(true);
         onFocus?.(e);
@@ -48,6 +67,14 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     }, [onBlur]);
+    useEffect(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    });
     return (<>
       <div className={classes}>
         {!disabled && isEditing
@@ -56,7 +83,7 @@ export const EditableHeading = (props) => {
 
               <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
             </>)
-            : (<button type="button" className={styles.headingWrapperButton} onClick={onHeadingClick}>
+            : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
               <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>
             </button>)}
 

package/components/error-bubble/error-bubble.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 export type ErrorBubbleProps<P> = Partial<P> & {
     className?: string | null | undefined;
@@ -14,5 +14,5 @@ export default class ErrorBubble<P> extends PureComponent<ErrorBubbleProps<P>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/error-message/error-message.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 export interface ErrorMessageProps {
@@ -23,5 +23,5 @@ export default class ErrorMessage extends Component<ErrorMessageProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/footer/footer.js

@@ -46,6 +46,7 @@ export function copyright(year) {
 const FooterLine = memo(function FooterLine(props) {
     const items = Array.isArray(props.item) ? props.item : [props.item];
     function renderItem(item) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (isValidElement(item) || typeof item !== 'object') {
             return item;
         }

package/components/form/form.examples.js

@@ -1,26 +1,18 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
 import '../input/input-legacy.css';
 import './form.css';
 import '../input-size/input-size.css';
+import '../error-bubble/error-bubble-legacy.css';
 
-import ButtonNG from '../button-ng/button-ng';
 
 export default {
   title: 'Style-only/Form',
-  decorators: [angularDecorator()],
 
   parameters: {
     notes: 'Helps create forms with various types of controls.'
   }
 };
 
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG]);
-
-  return `
+export const basic = () => `
       <div style="width: 700px">
         <form class="ring-form">
           <span class="ring-form__title">Form Title</span>
@@ -122,6 +114,5 @@ export const basic = () => {
         </form>
       </div>
     `;
-};
 
 basic.storyName = 'Form';

package/components/global/controls-height.d.ts

@@ -5,3 +5,5 @@ export declare enum ControlsHeight {
     L = "L"
 }
 export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
+export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
+export declare function getGlobalControlsHeight(): ControlsHeight;

package/components/global/controls-height.js

@@ -6,3 +6,11 @@ export var ControlsHeight;
     ControlsHeight["L"] = "L";
 })(ControlsHeight || (ControlsHeight = {}));
 export const ControlsHeightContext = createContext(ControlsHeight.M);
+let globalControlsHeight = ControlsHeight.M;
+// This can be used if React Context is not applicable, for example for alertService or Auth dialog
+export function configureGlobalControlsHeight(value) {
+    globalControlsHeight = value;
+}
+export function getGlobalControlsHeight() {
+    return globalControlsHeight;
+}

package/components/global/create-stateful-context.d.ts

@@ -12,7 +12,7 @@ export default function createStatefulContext<T>(initialValue: T, name?: string)
     ValueContext: React.Context<T>;
     UpdateContext: React.Context<Update<T>>;
     Provider: {
-        ({ children }: ProviderProps): JSX.Element;
+        ({ children }: ProviderProps): React.JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         };

package/components/global/focus-sensor-hoc.d.ts

@@ -2,6 +2,7 @@ import { ComponentType, Ref } from 'react';
 export interface FocusSensorOuterProps<T extends HTMLElement> {
     focused?: boolean | undefined;
     autofocus?: boolean | undefined;
+    scrollOnTableFocus?: boolean;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     innerRef?: Ref<T> | null | undefined;

package/components/global/focus-sensor-hoc.js

@@ -15,7 +15,7 @@ export default function focusSensorHOC(ComposedComponent) {
             focused: this.props.focused
         };
         componentDidMount() {
-            const { props: { autofocus }, node } = this;
+            const { props: { autofocus, scrollOnTableFocus }, node } = this;
             node?.setAttribute('tabindex', '0');
             if (node != null) {
                 node.style.outline = 'none';
@@ -23,7 +23,7 @@ export default function focusSensorHOC(ComposedComponent) {
             document.addEventListener('focus', this.onFocusCapture, true);
             document.addEventListener('blur', this.onBlurCapture, true);
             if (autofocus) {
-                node?.focus();
+                node?.focus({ preventScroll: !scrollOnTableFocus });
             }
         }
         componentDidUpdate(prevProps) {
@@ -72,13 +72,13 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         onFocusRestore = () => {
             this._skipNextCapture = true;
-            this.node?.focus();
+            this.node?.focus({ preventScroll: !this.props.scrollOnTableFocus });
         };
         onFocusReset = () => {
             this.node?.blur();
         };
         render() {
-            const { autofocus, focused, onFocus, onBlur, innerRef, ...rest } = this.props;
+            const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
             return (<ComposedComponent {...rest} innerRef={composeRefs(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
         }
     }
@@ -94,6 +94,7 @@ export default function focusSensorHOC(ComposedComponent) {
         ...ComposedComponent.defaultProps,
         focused: false,
         autofocus: false,
+        scrollOnTableFocus: true,
         onFocus: () => { },
         onBlur: () => { }
     };

package/components/global/react-dom-renderer.d.ts

@@ -1,16 +1,16 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 export interface RendererProps {
     className?: string | undefined;
-    nodes: readonly Node[];
+    nodes: readonly Node[] | NodeList;
 }
 export default class Renderer extends Component<RendererProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        nodes: PropTypes.Requireable<any[]>;
+        nodes: PropTypes.Requireable<object>;
     };
     componentDidMount(): void;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/global/react-dom-renderer.js

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 export default class Renderer extends Component {
     static propTypes = {
         className: PropTypes.string,
-        nodes: PropTypes.array
+        nodes: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
     };
     componentDidMount() {
+        const { node } = this;
         const { nodes } = this.props;
-        if (!this.node || !nodes || !nodes.length) {
+        if (!node || !nodes || !nodes.length) {
             return;
         }
-        const fragment = document.createDocumentFragment();
-        nodes.forEach(nodeToRender => fragment.appendChild(nodeToRender));
-        this.node.appendChild(fragment);
+        Array.from(this.props.nodes).
+            forEach(nodeToRender => node.appendChild(nodeToRender));
     }
     node;
     nodeRef = (node) => {

package/components/global/react-render-adapter.js

@@ -1,36 +1,24 @@
-// Allows overriding ReactDOM.render when using React 18:
-// import * as client from 'react-dom/client'
-// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
-//
-// setClient(client)
-import {
-  render as legacyRender,
-  unmountComponentAtNode as legacyUnmountComponentAtNode,
-  hydrate as legacyHydrate
-} from 'react-dom';
-
+/* eslint-disable react/no-deprecated */
+import { render as legacyRender, unmountComponentAtNode as legacyUnmountComponentAtNode, hydrate as legacyHydrate } from 'react-dom';
+/* eslint-enable */
 /* eslint-disable import/no-mutable-exports */
 export let render = legacyRender;
 export let unmountComponentAtNode = legacyUnmountComponentAtNode;
 export let hydrate = legacyHydrate;
-/* eslint-enable */
-
-export function setClient({createRoot, hydrateRoot}) {
-  const roots = new WeakMap();
-
-  render = (element, container) => {
-    let root = roots.get(container);
-    if (root == null) {
-      root = createRoot(container);
-      roots.set(container, root);
-    }
-    root.render(element);
-  };
-
-  unmountComponentAtNode = container => roots.get(container)?.unmount();
-
-  hydrate = (element, container) => {
-    const root = hydrateRoot(container, element);
-    roots.set(container, root);
-  };
+// TODO replace with a noop with warning in 6.0, remove in 7.0
+export function setClient({ createRoot, hydrateRoot }) {
+    const roots = new WeakMap();
+    render = (element, container) => {
+        let root = roots.get(container);
+        if (root == null) {
+            root = createRoot(container);
+            roots.set(container, root);
+        }
+        root.render(element);
+    };
+    unmountComponentAtNode = container => roots.get(container)?.unmount();
+    hydrate = (element, container) => {
+        const root = hydrateRoot(container, element);
+        roots.set(container, root);
+    };
 }

package/components/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+export default function useEventCallback(fn) {
+    const ref = useRef();
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        const { current } = ref;
+        if (current == null) {
+            throw new Error('callback created in useEventCallback can only be called from event handlers');
+        }
+        return current(...args);
+    }, []);
+}

package/components/global/variables_dark.css

@@ -87,8 +87,8 @@
   --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
   --ring-added-background-components: 54, 89, 71;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
-  --ring-disabled-background-components: 54, 54, 54;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #363636 */
+  --ring-disabled-background-components: 44, 47, 51;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2C2F33 */
   --ring-disabled-selected-background-components: 44, 47, 51;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;