@jetbrains/ring-ui 8.0.0-beta.3 → 8.0.0-beta.4

package/components/checkbox/checkbox.d.ts

@@ -24,6 +24,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => () => void>;
     render(): import("react").JSX.Element;
 }

package/components/collapsible-group/collapsible-group.css

@@ -0,0 +1,138 @@
+@import '../global/variables.css';
+
+.expand .collapseRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.expand {
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-line-color);
+  border-radius: var(--ring-border-radius-large);
+  outline: none;
+  background: var(--ring-content-background-color);
+}
+
+.hovered {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.expanded {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.focused {
+  box-shadow: 0 0 0 2px var(--ring-border-hover-color), var(--ring-popup-shadow);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 1.5);
+
+  height: 28px;
+}
+
+.headerButton {
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(var(--ring-unit) * 1.5);
+
+  cursor: pointer;
+  text-align: left;
+
+  color: inherit;
+
+  border: 0;
+  background: transparent;
+
+  font: inherit;
+}
+
+.headerButton:focus-visible {
+  outline: none;
+}
+
+.headerStatic {
+  display: block;
+
+  padding: calc(var(--ring-unit) * 1.5);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex: 1;
+
+  min-width: 0;
+}
+
+.avatarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex-shrink: 0;
+}
+
+.title {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  min-width: 0;
+}
+
+.subtitle {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleChevron {
+  color: var(--ring-secondary-color);
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+
+  flex-shrink: 0;
+  justify-content: center;
+
+  width: calc(var(--ring-unit) * 3);
+  height: calc(var(--ring-unit) * 3);
+
+  border-radius: calc(var(--ring-unit) / 2);
+  background: var(--ring-secondary-background-color);
+}
+
+.toggleIcon {
+  color: var(--ring-secondary-color);
+}
+
+.body {
+  padding: 0 calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}

package/components/collapsible-group/collapsible-group.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface CollapsibleGroupProps {
+    ref?: React.Ref<HTMLDivElement>;
+    avatar?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string | null | undefined;
+    defaultExpanded?: boolean;
+    expanded?: boolean | null | undefined;
+    onChange?: (expanded: boolean) => void;
+    disableAnimation?: boolean;
+    interactive?: boolean;
+    'data-test'?: string | null | undefined;
+}
+declare const CollapsibleGroup: {
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default CollapsibleGroup;

package/components/collapsible-group/collapsible-group.js

@@ -0,0 +1,73 @@
+import React, { use, useState } from 'react';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-12px-down';
+import Icon from '../icon/icon';
+import Collapse from '../collapse/collapse';
+import CollapseContent from '../collapse/collapse-content';
+import { CollapseContext } from '../collapse/collapse-context';
+import styles from './collapsible-group.css';
+function CollapsibleGroupHeaderContent({ avatar, titleContent, subtitle }) {
+    const { collapsed } = use(CollapseContext);
+    return (<span className={styles.header}>
+      <span className={styles.headerContent}>
+        <span className={styles.avatarGroup}>
+          {avatar}
+          <span className={styles.title}>{titleContent}</span>
+        </span>
+        {subtitle ? (<span className={styles.subtitleGroup}>
+            <Icon className={styles.subtitleChevron} glyph={chevronRightIcon} aria-hidden/>
+            <span className={styles.subtitle}>{subtitle}</span>
+          </span>) : null}
+      </span>
+      <span className={styles.toggle} aria-hidden>
+        <Icon className={styles.toggleIcon} glyph={collapsed ? chevronRightIcon : chevronDownIcon}/>
+      </span>
+    </span>);
+}
+function CollapsibleGroupHeader({ avatar, titleContent, subtitle, ...buttonProps }) {
+    const { setCollapsed, collapsed, id } = use(CollapseContext);
+    return (<button type='button' {...buttonProps} className={styles.headerButton} onClick={setCollapsed} aria-controls={`collapse-content-${id}`} aria-expanded={!collapsed}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </button>);
+}
+function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
+    return (<span className={styles.headerStatic}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </span>);
+}
+const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }) => {
+    const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const isExpanded = expanded ?? innerExpanded;
+    const handleChange = (collapsed) => {
+        const nextExpanded = !collapsed;
+        if (expanded == null) {
+            setInnerExpanded(nextExpanded);
+        }
+        onChange(nextExpanded);
+    };
+    const onBlur = (event) => {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+            return;
+        }
+        setFocused(false);
+    };
+    const classes = classNames(styles.expand, className, {
+        [styles.hovered]: hovered,
+        [styles.expanded]: isExpanded,
+        [styles.focused]: focused,
+    });
+    return (<div ref={ref} className={classes} data-test={dataTest}>
+      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} className={styles.collapseRoot}>
+        {interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>)}
+        <CollapseContent>
+          <div className={styles.body}>{children}</div>
+        </CollapseContent>
+      </Collapse>
+    </div>);
+};
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+export default CollapsibleGroup;

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

@@ -1,4 +1,4 @@
-import { useEffect, useEffectEvent } from 'react';
+import { useEffect, useEffectEvent, useLayoutEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
@@ -45,26 +45,20 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName, size !== Size.AUTO && styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, size !== Size.AUTO && inputStyles[`size${size}`], level !== Levels.H4 && styles[`level${level}`], inputClassName);
-    const stretch = (el) => {
-        if (!el || !el.style) {
-            return;
-        }
-        el.style.height = '0';
-        const { paddingTop, paddingBottom } = window.getComputedStyle(el);
-        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
-    };
-    const checkValue = (el) => {
+    const checkValue = React.useCallback((el) => {
         if (multiline && el && el.scrollHeight >= el.clientHeight) {
-            stretch(el);
+            el.style.height = '0';
+            const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+            el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
         }
-    };
-    const checkOverflow = (el) => {
+    }, [multiline]);
+    const checkOverflow = React.useCallback((el) => {
         const scrollHeight = el.scrollHeight || 0;
         const clientHeight = el.clientHeight || 0;
         const scrollTop = el.scrollTop || 0;
         setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
         setIsOverflow(scrollHeight > clientHeight);
-    };
+    }, []);
     const onHeadingMouseDown = () => {
         setIsMouseDown(true);
     };
@@ -100,6 +94,12 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     };
+    useLayoutEffect(() => {
+        if (multiline && isEditing && textAreaRef.current) {
+            checkValue(textAreaRef.current);
+            checkOverflow(textAreaRef.current);
+        }
+    }, [checkOverflow, checkValue, isEditing, multiline]);
     useEffect(() => {
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);

package/components/expand/collapsible-group.css

@@ -1,138 +1,72 @@
-@import '../global/variables.css';
-
-.expand .collapseRoot {
-  display: flex;
-  flex-direction: column;
-}
+/* Deprecated alias of `../collapsible-group/collapsible-group.css` (removed in Ring UI 8.0).
+   Class names are forwarded via `composes` so the canonical stylesheet stays the single source of
+   the actual rules, while `import styles from '.../components/expand/collapsible-group.css'` keeps
+   returning the full token map. */
 
 .expand {
-  display: flex;
-  flex-direction: column;
-
-  box-sizing: border-box;
+  composes: expand from '../collapsible-group/collapsible-group.css';
+}
 
-  border: 1px solid var(--ring-line-color);
-  border-radius: var(--ring-border-radius-large);
-  outline: none;
-  background: var(--ring-content-background-color);
+.collapseRoot {
+  composes: collapseRoot from '../collapsible-group/collapsible-group.css';
 }
 
 .hovered {
-  box-shadow: var(--ring-popup-shadow);
+  composes: hovered from '../collapsible-group/collapsible-group.css';
 }
 
 .expanded {
-  box-shadow: var(--ring-popup-shadow);
+  composes: expanded from '../collapsible-group/collapsible-group.css';
 }
 
 .focused {
-  box-shadow: 0 0 0 2px var(--ring-border-hover-color), var(--ring-popup-shadow);
+  composes: focused from '../collapsible-group/collapsible-group.css';
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--ring-unit) * 1.5);
-
-  height: 28px;
+  composes: header from '../collapsible-group/collapsible-group.css';
 }
 
 .headerButton {
-  display: block;
-
-  box-sizing: border-box;
-  width: 100%;
-  padding: calc(var(--ring-unit) * 1.5);
-
-  cursor: pointer;
-  text-align: left;
-
-  color: inherit;
-
-  border: 0;
-  background: transparent;
-
-  font: inherit;
-}
-
-.headerButton:focus-visible {
-  outline: none;
+  composes: headerButton from '../collapsible-group/collapsible-group.css';
 }
 
 .headerStatic {
-  display: block;
-
-  padding: calc(var(--ring-unit) * 1.5);
+  composes: headerStatic from '../collapsible-group/collapsible-group.css';
 }
 
 .headerContent {
-  display: flex;
-  align-items: center;
-  gap: var(--ring-unit);
-
-  flex: 1;
-
-  min-width: 0;
+  composes: headerContent from '../collapsible-group/collapsible-group.css';
 }
 
 .avatarGroup {
-  display: flex;
-  align-items: center;
-  gap: var(--ring-unit);
-
-  flex-shrink: 0;
+  composes: avatarGroup from '../collapsible-group/collapsible-group.css';
 }
 
 .title {
-  color: var(--ring-text-color);
-
-  font-size: var(--ring-font-size);
-  font-weight: var(--ring-font-weight-bold);
-  line-height: var(--ring-line-height);
+  composes: title from '../collapsible-group/collapsible-group.css';
 }
 
 .subtitleGroup {
-  display: flex;
-  align-items: center;
-  gap: var(--ring-unit);
-
-  min-width: 0;
+  composes: subtitleGroup from '../collapsible-group/collapsible-group.css';
 }
 
 .subtitle {
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
+  composes: subtitle from '../collapsible-group/collapsible-group.css';
 }
 
 .subtitleChevron {
-  color: var(--ring-secondary-color);
+  composes: subtitleChevron from '../collapsible-group/collapsible-group.css';
 }
 
 .toggle {
-  display: flex;
-  align-items: center;
-
-  flex-shrink: 0;
-  justify-content: center;
-
-  width: calc(var(--ring-unit) * 3);
-  height: calc(var(--ring-unit) * 3);
-
-  border-radius: calc(var(--ring-unit) / 2);
-  background: var(--ring-secondary-background-color);
+  composes: toggle from '../collapsible-group/collapsible-group.css';
 }
 
 .toggleIcon {
-  color: var(--ring-secondary-color);
+  composes: toggleIcon from '../collapsible-group/collapsible-group.css';
 }
 
 .body {
-  padding: 0 calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
-
-  color: var(--ring-text-color);
-
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
+  composes: body from '../collapsible-group/collapsible-group.css';
 }

package/components/expand/collapsible-group.d.ts

@@ -1,20 +1,8 @@
-import React from 'react';
-export interface CollapsibleGroupProps {
-    ref?: React.Ref<HTMLDivElement>;
-    avatar?: React.ReactNode;
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string | null | undefined;
-    defaultExpanded?: boolean;
-    expanded?: boolean | null | undefined;
-    onChange?: (expanded: boolean) => void;
-    disableAnimation?: boolean;
-    interactive?: boolean;
-    'data-test'?: string | null | undefined;
-}
-declare const CollapsibleGroup: {
-    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
-    displayName: string;
-};
-export default CollapsibleGroup;
+import { type CollapsibleGroupProps } from '../collapsible-group/collapsible-group';
+/**
+ * @deprecated The `expand` module has been renamed to `collapsible-group`. This re-export will be removed in
+ * Ring UI 8.0. Use `CollapsibleGroup` from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.
+ */
+declare const DeprecatedCollapsibleGroup: import("react").ForwardRefExoticComponent<Omit<CollapsibleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { CollapsibleGroupProps };
+export default DeprecatedCollapsibleGroup;

package/components/expand/collapsible-group.js

@@ -1,73 +1,14 @@
-import React, { use, useState } from 'react';
-import classNames from 'classnames';
-import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
-import chevronDownIcon from '@jetbrains/icons/chevron-12px-down';
-import Icon from '../icon/icon';
-import Collapse from '../collapse/collapse';
-import CollapseContent from '../collapse/collapse-content';
-import { CollapseContext } from '../collapse/collapse-context';
-import styles from './collapsible-group.css';
-function CollapsibleGroupHeaderContent({ avatar, titleContent, subtitle }) {
-    const { collapsed } = use(CollapseContext);
-    return (<span className={styles.header}>
-      <span className={styles.headerContent}>
-        <span className={styles.avatarGroup}>
-          {avatar}
-          <span className={styles.title}>{titleContent}</span>
-        </span>
-        {subtitle ? (<span className={styles.subtitleGroup}>
-            <Icon className={styles.subtitleChevron} glyph={chevronRightIcon} aria-hidden/>
-            <span className={styles.subtitle}>{subtitle}</span>
-          </span>) : null}
-      </span>
-      <span className={styles.toggle} aria-hidden>
-        <Icon className={styles.toggleIcon} glyph={collapsed ? chevronRightIcon : chevronDownIcon}/>
-      </span>
-    </span>);
-}
-function CollapsibleGroupHeader({ avatar, titleContent, subtitle, ...buttonProps }) {
-    const { setCollapsed, collapsed, id } = use(CollapseContext);
-    return (<button type='button' {...buttonProps} className={styles.headerButton} onClick={setCollapsed} aria-controls={`collapse-content-${id}`} aria-expanded={!collapsed}>
-      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
-    </button>);
-}
-function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
-    return (<span className={styles.headerStatic}>
-      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
-    </span>);
-}
-const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }) => {
-    const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
-    const [hovered, setHovered] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const isExpanded = expanded ?? innerExpanded;
-    const handleChange = (collapsed) => {
-        const nextExpanded = !collapsed;
-        if (expanded == null) {
-            setInnerExpanded(nextExpanded);
-        }
-        onChange(nextExpanded);
-    };
-    const onBlur = (event) => {
-        const nextTarget = event.relatedTarget;
-        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
-            return;
-        }
-        setFocused(false);
-    };
-    const classes = classNames(styles.expand, className, {
-        [styles.hovered]: hovered,
-        [styles.expanded]: isExpanded,
-        [styles.focused]: focused,
-    });
-    return (<div ref={ref} className={classes} data-test={dataTest}>
-      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} className={styles.collapseRoot}>
-        {interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>)}
-        <CollapseContent>
-          <div className={styles.body}>{children}</div>
-        </CollapseContent>
-      </Collapse>
-    </div>);
-};
-CollapsibleGroup.displayName = 'CollapsibleGroup';
-export default CollapsibleGroup;
+import { forwardRef } from 'react';
+import deprecate from 'util-deprecate';
+import CollapsibleGroup from '../collapsible-group/collapsible-group';
+const warnDeprecation = deprecate(() => { }, '`CollapsibleGroup` from `@jetbrains/ring-ui/components/expand/collapsible-group` is deprecated and will be removed in Ring UI 8.0. Import it from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.');
+/**
+ * @deprecated The `expand` module has been renamed to `collapsible-group`. This re-export will be removed in
+ * Ring UI 8.0. Use `CollapsibleGroup` from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.
+ */
+const DeprecatedCollapsibleGroup = forwardRef((props, ref) => {
+    warnDeprecation();
+    return <CollapsibleGroup ref={ref} {...props}/>;
+});
+DeprecatedCollapsibleGroup.displayName = 'CollapsibleGroup';
+export default DeprecatedCollapsibleGroup;

package/components/global/compose-refs.d.ts

@@ -1,2 +1,3 @@
 import { type Ref } from 'react';
-export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;
+export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => () => void>;
+export declare function useComposedRef<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;

package/components/global/compose-refs.js

@@ -1,14 +1,30 @@
+import { useMemo } from 'react';
 import memoizeOne from 'memoize-one';
 function composeRefs(...refs) {
-    return (value) => refs.forEach(ref => {
-        if (typeof ref === 'function') {
-            ref(value);
-        }
-        else if (ref) {
-            ref.current = value;
-        }
-    });
+    return (value) => {
+        const cleanups = [];
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                const cleanup = ref(value);
+                if (typeof cleanup === 'function') {
+                    cleanups.push(cleanup);
+                }
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+        return () => cleanups.forEach(cleanup => cleanup());
+    };
 }
 export function createComposedRef() {
     return memoizeOne((composeRefs));
 }
+export function useComposedRef(...refs) {
+    /**
+     * The React Compiler doesn't allow non-literal arrays in useMemo
+     * dependency lists, so we still use memoizeOne under the hood.
+     */
+    const composer = useMemo(() => createComposedRef(), []);
+    return composer(...refs);
+}

package/components/global/focus-with-temporary-tabindex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export declare function focusWithTemporaryTabIndex(element: HTMLElement): void;

package/components/global/focus-with-temporary-tabindex.js

@@ -0,0 +1,21 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export function focusWithTemporaryTabIndex(element) {
+    if (!element.hasAttribute('tabindex')) {
+        element.tabIndex = 0;
+        function onBlur() {
+            element.removeAttribute('tabindex');
+            element.removeEventListener('blur', onBlur);
+        }
+        element.addEventListener('blur', onBlur);
+    }
+    element.focus();
+}