@scality/core-ui 0.126.0 → 0.127.0

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

@@ -1 +1 @@
-{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAgFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GAsDX,CAAC"}
+{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAwFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GAsDX,CAAC"}

package/dist/components/inputv2/inputv2.js

@@ -40,6 +40,14 @@ const StyledInput = styled.input `
     border: 0;
     outline: none;
   }
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-text-fill-color: ${(props) => props.theme.textPrimary};
+    -webkit-background-clip: text;
+    caret-color: ${(props) => props.theme.textPrimary};
+  }
 `;
 const InputContainer = styled.div `
   height: 100%;

package/dist/components/searchinput/SearchInput.component.d.ts

@@ -10,6 +10,7 @@ export type Props = {
     disabled?: boolean;
     id?: string;
     size?: InputSize;
+    autoComplete?: 'on' | 'off';
 };
 declare const SearchInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
 export { SearchInput };

package/dist/components/searchinput/SearchInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAwFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/searchinput/SearchInput.component.js

@@ -38,7 +38,7 @@ const ClearButton = styled.div `
   right: 1px;
   top: 0px;
 `;
-const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, onReset, disabled, id, size, ...rest }, forwardedRef) => {
+const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', ...rest }, forwardedRef) => {
     const myInputRef = useRef(null);
     const debounce = useRef(null);
     const [debouncedValue, setDebouncedValue] = useState(value);
@@ -64,7 +64,7 @@ const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, o
             onChange(e);
         }, 300);
     };
-    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: "Search", className: "search-box", disabled: disabled, ref: (element) => {
+    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { autoComplete: autoComplete, min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: "Search", className: "search-box", disabled: disabled, ref: (element) => {
                     myInputRef.current = element;
                     if (typeof forwardedRef === 'function') {
                         forwardedRef(element);

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":"AAKA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAwBvB,CAAC;AACF,eAAO,MAAM,UAAU;;SAMtB,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;;SAUtB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}

package/dist/components/tabsv2/StyledTabs.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { getThemePropSelector } from '../../utils';
 import { spacing } from '../../spacing';
 export const TabBar = styled.div `
   display: flex;
@@ -16,7 +15,7 @@ export const TabItem = styled.div `
   &:focus-visible {
     outline: 0;
     position: relative;
-    border: ${spacing.r1} dashed ${getThemePropSelector('selectedActive')};
+    border: ${spacing.r1} dashed ${(props) => props.theme.selectedActive};
   }
 
   &:focus-within {
@@ -51,6 +50,7 @@ export const TabItem = styled.div `
 `;
 export const TabsContainer = styled.div `
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   background-color: ${(props) => props.tabLineColor || props.theme.backgroundLevel3};
@@ -75,7 +75,11 @@ export const TabsContainer = styled.div `
 export const TabContent = styled.div `
   margin: 0;
   padding: 0;
-  flex: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
   background-color: ${(props) => props.tabContentColor || props.theme.backgroundLevel4};
 `;
 export const ScrollableContainer = styled.div `

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,eA4LX;kBAvMQ,IAAI;;;AA2Mb,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":"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"}

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

@@ -79,7 +79,7 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
                 }
             }, ...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));
     });
-    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { 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('/')
+    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))) })] }) }));

package/dist/organisms/attachments/AttachmentTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AA0FF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RAsiB3B,CAAC"}
+{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAmFF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RAqiB3B,CAAC"}

package/dist/organisms/attachments/AttachmentTable.js

@@ -18,10 +18,7 @@ const MenuContainer = styled.ul `
   position: absolute;
   width: ${(props) => props.width};
   z-index: 1;
-  margin-top: -1.7rem;
-  margin-left: 0;
-  margin-bottom: 0;
-  margin-right: 0;
+  margin: 0;
   ${(props) => props.isOpen
     ? `
       border-top-left-radius: 0;
@@ -44,25 +41,22 @@ const MenuContainer = styled.ul `
   }
 `;
 const SearchBoxContainer = styled.div `
+  position: relative;
   padding: ${spacing.r16};
 `;
 const StyledSearchInput = styled(SearchInput) `
   flex-grow: 1;
-  .sc-input-type:focus {
-    border-bottom: 0;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 0;
+
+  & > div:focus-within {
+    border-color: ${(props) => props.theme.selectedActive};
     border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 0;
   }
 `;
 const AttachmentTableContainer = styled.div `
   height: 100%;
 `;
-const StyledTable = styled.div `
-  background: ${(props) => props.theme.backgroundLevel4};
-  height: 100%;
-`;
 const CenterredSecondaryText = styled(SecondaryText) `
   display: block;
   text-align: center;
@@ -261,118 +255,118 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
     // UI styling states
     const [searchWidth, setSearchWidth] = useState('0px');
     const [searchInputIsFocused, setSearchInputIsFocused] = useState(false);
-    return (_jsxs(AttachmentTableContainer, { children: [_jsx(SearchBoxContainer, { ref: (element) => {
+    return (_jsxs(Table, { columns: [
+            {
+                Header: 'Name',
+                accessor: 'name',
+                cellStyle: {
+                    flex: 1.5,
+                    marginRight: '1.5rem',
+                },
+                Cell: ({ value, row: { original: entity }, }) => {
+                    const { data: asyncName, status } = useQuery({
+                        ...(getNameQuery
+                            ? getNameQuery(entity)
+                            : { queryKey: ['fakeQuery'], queryFn: () => value }),
+                        enabled: !value,
+                    });
+                    if (value) {
+                        return _jsx(ConstrainedText, { text: value, lineClamp: 2 });
+                    }
+                    if (status === 'error') {
+                        return (_jsxs(_Fragment, { children: ["An error occured while loading ", entityName.singular, " name"] }));
+                    }
+                    if (status === 'loading' || status === 'idle') {
+                        return _jsx(_Fragment, { children: "Loading..." });
+                    }
+                    if (status === 'success') {
+                        if (!asyncName) {
+                            return _jsx(EmptyCell, {});
+                        }
+                        return _jsx(ConstrainedText, { text: asyncName, lineClamp: 2 });
+                    }
+                    return _jsx(EmptyCell, {});
+                },
+            },
+            {
+                Header: 'Attachment',
+                accessor: 'isPending',
+                cellStyle: {
+                    flex: 0.5,
+                },
+                Cell: ({ value }) => {
+                    return value ? _jsx(_Fragment, { children: "Pending" }) : _jsx(_Fragment, { children: "Attached" });
+                },
+            },
+            {
+                Header: _jsx(Box, { flex: 0.5 }),
+                accessor: 'action',
+                cellStyle: {
+                    textAlign: 'right',
+                    flex: 0.5,
+                    marginLeft: 'auto',
+                    marginRight: '0.5rem',
+                },
+                Cell: ({ row: { original: entity }, }) => (_jsx(Button, { size: "inline", onClick: () => {
+                        dispatch({
+                            action: AttachmentAction.REMOVE,
+                            entity: {
+                                name: entity.name,
+                                id: entity.id,
+                                type: entity.type,
+                            },
+                        });
+                    }, icon: _jsx(Icon, { name: "Close" }), label: "Remove", variant: "danger", disabled: !!entity.disableDetach })),
+            },
+        ], data: desiredAttachedEntities.map((entity) => ({
+            ...entity,
+            isPending: entity.isPending || false,
+            action: null,
+        })), defaultSortingKey: "name", children: [_jsxs(SearchBoxContainer, { ref: (element) => {
                     if (element === null || element === void 0 ? void 0 : element.firstElementChild) {
                         setSearchWidth(element.firstElementChild.getBoundingClientRect().width -
                             2 +
                             'px');
                     }
-                }, children: filteredEntities.status === 'error' ? (_jsx(Tooltip, { overlay: _jsx(_Fragment, { children: "We failed to load the entities, hence search is disabled" }), children: _jsxs(Stack, { children: [_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
-                                    ref: (element) => {
-                                        if (element)
-                                            searchInputRef.current = element;
-                                    },
-                                }), onFocus: () => {
-                                    openMenu();
-                                    setSearchInputIsFocused(true);
-                                }, onBlur: () => {
-                                    setSearchInputIsFocused(false);
-                                }, disableToggle: true, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
-                        ref: (element) => {
-                            if (element)
-                                searchInputRef.current = element;
-                        },
-                    }), onFocus: () => {
-                        openMenu();
-                        setSearchInputIsFocused(true);
-                    }, onBlur: () => {
-                        setSearchInputIsFocused(false);
-                    }, disableToggle: true })) }), _jsxs(MenuContainer, { ...getMenuProps(), width: searchWidth, isOpen: isOpen, searchInputIsFocused: searchInputIsFocused, children: [isOpen &&
-                        filteredEntities.status === 'success' &&
-                        ((_a = filteredEntities.data) === null || _a === void 0 ? void 0 : _a.entities.map((item, index) => (_jsx("li", { ...getItemProps({ item, index }), children: _jsx(Text, { children: item.name }) }, `${item.id}${index}`)))), isOpen && filteredEntities.status === 'loading' && (_jsx("li", { children: _jsx(Text, { children: "Searching..." }) })), isOpen && filteredEntities.status === 'error' && (_jsx("li", { children: _jsx(Text, { color: "statusCritical", children: "An error occured while searching" }) })), isOpen &&
-                        filteredEntities.status === 'success' &&
-                        (((_b = filteredEntities.data) === null || _b === void 0 ? void 0 : _b.number) || 0) >
-                            ((_c = filteredEntities.data) === null || _c === void 0 ? void 0 : _c.entities.length) && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", style: { textAlign: 'right' }, children: ["There", ' ', (((_d = filteredEntities.data) === null || _d === void 0 ? void 0 : _d.number) || 0) -
-                                    ((_e = filteredEntities.data) === null || _e === void 0 ? void 0 : _e.entities.length) ===
-                                    1
-                                    ? 'is'
-                                    : 'are', ' ', (((_f = filteredEntities.data) === null || _f === void 0 ? void 0 : _f.number) || 0) -
-                                    ((_g = filteredEntities.data) === null || _g === void 0 ? void 0 : _g.entities.length), ' ', "more", ' ', (((_h = filteredEntities.data) === null || _h === void 0 ? void 0 : _h.number) || 0) -
-                                    ((_j = filteredEntities.data) === null || _j === void 0 ? void 0 : _j.entities.length) ===
-                                    1
-                                    ? entityName.singular
-                                    : entityName.plural, ' ', "matching your search. Suggestion: try more specific search expression."] }) })), isOpen &&
-                        filteredEntities.status === 'success' &&
-                        ((_k = filteredEntities.data) === null || _k === void 0 ? void 0 : _k.entities.length) === 0 && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", children: ["No ", entityName.plural, " found matching your search."] }) }))] }), _jsx(StyledTable, { children: _jsx(Table, { columns: [
-                        {
-                            Header: 'Name',
-                            accessor: 'name',
-                            cellStyle: {
-                                flex: 1.5,
-                                marginRight: '1.5rem',
-                            },
-                            Cell: ({ value, row: { original: entity }, }) => {
-                                const { data: asyncName, status } = useQuery({
-                                    ...(getNameQuery
-                                        ? getNameQuery(entity)
-                                        : { queryKey: ['fakeQuery'], queryFn: () => value }),
-                                    enabled: !value,
-                                });
-                                if (value) {
-                                    return _jsx(ConstrainedText, { text: value, lineClamp: 2 });
-                                }
-                                if (status === 'error') {
-                                    return (_jsxs(_Fragment, { children: ["An error occured while loading ", entityName.singular, " name"] }));
-                                }
-                                if (status === 'loading' || status === 'idle') {
-                                    return _jsx(_Fragment, { children: "Loading..." });
-                                }
-                                if (status === 'success') {
-                                    if (!asyncName) {
-                                        return _jsx(EmptyCell, {});
-                                    }
-                                    return _jsx(ConstrainedText, { text: asyncName, lineClamp: 2 });
-                                }
-                                return _jsx(EmptyCell, {});
-                            },
-                        },
-                        {
-                            Header: 'Attachment',
-                            accessor: 'isPending',
-                            cellStyle: {
-                                flex: 0.5,
-                            },
-                            Cell: ({ value }) => {
-                                return value ? _jsx(_Fragment, { children: "Pending" }) : _jsx(_Fragment, { children: "Attached" });
-                            },
-                        },
-                        {
-                            Header: _jsx(Box, { flex: 0.5 }),
-                            accessor: 'action',
-                            cellStyle: {
-                                textAlign: 'right',
-                                flex: 0.5,
-                                marginLeft: 'auto',
-                                marginRight: '0.5rem',
-                            },
-                            Cell: ({ row: { original: entity }, }) => (_jsx(Button, { size: "inline", onClick: () => {
-                                    dispatch({
-                                        action: AttachmentAction.REMOVE,
-                                        entity: {
-                                            name: entity.name,
-                                            id: entity.id,
-                                            type: entity.type,
+                }, children: [filteredEntities.status === 'error' ? (_jsx(Tooltip, { overlay: _jsx(_Fragment, { children: "We failed to load the entities, hence search is disabled" }), children: _jsxs(Stack, { children: [_jsx(StyledSearchInput, { autoComplete: "off", placeholder: searchEntityPlaceholder, ...getInputProps({
+                                        ref: (element) => {
+                                            if (element)
+                                                searchInputRef.current = element;
                                         },
-                                    });
-                                }, icon: _jsx(Icon, { name: "Close" }), label: "Remove", variant: "danger", disabled: !!entity.disableDetach })),
-                        },
-                    ], data: desiredAttachedEntities.map((entity) => ({
-                        ...entity,
-                        isPending: entity.isPending || false,
-                        action: null,
-                    })), defaultSortingKey: "name", children: _jsx(Table.SingleSelectableContent, { rowHeight: rowHeight, separationLineVariant: "backgroundLevel2", children: (rows) => (_jsxs(_Fragment, { children: [initiallyAttachedEntitiesStatus === 'idle' ||
-                                    initiallyAttachedEntitiesStatus === 'loading' ? (_jsxs(Wrap, { style: { height: `${tableRowHeight[rowHeight]}rem` }, children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Loader, {}), _jsxs(Text, { children: ["Loading ", entityName.plural, "..."] })] }), _jsx("p", {})] })) : initiallyAttachedEntitiesStatus === 'error' ? (_jsxs(Stack, { style: {
-                                        justifyContent: 'center',
-                                        height: `${tableRowHeight[rowHeight]}rem`,
-                                    }, children: [_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" }), _jsxs(Text, { color: "textSecondary", children: ["Failed to load attached ", entityName.plural, "."] })] })) : (desiredAttachedEntities.length === 0 && (_jsxs(CenterredSecondaryText, { children: ["No ", entityName.plural, " attached"] }))), desiredAttachedEntities.length > 0 && rows] })) }) }) })] }));
+                                    }), onFocus: () => {
+                                        openMenu();
+                                        setSearchInputIsFocused(true);
+                                    }, onBlur: () => {
+                                        setSearchInputIsFocused(false);
+                                    }, disableToggle: true, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { autoComplete: "off", placeholder: searchEntityPlaceholder, ...getInputProps({
+                            ref: (element) => {
+                                if (element)
+                                    searchInputRef.current = element;
+                            },
+                        }), onFocus: () => {
+                            openMenu();
+                            setSearchInputIsFocused(true);
+                        }, onBlur: () => {
+                            setSearchInputIsFocused(false);
+                        }, disableToggle: true, searchInputIsFocused: searchInputIsFocused })), _jsxs(MenuContainer, { ...getMenuProps(), width: searchWidth, isOpen: isOpen, searchInputIsFocused: searchInputIsFocused, children: [isOpen &&
+                                filteredEntities.status === 'success' &&
+                                ((_a = filteredEntities.data) === null || _a === void 0 ? void 0 : _a.entities.map((item, index) => (_jsx("li", { ...getItemProps({ item, index }), children: _jsx(Text, { children: item.name }) }, `${item.id}${index}`)))), isOpen && filteredEntities.status === 'loading' && (_jsx("li", { children: _jsx(Text, { children: "Searching..." }) })), isOpen && filteredEntities.status === 'error' && (_jsx("li", { children: _jsx(Text, { color: "statusCritical", children: "An error occured while searching" }) })), isOpen &&
+                                filteredEntities.status === 'success' &&
+                                (((_b = filteredEntities.data) === null || _b === void 0 ? void 0 : _b.number) || 0) >
+                                    ((_c = filteredEntities.data) === null || _c === void 0 ? void 0 : _c.entities.length) && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", style: { textAlign: 'right' }, children: ["There", ' ', (((_d = filteredEntities.data) === null || _d === void 0 ? void 0 : _d.number) || 0) -
+                                            ((_e = filteredEntities.data) === null || _e === void 0 ? void 0 : _e.entities.length) ===
+                                            1
+                                            ? 'is'
+                                            : 'are', ' ', (((_f = filteredEntities.data) === null || _f === void 0 ? void 0 : _f.number) || 0) -
+                                            ((_g = filteredEntities.data) === null || _g === void 0 ? void 0 : _g.entities.length), ' ', "more", ' ', (((_h = filteredEntities.data) === null || _h === void 0 ? void 0 : _h.number) || 0) -
+                                            ((_j = filteredEntities.data) === null || _j === void 0 ? void 0 : _j.entities.length) ===
+                                            1
+                                            ? entityName.singular
+                                            : entityName.plural, ' ', "matching your search. Suggestion: try more specific search expression."] }) })), isOpen &&
+                                filteredEntities.status === 'success' &&
+                                ((_k = filteredEntities.data) === null || _k === void 0 ? void 0 : _k.entities.length) === 0 && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", children: ["No ", entityName.plural, " found matching your search."] }) }))] })] }), _jsx(Table.SingleSelectableContent, { rowHeight: rowHeight, separationLineVariant: "backgroundLevel2", children: (rows) => (_jsxs(_Fragment, { children: [initiallyAttachedEntitiesStatus === 'idle' ||
+                            initiallyAttachedEntitiesStatus === 'loading' ? (_jsxs(Wrap, { style: { height: `${tableRowHeight[rowHeight]}rem` }, children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Loader, {}), _jsxs(Text, { children: ["Loading ", entityName.plural, "..."] })] }), _jsx("p", {})] })) : initiallyAttachedEntitiesStatus === 'error' ? (_jsxs(Stack, { style: {
+                                justifyContent: 'center',
+                                height: `${tableRowHeight[rowHeight]}rem`,
+                            }, children: [_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" }), _jsxs(Text, { color: "textSecondary", children: ["Failed to load attached ", entityName.plural, "."] })] })) : (desiredAttachedEntities.length === 0 && (_jsxs(CenterredSecondaryText, { children: ["No ", entityName.plural, " attached"] }))), desiredAttachedEntities.length > 0 && rows] })) })] }));
 };

package/package.json

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

package/src/lib/components/inputv2/inputv2.tsx

@@ -39,6 +39,14 @@ const StyledInput = styled.input<{ hasIcon: boolean }>`
     border: 0;
     outline: none;
   }
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-text-fill-color: ${(props) => props.theme.textPrimary};
+    -webkit-background-clip: text;
+    caret-color: ${(props) => props.theme.textPrimary};
+  }
 `;
 
 const InputContainer = styled.div<{

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -14,6 +14,7 @@ export type Props = {
   disabled?: boolean;
   id?: string;
   size?: InputSize;
+  autoComplete?: 'on' | 'off';
 };
 const SearchInputContainer = styled.div<{
   docked?: boolean;
@@ -64,6 +65,7 @@ const SearchInput = forwardRef(
       disabled,
       id,
       size,
+      autoComplete = 'on',
       ...rest
     }: Props,
     forwardedRef,
@@ -105,6 +107,7 @@ const SearchInput = forwardRef(
         {...rest}
       >
         <Input
+          autoComplete={autoComplete}
           min={'1'}
           id={id || 'search'}
           type="search"

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

@@ -1,6 +1,4 @@
 import styled from 'styled-components';
-
-import { getThemePropSelector } from '../../utils';
 import { spacing } from '../../spacing';
 
 export const TabBar = styled.div`
@@ -24,7 +22,7 @@ export const TabItem = styled.div<{
   &:focus-visible {
     outline: 0;
     position: relative;
-    border: ${spacing.r1} dashed ${getThemePropSelector('selectedActive')};
+    border: ${spacing.r1} dashed ${(props) => props.theme.selectedActive};
   }
 
   &:focus-within {
@@ -63,6 +61,7 @@ export const TabsContainer = styled.div<{
   separatorColor: string;
 }>`
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   background-color: ${(props) =>
@@ -88,7 +87,11 @@ export const TabsContainer = styled.div<{
 export const TabContent = styled.div<{ tabContentColor?: string }>`
   margin: 0;
   padding: 0;
-  flex: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
   background-color: ${(props) =>
     props.tabContentColor || props.theme.backgroundLevel4};
 `;

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

@@ -181,6 +181,7 @@ function Tabs({
   return (
     <TabsContext.Provider value={true}>
       <TabsContainer
+        style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
         tabLineColor={tabLineColor}
         separatorColor={separatorColor}

package/src/lib/organisms/attachments/AttachmentTable.tsx

@@ -77,10 +77,7 @@ const MenuContainer = styled.ul<{
   position: absolute;
   width: ${(props) => props.width};
   z-index: 1;
-  margin-top: -1.7rem;
-  margin-left: 0;
-  margin-bottom: 0;
-  margin-right: 0;
+  margin: 0;
   ${(props) =>
     props.isOpen
       ? `
@@ -105,17 +102,18 @@ const MenuContainer = styled.ul<{
 `;
 
 const SearchBoxContainer = styled.div`
+  position: relative;
   padding: ${spacing.r16};
 `;
 
-const StyledSearchInput = styled(SearchInput)`
+const StyledSearchInput = styled(SearchInput)<{ searchInputIsFocused }>`
   flex-grow: 1;
-  .sc-input-type:focus {
-    border-bottom: 0;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 0;
+
+  & > div:focus-within {
+    border-color: ${(props) => props.theme.selectedActive};
     border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 0;
   }
 `;
 
@@ -123,11 +121,6 @@ const AttachmentTableContainer = styled.div`
   height: 100%;
 `;
 
-const StyledTable = styled.div`
-  background: ${(props) => props.theme.backgroundLevel4};
-  height: 100%;
-`;
-
 const CenterredSecondaryText = styled(SecondaryText)`
   display: block;
   text-align: center;
@@ -471,7 +464,101 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   const [searchInputIsFocused, setSearchInputIsFocused] = useState(false);
 
   return (
-    <AttachmentTableContainer>
+    <Table
+      columns={[
+        {
+          Header: 'Name',
+          accessor: 'name',
+          cellStyle: {
+            flex: 1.5,
+            marginRight: '1.5rem',
+          },
+          Cell: ({
+            value,
+            row: { original: entity },
+          }: {
+            value: string;
+            row: { original: AttachableEntity<ENTITY_TYPE> };
+          }) => {
+            const { data: asyncName, status } = useQuery({
+              ...(getNameQuery
+                ? getNameQuery(entity)
+                : { queryKey: ['fakeQuery'], queryFn: () => value }),
+              enabled: !value,
+            });
+
+            if (value) {
+              return <ConstrainedText text={value} lineClamp={2} />;
+            }
+            if (status === 'error') {
+              return (
+                <>An error occured while loading {entityName.singular} name</>
+              );
+            }
+            if (status === 'loading' || status === 'idle') {
+              return <>Loading...</>;
+            }
+            if (status === 'success') {
+              if (!asyncName) {
+                return <EmptyCell />;
+              }
+              return <ConstrainedText text={asyncName} lineClamp={2} />;
+            }
+
+            return <EmptyCell />;
+          },
+        },
+        {
+          Header: 'Attachment',
+          accessor: 'isPending',
+          cellStyle: {
+            flex: 0.5,
+          },
+          Cell: ({ value }: { value?: boolean }) => {
+            return value ? <>Pending</> : <>Attached</>;
+          },
+        },
+        {
+          Header: <Box flex={0.5} />,
+          accessor: 'action',
+          cellStyle: {
+            textAlign: 'right',
+            flex: 0.5,
+            marginLeft: 'auto',
+            marginRight: '0.5rem',
+          },
+          Cell: ({
+            row: { original: entity },
+          }: {
+            row: { original: AttachableEntity<ENTITY_TYPE> };
+          }) => (
+            <Button
+              size="inline"
+              onClick={() => {
+                dispatch({
+                  action: AttachmentAction.REMOVE,
+                  entity: {
+                    name: entity.name,
+                    id: entity.id,
+                    type: entity.type,
+                  },
+                });
+              }}
+              icon={<Icon name="Close" />}
+              label="Remove"
+              variant="danger"
+              disabled={!!entity.disableDetach}
+            />
+          ),
+        },
+      ]}
+      data={desiredAttachedEntities.map((entity) => ({
+        ...entity,
+        isPending: entity.isPending || false,
+        action: null,
+      }))}
+      defaultSortingKey="name"
+    >
       <SearchBoxContainer
         {...{
           ref: (element) => {
@@ -493,6 +580,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
           >
             <Stack>
               <StyledSearchInput
+                autoComplete="off"
                 placeholder={searchEntityPlaceholder}
                 {...getInputProps({
                   ref: (element) => {
@@ -514,6 +602,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
           </Tooltip>
         ) : (
           <StyledSearchInput
+            autoComplete="off"
             placeholder={searchEntityPlaceholder}
             {...getInputProps({
               ref: (element) => {
@@ -528,210 +617,113 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               setSearchInputIsFocused(false);
             }}
             disableToggle
+            searchInputIsFocused={searchInputIsFocused}
           />
         )}
-      </SearchBoxContainer>
-      <MenuContainer
-        {...getMenuProps()}
-        width={searchWidth}
-        isOpen={isOpen}
-        searchInputIsFocused={searchInputIsFocused}
-      >
-        {isOpen &&
-          filteredEntities.status === 'success' &&
-          filteredEntities.data?.entities.map((item, index) => (
-            <li key={`${item.id}${index}`} {...getItemProps({ item, index })}>
-              <Text>{item.name}</Text>
-            </li>
-          ))}
-        {isOpen && filteredEntities.status === 'loading' && (
-          <li>
-            <Text>Searching...</Text>
-          </li>
-        )}
-        {isOpen && filteredEntities.status === 'error' && (
-          <li>
-            <Text color="statusCritical">An error occured while searching</Text>
-          </li>
-        )}
-        {isOpen &&
-          filteredEntities.status === 'success' &&
-          (filteredEntities.data?.number || 0) >
-            filteredEntities.data?.entities.length && (
+        <MenuContainer
+          {...getMenuProps()}
+          width={searchWidth}
+          isOpen={isOpen}
+          searchInputIsFocused={searchInputIsFocused}
+        >
+          {isOpen &&
+            filteredEntities.status === 'success' &&
+            filteredEntities.data?.entities.map((item, index) => (
+              <li key={`${item.id}${index}`} {...getItemProps({ item, index })}>
+                <Text>{item.name}</Text>
+              </li>
+            ))}
+          {isOpen && filteredEntities.status === 'loading' && (
             <li>
-              <Text
-                isGentleEmphazed={true}
-                color="textSecondary"
-                style={{ textAlign: 'right' }}
-              >
-                There{' '}
-                {(filteredEntities.data?.number || 0) -
-                  filteredEntities.data?.entities.length ===
-                1
-                  ? 'is'
-                  : 'are'}{' '}
-                {(filteredEntities.data?.number || 0) -
-                  filteredEntities.data?.entities.length}{' '}
-                more{' '}
-                {(filteredEntities.data?.number || 0) -
-                  filteredEntities.data?.entities.length ===
-                1
-                  ? entityName.singular
-                  : entityName.plural}{' '}
-                matching your search. Suggestion: try more specific search
-                expression.
-              </Text>
+              <Text>Searching...</Text>
             </li>
           )}
-        {isOpen &&
-          filteredEntities.status === 'success' &&
-          filteredEntities.data?.entities.length === 0 && (
+          {isOpen && filteredEntities.status === 'error' && (
             <li>
-              <Text isGentleEmphazed={true} color="textSecondary">
-                No {entityName.plural} found matching your search.
+              <Text color="statusCritical">
+                An error occured while searching
               </Text>
             </li>
           )}
-      </MenuContainer>
-      <StyledTable>
-        <Table
-          columns={[
-            {
-              Header: 'Name',
-              accessor: 'name',
-              cellStyle: {
-                flex: 1.5,
-                marginRight: '1.5rem',
-              },
-              Cell: ({
-                value,
-                row: { original: entity },
-              }: {
-                value: string;
-                row: { original: AttachableEntity<ENTITY_TYPE> };
-              }) => {
-                const { data: asyncName, status } = useQuery({
-                  ...(getNameQuery
-                    ? getNameQuery(entity)
-                    : { queryKey: ['fakeQuery'], queryFn: () => value }),
-                  enabled: !value,
-                });
-
-                if (value) {
-                  return <ConstrainedText text={value} lineClamp={2} />;
-                }
-                if (status === 'error') {
-                  return (
-                    <>
-                      An error occured while loading {entityName.singular} name
-                    </>
-                  );
-                }
-                if (status === 'loading' || status === 'idle') {
-                  return <>Loading...</>;
-                }
-                if (status === 'success') {
-                  if (!asyncName) {
-                    return <EmptyCell />;
-                  }
-                  return <ConstrainedText text={asyncName} lineClamp={2} />;
-                }
-
-                return <EmptyCell />;
-              },
-            },
-            {
-              Header: 'Attachment',
-              accessor: 'isPending',
-              cellStyle: {
-                flex: 0.5,
-              },
-              Cell: ({ value }: { value?: boolean }) => {
-                return value ? <>Pending</> : <>Attached</>;
-              },
-            },
-            {
-              Header: <Box flex={0.5} />,
-              accessor: 'action',
-              cellStyle: {
-                textAlign: 'right',
-                flex: 0.5,
-                marginLeft: 'auto',
-                marginRight: '0.5rem',
-              },
-              Cell: ({
-                row: { original: entity },
-              }: {
-                row: { original: AttachableEntity<ENTITY_TYPE> };
-              }) => (
-                <Button
-                  size="inline"
-                  onClick={() => {
-                    dispatch({
-                      action: AttachmentAction.REMOVE,
-                      entity: {
-                        name: entity.name,
-                        id: entity.id,
-                        type: entity.type,
-                      },
-                    });
-                  }}
-                  icon={<Icon name="Close" />}
-                  label="Remove"
-                  variant="danger"
-                  disabled={!!entity.disableDetach}
-                />
-              ),
-            },
-          ]}
-          data={desiredAttachedEntities.map((entity) => ({
-            ...entity,
-            isPending: entity.isPending || false,
-            action: null,
-          }))}
-          defaultSortingKey="name"
-        >
-          <Table.SingleSelectableContent
-            rowHeight={rowHeight}
-            separationLineVariant="backgroundLevel2"
-          >
-            {(rows) => (
-              <>
-                {initiallyAttachedEntitiesStatus === 'idle' ||
-                initiallyAttachedEntitiesStatus === 'loading' ? (
-                  <Wrap style={{ height: `${tableRowHeight[rowHeight]}rem` }}>
-                    <p></p>
-                    <Stack>
-                      <Loader />
-                      <Text>Loading {entityName.plural}...</Text>
-                    </Stack>
-                    <p></p>
-                  </Wrap>
-                ) : initiallyAttachedEntitiesStatus === 'error' ? (
-                  <Stack
-                    style={{
-                      justifyContent: 'center',
-                      height: `${tableRowHeight[rowHeight]}rem`,
-                    }}
-                  >
-                    <Icon name="Exclamation-circle" color="statusWarning" />
-                    <Text color="textSecondary">
-                      Failed to load attached {entityName.plural}.
-                    </Text>
-                  </Stack>
-                ) : (
-                  desiredAttachedEntities.length === 0 && (
-                    <CenterredSecondaryText>
-                      No {entityName.plural} attached
-                    </CenterredSecondaryText>
-                  )
-                )}
-                {desiredAttachedEntities.length > 0 && rows}
-              </>
+          {isOpen &&
+            filteredEntities.status === 'success' &&
+            (filteredEntities.data?.number || 0) >
+              filteredEntities.data?.entities.length && (
+              <li>
+                <Text
+                  isGentleEmphazed={true}
+                  color="textSecondary"
+                  style={{ textAlign: 'right' }}
+                >
+                  There{' '}
+                  {(filteredEntities.data?.number || 0) -
+                    filteredEntities.data?.entities.length ===
+                  1
+                    ? 'is'
+                    : 'are'}{' '}
+                  {(filteredEntities.data?.number || 0) -
+                    filteredEntities.data?.entities.length}{' '}
+                  more{' '}
+                  {(filteredEntities.data?.number || 0) -
+                    filteredEntities.data?.entities.length ===
+                  1
+                    ? entityName.singular
+                    : entityName.plural}{' '}
+                  matching your search. Suggestion: try more specific search
+                  expression.
+                </Text>
+              </li>
+            )}
+          {isOpen &&
+            filteredEntities.status === 'success' &&
+            filteredEntities.data?.entities.length === 0 && (
+              <li>
+                <Text isGentleEmphazed={true} color="textSecondary">
+                  No {entityName.plural} found matching your search.
+                </Text>
+              </li>
             )}
-          </Table.SingleSelectableContent>
-        </Table>
-      </StyledTable>
-    </AttachmentTableContainer>
+        </MenuContainer>
+      </SearchBoxContainer>
+      <Table.SingleSelectableContent
+        rowHeight={rowHeight}
+        separationLineVariant="backgroundLevel2"
+      >
+        {(rows) => (
+          <>
+            {initiallyAttachedEntitiesStatus === 'idle' ||
+            initiallyAttachedEntitiesStatus === 'loading' ? (
+              <Wrap style={{ height: `${tableRowHeight[rowHeight]}rem` }}>
+                <p></p>
+                <Stack>
+                  <Loader />
+                  <Text>Loading {entityName.plural}...</Text>
+                </Stack>
+                <p></p>
+              </Wrap>
+            ) : initiallyAttachedEntitiesStatus === 'error' ? (
+              <Stack
+                style={{
+                  justifyContent: 'center',
+                  height: `${tableRowHeight[rowHeight]}rem`,
+                }}
+              >
+                <Icon name="Exclamation-circle" color="statusWarning" />
+                <Text color="textSecondary">
+                  Failed to load attached {entityName.plural}.
+                </Text>
+              </Stack>
+            ) : (
+              desiredAttachedEntities.length === 0 && (
+                <CenterredSecondaryText>
+                  No {entityName.plural} attached
+                </CenterredSecondaryText>
+              )
+            )}
+            {desiredAttachedEntities.length > 0 && rows}
+          </>
+        )}
+      </Table.SingleSelectableContent>
+    </Table>
   );
 };

package/stories/attachment.stories.tsx

@@ -28,7 +28,11 @@ export const Playground = {
               status: 'success',
               data: {
                 number: 1,
-                entities: [{ name: 'User A', id: 'test', type: 'USER' }],
+                entities: [
+                  { name: 'User A', id: 'test', type: 'USER' },
+                  { name: 'User B', id: 'test', type: 'USER' },
+                  { name: 'User C', id: 'test', type: 'USER' },
+                ],
               },
             }}
             initialAttachmentOperations={[]}