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

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Locale } from 'date-fns';
 import PropTypes from 'prop-types';
 interface WeekdaysProps {
     locale: Locale | undefined;
 }
-declare function Weekdays(props: WeekdaysProps): JSX.Element;
+declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
         locale: PropTypes.Requireable<string>;

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { CalendarProps } from './consts';
 interface YearsState {
@@ -13,9 +13,13 @@ export default class Years extends PureComponent<CalendarProps> {
     state: {
         scrollDate: null;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    componentWillUnmount(): void;
     stoppedScrolling?: boolean;
     setYear(date: number): void;
-    render(): JSX.Element;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
+    render(): React.JSX.Element;
 }
 export {};

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/dialog-ng/dialog-ng.examples.js

@@ -16,7 +16,7 @@ export default {
   parameters: {
     notes: 'Provides an Angular wrapper for Dialog.',
     hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
+    a11y: {element: '#storybook-root,*[data-test~=ring-dialog]'}
   }
 };
 

package/components/dialog-ng/dialog-ng.js

@@ -26,8 +26,6 @@ const angularModule = angular.module(
 );
 
 class DialogController extends RingAngularComponent {
-  static $inject = ['$scope', '$q', 'dialog', '$element', 'dialogInSidebar', '$compile',
-    '$injector', '$controller', 'rgCompiler', '$sce'];
 
   constructor(...args) {
     super(...args);
@@ -333,9 +331,9 @@ class DialogController extends RingAngularComponent {
     };
   }
 }
-
+DialogController.$inject = ['$scope', '$q', 'dialog', '$element', 'dialogInSidebar', '$compile',
+  '$injector', '$controller', 'rgCompiler', '$sce'];
 class DialogService extends RingAngularComponent {
-  static $inject = ['$log'];
 
   DIALOG_NAMESPACE = 'ring-dialog';
   fallbackDialog = null;
@@ -366,9 +364,9 @@ class DialogService extends RingAngularComponent {
     Reflect.deleteProperty(this, 'ctrl');
   };
 }
+DialogService.$inject = ['$log'];
 
 class DialogInSidebarService extends DialogService {
-  static $inject = [...DialogService.$inject, 'dialog'];
 
   DIALOG_NAMESPACE = 'ring-dialog-in-sidebar';
 
@@ -377,6 +375,7 @@ class DialogInSidebarService extends DialogService {
     this.fallbackDialog = this.$inject.dialog;
   }
 }
+DialogInSidebarService.$inject = [...DialogService.$inject, 'dialog'];
 
 function rgDialogDirective($timeout) {
   function link(scope, iElement, iAttrs, dialogCtrl) {

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

@@ -5,6 +5,7 @@ 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';
 

package/components/global/angular-component-factory.js

@@ -19,8 +19,7 @@ function createAngularComponent(Component) {
     bindings[key] = '<';
   });
 
-  return class AngularComponent extends RingAngularComponent {
-    static $inject = ['$scope', '$element', '$transclude'];
+  class AngularComponent extends RingAngularComponent {
 
     static bindings = bindings;
     static transclude = true;
@@ -28,14 +27,19 @@ function createAngularComponent(Component) {
     $postLink() {
       const {$transclude} = this.$inject;
 
+
       $transclude(clone => {
-        this.innerNodes = Array.from(clone);
+        this.container = document.createElement('div');
+
+        for (let i = 0; i < clone.length; i++) {
+          this.container.appendChild(clone[i]);
+        }
         this.render();
       });
     }
 
     $onChanges() {
-      if (!this.innerNodes) {
+      if (!this.container) {
         return;
       }
       this.render();
@@ -63,16 +67,18 @@ function createAngularComponent(Component) {
         }
       });
 
-      const hasInnerContent = this.innerNodes && this.innerNodes.length;
+      const hasInnerContent = this.container.hasChildNodes();
 
       render(
         <Component {...props}>
-          {hasInnerContent ? <DomRenderer nodes={this.innerNodes}/> : null}
+          {hasInnerContent ? <DomRenderer nodes={this.container.childNodes}/> : null}
         </Component>,
         container
       );
     }
-  };
+  }
+  AngularComponent.$inject = ['$scope', '$element', '$transclude'];
+  return AngularComponent;
 }
 
 function angularComponentFactory(Component, name) {

package/components/global/angular-component-factory.test.js

@@ -4,7 +4,7 @@ import angular from 'angular';
 import 'angular-mocks';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Simulate} from 'react-dom/test-utils';
+import {act, Simulate} from 'react-dom/test-utils';
 
 import angularComponentFactory from './angular-component-factory';
 
@@ -13,7 +13,8 @@ class TestComponent extends PureComponent {
     id: PropTypes.string,
     someObj: PropTypes.object,
     onClick: PropTypes.func,
-    className: PropTypes.string
+    className: PropTypes.string,
+    children: PropTypes.node
   };
 
   static defaultProps = {
@@ -23,15 +24,18 @@ class TestComponent extends PureComponent {
   handleClick = () => this.props.onClick('payload');
 
   render() {
-    const {id, someObj, className} = this.props;
+    const {id, someObj, className, children} = this.props;
     return (
-      <button
-        type="button"
-        id={id}
-        data-some-obj={someObj.foo}
-        onClick={this.handleClick}
-        className={className}
-      />
+      <>
+        <button
+          type="button"
+          id={id}
+          data-some-obj={someObj.foo}
+          onClick={this.handleClick}
+          className={className}
+        />
+        {children}
+      </>
     );
   }
 }
@@ -115,4 +119,20 @@ describe('angularComponentFactory', () => {
     $rootScope.callback.should.have.been.called;
     $rootScope.callback.should.have.been.calledWith('payload');
   });
+
+  it('should support ng-if in nested content', () => {
+    let $element = null;
+    act(() => {
+      $element = $compile(`
+<rg-test-component>
+  <span data-test="hello">HELLO</span>
+</rg-test-component>`
+      )($rootScope);
+    });
+
+    const component = $element[0].querySelector('[data-test~=hello]');
+    $rootScope.$digest();
+
+    should.exist(component);
+  });
 });

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;