@scality/core-ui 0.153.0 → 0.155.0

package/dist/components/buttonv2/Buttonv2.component.js

@@ -25,10 +25,10 @@ export const ButtonStyled = styled.button `
   text-decoration: none;
   font-family: 'Lato';
   font-weight: ${fontWeight.base};
-
   padding: ${spacing.r4} ${spacing.r8};
   font-size: ${fontSize.base};
   border-radius: ${spacing.r4};
+  white-space: nowrap;
   height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
   ${(props) => {
     const brand = props.theme;

package/dist/components/emptystate/Emptystate.component.js

@@ -4,7 +4,7 @@ import { spacing } from '../../spacing';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 const EmptystateContainer = styled.div `
   ${(props) => {
     const { theme, backgroundColor } = props;
@@ -31,9 +31,9 @@ export const ActionWrapper = styled.div `
 `;
 function EmptyState(props) {
     const { icon, listedResource, link, resourceToCreate, backgroundColor } = props;
-    const history = useHistory();
+    const navigate = useNavigate();
     return (_jsxs(EmptystateContainer, { className: "sc-emptystate", backgroundColor: backgroundColor, children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: `A list of ${listedResource.plural} will appear here.` }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: !resourceToCreate
                         ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
-                        : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), link && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
+                        : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), link && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => navigate(link) }) }))] }));
 }
 export { EmptyState };

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

@@ -125,6 +125,7 @@ export declare const iconTable: {
     Ring: string;
     Stop: string;
     Play: string;
+    Mail: string;
 };
 export declare const customIcons: {
     'Remote-user': ({ ariaLabel, color, size }: {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -129,6 +129,7 @@ export const iconTable = {
     Ring: 'fas faRing',
     Stop: 'fas faStop',
     Play: 'fas faPlay',
+    Mail: 'fas faEnvelope',
 };
 export const customIcons = {
     'Remote-user': ({ ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),

package/dist/components/inputlist/InputList.component.d.ts

@@ -1,7 +1,7 @@
 import { HTMLProps } from 'react';
 import { RefCallBack } from 'react-hook-form';
 export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
-    ref: RefCallBack;
+    ref?: RefCallBack;
     min?: string | number;
     max?: string | number;
     maxLength?: number;
@@ -12,16 +12,5 @@ export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
     maxItems?: number;
     value: T[];
 };
-export declare const InputList: import("react").ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLInputElement>, "size"> & {
-    ref: RefCallBack;
-    min?: string | number;
-    max?: string | number;
-    maxLength?: number;
-    minLength?: number;
-    pattern?: string;
-    required?: boolean;
-    disabled?: boolean;
-    maxItems?: number;
-    value: (string | number | readonly string[] | undefined)[];
-}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const InputList: import("react").ForwardRefExoticComponent<Omit<InputListProps<string | number | readonly string[] | undefined>, "ref"> & import("react").RefAttributes<unknown>>;
 //# sourceMappingURL=InputList.component.d.ts.map

package/dist/components/inputlist/InputList.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputList.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputlist/InputList.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC1E,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAgFF,eAAO,MAAM,SAAS;SA1Ff,WAAW;UACV,MAAM,GAAG,MAAM;UACf,MAAM,GAAG,MAAM;gBACT,MAAM;gBACN,MAAM;cACR,MAAM;eACL,OAAO;eACP,OAAO;eACP,MAAM;;mDAkFmC,CAAC"}
+{"version":3,"file":"InputList.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputlist/InputList.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC1E,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAgFF,eAAO,MAAM,SAAS,kKAAgC,CAAC"}

package/dist/components/inputv2/inputv2.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon } from '../icon/Icon.component';
@@ -57,12 +57,12 @@ const InputContainer = styled.div `
   padding: 0 ${spacing.r8} 0 ${spacing.r8};
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
-  ${(props) => props.isContextAvailable &&
-    props.disabled &&
-    `
-  opacity: 0.5;
-  cursor: not-allowed;
-  `}
+  ${(props) => props.disabled
+    ? css `
+          opacity: 0.5;
+          cursor: not-allowed;
+        `
+    : ''}
 `;
 const InputBorder = styled.div `
   box-sizing: border-box;

package/dist/components/linetemporalchart/MetricTimespanProvider.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
 import { QueryTimeSpan } from '../constants';
-export declare const MetricsTimeSpanContext: React.Context<QueryTimeSpan | null>;
-export declare const MetricsTimeSpanProvider: ({ children, }: {
+import { useLocation } from 'react-router';
+export declare const MetricsTimeSpanContext: import("react").Context<QueryTimeSpan | null>;
+export declare const MetricsTimeSpanProvider: ({ children, location, }: {
     children: JSX.Element;
+    location?: ReturnType<typeof useLocation>;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const useMetricsTimeSpan: () => QueryTimeSpan;
 //# sourceMappingURL=MetricTimespanProvider.d.ts.map

package/dist/components/linetemporalchart/MetricTimespanProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricTimespanProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/MetricTimespanProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAA4C,CAAC;AAChF,eAAO,MAAM,uBAAuB,kBAEjC;IACD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,4CA4BA,CAAC;AACF,eAAO,MAAM,kBAAkB,QAAO,aAUrC,CAAC"}
+{"version":3,"file":"MetricTimespanProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/MetricTimespanProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAuB,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,eAAO,MAAM,sBAAsB,+CAA4C,CAAC;AAChF,eAAO,MAAM,uBAAuB,4BAGjC;IACD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;CAC3C,4CA4BA,CAAC;AACF,eAAO,MAAM,kBAAkB,QAAO,aAUrC,CAAC"}

package/dist/components/linetemporalchart/MetricTimespanProvider.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, createContext, useContext } from 'react';
-import { useLocation } from 'react-router-dom';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { queryTimeSpansCodes } from '../constants';
 export const MetricsTimeSpanContext = createContext(null);
-export const MetricsTimeSpanProvider = ({ children, }) => {
+export const MetricsTimeSpanProvider = ({ children, location, }) => {
     // the default timespan is the last 24h
     const [queryTimeSpanCode, setQueryTimeSpanCode] = useState(queryTimeSpansCodes[1]);
-    const urlSearchParams = new URLSearchParams(useLocation().search);
+    const urlSearchParams = new URLSearchParams(location === null || location === void 0 ? void 0 : location.search);
     const queryTimeSpan = urlSearchParams.get('from');
     // Sync url timespan to local timespan
     useEffect(() => {

package/dist/components/tablev2/SearchWithQueryParams.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { TableSearch as Search } from './Search';
 export function SearchWithQueryParams(props) {
     const { queryParams = 'search', onChange, ...rest } = props;
     const { search, pathname } = useLocation();
-    const history = useHistory();
+    const navigate = useNavigate();
     const params = new URLSearchParams(search);
     const initialValue = params.get(queryParams) || '';
     const [value, setValue] = useState(initialValue);
     function handleOnChange(value) {
         const { onChange } = props;
         params.set(queryParams, value);
-        history.replace(`${pathname}?${params.toString()}`);
+        navigate(`${pathname}?${params.toString()}`, { replace: true });
         setValue(value);
         if (typeof onChange === 'function') {
             onChange(value);

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

@@ -5,7 +5,7 @@ import { TableHeightKeyType, TableLocalType } from './TableUtils';
 import { CSSProperties } from 'styled-components';
 type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
     rows: Row<DATA_ROW>[];
-    RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
+    RenderRow: ComponentType<React.PropsWithChildren<ListChildComponentProps<Row<DATA_ROW>[]>>>;
     rowHeight: TableHeightKeyType;
     setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
     hasScrollbar?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,0HAUvC,mBAAmB,CAAC,QAAQ,CAAC,4CAmC/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,kDAyEzE"}
+{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CACtB,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAClE,CAAC;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,0HAUvC,mBAAmB,CAAC,QAAQ,CAAC,4CAmC/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,kDAyEzE"}

package/dist/components/tabsv2/Tabsv2.component.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Tab } from './Tab';
-import { TabProps } from './Tab';
+import { Tab, TabProps } from './Tab';
 type TabsProps = {
     activeTabColor?: string;
     activeTabSeparator?: string;
@@ -17,5 +16,5 @@ declare function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inacti
 declare namespace Tabs {
     var Tab: typeof import("./Tab").Tab;
 }
-export { Tabs, Tab };
+export { Tab, Tabs };
 //# sourceMappingURL=Tabsv2.component.d.ts.map

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":"AAAA,OAAO,KAAK,EAAE,EAKZ,YAAY,EACb,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAS,MAAM,OAAO,CAAC;AAKxC,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,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnC,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,2CA+LX;kBA1MQ,IAAI;;;AA8Mb,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":"AAAA,OAAO,KAAK,EAAE,EAEZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAsBf,OAAO,EAAS,GAAG,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7C,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,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnC,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,2CAuMX;kBAlNQ,IAAI;;;AAsNb,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC"}

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

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createContext, useEffect, useState, useCallback, } from 'react';
-import { TabBar, ScrollableContainer, TabContent, TabItem, TabsContainer, TabsScroller, } from './StyledTabs';
-import { useHistory, useLocation, useRouteMatch, matchPath, Route, } from 'react-router-dom';
-import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
+import React, { createContext, useCallback, useEffect, useState, } from 'react';
+import { matchPath, Outlet, Route, Routes, useLocation, useNavigate, } from 'react-router';
+import styled from 'styled-components';
+import { ButtonIcon } from '../buttonv2/Buttonv2.component';
+import { BasicText, EmphaseText, SecondaryText } from '../text/Text.component';
 import { ScrollButton } from './ScrollButton';
+import { ScrollableContainer, TabBar, TabContent, TabItem, TabsContainer, TabsScroller, } from './StyledTabs';
 import { Tab } from './Tab';
 import { useScrollingTabs } from './useScrollingTabs';
-import { ButtonIcon } from '../buttonv2/Buttonv2.component';
-import styled from 'styled-components';
 export const TabsContext = createContext(false);
 const TabIcon = styled(ButtonIcon) `
   color: ${(props) => props.theme.textSecondary};
 `;
 function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabColor, tabContentColor, separatorColor, tabHoverColor, children, className, ...rest }) {
     const location = useLocation();
-    const history = useHistory();
-    const { url } = useRouteMatch();
+    const navigate = useNavigate();
+    const url = location.pathname;
     const [selectedTabIndex, setSelectedTabIndex] = useState(null);
     const queryURL = new URLSearchParams(location.search);
     const filteredTabsChildren = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
@@ -41,22 +41,19 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
         }
     };
     const getPushHistoryPath = (path, query) => {
+        const sanitizedSegment = path.replace(/^\/+/, '');
+        const replaceUrl = location.pathname.replace(/[^/]+$/, sanitizedSegment);
         if (path.startsWith('/')) {
-            return `${path}${serialize(query)}`;
+            return `${replaceUrl}${serialize(query)}`;
         }
-        return `${url}/${path}${serialize(query)}`;
+        return `${path}${serialize(query)}`;
     };
     useEffect(() => {
         let hasSelectedTab = false;
         filteredTabsChildren.forEach((child, index) => {
-            const isSelected = !!matchPath(location.pathname, {
-                path: child.props.path.startsWith('/')
-                    ? child.props.path
-                    : url + '/' + child.props.path,
-                exact: child.props.exact,
-                strict: child.props.strict,
-                sensitive: child.props.sensitive,
-            }) && (child.props.query ? matchQuery(child.props.query) : true);
+            const isSelected = !!matchPath((child.props.path.startsWith('/')
+                ? child.props.path
+                : url + '/' + child.props.path) + '*', location.pathname) && (child.props.query ? matchQuery(child.props.query) : true);
             if (isSelected) {
                 setSelectedTabIndex(index);
                 hasSelectedTab = true;
@@ -69,20 +66,24 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
     const tabItems = filteredTabsChildren.map((child, index) => {
         const { path, query, label, textBadge, children, icon, ...childRest } = child.props;
         const isSelected = selectedTabIndex === index;
-        return (_jsxs(TabItem, { className: `sc-tabs-item ${isSelected ? 'selected' : ''}`, role: "tab", onClick: () => history.push(getPushHistoryPath(path, query)), selected: isSelected, tabHoverColor: tabHoverColor, inactiveTabColor: inactiveTabColor, activeTabColor: activeTabColor, activeTabSeparator: activeTabSeparator, tabIndex: isSelected ? 0 : -1, onKeyDown: (event) => {
+        const realPath = path.startsWith('/') ? `/${path.split('/').pop()}` : path;
+        return (_jsxs(TabItem, { className: `sc-tabs-item ${isSelected ? 'selected' : ''}`, role: "tab", onClick: () => navigate(getPushHistoryPath(realPath, query)), selected: isSelected, tabHoverColor: tabHoverColor, inactiveTabColor: inactiveTabColor, activeTabColor: activeTabColor, activeTabSeparator: activeTabSeparator, tabIndex: isSelected ? 0 : -1, onKeyDown: (event) => {
                 if (event.key === ' ' ||
                     event.key === 'Enter' ||
                     event.key === 'Spacebar') {
                     event.preventDefault();
-                    history.push(getPushHistoryPath(path, query));
+                    navigate(getPushHistoryPath(realPath, query));
                 }
             }, ...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('/')
-                        ? 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)))] }) }));
+    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(Routes, { children: filteredTabsChildren.map((tab, index) => {
+                        const path = tab.props.path.split('/').pop();
+                        if (tab.props.query && !matchQuery(tab.props.query)) {
+                            return _jsx(_Fragment, {});
+                        }
+                        return (_jsx(Route, { path: tab.props.path.startsWith('/') ? '/' + path : path, element: _jsxs(_Fragment, { children: [_jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, withoutPadding: tab.props.withoutPadding, children: tab.props.children }), _jsx(Outlet, {})] }) }, index));
+                    }) })] }) }));
 }
 Tabs.Tab = Tab;
 // re-export Tab
-export { Tabs, Tab };
+export { Tab, Tabs };

package/dist/components/toast/ToastProvider.d.ts

@@ -8,7 +8,7 @@ export declare const ToastContext: import("react").Context<ToastContextType | un
 interface ToastProviderProps {
     children: ReactNode;
 }
-export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare const ToastProvider: React.FC<React.PropsWithChildren<ToastProviderProps>>;
 export declare const useToast: () => ToastContextType;
 export {};
 //# sourceMappingURL=ToastProvider.d.ts.map

package/dist/components/toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAe/E,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}

package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { UseMutationOptions } from 'react-query';
-import { AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+import { AttachmentAction, AttachmentOperation } from './AttachmentTypes';
 export declare function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE, ENTITY extends Record<string, unknown> = Record<string, unknown>>({ attachmentOperations, getAttachmentMutationOptions, resourceType, resourceName, redirectUrl, EntityIcon, cancelButtonDisabled, onCancel, onExit, }: {
     attachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
     getAttachmentMutationOptions: () => UseMutationOptions<unknown, unknown, {
@@ -13,9 +13,9 @@ export declare function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE,
     resourceName: string;
     resourceType: RESOURCE_TYPE;
     redirectUrl: string;
-    EntityIcon: ComponentType<{
+    EntityIcon: ComponentType<React.PropsWithChildren<{
         type: ENTITY_TYPE | RESOURCE_TYPE;
-    }>;
+    }>>;
     cancelButtonDisabled?: boolean;
     onCancel?: () => void;
     onExit?: (successfullOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[], failedOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[]) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQ1E,wBAAgB,2BAA2B,CACzC,WAAW,EACX,aAAa,EACb,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EACA,oBAAoB,EACpB,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE;IACD,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,CAAC;IACjE,4BAA4B,EAAE,MAAM,kBAAkB,CACpD,OAAO,EACP,OAAO,EACP;QACE,MAAM,EAAE,gBAAgB,CAAC;QACzB,IAAI,EAAE,WAAW,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;QACX,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CACF,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CACP,qBAAqB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,EACjE,gBAAgB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,KACzD,IAAI,CAAC;CACX,2CA0QA"}
+{"version":3,"file":"AttachmentConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAChD,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAM9D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK1E,wBAAgB,2BAA2B,CACzC,WAAW,EACX,aAAa,EACb,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EACA,oBAAoB,EACpB,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE;IACD,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,CAAC;IACjE,4BAA4B,EAAE,MAAM,kBAAkB,CACpD,OAAO,EACP,OAAO,EACP;QACE,MAAM,EAAE,gBAAgB,CAAC;QACzB,IAAI,EAAE,WAAW,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;QACX,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CACF,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CACvB,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;KAAE,CAAC,CAC/D,CAAC;IACF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CACP,qBAAqB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,EACjE,gBAAgB,EAAE,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,KACzD,IAAI,CAAC;CACX,2CA0QA"}

package/dist/organisms/attachments/AttachmentConfirmationModal.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Table } from '../../components/tablev2/Tablev2.component';
-import { Box, Button } from '../../next';
 import { useMutation } from 'react-query';
-import { AttachmentAction } from './AttachmentTypes';
+import { useNavigate } from 'react-router';
 import { useTheme } from 'styled-components';
-import { useHistory } from 'react-router';
 import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
+import { Table } from '../../components/tablev2/Tablev2.component';
+import { Box, Button } from '../../next';
+import { AttachmentAction } from './AttachmentTypes';
 //The entity is the "thing" you want to attach to the resource, sorry about the naming :(
 export function AttachmentConfirmationModal({ attachmentOperations, getAttachmentMutationOptions, resourceType, resourceName, redirectUrl, EntityIcon, cancelButtonDisabled, onCancel, onExit, }) {
-    const history = useHistory();
+    const navigate = useNavigate();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const handleClose = () => {
         setIsModalOpen(false);
@@ -73,7 +73,7 @@ export function AttachmentConfirmationModal({ attachmentOperations, getAttachmen
             onExit(successfulOperations, failedOperations);
         }
         handleClose();
-        history.push(redirectUrl);
+        navigate(redirectUrl);
     };
     const modalFooter = () => {
         return (_jsxs(Wrap, { children: [_jsx("p", {}), _jsx(_Fragment, { children: isAttachNotDone ? (_jsxs(Stack, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, label: "Cancel" }), _jsx(Button, { icon: _jsx(Icon, { name: "Arrow-right" }), variant: "primary", onClick: attach, label: "Confirm", disabled: attachmentMutation.isLoading })] })) : (_jsx(Button, { icon: _jsx(Icon, { name: "Arrow-right" }), variant: "primary", onClick: () => {
@@ -135,7 +135,7 @@ export function AttachmentConfirmationModal({ attachmentOperations, getAttachmen
     return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Cancel", variant: "outline", disabled: cancelButtonDisabled, onClick: () => {
                     if (onCancel)
                         onCancel();
-                    history.push(redirectUrl);
+                    navigate(redirectUrl);
                 } }), _jsx(Button, { icon: _jsx(Icon, { name: "Save" }), label: "Save", onClick: () => {
                     setAttachmentOperationsStatuses({});
                     setIsModalOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.153.0",
+  "version": "0.155.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -49,12 +49,12 @@
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^8.3.6",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
@@ -110,16 +110,17 @@
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-debounce-input": "3.2.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "7.0.1",
+    "react-router-dom": "7.0.1",
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
+    "react-test-renderer": "^18.3.1",
     "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",

package/setupTests.js

@@ -1,3 +1,7 @@
 import 'jest-canvas-mock';
 import '@testing-library/jest-dom/extend-expect';
 import 'regenerator-runtime/runtime';
+
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, { TextDecoder, TextEncoder });

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

@@ -40,10 +40,10 @@ export const ButtonStyled = styled.button<Props>`
   text-decoration: none;
   font-family: 'Lato';
   font-weight: ${fontWeight.base};
-
   padding: ${spacing.r4} ${spacing.r8};
   font-size: ${fontSize.base};
   border-radius: ${spacing.r4};
+  white-space: nowrap;
   height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
   ${(props) => {
     const brand = props.theme;
@@ -198,8 +198,8 @@ export const ButtonLoader = styled(Loader)<{ label; variant }>`
         fill: ${props.variant === 'danger'
           ? props.theme.statusCritical
           : props.variant === 'outline'
-          ? props.theme.textPrimary
-          : props.theme.textSecondary};
+            ? props.theme.textPrimary
+            : props.theme.textSecondary};
       }
     `;
   }}

package/src/lib/components/emptystate/Emptystate.component.tsx

@@ -4,7 +4,7 @@ import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon, IconName } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
 import { CoreUITheme } from '../../style/theme';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 
 export type Props = {
   listedResource: {
@@ -48,7 +48,7 @@ export const ActionWrapper = styled.div`
 function EmptyState(props: Props) {
   const { icon, listedResource, link, resourceToCreate, backgroundColor } =
     props;
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <EmptystateContainer
       className="sc-emptystate"
@@ -74,7 +74,7 @@ function EmptyState(props: Props) {
             icon={<Icon name="Create-add" />}
             type="button"
             variant="primary"
-            onClick={() => history.push(link)}
+            onClick={() => navigate(link)}
           />
         </ActionWrapper>
       )}

package/src/lib/components/icon/Icon.component.tsx

@@ -137,6 +137,7 @@ export const iconTable = {
   Ring: 'fas faRing',
   Stop: 'fas faStop',
   Play: 'fas faPlay',
+  Mail: 'fas faEnvelope',
 };
 
 export const customIcons = {

package/src/lib/components/inputlist/InputList.component.tsx

@@ -5,7 +5,7 @@ import { Input } from '../inputv2/inputv2';
 import { AddButton, SubButton } from './InputButtons';
 
 export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
-  ref: RefCallBack;
+  ref?: RefCallBack;
   min?: string | number;
   max?: string | number;
   maxLength?: number;

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

@@ -1,5 +1,5 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon, IconName } from '../icon/Icon.component';
@@ -62,12 +62,12 @@ const InputContainer = styled.div<{
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
   ${(props) =>
-    props.isContextAvailable &&
-    props.disabled &&
-    `
-  opacity: 0.5;
-  cursor: not-allowed;
-  `}
+    props.disabled
+      ? css`
+          opacity: 0.5;
+          cursor: not-allowed;
+        `
+      : ''}
 `;
 
 const InputBorder = styled.div<{

package/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import { useEffect, useState, createContext, useContext } from 'react';
-import { useLocation } from 'react-router-dom';
-import { QueryTimeSpan } from '../constants';
-import { queryTimeSpansCodes } from '../constants';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { QueryTimeSpan, queryTimeSpansCodes } from '../constants';
+import { useLocation } from 'react-router';
 export const MetricsTimeSpanContext = createContext<QueryTimeSpan | null>(null);
 export const MetricsTimeSpanProvider = ({
   children,
+  location,
 }: {
   children: JSX.Element;
+  location?: ReturnType<typeof useLocation>;
 }) => {
   // the default timespan is the last 24h
   const [queryTimeSpanCode, setQueryTimeSpanCode] = useState(
     queryTimeSpansCodes[1],
   );
-  const urlSearchParams = new URLSearchParams(useLocation().search);
+  const urlSearchParams = new URLSearchParams(location?.search);
   const queryTimeSpan = urlSearchParams.get('from');
   // Sync url timespan to local timespan
   useEffect(() => {

package/src/lib/components/tablev2/SearchWithQueryParams.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { TableSearch as Search, SearchProps } from './Search';
 
 export type SearchWithQueryParamsProps = {
@@ -10,7 +10,7 @@ export type SearchWithQueryParamsProps = {
 export function SearchWithQueryParams(props: SearchWithQueryParamsProps) {
   const { queryParams = 'search', onChange, ...rest } = props;
   const { search, pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = new URLSearchParams(search);
   const initialValue = params.get(queryParams) || '';
   const [value, setValue] = useState(initialValue);
@@ -18,7 +18,7 @@ export function SearchWithQueryParams(props: SearchWithQueryParamsProps) {
   function handleOnChange(value: string) {
     const { onChange } = props;
     params.set(queryParams, value);
-    history.replace(`${pathname}?${params.toString()}`);
+    navigate(`${pathname}?${params.toString()}`, { replace: true });
     setValue(value);
 
     if (typeof onChange === 'function') {

package/src/lib/components/tablev2/TableCommon.tsx

@@ -22,7 +22,9 @@ type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 > = {
   rows: Row<DATA_ROW>[];
-  RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
+  RenderRow: ComponentType<
+    React.PropsWithChildren<ListChildComponentProps<Row<DATA_ROW>[]>>
+  >;
   rowHeight: TableHeightKeyType;
   setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   hasScrollbar?: boolean;

package/src/lib/components/tablev2/Tablev2.component.tsx

@@ -156,8 +156,8 @@ const DefaultRenderer = ({ value }) => {
       rowHeight === 'h32'
         ? 1
         : rowHeight === 'h40' || rowHeight === 'h48'
-        ? 2
-        : 3;
+          ? 2
+          : 3;
     return (
       <Box mr={4}>
         <ConstrainedText text={value} lineClamp={lineClamp} />

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

@@ -1,33 +1,33 @@
 import React, {
   createContext,
+  ReactElement,
+  useCallback,
   useEffect,
   useState,
-  useCallback,
-  ReactElement,
 } from 'react';
 import {
-  TabBar,
+  matchPath,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useRoutes,
+} from 'react-router';
+import styled from 'styled-components';
+import { ButtonIcon } from '../buttonv2/Buttonv2.component';
+import { BasicText, EmphaseText, SecondaryText } from '../text/Text.component';
+import { ScrollButton } from './ScrollButton';
+import {
   ScrollableContainer,
+  TabBar,
   TabContent,
   TabItem,
   TabsContainer,
   TabsScroller,
 } from './StyledTabs';
-import {
-  useHistory,
-  useLocation,
-  useRouteMatch,
-  matchPath,
-  Route,
-  Switch,
-} from 'react-router-dom';
-import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
-import { ScrollButton } from './ScrollButton';
-import { Tab } from './Tab';
-import { TabProps, Query } from './Tab';
+import { Query, Tab, TabProps } from './Tab';
 import { useScrollingTabs } from './useScrollingTabs';
-import { ButtonIcon } from '../buttonv2/Buttonv2.component';
-import styled from 'styled-components';
 
 type TabsProps = {
   activeTabColor?: string;
@@ -59,8 +59,8 @@ function Tabs({
   ...rest
 }: TabsProps) {
   const location = useLocation();
-  const history = useHistory();
-  const { url } = useRouteMatch();
+  const navigate = useNavigate();
+  const url = location.pathname;
   const [selectedTabIndex, setSelectedTabIndex] = useState<
     number | null | undefined
   >(null);
@@ -101,24 +101,26 @@ function Tabs({
   };
 
   const getPushHistoryPath = (path: string, query?: Query): string => {
+    const sanitizedSegment = path.replace(/^\/+/, '');
+    const replaceUrl = location.pathname.replace(/[^/]+$/, sanitizedSegment);
+
     if (path.startsWith('/')) {
-      return `${path}${serialize(query)}`;
+      return `${replaceUrl}${serialize(query)}`;
     }
-    return `${url}/${path}${serialize(query)}`;
+
+    return `${path}${serialize(query)}`;
   };
 
   useEffect(() => {
     let hasSelectedTab = false;
     filteredTabsChildren.forEach((child, index) => {
       const isSelected =
-        !!matchPath(location.pathname, {
-          path: child.props.path.startsWith('/')
+        !!matchPath(
+          (child.props.path.startsWith('/')
             ? child.props.path
-            : url + '/' + child.props.path,
-          exact: child.props.exact,
-          strict: child.props.strict,
-          sensitive: child.props.sensitive,
-        }) && (child.props.query ? matchQuery(child.props.query) : true);
+            : url + '/' + child.props.path) + '*',
+          location.pathname,
+        ) && (child.props.query ? matchQuery(child.props.query) : true);
 
       if (isSelected) {
         setSelectedTabIndex(index);
@@ -127,6 +129,7 @@ function Tabs({
     });
     if (!hasSelectedTab) setSelectedTabIndex(null);
   }, [location.pathname, filteredTabsChildren, matchQuery]);
+
   const {
     scrollButtonEndRef,
     scrollButtonStartRef,
@@ -138,6 +141,7 @@ function Tabs({
     handleKeyDown,
     displayScroll,
   } = useScrollingTabs(selectedTabIndex);
+
   const tabItems = filteredTabsChildren.map((child, index) => {
     const {
       path,
@@ -149,12 +153,13 @@ function Tabs({
       ...childRest
     }: TabProps = child.props;
     const isSelected = selectedTabIndex === index;
+    const realPath = path.startsWith('/') ? `/${path.split('/').pop()}` : path;
     return (
       <TabItem
         className={`sc-tabs-item ${isSelected ? 'selected' : ''}`}
         key={index}
         role="tab"
-        onClick={() => history.push(getPushHistoryPath(path, query))}
+        onClick={() => navigate(getPushHistoryPath(realPath, query))}
         selected={isSelected}
         tabHoverColor={tabHoverColor}
         inactiveTabColor={inactiveTabColor}
@@ -168,7 +173,7 @@ function Tabs({
             event.key === 'Spacebar'
           ) {
             event.preventDefault();
-            history.push(getPushHistoryPath(path, query));
+            navigate(getPushHistoryPath(realPath, query));
           }
         }}
         {...childRest}
@@ -218,33 +223,36 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
+        <Routes>
+          {filteredTabsChildren.map((tab, index) => {
+            const path = tab.props.path.split('/').pop();
 
-        {filteredTabsChildren.map((tab, index) => (
-          <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
+            if (tab.props.query && !matchQuery(tab.props.query)) {
+              return <></>;
             }
-            key={index}
-          >
-            {!tab.props.query ||
-            (tab.props.query && matchQuery(tab.props.query)) ? (
-              <TabContent
-                className="sc-tabs-item-content"
-                tabContentColor={tabContentColor}
-                withoutPadding={tab.props.withoutPadding}
-              >
-                {tab.props.children}
-              </TabContent>
-            ) : (
-              <></>
-            )}
-          </Route>
-        ))}
+
+            return (
+              <Route
+                key={index}
+                path={
+                  tab.props.path.startsWith('/') ? '/' + path : path
+                }
+                element={
+                  <>
+                    <TabContent
+                      className="sc-tabs-item-content"
+                      tabContentColor={tabContentColor}
+                      withoutPadding={tab.props.withoutPadding}
+                    >
+                      {tab.props.children}
+                    </TabContent>
+                    <Outlet />
+                  </>
+                }
+              />
+            );
+          })}
+        </Routes>
       </TabsContainer>
     </TabsContext.Provider>
   );
@@ -252,4 +260,4 @@ function Tabs({
 
 Tabs.Tab = Tab;
 // re-export Tab
-export { Tabs, Tab };
+export { Tab, Tabs };

package/src/lib/components/toast/ToastProvider.tsx

@@ -14,7 +14,7 @@ export const ToastContext = createContext<ToastContextType | undefined>(
 interface ToastProviderProps {
   children: ReactNode;
 }
-export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+export const ToastProvider: React.FC<React.PropsWithChildren<ToastProviderProps>> = ({ children }) => {
   const [toastProps, setToastProps] = useState<ToastContextState | null>(null);
 
   const showToast = (toastProps: ToastContextState) => {

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

@@ -1,11 +1,11 @@
 import { ComponentType, useState } from 'react';
-import { Column, Table } from '../../components/tablev2/Tablev2.component';
-import { Box, Button } from '../../next';
 import { useMutation, UseMutationOptions } from 'react-query';
-import { AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+import { useNavigate } from 'react-router';
 import { useTheme } from 'styled-components';
-import { useHistory } from 'react-router';
 import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
+import { Column, Table } from '../../components/tablev2/Tablev2.component';
+import { Box, Button } from '../../next';
+import { AttachmentAction, AttachmentOperation } from './AttachmentTypes';
 
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
@@ -40,7 +40,9 @@ export function AttachmentConfirmationModal<
   resourceName: string;
   resourceType: RESOURCE_TYPE;
   redirectUrl: string;
-  EntityIcon: ComponentType<{ type: ENTITY_TYPE | RESOURCE_TYPE }>;
+  EntityIcon: ComponentType<
+    React.PropsWithChildren<{ type: ENTITY_TYPE | RESOURCE_TYPE }>
+  >;
   cancelButtonDisabled?: boolean;
   onCancel?: () => void;
   onExit?: (
@@ -48,7 +50,7 @@ export function AttachmentConfirmationModal<
     failedOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
 }) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -133,7 +135,7 @@ export function AttachmentConfirmationModal<
       onExit(successfulOperations, failedOperations);
     }
     handleClose();
-    history.push(redirectUrl);
+    navigate(redirectUrl);
   };
   const modalFooter = () => {
     return (
@@ -282,7 +284,7 @@ export function AttachmentConfirmationModal<
         disabled={cancelButtonDisabled}
         onClick={() => {
           if (onCancel) onCancel();
-          history.push(redirectUrl);
+          navigate(redirectUrl);
         }}
       />
       <Button