@scality/core-ui 0.184.0 → 0.185.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.184.0",
+  "version": "0.185.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/stories/tablev2.stories.tsx

@@ -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>
+      </>
+    );
+  },
+};