@scality/core-ui 0.159.0 → 0.160.0

package/dist/components/accordion/Accordion.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAkDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}
+{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}

package/dist/components/accordion/Accordion.component.js

@@ -8,11 +8,10 @@ import { Text } from '../text/Text.component';
 const AccordionContainer = styled(Box) `
   width: 100%;
   height: auto;
-  ${({ theme }) => `
-    border: 0.5px solid ${theme.border};
-    border-radius: 4px;
-    padding: ${spacing.r16};
-  `}
+  padding: ${spacing.r16};
+  border-radius: 4px;
+  box-sizing: border-box;
+  ${({ theme }) => `border: 0.5px solid ${theme.border};`}
 `;
 const AccordionHeader = styled.button `
   -webkit-appearance: none;

package/dist/components/layout/v2/AppContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/AppContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmInD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CASA;kBAlBQ,YAAY;8DA/FlB;QACD,UAAU,CAAC,EAAE,WAAW,CAAC;QACzB,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;KACzC;qGA8BE;QACD,QAAQ,EAAE,GAAG,CAAC;QACd,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,UAAU,CAAC,EAAE,WAAW,CAAC;KAC1B;mFA8BE;QACD,QAAQ,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,UAAU,CAAC,EAAE,WAAW,CAAC;KAC1B;;;AA8CD,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/AppContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoInD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CASA;kBAlBQ,YAAY;8DA/FlB;QACD,UAAU,CAAC,EAAE,WAAW,CAAC;QACzB,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;KACzC;qGA8BE;QACD,QAAQ,EAAE,GAAG,CAAC;QACd,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,UAAU,CAAC,EAAE,WAAW,CAAC;KAC1B;mFA8BE;QACD,QAAQ,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,UAAU,CAAC,EAAE,WAAW,CAAC;KAC1B;;;AA8CD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/layout/v2/AppContainer.js

@@ -6,6 +6,7 @@ const Container = styled.div `
   flex-direction: row;
   flex: 1;
   overflow: hidden;
+  color: ${(props) => props.theme.textPrimary};
 `;
 const FillAvailableFlexBox = styled.div `
   flex: 1;

package/dist/components/selectv2/SelectStyle.d.ts

@@ -1,3 +1,4 @@
-declare const SelectStyle: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;
+import Select from 'react-select';
+declare const SelectStyle: import("styled-components").StyledComponent<typeof Select, import("styled-components").DefaultTheme, {}, never>;
 export { SelectStyle };
 //# sourceMappingURL=SelectStyle.d.ts.map

package/dist/components/selectv2/SelectStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/SelectStyle.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,WAAW,sGAmQhB,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SelectStyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/SelectStyle.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAMlC,QAAA,MAAM,WAAW,iHAmQhB,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { GroupTypeBase, OptionTypeBase } from 'react-select';
+import ReactSelect from 'react-select/src/Select';
 export type OptionProps = {
     title?: string;
     disabled?: boolean;
@@ -8,6 +10,15 @@ export type OptionProps = {
     disabledReason?: React.ReactNode;
 };
 export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
+export interface SelectRef<OptionType extends OptionTypeBase, IsMulti extends boolean, GroupType extends GroupTypeBase<OptionType>> {
+    select: ReactSelect<OptionType, IsMulti, GroupType> | null;
+    focus: () => void;
+    blur: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    setValue: (value: string) => void;
+    clearValue: () => void;
+}
 export type SelectProps = {
     id: string;
     placeholder?: string;
@@ -23,10 +34,9 @@ export type SelectProps = {
     /** use menuPositon='fixed' inside modal to avoid display issue */
     menuPosition?: 'fixed' | 'absolute';
 };
-declare function SelectWithOptionContext(props: SelectProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectWithOptionContext {
-    var Option: typeof import("./Selectv2.component").Option;
-}
-export declare const Select: typeof SelectWithOptionContext;
+type SelectComponentType<OptionType extends OptionTypeBase, IsMulti extends boolean, GroupType extends GroupTypeBase<OptionType>> = ForwardRefExoticComponent<SelectProps & RefAttributes<SelectRef<OptionType, IsMulti, GroupType>>> & {
+    Option: typeof Option;
+};
+export declare const Select: SelectComponentType<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>;
 export {};
 //# sourceMappingURL=Selectv2.component.d.ts.map

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;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,2CAyBlD;kBAzBQ,uBAAuB;;;AAyJhC,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,KAAK,EAAE,EAOZ,yBAAyB,EACzB,aAAa,EAEd,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,aAAa,EACb,cAAc,EAEf,MAAM,cAAc,CAAC;AAQtB,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAKlD,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;AAuOD,MAAM,WAAW,SAAS,CACxB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC;IAE3C,MAAM,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,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;AAWF,KAAK,mBAAmB,CACtB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC,IACzC,yBAAyB,CAC3B,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CACvE,GAAG;IACF,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAkOF,eAAO,MAAM,MAAM,6EAA0B,CAAC"}

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect, useRef, } from 'react';
+import { createContext, useContext, useState, useEffect, useRef, forwardRef, useImperativeHandle, } from 'react';
 import { ScrollbarWrapper, Tooltip } from '../../index';
-import { components } from 'react-select';
+import { components, } from 'react-select';
 import { Icon } from '../icon/Icon.component';
 import { SelectStyle } from './SelectStyle';
 import { FixedSizeList as List } from 'react-window';
@@ -177,38 +177,58 @@ const ValueContainer = ({ children, ...props }) => {
     return (_jsxs(components.ValueContainer, { ...props, ...ariaProps, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
 };
 const OptionContext = createContext(null);
-function SelectWithOptionContext(props) {
-    const [options, setOptions] = useState({});
-    const register = (option) => {
-        setOptions((prevOptions) => ({
-            ...prevOptions,
-            [option.value]: option,
-        }));
-    };
-    const unregister = (value) => {
-        setOptions((prevOptions) => {
-            const { [value]: _, ...rest } = prevOptions;
-            return rest;
-        });
-    };
-    return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props }), props.children] }) }));
-}
-function SelectBox({ placeholder = 'Select...', disabled = false, value, onChange, variant = 'default', className, size = '1', id, ...rest }) {
+function SelectBox({ placeholder = 'Select...', disabled = false, value, onChange, variant = 'default', className, size = '1', id, selectRef, ...rest }) {
     const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
     const [searchSelection, setSearchSelection] = useState('');
     const [searchValue, setSearchValue] = useState('');
     const [customPlaceholder, setPlaceholder] = useState(placeholder);
     const isDefaultVariant = variant === 'default';
     const [isMenuBottom, setIsMenuBottom] = useState(true);
-    const selectRef = useRef();
+    const internalSelectRef = useRef(null);
+    useImperativeHandle(selectRef, () => ({
+        focus: () => {
+            if (internalSelectRef.current) {
+                internalSelectRef.current.focus();
+            }
+        },
+        blur: () => {
+            if (internalSelectRef.current) {
+                internalSelectRef.current.blur();
+            }
+        },
+        select: internalSelectRef.current,
+        openMenu: () => {
+            if (internalSelectRef.current) {
+                internalSelectRef.current.setState({ menuIsOpen: true });
+            }
+        },
+        closeMenu: () => {
+            if (internalSelectRef.current) {
+                internalSelectRef.current.setState({ menuIsOpen: false });
+            }
+        },
+        setValue: (newValue) => {
+            if (internalSelectRef.current) {
+                const option = options.find((opt) => opt.value === newValue);
+                if (option) {
+                    internalSelectRef.current.select.setValue(option);
+                }
+            }
+        },
+        clearValue: () => {
+            if (internalSelectRef.current && internalSelectRef.current.select) {
+                internalSelectRef.current.select.clearValue();
+            }
+        },
+    }), [internalSelectRef]);
     const options = useOptions();
     const handleChange = (option) => {
         const newValue = option ? option.value : '';
         if (onChange && typeof onChange === 'function' && newValue !== value) {
             onChange(newValue);
         }
-        if (options && options.length > NOPT_SEARCH) {
-            selectRef.current.blur();
+        if (options && options.length > NOPT_SEARCH && internalSelectRef.current) {
+            internalSelectRef.current.blur();
         }
     };
     const handleSearchInput = (inputValue, { action }) => {
@@ -235,11 +255,11 @@ function SelectBox({ placeholder = 'Select...', disabled = false, value, onChang
     useEffect(() => {
         if (!isEmptyStringInOptions &&
             value === '' &&
-            selectRef.current &&
-            selectRef.current.select) {
-            selectRef.current.select.clearValue();
+            internalSelectRef.current &&
+            internalSelectRef.current.select) {
+            internalSelectRef.current.select.clearValue();
         }
-    }, [value, selectRef, isEmptyStringInOptions]);
+    }, [value, 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), 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),
@@ -248,12 +268,12 @@ function SelectBox({ placeholder = 'Select...', disabled = false, value, onChang
                     ValueContainer: ValueContainer,
                     DropdownIndicator: DropdownIndicator,
                     IndicatorSeparator: null,
-                }, isDefault: isDefaultVariant, ITEMS_PER_SCROLL_WINDOW: ITEMS_PER_SCROLL_WINDOW, onChange: handleChange, onInputChange: handleSearchInput, ref: selectRef, isMenuBottom: isMenuBottom, setIsMenuBottom: setIsMenuBottom, onBlur: rest.onBlur, onFocus: rest.onFocus, onMenuClose: () => setKeyboardFocusEnabled(false), onKeyDown: (event) => {
+                }, isDefault: isDefaultVariant, ITEMS_PER_SCROLL_WINDOW: ITEMS_PER_SCROLL_WINDOW, onChange: handleChange, onInputChange: handleSearchInput, ref: internalSelectRef, isMenuBottom: isMenuBottom, setIsMenuBottom: setIsMenuBottom, onBlur: rest.onBlur, onFocus: rest.onFocus, onMenuClose: () => setKeyboardFocusEnabled(false), onKeyDown: (event) => {
                     if (event &&
                         event.key === 'Enter' &&
-                        selectRef &&
-                        !selectRef.current.state.isOpen) {
-                        selectRef.current.setState({
+                        internalSelectRef.current &&
+                        !internalSelectRef.current.state.isOpen) {
+                        internalSelectRef.current.setState({
                             menuIsOpen: true,
                         });
                     }
@@ -262,5 +282,22 @@ function SelectBox({ placeholder = 'Select...', disabled = false, value, onChang
                     }
                 }, width: convertSizeToRem(size), ...rest })) }) }));
 }
+const SelectWithOptionContext = forwardRef((props, ref) => {
+    const [options, setOptions] = useState({});
+    const register = (option) => {
+        setOptions((prevOptions) => ({
+            ...prevOptions,
+            [option.value]: option,
+        }));
+    };
+    const unregister = (value) => {
+        setOptions((prevOptions) => {
+            const { [value]: _, ...rest } = prevOptions;
+            return rest;
+        });
+    };
+    return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props, selectRef: ref }), props.children] }) }));
+});
+SelectWithOptionContext.displayName = 'Select';
 SelectWithOptionContext.Option = Option;
 export const Select = SelectWithOptionContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.159.0",
+  "version": "0.160.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -57,6 +57,7 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-select": "^4.0.18",
     "@types/react-table": "^7.7.11",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",

package/src/lib/components/accordion/Accordion.component.tsx

@@ -20,12 +20,10 @@ export type AccordionProps = {
 const AccordionContainer = styled(Box)`
   width: 100%;
   height: auto;
-  ${({ theme }) =>
-    `
-    border: 0.5px solid ${theme.border};
-    border-radius: 4px;
-    padding: ${spacing.r16};
-  `}
+  padding: ${spacing.r16};
+  border-radius: 4px;
+  box-sizing: border-box;
+  ${({ theme }) => `border: 0.5px solid ${theme.border};`}
 `;
 
 const AccordionHeader = styled.button<{

package/src/lib/components/layout/v2/AppContainer.tsx

@@ -8,6 +8,7 @@ const Container = styled.div`
   flex-direction: row;
   flex: 1;
   overflow: hidden;
+  color: ${(props) => props.theme.textPrimary};
 `;
 
 const FillAvailableFlexBox = styled.div`

package/src/lib/components/selectv2/Selectv2.component.tsx

@@ -4,9 +4,18 @@ import React, {
   useState,
   useEffect,
   useRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+  useImperativeHandle,
 } from 'react';
 import { ScrollbarWrapper, Tooltip } from '../../index';
-import { components } from 'react-select';
+import {
+  components,
+  GroupTypeBase,
+  OptionTypeBase,
+  ValueContainerProps,
+} from 'react-select';
 import { Icon } from '../icon/Icon.component';
 import { SelectStyle } from './SelectStyle';
 import { FixedSizeList, FixedSizeList as List } from 'react-window';
@@ -14,6 +23,7 @@ import { convertRemToPixels } from '../../utils';
 import { spacing } from '../../spacing';
 import { convertSizeToRem } from '../inputv2/inputv2';
 import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import ReactSelect from 'react-select/src/Select';
 
 const ITEMS_PER_SCROLL_WINDOW = 4;
 // more/equal than NOPT_SEARCH options enable search
@@ -280,7 +290,14 @@ const MenuList = (props) => {
   return <components.MenuList {...props}>{children}</components.MenuList>;
 };
 
-const ValueContainer = ({ children, ...props }) => {
+const ValueContainer = <
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType>,
+>({
+  children,
+  ...props
+}: ValueContainerProps<OptionType, IsMulti, GroupType>) => {
   const selectedOption = props.selectProps.selectedOption;
   const icon = selectedOption ? selectedOption.icon : null;
   const ariaProps = {
@@ -300,6 +317,19 @@ const ValueContainer = ({ children, ...props }) => {
     </components.ValueContainer>
   );
 };
+export interface SelectRef<
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType>,
+> {
+  select: ReactSelect<OptionType, IsMulti, GroupType> | null;
+  focus: () => void;
+  blur: () => void;
+  openMenu: () => void;
+  closeMenu: () => void;
+  setValue: (value: string) => void;
+  clearValue: () => void;
+}
 
 export type SelectProps = {
   id: string;
@@ -316,6 +346,7 @@ export type SelectProps = {
   /** use menuPositon='fixed' inside modal to avoid display issue */
   menuPosition?: 'fixed' | 'absolute';
 };
+
 type SelectOptionProps = {
   value: string;
   label: React.ReactNode;
@@ -325,40 +356,27 @@ type SelectOptionProps = {
   disabledReason?: React.ReactNode;
 };
 
+type SelectComponentType<
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType>,
+> = ForwardRefExoticComponent<
+  SelectProps & RefAttributes<SelectRef<OptionType, IsMulti, GroupType>>
+> & {
+  Option: typeof Option;
+};
+
 const OptionContext = createContext<{
   options: Record<string, SelectOptionProps>;
   register: (option: SelectOptionProps) => void;
   unregister: (value: string) => void;
 } | null>(null);
 
-function SelectWithOptionContext(props: SelectProps) {
-  const [options, setOptions] = useState<Record<string, SelectOptionProps>>({});
-
-  const register = (option: SelectOptionProps) => {
-    setOptions((prevOptions) => ({
-      ...prevOptions,
-      [option.value]: option,
-    }));
-  };
-
-  const unregister = (value: string) => {
-    setOptions((prevOptions) => {
-      const { [value]: _, ...rest } = prevOptions;
-      return rest;
-    });
-  };
-
-  return (
-    <OptionContext.Provider value={{ options, register, unregister }}>
-      <>
-        <SelectBox {...props} />
-        {props.children}
-      </>
-    </OptionContext.Provider>
-  );
-}
-
-function SelectBox({
+function SelectBox<
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType>,
+>({
   placeholder = 'Select...',
   disabled = false,
   value,
@@ -367,15 +385,68 @@ function SelectBox({
   className,
   size = '1',
   id,
+  selectRef,
   ...rest
-}: SelectProps) {
+}: SelectProps & {
+  selectRef?: React.Ref<SelectRef<OptionType, IsMulti, GroupType>>;
+}) {
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [customPlaceholder, setPlaceholder] = useState(placeholder);
   const isDefaultVariant = variant === 'default';
   const [isMenuBottom, setIsMenuBottom] = useState(true);
-  const selectRef = useRef<any>();
+  const internalSelectRef = useRef<
+    ReactSelect<OptionType, IsMulti, GroupType> & {
+      setState: (state: { menuIsOpen: boolean }) => void;
+      state: { isOpen: boolean };
+      select: {
+        setValue: (option: SelectOptionProps) => void;
+        clearValue: () => void;
+      };
+    }
+  >(null);
+
+  useImperativeHandle(
+    selectRef,
+    () => ({
+      focus: () => {
+        if (internalSelectRef.current) {
+          internalSelectRef.current.focus();
+        }
+      },
+      blur: () => {
+        if (internalSelectRef.current) {
+          internalSelectRef.current.blur();
+        }
+      },
+      select: internalSelectRef.current,
+      openMenu: () => {
+        if (internalSelectRef.current) {
+          internalSelectRef.current.setState({ menuIsOpen: true });
+        }
+      },
+      closeMenu: () => {
+        if (internalSelectRef.current) {
+          internalSelectRef.current.setState({ menuIsOpen: false });
+        }
+      },
+      setValue: (newValue: string) => {
+        if (internalSelectRef.current) {
+          const option = options.find((opt) => opt.value === newValue);
+          if (option) {
+            internalSelectRef.current.select.setValue(option);
+          }
+        }
+      },
+      clearValue: () => {
+        if (internalSelectRef.current && internalSelectRef.current.select) {
+          internalSelectRef.current.select.clearValue();
+        }
+      },
+    }),
+    [internalSelectRef],
+  );
 
   const options = useOptions();
 
@@ -385,8 +456,8 @@ function SelectBox({
       onChange(newValue);
     }
 
-    if (options && options.length > NOPT_SEARCH) {
-      selectRef.current.blur();
+    if (options && options.length > NOPT_SEARCH && internalSelectRef.current) {
+      internalSelectRef.current.blur();
     }
   };
 
@@ -414,12 +485,12 @@ function SelectBox({
     if (
       !isEmptyStringInOptions &&
       value === '' &&
-      selectRef.current &&
-      selectRef.current.select
+      internalSelectRef.current &&
+      internalSelectRef.current.select
     ) {
-      selectRef.current.select.clearValue();
+      internalSelectRef.current.select.clearValue();
     }
-  }, [value, selectRef, isEmptyStringInOptions]);
+  }, [value, isEmptyStringInOptions]);
 
   return (
     <ScrollbarWrapper>
@@ -454,7 +525,7 @@ function SelectBox({
             ITEMS_PER_SCROLL_WINDOW={ITEMS_PER_SCROLL_WINDOW}
             onChange={handleChange}
             onInputChange={handleSearchInput}
-            ref={selectRef}
+            ref={internalSelectRef}
             isMenuBottom={isMenuBottom}
             setIsMenuBottom={setIsMenuBottom}
             onBlur={rest.onBlur}
@@ -464,10 +535,10 @@ function SelectBox({
               if (
                 event &&
                 event.key === 'Enter' &&
-                selectRef &&
-                !selectRef.current.state.isOpen
+                internalSelectRef.current &&
+                !internalSelectRef.current.state.isOpen
               ) {
-                selectRef.current.setState({
+                internalSelectRef.current.setState({
                   menuIsOpen: true,
                 });
               } else {
@@ -483,5 +554,40 @@ function SelectBox({
   );
 }
 
+const SelectWithOptionContext = forwardRef<
+  SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>,
+  SelectProps
+>((props, ref) => {
+  const [options, setOptions] = useState<Record<string, SelectOptionProps>>({});
+
+  const register = (option: SelectOptionProps) => {
+    setOptions((prevOptions) => ({
+      ...prevOptions,
+      [option.value]: option,
+    }));
+  };
+
+  const unregister = (value: string) => {
+    setOptions((prevOptions) => {
+      const { [value]: _, ...rest } = prevOptions;
+      return rest;
+    });
+  };
+
+  return (
+    <OptionContext.Provider value={{ options, register, unregister }}>
+      <>
+        <SelectBox {...props} selectRef={ref} />
+        {props.children}
+      </>
+    </OptionContext.Provider>
+  );
+}) as SelectComponentType<
+  OptionTypeBase,
+  boolean,
+  GroupTypeBase<OptionTypeBase>
+>;
+
+SelectWithOptionContext.displayName = 'Select';
 SelectWithOptionContext.Option = Option;
 export const Select = SelectWithOptionContext;

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -1,8 +1,8 @@
 import { screen, render as testingRender } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { Option, Select } from '../selectv2/Selectv2.component';
+import { Option, Select, SelectRef } from '../selectv2/Selectv2.component';
 
 const render = (args) => {
   return testingRender(
@@ -452,4 +452,158 @@ describe('SelectV2', () => {
      */
     await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
   });
+
+  describe('Ref API', () => {
+    it('should expose focus method via ref', async () => {
+      const RefTestComponent = () => {
+        const selectRef = useRef<SelectRef>(null);
+        const [value, setValue] = useState<string>('');
+
+        return (
+          <div>
+            <button onClick={() => selectRef.current?.focus()}>Focus</button>
+            <Select
+              id="ref-test"
+              value={value}
+              onChange={(value) => setValue(value)}
+              ref={selectRef}
+              placeholder="Select with ref"
+            >
+              {simpleOptions}
+            </Select>
+          </div>
+        );
+      };
+
+      render(<RefTestComponent />);
+      expect(selectors.input()).not.toHaveFocus();
+
+      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      expect(selectors.input()).toHaveFocus();
+    });
+
+    it('should expose openMenu and closeMenu methods via ref', async () => {
+      const RefTestComponent = () => {
+        const selectRef = useRef<SelectRef>(null);
+        const [value, setValue] = useState<string>('');
+
+        return (
+          <div>
+            <button onClick={() => selectRef.current?.openMenu()}>
+              Open Menu
+            </button>
+            <button onClick={() => selectRef.current?.closeMenu()}>
+              Close Menu
+            </button>
+            <Select
+              id="ref-test"
+              value={value}
+              onChange={(value) => setValue(value)}
+              ref={selectRef}
+              placeholder="Select with ref"
+            >
+              {simpleOptions}
+            </Select>
+          </div>
+        );
+      };
+
+      render(<RefTestComponent />);
+      expect(selectors.options()).toHaveLength(0);
+
+      userEvent.click(screen.getByRole('button', { name: /Open Menu/i }));
+      expect(selectors.options().length).toBeGreaterThan(0);
+      simpleOptions.forEach((opt) => {
+        const option = selectors.option(opt.props.label);
+        expect(option).toBeInTheDocument();
+      });
+
+      userEvent.click(screen.getByRole('button', { name: /Close Menu/i }));
+      expect(selectors.options()).toHaveLength(0);
+    });
+
+    it('should expose setValue and clearValue methods via ref', async () => {
+      const handleChange = jest.fn();
+
+      const RefTestComponent = () => {
+        const [value, setValue] = useState('');
+        const selectRef = useRef<SelectRef>(null);
+
+        return (
+          <div>
+            <button
+              onClick={() => {
+                selectRef.current?.setValue('0');
+                setValue('0');
+              }}
+            >
+              Set Value
+            </button>
+            <button
+              onClick={() => {
+                selectRef.current?.clearValue();
+                setValue('');
+              }}
+            >
+              Clear
+            </button>
+            <Select
+              id="ref-test"
+              value={value}
+              onChange={(newValue) => {
+                setValue(newValue);
+                handleChange(newValue);
+              }}
+              ref={selectRef}
+              placeholder="Select with ref"
+            >
+              {simpleOptions}
+            </Select>
+          </div>
+        );
+      };
+
+      render(<RefTestComponent />);
+
+      const select = selectors.select();
+      expect(select).toHaveTextContent('Select with ref');
+
+      userEvent.click(screen.getByRole('button', { name: /Set Value/i }));
+      expect(select).toHaveTextContent('Item 0');
+
+      userEvent.click(screen.getByRole('button', { name: /Clear/i }));
+      expect(select).toHaveTextContent('Select with ref');
+    });
+
+    it('should expose blur method via ref', async () => {
+      const RefTestComponent = () => {
+        const selectRef = useRef<SelectRef>(null);
+        const [value, setValue] = useState<string>('');
+
+        return (
+          <div>
+            <button onClick={() => selectRef.current?.focus()}>Focus</button>
+            <button onClick={() => selectRef.current?.blur()}>Blur</button>
+            <Select
+              id="ref-test"
+              value={value}
+              onChange={(value) => setValue(value)}
+              ref={selectRef}
+              placeholder="Select with ref"
+            >
+              {simpleOptions}
+            </Select>
+          </div>
+        );
+      };
+
+      render(<RefTestComponent />);
+
+      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      expect(selectors.input()).toHaveFocus();
+
+      userEvent.click(screen.getByRole('button', { name: /Blur/i }));
+      expect(selectors.input()).not.toHaveFocus();
+    });
+  });
 });