@scality/core-ui 0.128.0 → 0.130.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/icon/Icon.component.d.ts

@@ -119,6 +119,8 @@ export declare const iconTable: {
     Desktop: string;
     Globe: string;
     Satellite: string;
+    LightMode: string;
+    DarkMode: string;
 };
 export type IconName = keyof typeof iconTable;
 export type IconColor = keyof CoreUITheme;

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -122,6 +122,8 @@ export const iconTable = {
     Desktop: 'fas faDesktop',
     Globe: 'fas faGlobe',
     Satellite: 'fas faSatelliteDish',
+    LightMode: 'fas faSun',
+    DarkMode: 'fas faMoon',
 };
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {

package/dist/components/inputv2/inputv2.d.ts

@@ -12,8 +12,8 @@ export type InputProps = {
 export declare const Input: import("react").ForwardRefExoticComponent<{
     error?: string | undefined;
     id: string;
-    leftIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | undefined;
-    rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | undefined;
+    leftIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | "LightMode" | "DarkMode" | undefined;
+    rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | "LightMode" | "DarkMode" | undefined;
     size?: InputSize | undefined;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=inputv2.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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.128.0",
+  "version": "0.130.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/icon/Icon.component.tsx

@@ -131,6 +131,8 @@ export const iconTable = {
   Desktop: 'fas faDesktop',
   Globe: 'fas faGlobe',
   Satellite: 'fas faSatelliteDish',
+  LightMode: 'fas faSun',
+  DarkMode: 'fas faMoon',
 };
 
 const IconStyled = styled(FontAwesomeIcon)`

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/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>