@scality/core-ui 0.116.0 → 0.118.0

package/dist/components/navbar/Navbar.component.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled, { css } from 'styled-components';
 import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
 import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
-import { Button } from '../button/Button.component';
 import { Dropdown } from '../dropdown/Dropdown.component';
 import { Icon } from '../icon/Icon.component';
+import { Button, FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const NavbarContainer = styled.div `
   height: ${navbarHeight};
   display: flex;
@@ -19,8 +19,7 @@ const NavbarContainer = styled.div `
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: ${spacing.r1} solid
-      ${getThemePropSelector('backgroundLevel1')};
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
   `};
 `;
 const NavbarMenu = styled.div `
@@ -56,6 +55,11 @@ const NavbarTabs = styled.div `
           font-weight: bold;
           border-bottom-color: ${selectedActive};
         }
+        // :focus-visible is the keyboard-only version of :focus
+        &:focus-visible {
+          ${FocusVisibleStyle}
+          color: ${props.theme.textPrimary};
+        }
       `;
 }};
   }
@@ -76,6 +80,11 @@ const TabItem = styled.div `
         border-top: ${spacing.r2} solid;
         cursor: pointer;
       }
+      // :focus-visible is the keyboard-only version of :focus
+      &:focus-visible {
+        ${FocusVisibleStyle}
+        color: ${props.theme.textPrimary};
+      }
     `;
 }};
   ${(props) => props.selected &&
@@ -111,6 +120,11 @@ const NavbarMenuItem = styled.div `
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
+    // :focus-visible is the keyboard-only version of :focus
+    &:focus-visible {
+      ${FocusVisibleStyle}
+      color: ${(props) => props.theme.textPrimary};
+    }
     width: ${navbarItemWidth};
   }
 `;
@@ -129,7 +143,7 @@ const getActionRenderer = ({ type, items = null, ...rest }, index) => {
         return items ? (_jsx(Dropdown, { size: "larger", variant: "backgroundLevel1", items: items, caret: false, ...rest }, `navbar_right_action_${index}`)) : null;
     }
     else if (type === 'button') {
-        return (_jsx(Button, { size: "larger", variant: "backgroundLevel1", ...rest }, `navbar_right_action_${index}`));
+        return _jsx(Button, { ...rest }, `navbar_right_action_${index}`);
     }
     else if (type === 'custom') {
         return _jsx(rest.render, {}, `navbar_right_action_${index}`);
@@ -137,7 +151,10 @@ const getActionRenderer = ({ type, items = null, ...rest }, index) => {
     return null;
 };
 function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest }) {
-    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { size: "larger", variant: "backgroundLevel1", icon: _jsx(Icon, { name: "Lat-menu" }), title: "Main Menu" }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick }, index) => {
+    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { icon: _jsx(Icon, { name: "Lat-menu" }), title: "Main Menu" }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick, render }, index) => {
+                    if (render) {
+                        return (_jsx(Fragment, { children: render }, `navbar_tab_item_${index}`));
+                    }
                     return link ? (React.cloneElement(link, {
                         className: selected ? 'selected' : '',
                         'aria-selected': selected,

package/dist/components/sidebar/Sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6HF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAqDP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAcA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAsIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAgEP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sidebar/Sidebar.component.js

@@ -6,6 +6,7 @@ import { getThemePropSelector } from '../../utils';
 import { Button } from '../button/Button.component';
 import { Icon } from '../icon/Icon.component';
 import { spacing } from '../../spacing';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const Wrapper = styled.div `
   flex-shrink: 0;
   ${(props) => {
@@ -71,6 +72,9 @@ const SidebarContainer = styled.div `
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
+    &:focus-visible {
+      ${FocusVisibleStyle}
+    }
     height: ${sidebarItemHeight};
     width: ${sidebarWidth};
     padding: 0px;
@@ -93,12 +97,18 @@ const SidebarItem = styled.div `
           background-color: ${highlight};
           color: ${textPrimary};
           cursor: default;
+          &:focus-visible {
+            ${FocusVisibleStyle}
+          }
         `
         : css `
           &:hover {
             background-color: ${highlight};
             color: ${textPrimary};
           }
+          &:focus-visible {
+            ${FocusVisibleStyle}
+          }
           &:active {
             background-color: ${highlight};
             color: ${textPrimary};
@@ -130,7 +140,14 @@ function Sidebar({ expanded, actions, onToggleClick, hoverable, ...rest }) {
                             setHovered(false);
                             onToggleClick();
                         } }) })), actions.map(({ active, label, onClick, icon = null, ...actionRest }, index) => {
-                    return (_jsxs(SidebarItem, { className: "sc-sidebar-item", active: active, title: label, onClick: onClick, ...actionRest, children: [!!icon && _jsx(MenuItemIcon, { children: icon }), (expanded || (hoverable && hovered)) && (_jsx(MenuItemText, { children: label })), active && _jsx(MenuItemSelected, {})] }, index));
+                    return (_jsxs(SidebarItem, { className: "sc-sidebar-item", active: active, title: label, onClick: onClick, onKeyDown: (event) => {
+                            if (event.key === ' ' ||
+                                event.key === 'Enter' ||
+                                event.key === 'Spacebar') {
+                                event.preventDefault();
+                                onClick(event);
+                            }
+                        }, tabIndex: 0, ...actionRest, children: [!!icon && _jsx(MenuItemIcon, { children: icon }), (expanded || (hoverable && hovered)) && (_jsx(MenuItemText, { children: label })), active && _jsx(MenuItemSelected, {})] }, index));
                 })] }) }));
 }
 export { Sidebar };

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAWlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAqBtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,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;;GAEG;AAcH,eAAO,MAAM,sBAAsB,sSAwPlC,CAAC"}
+{"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAWlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAqBtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,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;;GAEG;AAcH,eAAO,MAAM,sBAAsB,sSAwQlC,CAAC"}

package/dist/components/tablev2/MultiSelectableContent.js

@@ -111,7 +111,16 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
                         const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
                             style: { ...column === null || column === void 0 ? void 0 : column.cellStyle, position: 'relative' },
                         }));
-                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", children: _jsxs("div", { children: [column.id === 'selection' ? (_jsx("div", { onClick: (event) => {
+                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", tabIndex: !column.disableSortBy ? 0 : undefined, onKeyDown: (event) => {
+                                if (!column.disableSortBy &&
+                                    (event.key === ' ' ||
+                                        event.key === 'Enter' ||
+                                        event.key === 'Spacebar')) {
+                                    event.preventDefault();
+                                    // @ts-expect-error - getSortByToggleProps is joined to getHeaderProps
+                                    headerStyleProps.onClick(event);
+                                }
+                            }, children: _jsxs("div", { children: [column.id === 'selection' ? (_jsx("div", { onClick: (event) => {
                                             const eventTarget = event.target;
                                             if (onToggleAll) {
                                                 onToggleAll(eventTarget.checked);

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;AAUlC,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;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;IACpC,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;AAgBF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAC1C,iBAAsC,EACtC,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,CAAC,QAAQ,CAAC,eA6JxC"}
+{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUlC,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;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;IACpC,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;AAgBF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAC1C,iBAAsC,EACtC,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,CAAC,QAAQ,CAAC,eAyLxC"}

package/dist/components/tablev2/SingleSelectableContent.js

@@ -43,6 +43,16 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
                     if (onRowSelected)
                         return onRowSelected(row);
                 },
+                tabIndex: onRowSelected ? 0 : undefined,
+                onKeyDown: (event) => {
+                    if (onRowSelected &&
+                        (event.key === ' ' ||
+                            event.key === 'Enter' ||
+                            event.key === 'Spacebar')) {
+                        event.preventDefault();
+                        onRowSelected(row);
+                    }
+                },
             },
         };
         return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant, backgroundVariant: backgroundVariant, selectedId: selectedId, className: "tr", children: row.cells.map((cell) => {
@@ -70,6 +80,15 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
                         const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
                             style: { ...column.cellStyle, position: 'relative' },
                         }));
-                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
+                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", tabIndex: !column.disableSortBy ? 0 : undefined, onKeyDown: (event) => {
+                                if (!column.disableSortBy &&
+                                    (event.key === ' ' ||
+                                        event.key === 'Enter' ||
+                                        event.key === 'Spacebar')) {
+                                    event.preventDefault();
+                                    // @ts-expect-error - getSortByToggleProps is joined to getHeaderProps
+                                    headerStyleProps.onClick(event);
+                                }
+                            }, children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
                     }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: typeof children === 'function' ? (children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }))) : rows.length ? (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow })) : (_jsx(NoResult, { children: translations[locale].noResult })) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
 }

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

@@ -5,6 +5,7 @@ export declare const SortIncentive: import("styled-components").StyledComponent<
 export declare const SortCaretWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const TableHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     headerHeight?: string | number | undefined;
+    tabIndex: number | undefined;
 }, never>;
 type HeadRowType = {
     hasScrollBar: boolean;

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":";AAGA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;SAUvB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,kHAcnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAqCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIA8BnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAIrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,yGAMpB,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}
+{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,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;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,kHAanB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAwCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIA8BnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAIrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,yGAMpB,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}

package/dist/components/tablev2/Tablestyle.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { spacing } from '../../style/theme';
 import { tableRowHeight, } from './TableUtils';
 import { Icon } from '../icon/Icon.component';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const borderSize = '4px';
 export const SortIncentive = styled.span `
   position: absolute;
@@ -17,11 +18,17 @@ export const TableHeader = styled.div `
   flex-direction: column;
   justify-content: center;
   height: ${(props) => props.headerHeight};
+  cursor: ${(props) => props.tabIndex !== undefined && props.tabIndex >= 0
+    ? 'pointer'
+    : 'default'};
   &:hover {
     ${SortIncentive} {
       display: block;
     }
   }
+  &:focus-visible {
+    ${FocusVisibleStyle}
+  }
 `;
 export const HeadRow = styled.div `
   display: flex;
@@ -32,7 +39,6 @@ export const HeadRow = styled.div `
     : `calc(100% - ${borderSize} ) !important;`}
   height: ${(props) => tableRowHeight[props.rowHeight]}rem;
   table-layout: fixed;
-  cursor: pointer;
   color: ${(props) => props.theme.textPrimary};
   font-weight: bold;
   overflow: hidden;
@@ -57,6 +63,9 @@ export const TableRow = styled.div `
           outline: none;
           cursor: pointer;
         }
+        &:focus-visible {
+          ${FocusVisibleStyle}
+        }
       `;
     }
 }}

package/dist/components/text/Text.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAE1D;AACD,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;SA+ChB,CAAC;AAEF,eAAO,MAAM,IAAI,uGAehB,CAAC"}
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAE1D;AACD,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;SA+ChB,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}

package/dist/components/text/Text.component.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const BasicTextStyle = styled.span `
   color: ${(props) => props.theme.textPrimary};
   font-size: 1rem;
@@ -148,7 +149,6 @@ export const Link = styled.a `
   }
   // :focus-visible is the keyboard-only version of :focus
   &:focus-visible {
-    outline: dashed ${spacing.r2} ${(props) => props.theme.textLink};
-    outline-offset: ${spacing.r2};
+    ${FocusVisibleStyle}
   }
 `;

package/dist/index.d.ts

@@ -62,4 +62,5 @@ export { useMutationsHandler } from './components/toast/useMutationsHandler';
 export { Stepper } from './components/steppers/Stepper.component';
 export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
+export { InlineInput } from './components/inlineinput/InlineInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -62,3 +62,4 @@ export { useMutationsHandler } from './components/toast/useMutationsHandler';
 export { Stepper } from './components/steppers/Stepper.component';
 export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
+export { InlineInput } from './components/inlineinput/InlineInput';

package/dist/spacing.js

@@ -35,7 +35,7 @@ export const spacing = {
 const HSeparator = styled.div `
   min-height: ${spacing.r40};
   min-width: ${spacing.r2};
-  background: ${(props) => props.theme.backgroundLevel1};
+  background: ${(props) => props.theme.border};
 `;
 const VSeparator = styled.div `
   height: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -64,7 +64,6 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.0",
-    "downshift": "^7.0.5",
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.6.15",
@@ -95,21 +94,22 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
-    "@storybook/preview-api": "^7.6.6",
-    "framer-motion": "^4.1.17",
-    "react-hook-form": "^7.49.2",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
+    "@storybook/preview-api": "^7.6.6",
+    "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
+    "downshift": "^7.0.5",
     "react": "^17.0.2",
     "react-debounce-input": "3.2.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -4,6 +4,13 @@ import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
 import { Tooltip, Props as TooltipProps } from '../tooltip/Tooltip.component';
+
+export const FocusVisibleStyle = css`
+  outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
+  outline-offset: ${spacing.r2};
+  z-index: 1000;
+`;
+
 export type Props = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'size' | 'label'
@@ -54,8 +61,7 @@ export const ButtonStyled = styled.button<Props>`
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -76,8 +82,7 @@ export const ButtonStyled = styled.button<Props>`
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -97,8 +102,7 @@ export const ButtonStyled = styled.button<Props>`
             border: ${spacing.r1} solid ${brand.infoPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
           }
           &:active:enabled {
             cursor: pointer;
@@ -117,8 +121,7 @@ export const ButtonStyled = styled.button<Props>`
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             border-color: ${brand.buttonSecondary};
           }
           &:active:enabled {

package/src/lib/components/card/Card.component.tsx

@@ -1,8 +1,9 @@
 // @ts-nocheck
 import { HTMLProps } from 'react';
 import { createContext } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { hex2RGB } from '../../utils';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const CardContext = createContext(null);
 type CardElementProps = {
   children: React.ReactNode;
@@ -101,18 +102,17 @@ const StyledCard = styled.div<{
 
   ${(props) =>
     props.onClick && !props.disabled
-      ? `
-      cursor: pointer;
+      ? css`
+          cursor: pointer;
 
-      &:hover {
-        box-shadow: 0 0 0 2px ${props.theme.highlight};
-      }
+          &:hover {
+            box-shadow: 0 0 0 2px ${props.theme.highlight};
+          }
 
-      &:focus {
-        outline: 2px solid ${props.theme.buttonSecondary};
-        outline-offset: 2px;
-      }
-    `
+          &:focus {
+            ${FocusVisibleStyle}
+          }
+        `
       : ''};
 
   &.active {

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { spacing, Stack } from '../../spacing';
 
 import { Text } from '../text/Text.component';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
 type Props = {
   label?: string;
@@ -113,8 +114,7 @@ const StyledCheckbox = styled.label<{
   }
 
   [type='checkbox']:focus-visible:enabled {
-    outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
-    outline-offset: ${spacing.r2};
+    ${FocusVisibleStyle}
   }
 
   /* Disabled */