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

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,16 +1,8 @@
-import React from 'react';
-export interface CollapsibleGroupProps {
-    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: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
-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, { forwardRef, useContext, 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 } = useContext(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 } = useContext(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 = forwardRef(({ avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }, ref) => {
-    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>);
+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}/>;
 });
-CollapsibleGroup.displayName = 'CollapsibleGroup';
-export default CollapsibleGroup;
+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/create-stateful-context.js

@@ -1,16 +1,16 @@
-import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { createContext, memo, use, useEffect, useState } from 'react';
 export default function createStatefulContext(initialValue, name = '') {
     const ValueContext = createContext(initialValue);
     const UpdateContext = createContext(() => { });
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
-      </ValueContext.Provider>);
+        return (<ValueContext value={value}>
+        <UpdateContext value={update}>{children}</UpdateContext>
+      </ValueContext>);
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {
-        const update = useContext(UpdateContext);
+        const update = use(UpdateContext);
         useEffect(() => {
             if (!skipUpdate) {
                 update(value);

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();
+}

package/components/global/intersection-observer-context.d.ts

@@ -1,26 +1,46 @@
 import { type RefObject } from 'react';
 /**
+ * Provides access to a shared `IntersectionObserver` instance
+ * via the {@link IntersectionObserverContext} context.
+ *
+ * @see IntersectionObserverContext
+ */
+export interface IntersectionObserverHandle {
+    /**
+     * Starts observing an element.
+     *
+     * Returns a cleanup function that stops observing it.
+     */
+    observe(element: Element, isIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle | null>;
-export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observe(element: Element, setIsIntersecting: (isIntersecting: boolean) => void): () => void;
-}
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle>;
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle;
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;
-export declare function useIsIntersectingListener(elementRef: RefObject<Element | null>, onChange: (isIntersecting: boolean) => void): void;

package/components/global/intersection-observer-context.js

@@ -1,32 +1,45 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, use, useEffect, useState } from 'react';
 /**
+ * @internal
+ */
+const noopIntersectionObserverHandle = {
+    observe: () => () => { },
+};
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-export const IntersectionObserverContext = createContext(null);
+export const IntersectionObserverContext = createContext(noopIntersectionObserverHandle);
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
 export function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
-    const [handle, setHandle] = useState(null);
+    const [handle, setHandle] = useState(noopIntersectionObserverHandle);
     useEffect(() => {
         const root = rootRef?.current;
-        const elementToOnChange = new Map();
+        const callbacksByElement = new Map();
         const observer = new IntersectionObserver(entries => {
             for (const entry of entries) {
-                const onChange = elementToOnChange.get(entry.target);
-                onChange?.(entry.isIntersecting);
+                const callbacks = callbacksByElement.get(entry.target);
+                callbacks?.forEach(cb => cb(entry.isIntersecting));
             }
         }, {
             root,
@@ -35,38 +48,44 @@ export function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin)
         });
         setHandle({
             observe(element, onChange) {
-                elementToOnChange.set(element, onChange);
-                observer.observe(element);
+                if (!callbacksByElement.has(element)) {
+                    callbacksByElement.set(element, []);
+                    observer.observe(element);
+                }
+                callbacksByElement.get(element).push(onChange);
                 return () => {
-                    elementToOnChange.delete(element);
-                    observer.unobserve(element);
+                    const callbacks = callbacksByElement.get(element);
+                    if (!callbacks)
+                        return;
+                    const index = callbacks.indexOf(onChange);
+                    if (index !== -1) {
+                        callbacks.splice(index, 1);
+                    }
+                    if (!callbacks.length) {
+                        callbacksByElement.delete(element);
+                        observer.unobserve(element);
+                    }
                 };
             },
         });
         return () => {
             observer.disconnect();
-            setHandle(null);
+            setHandle(noopIntersectionObserverHandle);
         };
     }, [rootRef, rootMargin, scrollMargin]);
     return handle;
 }
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 export function useIsIntersecting(elementRef) {
-    const handle = useContext(IntersectionObserverContext);
+    const handle = use(IntersectionObserverContext);
     const [isIntersecting, setIsIntersecting] = useState(false);
     useEffect(() => {
         const element = elementRef.current;
-        if (!element || !handle)
+        if (!element)
             return;
         return handle.observe(element, setIsIntersecting);
-    }, [handle, elementRef, setIsIntersecting]);
+    }, [handle, elementRef]);
     return isIntersecting;
 }
-export function useIsIntersectingListener(elementRef, onChange) {
-    const handle = useContext(IntersectionObserverContext);
-    useEffect(() => {
-        const element = elementRef.current;
-        if (!element || !handle)
-            return;
-        return handle.observe(element, onChange);
-    }, [handle, elementRef, onChange]);
-}

package/components/global/is-within-interactive-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+export declare function isWithinInteractiveElement(target: EventTarget | null): boolean;

package/components/global/is-within-interactive-element.js

@@ -0,0 +1,26 @@
+const interactiveSelector = [
+    'a',
+    'button',
+    'details',
+    'input',
+    'label',
+    'option',
+    'select',
+    'summary',
+    'textarea',
+    '[contenteditable]',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="link"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+].join();
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+export function isWithinInteractiveElement(target) {
+    return target instanceof Element && target.closest(interactiveSelector) != null;
+}

package/components/global/is-within-navigable-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+export declare function isWithinNavigableElement(target: EventTarget | null): boolean;

package/components/global/is-within-navigable-element.js

@@ -0,0 +1,27 @@
+const navigableSelector = [
+    'input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="reset"]):not([type="submit"])',
+    'textarea',
+    'select',
+    '[contenteditable]',
+    '[role="combobox"]',
+    '[role="grid"]',
+    '[role="listbox"]',
+    '[role="menu"]',
+    '[role="menubar"]',
+    '[role="radiogroup"]',
+    '[role="searchbox"]',
+    '[role="slider"]',
+    '[role="spinbutton"]',
+    '[role="tablist"]',
+    '[role="textbox"]',
+    '[role="tree"]',
+    '[role="treegrid"]',
+].join();
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+export function isWithinNavigableElement(target) {
+    return target instanceof Element && target.closest(navigableSelector) != null;
+}

package/components/global/parse-css-duration.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+export declare function parseCssDuration(duration: string, defaultVal?: number): number;

package/components/global/parse-css-duration.js

@@ -0,0 +1,13 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+export function parseCssDuration(duration, defaultVal = 0) {
+    const match = duration.match(/(\d+(\.\d+)?)(s|ms)/);
+    if (!match)
+        return defaultVal;
+    const value = parseFloat(match[1]);
+    const unit = match[3];
+    // eslint-disable-next-line no-magic-numbers
+    return unit === 's' ? value * 1000 : value;
+}