@scality/core-ui 0.184.0 → 0.186.0

package/.storybook/preview.js

@@ -45,13 +45,7 @@ const withThemeProvider = (Story, context) => {
     <QueryClientProvider client={new QueryClient()}>
       <CoreUiThemeProvider theme={theme}>
         {/* Wrapper to make the stories take the full screen but not in docs */}
-        <div
-          style={
-            viewMode === 'story'
-              ? { height: 100 + 'vh', overflow: 'scroll' }
-              : null
-          }
-        >
+        <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
           <ToastProvider>
             <Wrapper style={{ backgroundColor: background }}>
               <Story {...context} />

package/dist/components/form/Form.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/form/Form.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,kBAAkB,EAGlB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKxD,QAAA,MAAM,kBAAkB,cAAc,CAAC;AACvC,QAAA,MAAM,YAAY,WAAW,CAAC;AAG9B,KAAK,SAAS,GAAG,IAAI,CACnB,kBAAkB,CAAC,eAAe,CAAC,EACnC,YAAY,GAAG,gBAAgB,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB,CAAC;CACH,GAAG,SAAS,CAAC;AACd,KAAK,YAAY,GAAG;IAAE,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAyD5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS,6GAWZ,cAAc,4CAqGhB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,wDAKd,gBAAgB,4CAmClB,CAAC;AAgGF,QAAA,MAAM,IAAI,4HAYT,CAAC;AASF,QAAA,MAAM,eAAe;;YANX,MAAM;eACH,OAAO;eACP,OAAO;CAWnB,CAAC;AAEF,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,CAAC"}
+{"version":3,"file":"Form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/form/Form.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,kBAAkB,EAGlB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKxD,QAAA,MAAM,kBAAkB,cAAc,CAAC;AACvC,QAAA,MAAM,YAAY,WAAW,CAAC;AAG9B,KAAK,SAAS,GAAG,IAAI,CACnB,kBAAkB,CAAC,eAAe,CAAC,EACnC,YAAY,GAAG,gBAAgB,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB,CAAC;CACH,GAAG,SAAS,CAAC;AACd,KAAK,YAAY,GAAG;IAAE,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAyD5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS,6GAWZ,cAAc,4CAyGhB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,wDAKd,gBAAgB,4CAmClB,CAAC;AAgGF,QAAA,MAAM,IAAI,4HAYT,CAAC;AASF,QAAA,MAAM,eAAe;;YANX,MAAM;eACH,OAAO;eACP,OAAO;CAWnB,CAAC;AAEF,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,CAAC"}

package/dist/components/form/Form.component.js

@@ -80,7 +80,7 @@ const FormGroup = ({ direction = 'horizontal', label, id, labelHelpTooltip, cont
     return (_jsx(FieldContext.Provider, { value: value, children: _jsxs(Box, { display: "flex", flexDirection: direction === 'horizontal' ? 'row' : 'column', alignItems: "baseline", gap: direction === 'horizontal' ? spacing['r32'] : spacing['r4'], children: [_jsx("div", { style: {
                         width: maxLabelWidth === 0 ? 'max-content' : `${maxLabelWidth}px`,
                         flex: 'none',
-                    }, children: _jsxs(Stack, { children: [_jsx("label", { htmlFor: id, id: `${LABEL_PREFIX}${id}`, ref: labelRef, style: { opacity: disabled ? 0.5 : 1 }, children: _jsxs(Text, { children: [label, requireMode !== 'all' && required && ' *', requireMode === 'all' && !required && ' (optional)'] }) }), labelHelpTooltip && (_jsx(IconHelp, { tooltipMessage: labelHelpTooltip, overlayStyle: maxWidthTooltip }))] }) }), _jsxs(Stack, { direction: helpErrorPosition === 'right' ? 'horizontal' : 'vertical', gap: helpErrorPosition === 'right' ? 'r8' : 'r4', children: [content, error ? (_jsx(Text, { variant: "Smaller", color: "statusCritical", isEmphazed: true, id: `${DESCRIPTION_PREFIX}${id}`, children: error })) : help ? (_jsx("div", { style: {
+                    }, children: _jsxs("label", { htmlFor: id, id: `${LABEL_PREFIX}${id}`, ref: labelRef, style: { opacity: disabled ? 0.5 : 1 }, children: [_jsxs(Text, { children: [label, requireMode !== 'all' && required && ' *', requireMode === 'all' && !required && ' (optional)'] }), labelHelpTooltip && (_jsx(Box, { display: "inline-block", marginLeft: spacing.r8, style: { whiteSpace: 'nowrap' }, children: _jsx(IconHelp, { tooltipMessage: labelHelpTooltip, overlayStyle: maxWidthTooltip }) }))] }) }), _jsxs(Stack, { direction: helpErrorPosition === 'right' ? 'horizontal' : 'vertical', gap: helpErrorPosition === 'right' ? 'r8' : 'r4', children: [content, error ? (_jsx(Text, { variant: "Smaller", color: "statusCritical", isEmphazed: true, id: `${DESCRIPTION_PREFIX}${id}`, children: error })) : help ? (_jsx("div", { style: {
                                 opacity: disabled ? 0.5 : 1,
                             }, children: _jsx(Text, { variant: "Smaller", color: "textSecondary", isEmphazed: true, id: `${DESCRIPTION_PREFIX}${id}`, children: help }) })) : (_jsx(Text, { variant: "Smaller", isEmphazed: true, children: "\u00A0" }))] })] }) }));
 };

package/dist/components/tablev2/SingleSelectableContent.d.ts

@@ -10,6 +10,7 @@ export type SingleSelectableContentProps<DATA_ROW extends Record<string, unknown
     hasScrollbar?: boolean;
     isLoadingMoreItems?: boolean;
     children?: (rows: JSX.Element) => JSX.Element;
+    autoScrollToSelected?: boolean;
 };
-export declare function SingleSelectableContent<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rowHeight, separationLineVariant, locale, selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }: SingleSelectableContentProps<DATA_ROW>): import("react/jsx-runtime").JSX.Element;
+export declare function SingleSelectableContent<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rowHeight, separationLineVariant, locale, selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, autoScrollToSelected, }: SingleSelectableContentProps<DATA_ROW>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SingleSelectableContent.d.ts.map

package/dist/components/tablev2/SingleSelectableContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AASlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,4BAA4B,CACtC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;IAExC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAE1C,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,CAAC,QAAQ,CAAC,2CAmJxC"}
+{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AASlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,4BAA4B,CACtC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;IAExC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAE1C,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,oBAA4B,GAC7B,EAAE,4BAA4B,CAAC,QAAQ,CAAC,2CAmKxC"}

package/dist/components/tablev2/SingleSelectableContent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import { areEqual } from 'react-window';
 import { useTableContext } from './Tablev2.component';
 import { HeadRow, TableRow, TableBody, TableHeader, SortCaret, } from './Tablestyle';
@@ -8,15 +8,29 @@ import useSyncedScroll from './useSyncedScroll';
 import { Loader } from '../loader/Loader.component';
 import { Box } from '../box/Box';
 import { spacing } from '../../spacing';
-export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
+export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, autoScrollToSelected = false, }) {
     if (selectedId && !onRowSelected) {
         console.error('Please specify the onRowSelected function.');
     }
     const { headerRef } = useSyncedScroll();
+    const listRef = useRef(null);
     const { headerGroups, prepareRow, rows, setRowHeight } = useTableContext();
     useEffect(() => {
         setRowHeight(rowHeight);
     }, [rowHeight, setRowHeight]);
+    useEffect(() => {
+        if (!autoScrollToSelected || !selectedId || !listRef.current)
+            return;
+        const selectedIndex = rows.findIndex((row) => row.id === selectedId);
+        if (selectedIndex < 0)
+            return;
+        const timer = setTimeout(() => {
+            if (!listRef.current)
+                return;
+            listRef.current.scrollToItem(selectedIndex, 'center');
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [autoScrollToSelected, selectedId, rows]);
     const RenderRow = memo(({ index, style }) => {
         const row = rows[index];
         prepareRow(row);
@@ -76,5 +90,5 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
                                     headerStyleProps.onClick(event);
                                 }
                             }, children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
-                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
+                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow, listRef: listRef }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
 }

package/dist/components/tablev2/TableCommon.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, LegacyRef } from 'react';
+import { ComponentType, Ref } from 'react';
 import { Row } from 'react-table';
 import { FixedSizeList, ListChildComponentProps, ListItemKeySelector } from 'react-window';
 import { TableHeightKeyType, TableLocalType } from './TableUtils';
@@ -12,7 +12,7 @@ type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<strin
     itemKey?: ListItemKeySelector<Row<DATA_ROW>[]>;
     onBottom?: (rowLength: number) => void;
     onBottomOffset?: number;
-    listRef?: LegacyRef<FixedSizeList<Row<DATA_ROW>[]>>;
+    listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 export declare const VirtualizedRows: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }: VirtualizedRowsType<DATA_ROW>) => import("react/jsx-runtime").JSX.Element;
 export declare const useTableScrollbar: () => {
@@ -30,7 +30,8 @@ type TableRowsProps<DATA_ROW extends Record<string, unknown> = Record<string, un
     children?: (children: JSX.Element) => JSX.Element;
     customItemKey?: (index: number, data: DATA_ROW) => string;
     RenderRow: React.MemoExoticComponent<({ index, style }: RenderRowType) => JSX.Element>;
+    listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
-export declare function TableRows<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ locale, children, customItemKey, RenderRow }: TableRowsProps<DATA_ROW>): import("react/jsx-runtime").JSX.Element | null;
+export declare function TableRows<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ locale, children, customItemKey, RenderRow, listRef: externalListRef, }: TableRowsProps<DATA_ROW>): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=TableCommon.d.ts.map

package/dist/components/tablev2/TableCommon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CACtB,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAClE,CAAC;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,0HAUvC,mBAAmB,CAAC,QAAQ,CAAC,4CAmC/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,kDAyEzE"}
+{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAqC,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAWlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CACtB,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAClE,CAAC;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,0HAUvC,mBAAmB,CAAC,QAAQ,CAAC,4CAoC/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;IACF,OAAO,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC/C,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,MAAM,EACN,QAAQ,EACR,aAAa,EACb,SAAS,EACT,OAAO,EAAE,eAAe,GACzB,EAAE,cAAc,CAAC,QAAQ,CAAC,kDA2E1B"}

package/dist/components/tablev2/TableCommon.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useState, forwardRef } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List, } from 'react-window';
 import { convertRemToPixels, tableRowHeight, } from './TableUtils';
 import { useTableContext } from './Tablev2.component';
 import useSyncedScroll from './useSyncedScroll';
 import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
+const SmoothScrollDiv = forwardRef((props, ref) => (_jsx("div", { ref: ref, ...props, style: { ...props.style, scrollBehavior: 'smooth' } })));
 export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { disableWidth: true, children: ({ height }) => {
-        return (_jsx(List, { height: height - 1, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: '100%', itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
+        return (_jsx(List, { height: height - 1, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: '100%', itemKey: itemKey, itemData: rows, ref: listRef, outerElementType: SmoothScrollDiv, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
                 setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
                 if (onBottom &&
                     onBottomOffset != null &&
@@ -36,10 +37,11 @@ export const useTableScrollbar = () => {
         handleScrollbarWidth,
     };
 };
-export function TableRows({ locale, children, customItemKey, RenderRow }) {
+export function TableRows({ locale, children, customItemKey, RenderRow, listRef: externalListRef, }) {
     const { setHasScrollbar } = useTableScrollbar();
     const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } = useTableContext();
     const { bodyRef } = useSyncedScroll();
+    const listRef = externalListRef || bodyRef;
     function itemKey(index, data) {
         if (typeof customItemKey === 'function') {
             return customItemKey(index, data);
@@ -52,14 +54,14 @@ export function TableRows({ locale, children, customItemKey, RenderRow }) {
     if (status === 'success' || status === undefined) {
         if (typeof children === 'function') {
             if (rows.length) {
-                return children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }));
+                return children(_jsx(VirtualizedRows, { rows: rows, listRef: listRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }));
             }
             else {
                 return children(_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));
             }
         }
         else if (rows.length) {
-            return (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, itemKey: itemKey, rowHeight: rowHeight, RenderRow: RenderRow }));
+            return (_jsx(VirtualizedRows, { rows: rows, listRef: listRef, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, itemKey: itemKey, rowHeight: rowHeight, RenderRow: RenderRow }));
         }
         else {
             return (_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));

package/dist/components/tooltip/Tooltip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,2CA+CP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAMhD,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,2CAsCP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/Tooltip.component.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { flip, offset, shift, useFloating } from '@floating-ui/react';
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, zIndex } from '../../style/theme';
@@ -23,8 +24,6 @@ const TooltipContainer = styled.div `
 `;
 const TooltipOverLayContainer = styled.div `
   display: inline-block;
-  opacity: 0;
-  position: fixed;
   width: max-content;
   border: 1px solid ${getThemePropSelector('border')};
   background-color: ${(props) => (props && props.style && props.style.backgroundColor) ||
@@ -53,30 +52,18 @@ const TooltipText = styled.div `
   }
 `;
 function Tooltip({ placement = TOP, overlayStyle, children, overlay, ...rest }) {
-    const childrenRef = useRef(null);
-    const tooltipRef = useRef(null);
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-    useEffect(() => {
-        if (childrenRef.current && tooltipRef.current) {
-            computePosition(childrenRef.current, tooltipRef.current, {
-                placement,
-                middleware: [offset(5), shift(), flip()],
-            }).then(({ x, y }) => {
-                if (tooltipRef.current) {
-                    Object.assign(tooltipRef.current.style, {
-                        opacity: '1',
-                        // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
-                        left: `${x}px`,
-                        top: `${y}px`,
-                    });
-                }
-            });
-        }
-    }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
-    return (_jsxs(TooltipContainer, { className: "sc-tooltip", onPointerEnter: () => {
-            setIsTooltipVisible(true);
-        }, onPointerLeave: () => {
-            setIsTooltipVisible(false);
-        }, children: [isTooltipVisible && overlay ? (_jsx(TooltipOverLayContainer, { ref: tooltipRef, className: "sc-tooltip-overlay", placement: placement, style: overlayStyle, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) })) : null, _jsx("div", { ref: childrenRef, children: children })] }));
+    const { refs, floatingStyles } = useFloating({
+        placement,
+        open: isTooltipVisible,
+        middleware: [offset(5), shift(), flip()],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(TooltipContainer, { className: "sc-tooltip", onPointerEnter: () => {
+                    setIsTooltipVisible(true);
+                }, onPointerLeave: () => {
+                    setIsTooltipVisible(false);
+                }, children: _jsx("div", { ref: refs.setReference, children: children }) }), isTooltipVisible &&
+                overlay &&
+                createPortal(_jsx(TooltipOverLayContainer, { ref: refs.setFloating, className: "sc-tooltip-overlay", placement: placement, style: { ...floatingStyles, ...overlayStyle }, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) }), document.body)] }));
 }
 export { Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.184.0",
+  "version": "0.186.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/form/Form.component.tsx

@@ -171,26 +171,30 @@ const FormGroup = ({
             flex: 'none',
           }}
         >
-          <Stack>
-            <label
-              htmlFor={id}
-              id={`${LABEL_PREFIX}${id}`}
-              ref={labelRef}
-              style={{ opacity: disabled ? 0.5 : 1 }}
-            >
-              <Text>
-                {label}
-                {requireMode !== 'all' && required && ' *'}
-                {requireMode === 'all' && !required && ' (optional)'}
-              </Text>
-            </label>
+          <label
+            htmlFor={id}
+            id={`${LABEL_PREFIX}${id}`}
+            ref={labelRef}
+            style={{ opacity: disabled ? 0.5 : 1 }}
+          >
+            <Text>
+              {label}
+              {requireMode !== 'all' && required && ' *'}
+              {requireMode === 'all' && !required && ' (optional)'}
+            </Text>
             {labelHelpTooltip && (
-              <IconHelp
-                tooltipMessage={labelHelpTooltip}
-                overlayStyle={maxWidthTooltip}
-              />
+              <Box
+                display="inline-block"
+                marginLeft={spacing.r8}
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                <IconHelp
+                  tooltipMessage={labelHelpTooltip}
+                  overlayStyle={maxWidthTooltip}
+                />
+              </Box>
             )}
-          </Stack>
+          </label>
         </div>
         <Stack
           direction={helpErrorPosition === 'right' ? 'horizontal' : 'vertical'}

package/src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -1,5 +1,5 @@
-import { memo, useEffect } from 'react';
-import { areEqual } from 'react-window';
+import { memo, useEffect, useRef } from 'react';
+import { areEqual, FixedSizeList } from 'react-window';
 import { Row } from 'react-table';
 import { useTableContext } from './Tablev2.component';
 import {
@@ -33,6 +33,7 @@ export type SingleSelectableContentProps<
   hasScrollbar?: boolean;
   isLoadingMoreItems?: boolean;
   children?: (rows: JSX.Element) => JSX.Element;
+  autoScrollToSelected?: boolean;
 };
 
 export function SingleSelectableContent<
@@ -47,12 +48,14 @@ export function SingleSelectableContent<
   onRowSelected,
   customItemKey,
   children,
+  autoScrollToSelected = false,
 }: SingleSelectableContentProps<DATA_ROW>) {
   if (selectedId && !onRowSelected) {
     console.error('Please specify the onRowSelected function.');
   }
 
   const { headerRef } = useSyncedScroll<DATA_ROW>();
+  const listRef = useRef<FixedSizeList<Row<DATA_ROW>[]>>(null);
   const { headerGroups, prepareRow, rows, setRowHeight } =
     useTableContext<DATA_ROW>();
 
@@ -60,6 +63,20 @@ export function SingleSelectableContent<
     setRowHeight(rowHeight);
   }, [rowHeight, setRowHeight]);
 
+  useEffect(() => {
+    if (!autoScrollToSelected || !selectedId || !listRef.current) return;
+
+    const selectedIndex = rows.findIndex((row) => row.id === selectedId);
+    if (selectedIndex < 0) return;
+
+    const timer = setTimeout(() => {
+      if (!listRef.current) return;
+      listRef.current.scrollToItem(selectedIndex, 'center');
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [autoScrollToSelected, selectedId, rows]);
+
   const RenderRow = memo(({ index, style }: RenderRowType) => {
     const row = rows[index];
     prepareRow(row);
@@ -180,6 +197,7 @@ export function SingleSelectableContent<
           children={children}
           customItemKey={customItemKey}
           RenderRow={RenderRow}
+          listRef={listRef}
         />
       </TableBody>
       {isLoadingMoreItems && (

package/src/lib/components/tablev2/TableCommon.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import { ComponentType, Ref, useCallback, useState, forwardRef } from 'react';
 import { Row } from 'react-table';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
@@ -18,6 +18,14 @@ import useSyncedScroll from './useSyncedScroll';
 import { CSSProperties } from 'styled-components';
 import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
 
+const SmoothScrollDiv = forwardRef<HTMLDivElement, any>((props, ref) => (
+  <div
+    ref={ref}
+    {...props}
+    style={{ ...props.style, scrollBehavior: 'smooth' }}
+  />
+));
+
 type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 > = {
@@ -31,7 +39,7 @@ type VirtualizedRowsType<
   itemKey?: ListItemKeySelector<Row<DATA_ROW>[]>;
   onBottom?: (rowLength: number) => void;
   onBottomOffset?: number;
-  listRef?: LegacyRef<FixedSizeList<Row<DATA_ROW>[]>>;
+  listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 
 export const VirtualizedRows = <
@@ -57,6 +65,7 @@ export const VirtualizedRows = <
           itemKey={itemKey}
           itemData={rows}
           ref={listRef}
+          outerElementType={SmoothScrollDiv}
           onItemsRendered={({
             visibleStartIndex,
             visibleStopIndex,
@@ -122,14 +131,23 @@ type TableRowsProps<
   RenderRow: React.MemoExoticComponent<
     ({ index, style }: RenderRowType) => JSX.Element
   >;
+  listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 export function TableRows<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
->({ locale, children, customItemKey, RenderRow }: TableRowsProps<DATA_ROW>) {
+>({
+  locale,
+  children,
+  customItemKey,
+  RenderRow,
+  listRef: externalListRef,
+}: TableRowsProps<DATA_ROW>) {
   const { setHasScrollbar } = useTableScrollbar();
   const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } =
-    useTableContext();
-  const { bodyRef } = useSyncedScroll();
+    useTableContext<DATA_ROW>();
+  const { bodyRef } = useSyncedScroll<DATA_ROW>();
+  const listRef: Ref<FixedSizeList<Row<DATA_ROW>[]>> =
+    externalListRef || bodyRef;
 
   function itemKey(index, data) {
     if (typeof customItemKey === 'function') {
@@ -153,9 +171,9 @@ export function TableRows<
     if (typeof children === 'function') {
       if (rows.length) {
         return children(
-          <VirtualizedRows
+          <VirtualizedRows<DATA_ROW>
             rows={rows}
-            listRef={bodyRef}
+            listRef={listRef}
             itemKey={itemKey}
             rowHeight={rowHeight}
             setHasScrollbar={setHasScrollbar}
@@ -175,9 +193,9 @@ export function TableRows<
       }
     } else if (rows.length) {
       return (
-        <VirtualizedRows
+        <VirtualizedRows<DATA_ROW>
           rows={rows}
-          listRef={bodyRef}
+          listRef={listRef}
           setHasScrollbar={setHasScrollbar}
           onBottom={onBottom}
           onBottomOffset={onBottomOffset}

package/src/lib/components/tooltip/Tooltip.component.tsx

@@ -1,5 +1,6 @@
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { flip, offset, shift, useFloating } from '@floating-ui/react';
+import { CSSProperties, useState } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, zIndex } from '../../style/theme';
@@ -44,8 +45,6 @@ const TooltipOverLayContainer = styled.div<{
   style?: CSSProperties;
 }>`
   display: inline-block;
-  opacity: 0;
-  position: fixed;
   width: max-content;
   border: 1px solid ${getThemePropSelector('border')};
   background-color: ${(props) =>
@@ -85,51 +84,42 @@ function Tooltip({
   overlay,
   ...rest
 }: Props) {
-  const childrenRef = useRef<HTMLDivElement | null>(null);
-  const tooltipRef = useRef<HTMLDivElement | null>(null);
-
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  useEffect(() => {
-    if (childrenRef.current && tooltipRef.current) {
-      computePosition(childrenRef.current, tooltipRef.current, {
-        placement,
-        middleware: [offset(5), shift(), flip()],
-      }).then(({ x, y }) => {
-        if (tooltipRef.current) {
-          Object.assign(tooltipRef.current.style, {
-            opacity: '1',
-            // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        }
-      });
-    }
-  }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
+
+  const { refs, floatingStyles } = useFloating({
+    placement,
+    open: isTooltipVisible,
+    middleware: [offset(5), shift(), flip()],
+  });
   return (
-    <TooltipContainer
-      className="sc-tooltip"
-      onPointerEnter={() => {
-        setIsTooltipVisible(true);
-      }}
-      onPointerLeave={() => {
-        setIsTooltipVisible(false);
-      }}
-    >
-      {isTooltipVisible && overlay ? (
-        <TooltipOverLayContainer
-          ref={tooltipRef}
-          className="sc-tooltip-overlay"
-          placement={placement}
-          style={overlayStyle}
-        >
-          <TooltipText className="sc-tooltip-overlay-text">
-            {overlay}
-          </TooltipText>
-        </TooltipOverLayContainer>
-      ) : null}
-      <div ref={childrenRef}>{children}</div>
-    </TooltipContainer>
+    <>
+      <TooltipContainer
+        className="sc-tooltip"
+        onPointerEnter={() => {
+          setIsTooltipVisible(true);
+        }}
+        onPointerLeave={() => {
+          setIsTooltipVisible(false);
+        }}
+      >
+        <div ref={refs.setReference}>{children}</div>
+      </TooltipContainer>
+      {isTooltipVisible &&
+        overlay &&
+        createPortal(
+          <TooltipOverLayContainer
+            ref={refs.setFloating}
+            className="sc-tooltip-overlay"
+            placement={placement}
+            style={{ ...floatingStyles, ...overlayStyle }}
+          >
+            <TooltipText className="sc-tooltip-overlay-text">
+              {overlay}
+            </TooltipText>
+          </TooltipOverLayContainer>,
+          document.body,
+        )}
+    </>
   );
 }
 

package/stories/common.tsx

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
       background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']};
       color: ${theme.textPrimary};
       box-sizing: border-box;
-      overflow: scroll;
+      overflow: auto;
     `;
   }}
 `;

package/stories/tablev2.stories.tsx

@@ -651,7 +651,7 @@ export const TableWithSyncButton = {
     };
 
     return (
-      <Box>
+      <Box width="500px" height="250px">
         <Title>Table with Sync Button</Title>
         <Box
           display="flex"
@@ -676,3 +676,59 @@ export const TableWithSyncButton = {
     );
   },
 };
+
+export const AutoScrollToSelected = {
+  render: () => {
+    const largeData: Entry[] = Array.from({ length: 100 }, (_, index) => ({
+      id: index + 1,
+      firstName: `FirstName${index + 1}`,
+      lastName: `LastName${index + 1}`,
+      health: ['healthy', 'warning', 'critical'][index % 3],
+    }));
+
+    const [selectedId, setSelectedId] = useState<string>(
+      'LastName80 FirstName80',
+    );
+
+    const handleRowSelected = (row: Row<Entry>) => {
+      const rowId = `${row.original.lastName} ${row.original.firstName}`;
+      setSelectedId(rowId);
+    };
+
+    const handleSelectRandom = () => {
+      const randomIndex = Math.floor(Math.random() * largeData.length);
+      const randomRow = largeData[randomIndex];
+      setSelectedId(`${randomRow.lastName} ${randomRow.firstName}`);
+    };
+
+    return (
+      <>
+        <Title>Auto Scroll to Selected Row</Title>
+        <Box mb={2}>
+          <Button
+            variant="secondary"
+            label="Select Random Row"
+            onClick={handleSelectRandom}
+          />
+          <Box mt={1}>Currently selected: {selectedId || 'None'}</Box>
+        </Box>
+        <div style={{ height: '400px' }}>
+          <Table
+            columns={columns}
+            data={largeData}
+            defaultSortingKey="firstName"
+            getRowId={getRowId}
+          >
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              selectedId={selectedId}
+              onRowSelected={handleRowSelected}
+              autoScrollToSelected
+            />
+          </Table>
+        </div>
+      </>
+    );
+  },
+};