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

package/components/table/table.js

@@ -1,2 +1,298 @@
-import Table from './table-component';
-export default Table;
+import React, { Fragment, useCallback, useRef } from 'react';
+import classNames from 'classnames';
+import { IntersectionObserverContext } from '../global/intersection-observer-context';
+import { CollapseItemIntoSpacerContext, SpacerRow, useVirtualItems } from './internal/virtual-items';
+import { DefaultItemRenderer } from './default-item-renderer';
+import { ColumnAnimationContext, defaultRowHeight, TablePropsContext } from './table-const';
+import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex';
+import { useColumnAnimation } from './internal/column-animation';
+import { useComposedRef } from '../global/compose-refs';
+import { TableHeader } from './internal/table-header';
+import { keyboardFocusableAttrName } from './table-primitives';
+import { isWithinNavigableElement } from '../global/is-within-navigable-element';
+import styles from './table.css';
+/**
+ * Table component replacing the tables in the `legacy-table` folder.
+ *
+ * This documentation provides an overview of the most common usage patterns.
+ * See individual props and exported components for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `name` (optional but needed in most cases)
+ *   - `renderCell` (optional but needed in most cases)
+ *
+ * ## Item rendering
+ *
+ * If `renderItem` is not specified, each item is rendered using
+ * `DefaultItemRenderer` (from `table/default-item-renderer`)
+ * as if the following code were used:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(_item, index, _items) => (
+ *     <DefaultItemRenderer index={index} />
+ *   )}
+ * />
+ * ```
+ *
+ * `DefaultItemRenderer` renders a table row using the column definitions
+ * (`Column.renderCell`) and provides built-in support for features such as
+ * selection, keyboard navigation, and virtualization. It also accepts all
+ * standard `tr` attributes, including `ref`.
+ *
+ * Use `renderItem` to configure `DefaultItemRenderer` for each item:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index, items) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       keyboardFocusable
+ *       className='my-item'
+ *       onClick={e => handleClick(e, item, items)}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * If you need complete control over rendering, `renderItem` can instead
+ * return your own table rows. See "Custom item rendering" below.
+ *
+ * ## Selection
+ *
+ * Selection is typically implemented using the following props
+ * of the `DefaultItemRenderer`:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
+ *
+ * The following utilities (from `global`) may come in handy:
+ *
+ * - `TableSelection` class to manage selection state
+ *   - An alternative approach is to keep a `selected` field on each item
+ * - `isWithinInteractiveElement()` to check if a click was made on a control
+ *   or on "empty space"
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       selected={selection.isSelected(item)}
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           setSelection(selection.toggleSelection(item));
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that for accessibility reasons, you should have a cell with a checkbox
+ * to display and toggle item selection.
+ *
+ * ## Rows focus
+ *
+ * The table implements the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys.
+ * Rows can also be focused on click or other pointer events.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - `clickable`, if you want to react to hover
+ * - `onClick`, if you want to focus on click
+ *
+ * Useful utils:
+ * - `focusWithTemporaryTabIndex()` from `global` to focus a row temporarily
+ *   patching its `tabindex`.
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       keyboardFocusable
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           focusWithTemporaryTabIndex(e.currentTarget);
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that the table does not implement standard accessibility patterns such
+ * as `grid` or `treegrid`, so row focus is not announced by screen readers.
+ * Make sure all essential actions remain available without row focus, for
+ * example via standard Tab navigation.
+ *
+ * ## Sorting
+ *
+ * You need the following to support sorting:
+ *
+ * - Set `Column.sortOrder` to `'none'`, `'ascending'` or `'descending'`
+ *   to render the sort button, `aria-sort`, and indicate the current
+ *   sort order.
+ * - Handle `TableProps.onSort` callback in the client code.
+ *
+ * ## Deleting columns
+ *
+ * You need the following to support deleting columns:
+ *
+ * - Set `Column.deletable` to `true`. This will render a delete button in the
+ *   column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column delete button.
+ * - Handle `TableProps.onColumnDelete` callback in the client code. It is
+ *   expected to update `columns` by removing the corresponding column.
+ *
+ * ## Moving columns
+ *
+ * - Set `Column.canReorder` to `true` or to predicate specifying possible
+ *   insertion targets.
+ *   This will render a reorder button in the column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column reorder button.
+ * - Handle `TableProps.onColumnReorder` callback in the client code. It is
+ *   expected to update `columns` by moving the corresponding column to the
+ *   new position.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport while replacing off-screen rows with
+ * spacers, use:
+ *
+ * - `virtualizeRows` prop set to `true`
+ * - `scrollerRef` — required when the scrollable container is not the whole
+ *    document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   the default height (e.g. multiline or custom content)
+ * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`,
+ *   `minScrollAndResizeDeltaPx`
+ *
+ * ## Custom item rendering
+ *
+ * Use the `renderItem` prop to render an item in a completely custom way.
+ * The prop is expected to return one or more table rows for the item.
+ * Use `TableRow` and `TableCell` from `table/table-primitives` to apply
+ * the default row and cell styles.
+ *
+ * ### Focus
+ *
+ * Just like `DefaultItemRenderer`, `TableRow` accepts the
+ * `keyboardFocusable` prop.
+ *
+ * Focusable rows rendered by either component form a single keyboard
+ * navigation sequence.
+ *
+ * ### Virtualization
+ *
+ * If `Table.virtualizeRows` is set to `true`, you need to handle visibility
+ * for your custom-rendered component yourself with the
+ * `useItemVirtualization()` hook (from `table/item-virtualization`). The hook
+ * allows observing the intersection of one or multiple elements rendered for
+ * the item, and, based on their intersection status, reporting the item as
+ * eligible for virtualization.
+ *
+ * If you use `DefaultItemRenderer` as part of your custom row renderer,
+ * set the `noItemVirtualization` prop to `true`, otherwise it will also try
+ * to control the virtualization, possibly reporting incorrect item height.
+ *
+ * ### Column reorder animation
+ *
+ * Default-rendered rows highlight the column that was just reordered. To apply
+ * the same animation to your custom-rendered rows, use `ColumnAnimationContext`
+ * (from `table/table-const`) to get information about the currently animated column.
+ */
+export default function Table(props) {
+    const { data, columns, getKey, noHeader, stickyHeader, onSort, onColumnDelete, onColumnReorder, noColumnReorderAnimation, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, 
+    // eslint-disable-next-line no-magic-numbers
+    lookaheadPx = 400, 
+    // eslint-disable-next-line no-magic-numbers
+    retentionMarginPx = 450, 
+    // eslint-disable-next-line no-magic-numbers
+    minScrollAndResizeDeltaPx = 50, columnEditing, onColumnEditingRequest, columnEditButton, theadClassName, theadTrClassName, tbodyClassName, ref: userRef, className, ...restProps } = props;
+    const localRef = useRef(null);
+    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useVirtualItems({
+        enabled: virtualizeRows,
+        data,
+        scrollerRef,
+        tableRef: localRef,
+        estimateHeight,
+        lookaheadPx,
+        retentionMarginPx,
+        minScrollAndResizeDeltaPx,
+    });
+    const { columnAnimation, expectColumnReorder } = useColumnAnimation({
+        disabled: noColumnReorderAnimation,
+        tableRef: localRef,
+        columns,
+    });
+    const handleRowNavigation = useCallback((e) => {
+        if (e.defaultPrevented || isWithinNavigableElement(e.target))
+            return;
+        const arrowUp = e.key === 'ArrowUp';
+        const arrowDown = e.key === 'ArrowDown';
+        if (!arrowUp && !arrowDown)
+            return;
+        const currentRow = e.target.closest('tr');
+        if (currentRow?.parentElement?.parentElement !== localRef.current) {
+            return;
+        }
+        let candidate = currentRow;
+        while (candidate) {
+            candidate = (arrowUp ? candidate.previousElementSibling : candidate.nextElementSibling);
+            if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+                focusWithTemporaryTabIndex(candidate);
+                e.preventDefault();
+                return;
+            }
+        }
+    }, []);
+    return (<TablePropsContext value={props}>
+      <ColumnAnimationContext value={columnAnimation}>
+        <table className={classNames(styles.table, className)} ref={useComposedRef(userRef, localRef)} {...restProps}>
+          <TableHeader expectColumnReorder={expectColumnReorder}/>
+          <IntersectionObserverContext value={intersectionObserverHandle}>
+            <CollapseItemIntoSpacerContext value={collapseItemIntoSpacer}>
+              {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+              <tbody className={tbodyClassName} onKeyDown={handleRowNavigation}>
+                {(virtualizeRows ? virtualItems : data).map((item, index) => {
+            let dataItem;
+            let dataItemIndex;
+            if (virtualizeRows) {
+                const virtualItem = item;
+                if (virtualItem.type === 'spacer') {
+                    return <SpacerRow key={virtualItem.key} spacer={virtualItem} colSpan={columns.length}/>;
+                }
+                dataItemIndex = virtualItem.index;
+                if (dataItemIndex < 0 || dataItemIndex >= data.length)
+                    return null;
+                dataItem = data[dataItemIndex];
+            }
+            else {
+                dataItem = item;
+                dataItemIndex = index;
+            }
+            return (<Fragment key={getKey(dataItem, dataItemIndex, data)}>
+                      {renderItem ? (renderItem(dataItem, dataItemIndex, data)) : (<DefaultItemRenderer index={dataItemIndex}/>)}
+                    </Fragment>);
+        })}
+              </tbody>
+            </CollapseItemIntoSpacerContext>
+          </IntersectionObserverContext>
+        </table>
+      </ColumnAnimationContext>
+    </TablePropsContext>);
+}

package/components/util-stories.d.ts

@@ -1 +1,27 @@
 export declare const hideAddonsPanelParam = "hideAddonsPanel";
+export declare function createRandom(seed: bigint): {
+    /**
+     * Fractional in [0, 1)
+     */
+    (): number;
+    /**
+     * Integer in [0, to)
+     */
+    (to: number): number;
+    /**
+     * Integer in [from, to)
+     */
+    (from: number, to: number): number;
+    /**
+     * Date in [from, to)
+     */
+    (from: Date, to: Date): Date;
+    /**
+     * Up to random n items (in random order) from the array
+     */
+    <T>(array: T[], n: number): T[];
+    /**
+     * Random item from the array
+     */
+    <T>(array: T[]): T;
+};

package/components/util-stories.js

@@ -1 +1,62 @@
+/* eslint-disable no-magic-numbers */
 export const hideAddonsPanelParam = 'hideAddonsPanel';
+export function createRandom(seed) {
+    const u64Mask = 2n ** 64n - 1n;
+    const u64Range = 2n ** 64n;
+    const scrambleConst = 2685821657736338717n;
+    let x = seed & u64Mask;
+    if (!x)
+        throw new Error('Seed must be non-zero');
+    function nextFractional() {
+        x ^= x >> 12n;
+        x ^= (x << 25n) & u64Mask;
+        x ^= x >> 27n;
+        const scrambled = (x * scrambleConst) & u64Mask;
+        return Number(scrambled) / Number(u64Range);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (...args) => {
+        if (!args.length) {
+            return nextFractional();
+        }
+        if (args.length === 1) {
+            const [a] = args;
+            if (typeof a === 'number') {
+                return Math.floor(nextFractional() * a);
+            }
+            if (Array.isArray(a)) {
+                return a[Math.floor(nextFractional() * a.length)];
+            }
+        }
+        if (args.length === 2) {
+            const [a, b] = args;
+            let fromNum;
+            let toNum;
+            let isDate = false;
+            if (typeof a === 'number' && typeof b === 'number') {
+                fromNum = a;
+                toNum = b;
+            }
+            if (a instanceof Date && b instanceof Date) {
+                fromNum = a.getTime();
+                toNum = b.getTime();
+                isDate = true;
+            }
+            if (fromNum != null && toNum != null && fromNum < toNum) {
+                const r = Math.floor(nextFractional() * (toNum - fromNum)) + fromNum;
+                return isDate ? new Date(r) : r;
+            }
+            if (Array.isArray(a) && typeof b === 'number') {
+                const aIndices = Array.from({ length: a.length }, (_, i) => i);
+                const sample = [];
+                for (let i = 0; i < b && aIndices.length; i++) {
+                    const indexIndex = Math.floor(nextFractional() * aIndices.length);
+                    const [aIndex] = aIndices.splice(indexIndex, 1);
+                    sample.push(a[aIndex]);
+                }
+                return sample;
+            }
+        }
+        throw new Error(`Bad args: ${JSON.stringify(args)}`);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-beta.4",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -99,29 +99,29 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.29.7",
+    "@babel/cli": "^8.0.1",
     "@babel/eslint-parser": "^7.29.7",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@figma/code-connect": "^1.4.7",
+    "@figma/code-connect": "^1.4.8",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
-    "@primer/octicons": "^19.28.0",
+    "@primer/octicons": "^19.28.1",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.4.1",
-    "@storybook/addon-docs": "^10.4.1",
-    "@storybook/addon-themes": "^10.4.1",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.4.1",
+    "@storybook/react-webpack5": "10.4.6",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -129,33 +129,33 @@
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/eslint-plugin": "^1.6.18",
-    "acorn": "^8.16.0",
+    "@vitest/eslint-plugin": "^1.6.20",
+    "acorn": "^8.17.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001793",
+    "caniuse-lite": "^1.0.30001799",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
     "core-js": "^3.49.0",
     "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
-    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-import-resolver-webpack": "^0.13.11",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.1",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-unicorn": "^68.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
     "globals": "^17.6.0",
@@ -166,30 +166,30 @@
     "jest": "~30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^17.0.6",
+    "lint-staged": "^17.0.8",
     "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.60.4",
+    "rollup": "^4.62.2",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.4.1",
-    "stylelint": "^17.12.0",
+    "storybook": "10.4.6",
+    "stylelint": "^17.13.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.6.1",
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7",
+    "typescript-eslint": "^8.61.1",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9",
     "vitest-teamcity-reporter": "^0.4.1",
     "webpack": "^5.107.2",
     "webpack-cli": "^7.0.3",
@@ -216,9 +216,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@babel/preset-typescript": "^7.29.7",
+    "@babel/preset-typescript": "^8.0.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.22.0",
+    "@jetbrains/icons": "^5.23.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -247,9 +247,8 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^11.3.0",
+    "postcss-preset-env": "^11.3.1",
     "react-compiler-runtime": "^1.0.0",
-    "react-merge-refs": "^3.0.2",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",

package/components/date-picker/use-intersection-observer.d.ts

@@ -1,6 +0,0 @@
-import { type RefObject } from 'react';
-export declare function useIntersectionObserver(containerRef: RefObject<HTMLElement | null>, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observeVisibility(element: Element, setVisible: (isVisible: boolean) => void): () => void;
-}
-export declare function useVisibility(handle: IntersectionObserverHandle | null, elementRef: RefObject<Element | null>): boolean;

package/components/date-picker/use-intersection-observer.js

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-export function useIntersectionObserver(containerRef, scrollMargin = 0) {
-    const [handle, setHandle] = useState(null);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const elementToSetVisible = new Map();
-        const observer = new IntersectionObserver(entries => {
-            for (const entry of entries) {
-                const setVisible = elementToSetVisible.get(entry.target);
-                setVisible?.(entry.isIntersecting);
-            }
-        }, {
-            root: container,
-            ...(scrollMargin
-                ? {
-                    scrollMargin: `${scrollMargin}px`,
-                }
-                : {}),
-        });
-        setHandle({
-            observeVisibility(element, setVisible) {
-                elementToSetVisible.set(element, setVisible);
-                observer.observe(element);
-                return () => {
-                    elementToSetVisible.delete(element);
-                    observer.unobserve(element);
-                };
-            },
-        });
-        return () => {
-            observer.disconnect();
-            setHandle(null);
-        };
-    }, [containerRef, scrollMargin]);
-    return handle;
-}
-export function useVisibility(handle, elementRef) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        const element = elementRef.current;
-        if (!element || !handle)
-            return;
-        return handle.observeVisibility(element, setIsVisible);
-    }, [handle, elementRef, setIsVisible]);
-    return isVisible;
-}

package/components/global/composeRefs.d.ts

@@ -1,6 +0,0 @@
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-declare const createComposedRef: typeof _createComposedRef;
-export { createComposedRef };

package/components/global/composeRefs.js

@@ -1,7 +0,0 @@
-/* eslint-disable unicorn/filename-case */
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-const createComposedRef = _createComposedRef;
-export { createComposedRef };