@scality/core-ui 0.127.0 → 0.129.0

package/dist/components/UnsuccessfulResult.component.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { TableHeightKeyType, TableLocalType } from './tablev2/TableUtils';
+export type UnsuccessfulResultProps = {
+    name?: {
+        en: {
+            singular: string;
+            plural: string;
+        };
+        fr?: {
+            singular: string;
+            plural: string;
+        };
+    };
+    locale?: TableLocalType;
+    status: 'error' | 'loading' | 'idle' | 'noResult';
+} & ({
+    rowHeight: TableHeightKeyType;
+    heightInRem?: never;
+} | {
+    rowHeight?: never;
+    heightInRem?: number | string;
+});
+export declare const UnsuccessfulResult: (props: UnsuccessfulResultProps) => JSX.Element;
+//# sourceMappingURL=UnsuccessfulResult.component.d.ts.map

package/dist/components/UnsuccessfulResult.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsuccessfulResult.component.d.ts","sourceRoot":"","sources":["../../src/lib/components/UnsuccessfulResult.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,kBAAkB,EAClB,cAAc,EAGf,MAAM,sBAAsB,CAAC;AAc9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE;QACL,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,EAAE,CAAC,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;KAC3C,CAAC;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;CACnD,GAAG,CACA;IAAE,SAAS,EAAE,kBAAkB,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAehE,CAAC"}

package/dist/components/UnsuccessfulResult.component.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Icon } from './icon/Icon.component';
+import { Loader } from './loader/Loader.component';
+import { tableRowHeight, translatedMessages, } from './tablev2/TableUtils';
+import { Text } from './text/Text.component';
+import { Box } from './box/Box';
+import { spacing } from '../spacing';
+const NoResult = styled(Box) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${(props) => props.theme.textSecondary};
+  height: ${(props) => props.height}rem;
+  gap: ${spacing.r8};
+`;
+export const UnsuccessfulResult = (props) => {
+    const { heightInRem = 5, name, locale, status, rowHeight } = props;
+    const height = rowHeight ? tableRowHeight[rowHeight] : heightInRem;
+    return (_jsxs(NoResult, { height: height, children: [(status === 'loading' || status === 'idle') && _jsx(Loader, {}), status === 'error' && (_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" })), _jsx(Text, { color: "textSecondary", children: translatedMessages(status, name, locale) })] }));
+};

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,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,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,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,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,kNA8C3B,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,sBAuEzE"}
+{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,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,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,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,kNA8C3B,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,sBA0DzE"}

package/dist/components/tablev2/TableCommon.js

@@ -1,14 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List, } from 'react-window';
-import { convertRemToPixels, translatedMessages, tableRowHeight, } from './TableUtils';
+import { convertRemToPixels, tableRowHeight, } from './TableUtils';
 import { useTableContext } from './Tablev2.component';
-import { NoResult } from './Tablestyle';
-import { Loader } from '../loader/Loader.component';
-import { Text } from '../text/Text.component';
-import { Icon } from '../icon/Icon.component';
 import useSyncedScroll from './useSyncedScroll';
+import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
 export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
         return (_jsx(List, { height: height, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: width, itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
                 setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
@@ -49,11 +46,8 @@ export function TableRows({ locale, children, customItemKey, RenderRow }) {
         }
         return index;
     }
-    if (status === 'idle' || status === 'loading') {
-        return (_jsxs(NoResult, { rowHeight: rowHeight, children: [_jsx(Loader, {}), _jsx(Text, { color: "textSecondary", children: translatedMessages('loading', entityName, locale) })] }));
-    }
-    if (status === 'error') {
-        return (_jsxs(NoResult, { rowHeight: rowHeight, children: [_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" }), _jsx(Text, { color: "textSecondary", children: translatedMessages('error', entityName, locale) })] }));
+    if (status === 'idle' || status === 'loading' || status === 'error') {
+        return (_jsx(UnsuccessfulResult, { name: entityName, status: status, locale: locale, rowHeight: rowHeight }));
     }
     if (status === 'success' || status === undefined) {
         if (typeof children === 'function') {
@@ -63,7 +57,7 @@ export function TableRows({ locale, children, customItemKey, RenderRow }) {
             return (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, itemKey: itemKey, rowHeight: rowHeight, RenderRow: RenderRow }));
         }
         else {
-            return (_jsx(NoResult, { rowHeight: rowHeight, children: translatedMessages('noResult', entityName, locale) }));
+            return _jsx(UnsuccessfulResult, { name: entityName, status: "noResult" });
         }
     }
     return null;

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

@@ -14,7 +14,7 @@ export declare const tableRowHeight: {
     h48: string;
     h64: string;
 };
-type TableMessagesType = 'error' | 'loading' | 'noResult';
+type TableMessagesType = 'error' | 'loading' | 'idle' | 'noResult';
 export declare const translatedMessages: (type: TableMessagesType, entityName?: {
     en: {
         singular: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TableUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableUtils.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,aAAa,CAAC;AACnC,QAAA,MAAM,cAAc,YAAY,CAAC;AACjC,QAAA,MAAM,WAAW,SAAS,CAAC;AAC3B,QAAA,MAAM,aAAa,YAAY,CAAC;AAEhC,KAAK,UAAU,GACX,OAAO,eAAe,GACtB,OAAO,cAAc,GACrB,OAAO,WAAW,GAClB,OAAO,aAAa,CAAC;AAGzB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,GAClB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,KAAA,UAErC;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GACxB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAGvB,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAE1D,eAAO,MAAM,kBAAkB,SACvB,iBAAiB,eACV;IACX,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,EAAE,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,WACQ,cAAc,WA2BxB,CAAC"}
+{"version":3,"file":"TableUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableUtils.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,aAAa,CAAC;AACnC,QAAA,MAAM,cAAc,YAAY,CAAC;AACjC,QAAA,MAAM,WAAW,SAAS,CAAC;AAC3B,QAAA,MAAM,aAAa,YAAY,CAAC;AAEhC,KAAK,UAAU,GACX,OAAO,eAAe,GACtB,OAAO,cAAc,GACrB,OAAO,WAAW,GAClB,OAAO,aAAa,CAAC;AAGzB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,GAClB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,KAAA,UAErC;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GACxB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAGvB,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAEnE,eAAO,MAAM,kBAAkB,SACvB,iBAAiB,eACV;IACX,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,EAAE,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,WACQ,cAAc,WA2BxB,CAAC"}

package/dist/components/tablev2/TableUtils.js

@@ -39,7 +39,7 @@ export const translatedMessages = (type, entityName, locale) => {
         return `An error occurred while loading ${entityName ? `the ${entityName.en.plural}` : 'data'}, please refresh the
     page.`;
     }
-    if (type === 'loading') {
+    if (type === 'loading' || type === 'idle') {
         if (locale === 'fr') {
             return `Chargement des ${((_b = entityName === null || entityName === void 0 ? void 0 : entityName.fr) === null || _b === void 0 ? void 0 : _b.plural) || 'données'}...`;
         }

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

@@ -28,11 +28,6 @@ export declare const TableRowMultiSelectable: import("styled-components").Styled
 export declare const TableBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TooltipContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NoResult: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BordersProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    gap?: string | number | undefined;
-} & {
-    rowHeight: TableHeightKeyType;
-}, never>;
 export declare const SortCaret: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ column, }: {
     column: HeaderGroup<DATA_ROW>;
 }) => JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;cAEZ,MAAM,GAAG,SAAS;SAkB7B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,kHAmBnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAmCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIAqBnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAKrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;eAA4B,kBAAkB;SAOlE,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}
+{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;cAEZ,MAAM,GAAG,SAAS;SAkB7B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,kHAmBnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAmCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIAqBnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAKrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}

package/dist/components/tablev2/Tablestyle.js

@@ -4,7 +4,6 @@ import { tableRowHeight, } from './TableUtils';
 import { Icon } from '../icon/Icon.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 import { spacing } from '../../spacing';
-import { Box } from '../box/Box';
 const borderSize = '4px';
 export const SortIncentive = styled.span `
   position: absolute;
@@ -125,14 +124,6 @@ export const TooltipContent = styled.div `
   font-weight: bold;
   min-width: 60px;
 `;
-export const NoResult = styled(Box) `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${(props) => props.theme.textSecondary};
-  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
-  gap: ${spacing.r8};
-`;
 export const SortCaret = ({ column, }) => {
     return !column.disableSortBy ? (_jsx(SortCaretWrapper, { children: column.isSorted ? (column.isSortedDesc ? (_jsx(Icon, { name: "Sort-down" })) : (_jsx(Icon, { name: "Sort-up" }))) : (_jsx(SortIncentive, { children: _jsx(Icon, { name: "Sort" }) })) })) : null;
 };

package/dist/components/tabsv2/StyledTabs.d.ts

@@ -12,6 +12,7 @@ export declare const TabsContainer: import("styled-components").StyledComponent<
 }, never>;
 export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     tabContentColor?: string | undefined;
+    withoutPadding?: boolean | undefined;
 }, never>;
 export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TabsScroller: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/tabsv2/StyledTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAyBvB,CAAC;AACF,eAAO,MAAM,UAAU;;SAUtB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}
+{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAyBvB,CAAC;AACF,eAAO,MAAM,UAAU;;;SAatB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}

package/dist/components/tabsv2/StyledTabs.js

@@ -74,7 +74,7 @@ export const TabsContainer = styled.div `
 `;
 export const TabContent = styled.div `
   margin: 0;
-  padding: 0;
+  padding: ${(props) => (props.withoutPadding ? '0' : spacing.r16)};
   display: block;
   width: 100%;
   height: 100%;

package/dist/components/tabsv2/Tab.d.ts

@@ -11,6 +11,7 @@ export type TabProps = {
     exact?: boolean;
     strict?: boolean;
     sensitive?: boolean;
+    withoutPadding?: boolean;
 };
 declare function Tab(_: TabProps): null;
 export { Tab };

package/dist/components/tabsv2/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tab.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,iBAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,QAQvB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tab.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,iBAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,QAQvB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/tabsv2/Tabsv2.component.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, { ReactElement } from 'react';
 import { Tab } from './Tab';
+import { TabProps } from './Tab';
 type TabsProps = {
     activeTabColor?: string;
     activeTabSeparator?: string;
@@ -9,7 +9,7 @@ type TabsProps = {
     tabContentColor?: string;
     separatorColor?: string;
     tabHoverColor?: string;
-    children: ChildrenArray<Element<typeof Tab>>;
+    children: ReactElement<TabProps>[];
     className?: string;
 };
 export declare const TabsContext: React.Context<boolean>;

package/dist/components/tabsv2/Tabsv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabsv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tabsv2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5B,KAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,WAAW,wBAAgC,CAAC;AAMzD,iBAAS,IAAI,CAAC,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6LX;kBAxMQ,IAAI;;;AA4Mb,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tabsv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tabsv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,YAAY,EACb,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAS,MAAM,OAAO,CAAC;AAKxC,KAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,WAAW,wBAAgC,CAAC;AAMzD,iBAAS,IAAI,CAAC,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAgMX;kBA3MQ,IAAI;;;AA+Mb,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/tabsv2/Tabsv2.component.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
+import React, { createContext, useEffect, useState, useCallback, } from 'react';
 import { TabBar, ScrollableContainer, TabContent, TabItem, TabsContainer, TabsScroller, } from './StyledTabs';
 import { useHistory, useLocation, useRouteMatch, matchPath, Route, } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
@@ -77,12 +76,12 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
                     event.preventDefault();
                     history.push(getPushHistoryPath(path, query));
                 }
-            }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { className: "sc-tabs-item-title", children: label })) : (_jsx(SecondaryText, { className: "sc-tabs-item-title", children: label })), textBadge && (_jsx(EmphaseText, { className: "sc-tabs-item-icon", children: textBadge }))] }, index));
+            }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { children: label })) : (_jsx(SecondaryText, { children: label })), textBadge && _jsx(EmphaseText, { children: textBadge })] }, index));
     });
-    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), _jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, children: filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
-                            ? tab.props.path
-                            : url + '/' + tab.props.path, children: !tab.props.query ||
-                            (tab.props.query && matchQuery(tab.props.query)) ? (tab.props.children) : (_jsx(_Fragment, {})) }, index))) })] }) }));
+    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
+                        ? tab.props.path
+                        : url + '/' + tab.props.path, children: !tab.props.query ||
+                        (tab.props.query && matchQuery(tab.props.query)) ? (_jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, withoutPadding: tab.props.withoutPadding, children: tab.props.children })) : (_jsx(_Fragment, {})) }, index)))] }) }));
 }
 Tabs.Tab = Tab;
 // re-export Tab

package/dist/components/tabsv2/useScrollingTabs.d.ts

@@ -4,7 +4,7 @@ declare const useScrollingTabs: (selectedTabIndex: number | null | undefined) =>
     scrollButtonEndRef: import("react").MutableRefObject<HTMLDivElement | null | undefined>;
     tabsRef: import("react").MutableRefObject<any>;
     tabsListRef: import("react").RefObject<HTMLDivElement>;
-    handleKeyDown: (event: KeyboardEvent) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     handleTabsScroll: () => void;
     handleStartScrollClick: () => void;
     handleEndScrollClick: () => void;

package/dist/components/tabsv2/useScrollingTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollingTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/useScrollingTabs.ts"],"names":[],"mappings":";AAmIA,QAAA,MAAM,gBAAgB,qBAAsB,MAAM,GAAG,IAAI,GAAG,SAAS;;;;;2BA0JrC,aAAa;;;;;;;;CA+C5C,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"useScrollingTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/useScrollingTabs.ts"],"names":[],"mappings":";AAmIA,QAAA,MAAM,gBAAgB,qBAAsB,MAAM,GAAG,IAAI,GAAG,SAAS;;;;;2BA0JrC,mBAAmB,CAAC,cAAc,CAAC;;;;;;;;CA+ClE,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/package.json

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

package/src/lib/components/UnsuccessfulResult.component.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { Icon } from './icon/Icon.component';
+import { Loader } from './loader/Loader.component';
+import {
+  TableHeightKeyType,
+  TableLocalType,
+  tableRowHeight,
+  translatedMessages,
+} from './tablev2/TableUtils';
+import { Text } from './text/Text.component';
+import { Box } from './box/Box';
+import { spacing } from '../spacing';
+
+const NoResult = styled(Box)<{ height: number | string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${(props) => props.theme.textSecondary};
+  height: ${(props) => props.height}rem;
+  gap: ${spacing.r8};
+`;
+
+export type UnsuccessfulResultProps = {
+  name?: {
+    en: { singular: string; plural: string };
+    fr?: { singular: string; plural: string };
+  };
+  locale?: TableLocalType;
+  status: 'error' | 'loading' | 'idle' | 'noResult';
+} & (
+  | { rowHeight: TableHeightKeyType; heightInRem?: never }
+  | { rowHeight?: never; heightInRem?: number | string }
+);
+
+export const UnsuccessfulResult = (props: UnsuccessfulResultProps) => {
+  const { heightInRem = 5, name, locale, status, rowHeight } = props;
+  const height = rowHeight ? tableRowHeight[rowHeight] : heightInRem;
+  return (
+    <NoResult height={height}>
+      {(status === 'loading' || status === 'idle') && <Loader />}
+      {status === 'error' && (
+        <Icon name="Exclamation-circle" color="statusWarning" />
+      )}
+
+      <Text color="textSecondary">
+        {translatedMessages(status, name, locale)}
+      </Text>
+    </NoResult>
+  );
+};

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

@@ -9,18 +9,14 @@ import {
 } from 'react-window';
 import {
   convertRemToPixels,
-  translatedMessages,
   TableHeightKeyType,
   TableLocalType,
   tableRowHeight,
 } from './TableUtils';
 import { useTableContext } from './Tablev2.component';
-import { NoResult } from './Tablestyle';
-import { Loader } from '../loader/Loader.component';
-import { Text } from '../text/Text.component';
-import { Icon } from '../icon/Icon.component';
 import useSyncedScroll from './useSyncedScroll';
 import { CSSProperties } from 'styled-components';
+import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
 
 type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
@@ -141,26 +137,17 @@ export function TableRows<
     return index;
   }
 
-  if (status === 'idle' || status === 'loading') {
+  if (status === 'idle' || status === 'loading' || status === 'error') {
     return (
-      <NoResult rowHeight={rowHeight}>
-        <Loader />
-        <Text color="textSecondary">
-          {translatedMessages('loading', entityName, locale)}
-        </Text>
-      </NoResult>
-    );
-  }
-  if (status === 'error') {
-    return (
-      <NoResult rowHeight={rowHeight}>
-        <Icon name="Exclamation-circle" color="statusWarning" />
-        <Text color="textSecondary">
-          {translatedMessages('error', entityName, locale)}
-        </Text>
-      </NoResult>
+      <UnsuccessfulResult
+        name={entityName}
+        status={status}
+        locale={locale}
+        rowHeight={rowHeight}
+      />
     );
   }
+
   if (status === 'success' || status === undefined) {
     if (typeof children === 'function') {
       return children(
@@ -189,11 +176,7 @@ export function TableRows<
         />
       );
     } else {
-      return (
-        <NoResult rowHeight={rowHeight}>
-          {translatedMessages('noResult', entityName, locale)}
-        </NoResult>
-      );
+      return <UnsuccessfulResult name={entityName} status="noResult" />;
     }
   }
 

package/src/lib/components/tablev2/TableUtils.ts

@@ -59,7 +59,7 @@ export const tableRowHeight = {
   h64: '4.572', //3 line
 };
 
-type TableMessagesType = 'error' | 'loading' | 'noResult';
+type TableMessagesType = 'error' | 'loading' | 'idle' | 'noResult';
 
 export const translatedMessages = (
   type: TableMessagesType,
@@ -80,7 +80,7 @@ export const translatedMessages = (
     }, please refresh the
     page.`;
   }
-  if (type === 'loading') {
+  if (type === 'loading' || type === 'idle') {
     if (locale === 'fr') {
       return `Chargement des ${entityName?.fr?.plural || 'données'}...`;
     }

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

@@ -156,15 +156,6 @@ export const TooltipContent = styled.div`
   min-width: 60px;
 `;
 
-export const NoResult = styled(Box)<{ rowHeight: TableHeightKeyType }>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${(props) => props.theme.textSecondary};
-  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
-  gap: ${spacing.r8};
-`;
-
 export const SortCaret = <
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 >({

package/src/lib/components/tabsv2/StyledTabs.ts

@@ -84,9 +84,12 @@ export const TabsContainer = styled.div<{
     margin-right: -1px;
   }
 `;
-export const TabContent = styled.div<{ tabContentColor?: string }>`
+export const TabContent = styled.div<{
+  tabContentColor?: string;
+  withoutPadding?: boolean;
+}>`
   margin: 0;
-  padding: 0;
+  padding: ${(props) => (props.withoutPadding ? '0' : spacing.r16)};
   display: block;
   width: 100%;
   height: 100%;

package/src/lib/components/tabsv2/Tab.ts

@@ -12,6 +12,7 @@ export type TabProps = {
   exact?: boolean;
   strict?: boolean;
   sensitive?: boolean;
+  withoutPadding?: boolean;
 };
 
 function Tab(_: TabProps) {

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -1,6 +1,10 @@
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, {
+  createContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactElement,
+} from 'react';
 import {
   TabBar,
   ScrollableContainer,
@@ -15,6 +19,7 @@ import {
   useRouteMatch,
   matchPath,
   Route,
+  Switch,
 } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
 import { ScrollButton } from './ScrollButton';
@@ -32,7 +37,7 @@ type TabsProps = {
   tabContentColor?: string;
   separatorColor?: string;
   tabHoverColor?: string;
-  children: ChildrenArray<Element<typeof Tab>>;
+  children: ReactElement<TabProps>[];
   className?: string;
 };
 export const TabsContext = createContext<boolean>(false);
@@ -60,9 +65,11 @@ function Tabs({
     number | null | undefined
   >(null);
   const queryURL = new URLSearchParams(location.search);
-  const filteredTabsChildren = React.Children.toArray(children).filter(
+  const filteredTabsChildren: ReactElement<TabProps>[] = React.Children.toArray(
+    children,
+  ).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as ReactElement<TabProps>[];
 
   const matchQuery = useCallback(
     (query: Query): boolean => {
@@ -168,18 +175,17 @@ function Tabs({
       >
         {icon && <TabIcon label={label}>{icon}</TabIcon>}
         {isSelected ? (
-          <BasicText className="sc-tabs-item-title">{label}</BasicText>
+          <BasicText>{label}</BasicText>
         ) : (
-          <SecondaryText className="sc-tabs-item-title">{label}</SecondaryText>
-        )}
-        {textBadge && (
-          <EmphaseText className="sc-tabs-item-icon">{textBadge}</EmphaseText>
+          <SecondaryText>{label}</SecondaryText>
         )}
+        {textBadge && <EmphaseText>{textBadge}</EmphaseText>}
       </TabItem>
     );
   });
   return (
     <TabsContext.Provider value={true}>
+      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
@@ -213,31 +219,33 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
-        <TabContent
-          className="sc-tabs-item-content"
-          tabContentColor={tabContentColor}
-        >
-          {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
-            <Route
-              exact={tab.props.exact}
-              sensitive={tab.props.sensitive}
-              strict={tab.props.strict}
-              key={index}
-              path={
-                tab.props.path.startsWith('/')
-                  ? tab.props.path
-                  : url + '/' + tab.props.path
-              }
-            >
-              {!tab.props.query ||
-              (tab.props.query && matchQuery(tab.props.query)) ? (
-                tab.props.children
-              ) : (
-                <></>
-              )}
-            </Route>
-          ))}
-        </TabContent>
+
+        {filteredTabsChildren.map((tab, index) => (
+          <Route
+            exact={tab.props.exact}
+            sensitive={tab.props.sensitive}
+            strict={tab.props.strict}
+            path={
+              tab.props.path.startsWith('/')
+                ? tab.props.path
+                : url + '/' + tab.props.path
+            }
+            key={index}
+          >
+            {!tab.props.query ||
+            (tab.props.query && matchQuery(tab.props.query)) ? (
+              <TabContent
+                className="sc-tabs-item-content"
+                tabContentColor={tabContentColor}
+                withoutPadding={tab.props.withoutPadding}
+              >
+                {tab.props.children}
+              </TabContent>
+            ) : (
+              <></>
+            )}
+          </Route>
+        ))}
       </TabsContainer>
     </TabsContext.Provider>
   );

package/src/lib/components/tabsv2/useScrollingTabs.ts

@@ -283,7 +283,7 @@ const useScrollingTabs = (selectedTabIndex: number | null | undefined) => {
     scrollSelectedIntoView();
   }, [scrollSelectedIntoView, selectedTabIndex]);
 
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const list = tabsListRef.current;
     const ownerDocument = (list && list.ownerDocument) || document;
     const currentFocus = ownerDocument.activeElement;

package/stories/noresult.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  UnsuccessfulResult,
+  UnsuccessfulResultProps,
+} from '../src/lib/components/UnsuccessfulResult.component.tsx';
+
+type Story = StoryObj<UnsuccessfulResultProps>;
+
+const meta: Meta<UnsuccessfulResultProps> = {
+  title: 'Components/NoResult',
+  component: UnsuccessfulResult,
+};
+
+export default meta;
+
+export const Loading: Story = {
+  render: () => {
+    return <UnsuccessfulResult status="loading" />;
+  },
+};
+
+export const Error: Story = {
+  render: () => {
+    return <UnsuccessfulResult status="error" />;
+  },
+};
+
+export const NoResult: Story = {
+  render: () => {
+    return <UnsuccessfulResult status="noResult" />;
+  },
+};

package/stories/tablev2.stories.tsx

@@ -70,6 +70,8 @@ const columns: Column<Entry>[] = [
     Header: 'First Name',
     accessor: 'firstName',
     cellStyle: {
+      width: 'unset',
+      flex: 2,
       textAlign: 'left',
     },
     Cell: ({ value }) => {
@@ -81,6 +83,8 @@ const columns: Column<Entry>[] = [
     Header: 'Last Name',
     accessor: 'lastName',
     cellStyle: {
+      width: 'unset',
+      flex: 2,
       textAlign: 'left',
     },
     // disable the sorting on this column
@@ -90,7 +94,8 @@ const columns: Column<Entry>[] = [
     Header: 'Age',
     accessor: 'age',
     cellStyle: {
-      width: '50px',
+      width: 'unset',
+      flex: 1,
       textAlign: 'left',
     },
   },
@@ -99,6 +104,8 @@ const columns: Column<Entry>[] = [
     accessor: 'health',
     sortType: 'health',
     cellStyle: {
+      width: 'unset',
+      flex: 1,
       textAlign: 'left',
     },
   },
@@ -119,26 +126,27 @@ export const SimpleContentTable = {
           >
             {location.search}
           </span>
-          <Table columns={columns} data={data} defaultSortingKey={'health'}>
+          <Table
+            columns={columns}
+            data={data}
+            defaultSortingKey={'health'}
+            entityName={{
+              en: {
+                singular: 'user',
+                plural: 'users',
+              },
+            }}
+          >
             <div
               style={{
                 margin: '16px 0',
               }}
             >
-              <Table.SearchWithQueryParams
-                displayedName={{
-                  singular: 'person',
-                  plural: 'persons',
-                }}
-              />
+              <Table.SearchWithQueryParams />
             </div>
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
-              children={(Rows) => {
-                return <>{Rows}</>;
-              }}
             ></Table.SingleSelectableContent>
           </Table>
         </>
@@ -158,7 +166,6 @@ export const SimpleContentTable = {
             <Table.SingleSelectableContent
               rowHeight="h32"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
             />
           </Table>
         </div>
@@ -178,7 +185,6 @@ export const SimpleContentTable = {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
               selectedId={'Rodolph Yohann'}
               onRowSelected={action('Table Row Clicked')}
             />
@@ -211,7 +217,6 @@ export const SimpleContentTable = {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
               onRowSelected={action('Table Row Clicked')}
             />
           </Table>
@@ -233,7 +238,6 @@ export const SimpleContentTable = {
             <Table.MultiSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
               onMultiSelectionChanged={(rows) => {
                 console.log('Table.MultiSelectableContent selected row', rows);
               }}
@@ -290,6 +294,8 @@ export const asyncTable = {
         accessor: 'firstName',
         cellStyle: {
           textAlign: 'left',
+          width: 'unset',
+          flex: 1,
         },
         Cell: renderRowSubComponent,
       },
@@ -298,14 +304,17 @@ export const asyncTable = {
         accessor: 'lastName',
         cellStyle: {
           textAlign: 'left',
+          width: 'unset',
+          flex: 1,
         },
       },
       {
         Header: 'Age',
         accessor: 'age',
         cellStyle: {
-          width: '50px',
           textAlign: 'left',
+          width: 'unset',
+          flex: 0.5,
         },
       },
       {
@@ -314,6 +323,8 @@ export const asyncTable = {
         sortType: 'health',
         cellStyle: {
           textAlign: 'left',
+          width: 'unset',
+          flex: 1,
         },
       },
     ];
@@ -333,13 +344,10 @@ export const asyncTable = {
               data={data}
               defaultSortingKey={'health'}
             >
-              <Table.SearchWithQueryParams
-                displayedName={{ singular: 'user', plural: 'users' }}
-              ></Table.SearchWithQueryParams>
+              <Table.SearchWithQueryParams></Table.SearchWithQueryParams>
               <Table.SingleSelectableContent
                 rowHeight="h40"
                 separationLineVariant="backgroundLevel3"
-                backgroundVariant="backgroundLevel1"
                 selectedId={'Rodolph Yohann'}
                 onRowSelected={action('Table Row Clicked')}
               />
@@ -401,7 +409,6 @@ export const OnBottomCallback = {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
             />
           </Table>
         </div>
@@ -554,14 +561,15 @@ export const EmptyTable = {
   render: (args) => {
     const { background } = args;
     return (
-      <Table columns={columns} data={[]} defaultSortingKey={'firstName'}>
-        <Table.SingleSelectableContent
-          rowHeight="h40"
-          separationLineVariant={background}
-          backgroundVariant="backgroundLevel1"
-          onRowSelected={action('Table Row Clicked')}
-        />
-      </Table>
+      <Box width="500px" height="200px">
+        <Table columns={columns} data={[]} defaultSortingKey={'firstName'}>
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant={background}
+            onRowSelected={action('Table Row Clicked')}
+          />
+        </Table>
+      </Box>
     );
   },
   argTypes: {
@@ -595,7 +603,6 @@ export const LoadingTable = {
           <Table.SingleSelectableContent
             rowHeight="h40"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
           />
         </Table>
       </Box>
@@ -621,7 +628,6 @@ export const ErrorTable = {
           <Table.SingleSelectableContent
             rowHeight="h40"
             separationLineVariant="backgroundLevel4"
-            backgroundVariant="backgroundLevel1"
             locale="en"
           />
         </Table>

package/stories/tabsv2.stories.tsx

@@ -5,15 +5,23 @@ import { Wrapper, Title } from './common';
 import { BrowserRouter } from 'react-router-dom';
 import { brand, spacing } from '../src/lib/style/theme';
 import styled from 'styled-components';
-import { useLocation } from 'react-router';
+import { MemoryRouter, Route, useLocation } from 'react-router';
+
 const Content = styled.div`
   padding: ${spacing.sp24};
   color: ${(props) => props.theme.textPrimary};
+  height: 100%;
 `;
 export default {
   title: 'Components/Navigation/Tabs',
   component: Tabs,
-  decorators: [(story) => <BrowserRouter>{story()}</BrowserRouter>],
+  decorators: [
+    (story) => (
+      <BrowserRouter>
+        <Wrapper style={{ minHeight: '30rem' }}>{story()}</Wrapper>
+      </BrowserRouter>
+    ),
+  ],
   argTypes: {
     activeTabSeparator: {
       control: {
@@ -79,44 +87,52 @@ const DefaultTabsDetails = (props) => {
       <Title>
         {location.pathname} / {location.search}
       </Title>
-      <Tabs {...props}>
-        <Tab path="/iframe.html" label="Users">
-          <Content>Users Content</Content>
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'group',
-          }}
-          label="Groups"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'role @',
-          }}
-          label="Roles"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'policies',
-          }}
-          label="Policies"
-        >
-          {details()}
-        </Tab>
-        <Tab path="/path4" label="Storage Location">
-          <Content>Storage Location Content</Content>
-        </Tab>
-        <Tab path="/path5" label="Properties">
-          <Content>Properties Content</Content>
-        </Tab>
-      </Tabs>
+      <MemoryRouter initialEntries={['/path?tab=group']} initialIndex={0}>
+        <Route
+          path="/:path?"
+          render={() => (
+            <Tabs {...props}>
+              <Tab path="/path" label="Users" withoutPadding>
+                <Content>Users Content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'group',
+                }}
+                label="Groups"
+              >
+                {details()}
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'role',
+                }}
+                label="Roles"
+                withoutPadding
+              >
+                <Content>Roles content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'policies',
+                }}
+                label="Policies"
+              >
+                <Content>Policies content</Content>
+              </Tab>
+              <Tab path="/path4" label="Storage Location">
+                <Content>Storage Location Content</Content>
+              </Tab>
+              <Tab path="/path5" label="Properties">
+                <Content>Properties Content</Content>
+              </Tab>
+            </Tabs>
+          )}
+        />
+      </MemoryRouter>
     </>
   );
 };