@scality/core-ui 0.126.0 → 0.128.0

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

@@ -1,6 +1,10 @@
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, {
+  createContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactElement,
+} from 'react';
 import {
   TabBar,
   ScrollableContainer,
@@ -15,6 +19,7 @@ import {
   useRouteMatch,
   matchPath,
   Route,
+  Switch,
 } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
 import { ScrollButton } from './ScrollButton';
@@ -32,7 +37,7 @@ type TabsProps = {
   tabContentColor?: string;
   separatorColor?: string;
   tabHoverColor?: string;
-  children: ChildrenArray<Element<typeof Tab>>;
+  children: ReactElement<TabProps>[];
   className?: string;
 };
 export const TabsContext = createContext<boolean>(false);
@@ -60,9 +65,11 @@ function Tabs({
     number | null | undefined
   >(null);
   const queryURL = new URLSearchParams(location.search);
-  const filteredTabsChildren = React.Children.toArray(children).filter(
+  const filteredTabsChildren: ReactElement<TabProps>[] = React.Children.toArray(
+    children,
+  ).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as ReactElement<TabProps>[];
 
   const matchQuery = useCallback(
     (query: Query): boolean => {
@@ -168,19 +175,19 @@ function Tabs({
       >
         {icon && <TabIcon label={label}>{icon}</TabIcon>}
         {isSelected ? (
-          <BasicText className="sc-tabs-item-title">{label}</BasicText>
+          <BasicText>{label}</BasicText>
         ) : (
-          <SecondaryText className="sc-tabs-item-title">{label}</SecondaryText>
-        )}
-        {textBadge && (
-          <EmphaseText className="sc-tabs-item-icon">{textBadge}</EmphaseText>
+          <SecondaryText>{label}</SecondaryText>
         )}
+        {textBadge && <EmphaseText>{textBadge}</EmphaseText>}
       </TabItem>
     );
   });
   return (
     <TabsContext.Provider value={true}>
+      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
+        style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
         tabLineColor={tabLineColor}
         separatorColor={separatorColor}
@@ -212,31 +219,33 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
-        <TabContent
-          className="sc-tabs-item-content"
-          tabContentColor={tabContentColor}
-        >
-          {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
-            <Route
-              exact={tab.props.exact}
-              sensitive={tab.props.sensitive}
-              strict={tab.props.strict}
-              key={index}
-              path={
-                tab.props.path.startsWith('/')
-                  ? tab.props.path
-                  : url + '/' + tab.props.path
-              }
-            >
-              {!tab.props.query ||
-              (tab.props.query && matchQuery(tab.props.query)) ? (
-                tab.props.children
-              ) : (
-                <></>
-              )}
-            </Route>
-          ))}
-        </TabContent>
+
+        {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
+            }
+            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>
+        ))}
       </TabsContainer>
     </TabsContext.Provider>
   );

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

@@ -283,7 +283,7 @@ const useScrollingTabs = (selectedTabIndex: number | null | undefined) => {
     scrollSelectedIntoView();
   }, [scrollSelectedIntoView, selectedTabIndex]);
 
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const list = tabsListRef.current;
     const ownerDocument = (list && list.ownerDocument) || document;
     const currentFocus = ownerDocument.activeElement;

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

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

package/stories/attachment.stories.tsx

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