@scality/core-ui 0.135.0 → 0.136.0

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

@@ -6,7 +6,6 @@ export type Props = {
     value: string;
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onReset?: () => void;
-    disableToggle: boolean;
     disabled?: boolean;
     id?: string;
     size?: InputSize;

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;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAwFhB,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,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,uEAuFhB,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, autoComplete = 'on', ...rest }, forwardedRef) => {
+const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', ...rest }, forwardedRef) => {
     const myInputRef = useRef(null);
     const debounce = useRef(null);
     const [debouncedValue, setDebouncedValue] = useState(value);

package/dist/components/selectv2/Selectv2.component.d.ts

@@ -13,7 +13,6 @@ export type SelectProps = {
     placeholder?: string;
     disabled?: boolean;
     children?: React.ReactNode;
-    defaultValue?: string;
     value?: string;
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
@@ -21,6 +20,7 @@ export type SelectProps = {
     variant?: 'default' | 'rounded';
     size?: '1' | '2/3' | '1/2' | '1/3';
     className?: string;
+    /** use menuPositon='fixed' inside modal to avoid display issue */
     menuPosition?: 'fixed' | 'absolute';
 };
 declare function SelectWithOptionContext(props: SelectProps): JSX.Element;

package/dist/components/selectv2/Selectv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AA6ND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
+{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAiOD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAyJhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}

package/dist/components/selectv2/Selectv2.component.js

@@ -89,7 +89,7 @@ const InternalOption = (width, isDefaultVariant) => (props) => {
                     const highlightStyle = part.toLowerCase() === inputValue.toLowerCase()
                         ? 'sc-highlighted-matching-text'
                         : '';
-                    return (_jsx("span", { className: highlightStyle, children: part }, i));
+                    return (_jsx("span", { role: highlightStyle ? 'mark' : undefined, className: highlightStyle, children: part }, i));
                 }) }));
         }
         else {
@@ -148,7 +148,6 @@ const MenuList = (props) => {
     const initialOffset = selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
     useEffect(() => {
         if (listRef && listRef.current) {
-            // @ts-ignore
             listRef.current.scrollTo(getScrollOffset(listRef.current, focusedIndex, children.length, optionHeight / 2));
         }
     }, [children.length, focusedIndex, optionHeight, listRef]);
@@ -168,6 +167,7 @@ const ValueContainer = ({ children, ...props }) => {
     const icon = selectedOption ? selectedOption.icon : null;
     const ariaProps = {
         innerProps: {
+            disabled: true,
             role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
             'aria-expanded': props.selectProps.menuIsOpen,
             'aria-autocomplete': 'list',
@@ -193,10 +193,7 @@ function SelectWithOptionContext(props) {
     };
     return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props }), props.children] }) }));
 }
-function SelectBox({ placeholder = 'Select...', disabled = false, defaultValue, value, onChange, variant = 'default', className, size = '1', id, ...rest }) {
-    if (defaultValue && value) {
-        console.error('The `defaultValue` will be overridden by the `value` if they are set at the same time.');
-    }
+function SelectBox({ placeholder = 'Select...', disabled = false, value, onChange, variant = 'default', className, size = '1', id, ...rest }) {
     const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
     const [searchSelection, setSearchSelection] = useState('');
     const [searchValue, setSearchValue] = useState('');
@@ -236,15 +233,14 @@ function SelectBox({ placeholder = 'Select...', disabled = false, defaultValue,
     const isEmptyStringInOptions = options.find((option) => option.value === '');
     // Force to reset the value
     useEffect(() => {
-        if (!defaultValue &&
-            !isEmptyStringInOptions &&
+        if (!isEmptyStringInOptions &&
             value === '' &&
             selectRef.current &&
             selectRef.current.select) {
             selectRef.current.select.clearValue();
         }
     }, [value, selectRef, isEmptyStringInOptions]);
-    return (_jsx(ScrollbarWrapper, { children: _jsx(_Fragment, { children: options && (_jsx(SelectStyle, { inputId: id, className: ['sc-select', className].join(' '), classNamePrefix: "sc-select", name: "sc-select", value: searchSelection || options.find((opt) => opt.value === value), defaultValue: defaultValue, inputValue: options.length > NOPT_SEARCH ? searchValue : undefined, selectedOption: options.find((opt) => opt.value === value), keyboardFocusEnabled: keyboardFocusEnabled, options: options, isDisabled: disabled, placeholder: customPlaceholder, menuPlacement: "auto", isSearchable: options.length > NOPT_SEARCH, components: {
+    return (_jsx(ScrollbarWrapper, { children: _jsx(_Fragment, { children: options && (_jsx(SelectStyle, { inputId: id, className: ['sc-select', className].join(' '), classNamePrefix: "sc-select", name: "sc-select", value: searchSelection || options.find((opt) => opt.value === value), inputValue: options.length > NOPT_SEARCH ? searchValue : undefined, selectedOption: options.find((opt) => opt.value === value), keyboardFocusEnabled: keyboardFocusEnabled, options: options, isDisabled: disabled, placeholder: customPlaceholder, menuPlacement: "auto", isSearchable: options.length > NOPT_SEARCH, components: {
                     Input: Input,
                     Option: InternalOption(convertSizeToRem(size), isDefaultVariant),
                     Menu: Menu,

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

@@ -10,7 +10,7 @@ export type SearchProps = {
     value?: string;
     locale?: TableLocalType;
     totalCount?: number;
-} & Omit<Props, 'disableToggle' | 'onChange'>;
+} & Omit<Props, 'onChange'>;
 export declare const TableItemCount: ({ entity, count, locale, }: {
     entity: {
         singular: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AA0B9C,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAkC7C"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AA0B5B,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAiC7C"}

package/dist/components/tablev2/Search.js

@@ -40,7 +40,7 @@ export function TableSearch(props) {
     React.useEffect(() => {
         setGlobalFilter(value);
     }, [value, setGlobalFilter, preGlobalFilteredRows]);
-    return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, disableToggle: true, size: "1", onChange: (evt) => {
+    return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, size: "1", onChange: (evt) => {
                     if (typeof onChange === 'function') {
                         onChange(evt.target.value);
                     }

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

@@ -16,7 +16,7 @@ type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<strin
 };
 export declare const VirtualizedRows: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }: VirtualizedRowsType<DATA_ROW>) => JSX.Element;
 export declare const useTableScrollbar: () => {
-    hasScrollbar: boolean;
+    hasScrollbar: boolean | undefined;
     setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
     scrollBarWidth: number;
     handleScrollbarWidth: (node: any) => void;

package/dist/components/tablev2/TableCommon.js

@@ -6,8 +6,8 @@ import { convertRemToPixels, tableRowHeight, } from './TableUtils';
 import { useTableContext } from './Tablev2.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, }) => {
+export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { disableWidth: true, children: ({ height }) => {
+        return (_jsx(List, { height: height - 1, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: '100%', itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
                 setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
                 if (onBottom &&
                     onBottomOffset != null &&
@@ -17,7 +17,7 @@ export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, on
             }, children: RenderRow }));
     } }));
 export const useTableScrollbar = () => {
-    const [hasScrollbar, setHasScrollbar] = useState(false);
+    const { hasScrollbar, setHasScrollbar } = useTableContext();
     const [scrollBarWidth, setScrollBarWidth] = useState(0);
     const handleScrollbarWidth = useCallback((node) => {
         if (node) {

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

@@ -8,7 +8,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<"d
     tabIndex: number | undefined;
 }, never>;
 type HeadRowType = {
-    hasScrollBar: boolean;
+    hasScrollBar?: boolean;
     scrollBarWidth: number;
     rowHeight: TableHeightKeyType;
     separationLineVariant: TableVariantType;

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,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,CAAC,EAAE,OAAO,CAAC;IACvB,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/Tablev2.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="react-table-config.d.ts" />
-/// <reference types="react" />
+import * as React from 'react';
 import { CellProps as TableCellProps, CoreUIColumn, HeaderGroup, Row, SortByFn, TableBodyPropGetter, TableBodyProps } from 'react-table';
 import { TableHeightKeyType } from './TableUtils';
 type UpdateTableData<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
@@ -64,6 +64,10 @@ type TableContextType<DATA_ROW extends Record<string, unknown> = Record<string,
             plural: string;
         };
     };
+    syncScrollListener: ((event: Event) => void) | null;
+    setSyncScrollListener: (listener: (event: Event) => void) => void;
+    setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
+    hasScrollbar?: boolean;
 };
 export declare const useTableContext: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>() => TableContextType<DATA_ROW>;
 export declare const EmptyCell: ({ tooltipContent, mr, }: {

package/dist/components/tablev2/Tablev2.component.d.ts.map

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

package/dist/components/tablev2/Tablev2.component.js

@@ -69,6 +69,8 @@ function Table({ columns, data, defaultSortingKey, getRowId, children, sortTypes
         return {};
     }, []);
     const [rowHeight, setRowHeight] = React.useState('h40');
+    const [syncScrollListener, setSyncScrollListener] = React.useState(null);
+    const [hasScrollbar, setHasScrollbar] = React.useState(false);
     const { headerGroups, rows, prepareRow, selectedFlatRows, getTableBodyProps, state: { selectedRowIds }, preGlobalFilteredRows, setGlobalFilter, setFilter, setAllFilters, setHiddenColumns, isAllRowsSelected, toggleAllRowsSelected, } = useTable({
         defaultColumn: {
             ...defaultColumn,
@@ -132,6 +134,10 @@ function Table({ columns, data, defaultSortingKey, getRowId, children, sortTypes
         toggleAllRowsSelected,
         status,
         entityName,
+        syncScrollListener,
+        setSyncScrollListener,
+        setHasScrollbar,
+        hasScrollbar,
     };
     return (_jsx(TableContext.Provider
     //@ts-ignore

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { Row } from 'react-table';
 import { FixedSizeList } from 'react-window';
 export default function useSyncedScroll<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>(): {
     headerRef: (element: HTMLDivElement) => void;
-    bodyRef: (tableBody: FixedSizeList<Row<DATA_ROW>[]>) => void;
+    bodyRef: React.RefObject<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 //# sourceMappingURL=useSyncedScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSyncedScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useSyncedScroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC/D;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9D,CAsDA"}
+{"version":3,"file":"useSyncedScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useSyncedScroll.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC/D;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CAmDA"}

package/dist/components/tablev2/useSyncedScroll.js

@@ -1,7 +1,7 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
+import { useTableContext } from './Tablev2.component';
 export default function useSyncedScroll() {
-    const [listener, setListener] = useState(null);
-    const [tableBody, setTableBody] = useState(null);
+    const { syncScrollListener, setSyncScrollListener } = useTableContext();
     const headerRef = useCallback((element) => {
         if (element) {
             const callback = (event) => {
@@ -12,32 +12,30 @@ export default function useSyncedScroll() {
                     });
                 }
             };
-            if (!listener) {
-                setListener(() => {
+            if (!syncScrollListener) {
+                setSyncScrollListener(() => {
                     return callback;
                 });
             }
         }
-    }, [listener]);
-    const bodyRef = useCallback((tableBody) => {
-        setTableBody(tableBody);
-    }, []);
+    }, [syncScrollListener]);
+    const bodyRef = useRef(null);
     useEffect(() => {
-        if (tableBody && listener) {
+        if (bodyRef.current && syncScrollListener) {
             /*
             We intentionally use _outerRef prop here despite the fact that it is
             internal use only and not typed, as it is the only way for us to access to the scrollable element
             */
             //@ts-expect-error
-            tableBody._outerRef.addEventListener('scroll', listener);
-            return () => {
-                //@ts-expect-error
-                if (tableBody && tableBody._outerRef) {
-                    //@ts-expect-error
-                    tableBody._outerRef.removeEventListener('scroll', listener);
-                }
-            };
+            bodyRef.current._outerRef.addEventListener('scroll', syncScrollListener);
         }
-    }, [tableBody, listener]);
+        return () => {
+            //@ts-expect-error
+            if (bodyRef.current && bodyRef.current._outerRef) {
+                //@ts-expect-error
+                bodyRef.current._outerRef.removeEventListener('scroll', syncScrollListener);
+            }
+        };
+    }, [bodyRef.current, syncScrollListener]);
     return { headerRef, bodyRef };
 }

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

@@ -8,7 +8,7 @@ export declare const TabItem: import("styled-components").StyledComponent<"div",
 }, never>;
 export declare const TabsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     tabLineColor?: string | undefined;
-    separatorColor: string;
+    separatorColor?: string | undefined;
 }, never>;
 export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     tabContentColor?: string | undefined;

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

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

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

@@ -78,7 +78,11 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
                 }
             }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { children: label })) : (_jsx(SecondaryText, { children: label })), textBadge && _jsx(EmphaseText, { children: textBadge })] }, index));
     });
-    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), 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
+        // @ts-expect-error containerType is not yet a valid prop for react
+        , { 
+            // @ts-expect-error containerType is not yet a valid prop for react
+            style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
                         ? tab.props.path
                         : url + '/' + tab.props.path, children: !tab.props.query ||
                         (tab.props.query && matchQuery(tab.props.query)) ? (_jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, withoutPadding: tab.props.withoutPadding, children: tab.props.children })) : (_jsx(_Fragment, {})) }, index)))] }) }));

package/dist/components/toggle/Toggle.component.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, InputHTMLAttributes } from 'react';
-type Props = InputHTMLAttributes<HTMLInputElement> & {
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
     toggle: boolean;
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     label?: string;

package/dist/components/toggle/Toggle.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAU,MAAM,OAAO,CAAC;AAQjE,KAAK,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6DF,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAmD1E;AAED,eAAO,MAAM,MAAM,qBAAe,CAAC"}
+{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAU,MAAM,OAAO,CAAC;AAOjE,MAAM,MAAM,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2DF,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAmD1E;AAED,eAAO,MAAM,MAAM,qBAAe,CAAC"}

package/dist/components/toggle/Toggle.component.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { spacing } from '../../style/theme';
 import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
-import { Stack } from '../../spacing';
+import { Stack, spacing } from '../../spacing';
 import { Text } from '../text/Text.component';
 const ToggleContainer = styled.span `
   display: inline-flex;
@@ -13,8 +12,7 @@ const ToggleContainer = styled.span `
 `;
 const Switch = styled.label `
   position: relative;
-  width: ${spacing.sp24};
-  height: ${spacing.sp14};
+  width: ${spacing.r24};
   align-self: center;
   ${(props) => {
     return css `
@@ -32,22 +30,21 @@ const Slider = styled.div `
   width: 100%;
   height: 1rem;
   background-color: ${(props) => props.theme.backgroundLevel1};
-  border: ${spacing.sp1} solid
+  border: ${spacing.r1} solid
     ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
-  border-radius: ${spacing.sp8};
+  border-radius: ${spacing.r8};
   transition: 0.4s;
-  -moz-transform: rotate(0.02deg);
+
   &:before {
     border-radius: 100%;
     position: absolute;
     content: '';
-    height: ${spacing.sp10};
-    width: ${spacing.sp10};
+    height: ${spacing.r10};
+    width: ${spacing.r10};
     left: 3px;
     top: 3.5px;
     background-color: ${(props) => props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
     transition: 0.4s;
-    -moz-transform: rotate(0.02deg);
   }
 `;
 const ToggleInput = styled.input `
@@ -55,7 +52,7 @@ const ToggleInput = styled.input `
     background-color: ${(props) => props.theme.selectedActive};
   }
   &:checked + ${Slider}:before {
-    transform: translateX(${spacing.sp10});
+    transform: translateX(${spacing.r10});
   }
   display: none;
 `;

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;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"}
+{"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,0RAmiB3B,CAAC"}

package/dist/organisms/attachments/AttachmentTable.js

@@ -338,7 +338,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
                                         setSearchInputIsFocused(true);
                                     }, onBlur: () => {
                                         setSearchInputIsFocused(false);
-                                    }, disableToggle: true, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { autoComplete: "off", placeholder: searchEntityPlaceholder, ...getInputProps({
+                                    }, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { autoComplete: "off", placeholder: searchEntityPlaceholder, ...getInputProps({
                             ref: (element) => {
                                 if (element)
                                     searchInputRef.current = element;
@@ -348,7 +348,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
                             setSearchInputIsFocused(true);
                         }, onBlur: () => {
                             setSearchInputIsFocused(false);
-                        }, disableToggle: true, searchInputIsFocused: searchInputIsFocused })), _jsxs(MenuContainer, { ...getMenuProps(), width: searchWidth, isOpen: isOpen, searchInputIsFocused: searchInputIsFocused, children: [isOpen &&
+                        }, 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' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.135.0",
+  "version": "0.136.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -119,7 +119,7 @@
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-virtualized": "9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.5",
+    "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",

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

@@ -10,7 +10,6 @@ export type Props = {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onReset?: () => void;
-  disableToggle: boolean;
   disabled?: boolean;
   id?: string;
   size?: InputSize;
@@ -57,7 +56,6 @@ const ClearButton = styled.div`
 const SearchInput = forwardRef(
   (
     {
-      disableToggle,
       placeholder,
       value,
       onChange,

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SearchInput, Props } from './SearchInput.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import userEvent from '@testing-library/user-event';
+
+const queryClient = new QueryClient();
+
+const SearchInputRender = (props: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SearchInput {...props} />
+    </QueryClientProvider>
+  );
+};
+
+describe('SearchInput', () => {
+  const selectors = {
+    searchInput: () => screen.getByRole('searchbox'),
+    clearButton: () => screen.queryByRole('button'),
+  };
+  it('should render the SearchInput component', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with placeholder', () => {
+    render(
+      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+    );
+
+    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with disabled prop', () => {
+    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeDisabled();
+  });
+
+  it('should change value instantly but call the onChange function with a 300ms delay after the end of typing', async () => {
+    const onChange = jest.fn();
+    render(<SearchInputRender value="" onChange={onChange} />);
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+    expect(searchInput).toHaveValue('test');
+    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(
+      () => {
+        expect(onChange).toHaveBeenCalled();
+      },
+      { timeout: 350 },
+    );
+  });
+
+  it('should have a clear button when the input is not empty', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    // clear button should not be rendered as value is empty
+    let clearButton = selectors.clearButton();
+    expect(clearButton).not.toBeInTheDocument();
+
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+
+    // clear button should now be rendered
+    clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
+    const onReset = jest.fn();
+    render(
+      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+    );
+    const searchInput = selectors.searchInput();
+    const clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+    clearButton && userEvent.click(clearButton);
+    expect(onReset).toHaveBeenCalled();
+    expect(searchInput).toHaveValue('');
+  });
+});