@centreon/ui 26.12.2 → 26.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.2",
+  "version": "26.12.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/CollapsibleGroup.tsx

@@ -10,7 +10,6 @@ import {
 
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import type { Group } from './Inputs/models';
 
@@ -23,22 +22,6 @@ interface Props {
   isCollapsible: boolean;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  expandCollapseIcon: {
-    justifySelf: 'flex-end'
-  },
-  groupTitleContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  title: {},
-  tooltip: {
-    maxWidth: theme.spacing(60)
-  }
-}));
-
 const CollapsibleGroup = ({
   children,
   isCollapsible,
@@ -47,7 +30,6 @@ const CollapsibleGroup = ({
   defaultIsOpen = false,
   className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -56,7 +38,7 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
+  const containerClassName = `flex items-center gap-x-2 ${className || ''}`;
 
   const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
@@ -66,7 +48,7 @@ const CollapsibleGroup = ({
       isCollapsible ? (
         <ListItemButton
           aria-label={group?.name}
-          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
+          className={`${containerClassName} bg-background-listing-header rounded-lg`}
           dense
           disableGutters
           disableRipple
@@ -75,18 +57,9 @@ const CollapsibleGroup = ({
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
-          {containerComponentChildren}
-        </Box>
+        <Box className={containerClassName}>{containerComponentChildren}</Box>
       ),
-    [
-      isCollapsible,
-      classes.groupTitleContainer,
-      containerClassName,
-      cx,
-      group?.name,
-      toggle
-    ]
+    [isCollapsible, containerClassName, group?.name, toggle]
   );
 
   return (
@@ -100,7 +73,7 @@ const CollapsibleGroup = ({
             data-testid={`${group?.name}-header`}
           >
             <Typography
-              className="groupText scroll-m-12 snap-start"
+              className="groupText scroll-m-12 snap-start text-base font-medium"
               variant="h6"
               {...group?.titleAttributes}
               data-section-group-form-id={group?.name}
@@ -110,7 +83,7 @@ const CollapsibleGroup = ({
             {group?.EndIcon && (
               <Tooltip
                 classes={{
-                  tooltip: classes.tooltip
+                  tooltip: 'max-w-120'
                 }}
                 placement="top"
                 title={group?.TooltipContent ? <group.TooltipContent /> : ''}

package/src/Form/Form.browser.test.tsx

@@ -1,15 +1,19 @@
 import { Typography } from '@mui/material';
 
+import { ThemeMode, userAtom } from '@centreon/ui-context';
+
 import { faker } from '@faker-js/faker';
 import { rs } from '@rstest/core';
 import { render } from '@test-setup/render';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useFormikContext } from 'formik';
+import { createStore, Provider } from 'jotai';
 import { object } from 'yup';
 
 import type { SelectEntry } from '..';
 import { Button } from '../components';
+import ThemeProvider from '../ThemeProvider';
 import { Form } from './Form';
 import { type InputProps, InputType } from './Inputs/models';
 
@@ -443,3 +447,107 @@ describe('Form with sections', () => {
     );
   });
 });
+
+// The theme mode comes from the user atom, and the Tailwind tokens from the
+// `dark` class on the document.
+const initializeFormTitles = (themeMode: ThemeMode): void => {
+  const store = createStore();
+  store.set(userAtom, { ...store.get(userAtom), themeMode });
+
+  document.documentElement.classList.toggle(
+    'dark',
+    themeMode === ThemeMode.dark
+  );
+
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Form
+          areGroupsOpen
+          groups={[{ name: 'Titles section', order: 1 }]}
+          initialValues={{ gridField: '', topLevelField: '' }}
+          inputs={[
+            {
+              additionalLabel: 'Top level block title',
+              fieldName: 'topLevelField',
+              group: 'Titles section',
+              label: 'Top level field',
+              type: InputType.Text
+            },
+            {
+              fieldName: '',
+              grid: {
+                columns: [
+                  {
+                    additionalLabel: 'Grid block title',
+                    fieldName: 'gridField',
+                    label: 'Grid field',
+                    type: InputType.Text
+                  }
+                ]
+              },
+              group: 'Titles section',
+              label: 'Grid',
+              type: InputType.Grid
+            }
+          ]}
+          isCollapsible
+          submit={rs.fn()}
+          validationSchema={object()}
+        />
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+const textPrimaryColor = {
+  [ThemeMode.dark]: 'rgb(255, 255, 255)',
+  [ThemeMode.light]: 'rgb(0, 0, 0)'
+};
+
+[ThemeMode.light, ThemeMode.dark].forEach((themeMode) => {
+  describe(`Form titles in ${themeMode} mode`, () => {
+    beforeEach(() => {
+      expect.hasAssertions();
+    });
+    beforeEach(() => initializeFormTitles(themeMode));
+
+    afterEach(() => {
+      document.documentElement.classList.remove('dark');
+    });
+
+    it('displays the section title in 16px medium on a 24px line', async () => {
+      const title = await screen.findByText('Titles section');
+
+      expect(title).toHaveStyle({
+        fontSize: '16px',
+        fontWeight: '500',
+        lineHeight: '24px'
+      });
+    });
+
+    it('rounds the collapsible section header with an 8px radius', async () => {
+      expect(await screen.findByLabelText('Titles section')).toHaveStyle({
+        borderRadius: '8px'
+      });
+    });
+
+    it('displays the grid block title in 16px bold with the text colour', async () => {
+      expect(await screen.findByText('Grid block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+
+    it('displays the top level block title like the grid block title', async () => {
+      expect(await screen.findByText('Top level block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+  });
+});

package/src/Form/Form.tsx

@@ -4,7 +4,7 @@ import {
   type FormikSharedConfig,
   type FormikValues
 } from 'formik';
-import type { ComponentType } from 'react';
+import { type ComponentType, useRef } from 'react';
 import type { Schema } from 'yup';
 
 import { useStyles } from './Form.styles';
@@ -55,6 +55,7 @@ const Form = <T extends object>({
   ...formikSharedConfig
 }: FormProps<T>): JSX.Element => {
   const { cx, classes } = useStyles();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   if (isLoading) {
     return (
@@ -79,8 +80,8 @@ const Form = <T extends object>({
       validationSchema={validationSchema}
       {...formikSharedConfig}
     >
-      <div>
-        <FormSection groups={groups} />
+      <div ref={containerRef}>
+        <FormSection containerRef={containerRef} groups={groups} />
         {children}
         <div className={cx(className, classes.form)}>
           <Inputs

package/src/Form/Inputs/Grid.tsx

@@ -45,8 +45,7 @@ const Grid = ({
           <Box key={key as string} sx={{ width: '100%' }}>
             {field.additionalLabel && (
               <Typography
-                className={field?.additionalLabelClassName}
-                sx={{ color: 'primary.main', marginBottom: 0.5 }}
+                className={`mb-1 text-base font-bold text-text-primary ${field?.additionalLabelClassName || ''}`}
                 variant="h6"
               >
                 {field.additionalLabel}

package/src/Form/Inputs/index.tsx

@@ -26,7 +26,6 @@ import {
   toPairs
 } from 'ramda';
 import { Fragment, useMemo } from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { GroupDirection } from '..';
 import CollapsibleGroup from '../CollapsibleGroup';
@@ -104,42 +103,6 @@ export const getInput = cond<
   [T, always(TextInput)]
 ]);
 
-interface StylesProps {
-  groupDirection?: GroupDirection;
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
-  additionalLabel: {
-    marginBottom: theme.spacing(0.5)
-  },
-  buttons: {
-    columnGap: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end'
-  },
-  divider: {
-    margin: equals(groupDirection, GroupDirection.Horizontal)
-      ? theme.spacing(0, 2)
-      : theme.spacing(2, 0)
-  },
-  groups: {
-    display: 'flex',
-    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
-      ? 'row'
-      : 'column'
-  },
-  inputs: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: theme.spacing(2, 0),
-    rowGap: theme.spacing(2)
-  },
-  inputWrapper: {
-    width: '100%'
-  }
-}));
-
 interface Props {
   areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
@@ -161,7 +124,7 @@ const Inputs = ({
   areGroupsOpen,
   inputsClassName
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ groupDirection });
+  const isHorizontal = equals(groupDirection, GroupDirection.Horizontal);
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = pluck('name', groups);
@@ -217,7 +180,7 @@ const Inputs = ({
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
-    <div className={classes.groups}>
+    <div className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'}`}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
         const hasGroupTitle = not(isNil(groupName));
 
@@ -238,7 +201,9 @@ const Inputs = ({
                 hasGroupTitle={hasGroupTitle}
                 isCollapsible={isCollapsible}
               >
-                <div className={cx(classes.inputs, inputsClassName)}>
+                <div
+                  className={`flex flex-col my-4 gap-y-4 ${inputsClassName || ''}`}
+                >
                   {groupedInputs.map((inputProps) => {
                     const key =
                       isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
@@ -257,14 +222,11 @@ const Inputs = ({
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div className={classes.inputWrapper} key={key as string}>
+                      <div className="w-full" key={key as string}>
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={cx(
-                              classes.additionalLabel,
-                              inputProps?.additionalLabelClassName
-                            )}
-                            variant="body1"
+                            className={`mb-1 text-base font-bold text-text-primary ${inputProps?.additionalLabelClassName || ''}`}
+                            variant="h6"
                           >
                             {inputProps.additionalLabel}
                           </Typography>
@@ -282,13 +244,9 @@ const Inputs = ({
               hasGroupTitle &&
               not(equals(lastGroup, groupName as string)) && (
                 <Divider
-                  className={classes.divider}
+                  className={isHorizontal ? 'my-0 mx-4' : 'my-4 mx-0'}
                   flexItem
-                  orientation={
-                    equals(groupDirection, GroupDirection.Horizontal)
-                      ? 'vertical'
-                      : 'horizontal'
-                  }
+                  orientation={isHorizontal ? 'vertical' : 'horizontal'}
                 />
               )}
           </Fragment>

package/src/Form/Section/FormSection.browser.test.tsx

@@ -0,0 +1,174 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from '../Inputs/models';
+
+const sectionNames = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];
+
+const SectionContent = (): JSX.Element => <div style={{ height: 400 }} />;
+
+const groups = sectionNames.map((name, index) => ({
+  name,
+  order: index + 1
+}));
+
+const inputs = sectionNames.map((name) => ({
+  custom: { Component: SectionContent },
+  fieldName: name,
+  group: name,
+  label: name,
+  type: InputType.Custom
+}));
+
+const FormInScrollArea = ({ testId }: { testId: string }): JSX.Element => (
+  <div
+    data-testid={testId}
+    style={{ height: 300, overflowY: 'auto', position: 'relative' }}
+  >
+    <Form
+      groups={groups}
+      initialValues={{}}
+      inputs={inputs}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  </div>
+);
+
+const getScrollArea = (testId = 'scroll-area'): HTMLElement =>
+  screen.getByTestId(testId);
+
+const getTab = (name: string, testId = 'scroll-area'): HTMLElement =>
+  within(getScrollArea(testId)).getByRole('tab', { name });
+
+const getSelectedTabs = (testId = 'scroll-area'): Array<string> =>
+  within(getScrollArea(testId))
+    .getAllByRole('tab')
+    .filter((tab) => tab.getAttribute('aria-selected') === 'true')
+    .map((tab) => tab.getAttribute('aria-label') as string);
+
+const scrollToSection = (name: string, testId = 'scroll-area'): void => {
+  const scrollArea = getScrollArea(testId);
+  const anchor = within(scrollArea).getByTestId(`${name}-header`);
+
+  scrollArea.scrollTop +=
+    anchor.getBoundingClientRect().top -
+    scrollArea.getBoundingClientRect().top -
+    48;
+};
+
+describe('Form section navigation', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('activates the first tab when the form is displayed', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+
+    expect(await screen.findByRole('tab', { name: 'Alpha' })).toBeVisible();
+    expect(getSelectedTabs()).toStrictEqual(['Alpha']);
+  });
+
+  it('activates the tab of the section in view when the form is scrolled down then up', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    scrollToSection('Charlie');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Charlie']);
+    });
+
+    scrollToSection('Bravo');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Bravo']);
+    });
+  });
+
+  it('activates the last tab when the form is scrolled to the bottom', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const scrollArea = getScrollArea();
+    scrollArea.scrollTop = scrollArea.scrollHeight;
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Echo']);
+    });
+  });
+
+  it('scrolls to the section and keeps its tab active all along when a tab is clicked', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const tablist = within(getScrollArea()).getByRole('tablist');
+    const selectedWhileScrolling = new Set<string>();
+    const observer = new MutationObserver(() => {
+      for (const tab of getSelectedTabs()) {
+        selectedWhileScrolling.add(tab);
+      }
+    });
+    observer.observe(tablist, {
+      attributeFilter: ['aria-selected'],
+      attributes: true,
+      subtree: true
+    });
+
+    await userEvent.click(getTab('Delta'));
+
+    await waitFor(() => {
+      expect(getScrollArea().scrollTop).toBeGreaterThan(0);
+    });
+    await waitFor(() => {
+      expect(
+        within(getScrollArea())
+          .getByTestId('Delta-header')
+          .getBoundingClientRect().top -
+          getScrollArea().getBoundingClientRect().top
+      ).toBeLessThan(100);
+    });
+
+    // Reaching the section is not the end of the smooth scroll: keep observing
+    // until the scroll position stops moving.
+    let previousScrollTop = -1;
+    await waitFor(() => {
+      const { scrollTop } = getScrollArea();
+      const hasStopped = scrollTop === previousScrollTop;
+      previousScrollTop = scrollTop;
+
+      expect(hasStopped).toBe(true);
+    });
+    observer.disconnect();
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Delta']);
+    });
+    expect([...selectedWhileScrolling]).toStrictEqual(['Delta']);
+  });
+
+  it('only scrolls its own form when two forms share the same group names', async () => {
+    render(
+      <>
+        <FormInScrollArea testId="first-form" />
+        <FormInScrollArea testId="second-form" />
+      </>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByRole('tab', { name: 'Alpha' })).toHaveLength(2);
+    });
+
+    await userEvent.click(getTab('Charlie', 'second-form'));
+
+    await waitFor(() => {
+      expect(getScrollArea('second-form').scrollTop).toBeGreaterThan(0);
+    });
+
+    expect(getScrollArea('first-form').scrollTop).toBe(0);
+    expect(getSelectedTabs('first-form')).toStrictEqual(['Alpha']);
+  });
+});

package/src/Form/Section/FormSection.tsx

@@ -1,22 +1,35 @@
 import { Box, type TabsProps } from '@mui/material';
 
 import { isNil } from 'ramda';
-import { useMemo } from 'react';
+import { type RefObject, useMemo } from 'react';
 
 import { Tabs } from '../../components/Tabs';
 import type { Group } from '../Inputs/models';
-import { useNavigateToSection } from './navigateToSection';
 import { groupToTab } from './PanelTabs';
+import { useActiveSection } from './useActiveSection';
 
 export interface FormSectionProps extends TabsProps {
+  containerRef: RefObject<HTMLElement | null>;
   groups?: Array<Group>;
 }
 
-const FormSection = ({ groups }: FormSectionProps) => {
-  const navigateToSection = useNavigateToSection();
+const FormSection = ({ groups, containerRef }: FormSectionProps) => {
   const tabMemo = useMemo(() => groupToTab(groups), [groups]);
 
-  if (isNil(groups) || groups.length < 4) {
+  const hasTabs = !isNil(groups) && groups.length >= 4;
+
+  const sectionNames = useMemo(
+    () => tabMemo.map(({ value }) => value),
+    [tabMemo]
+  );
+
+  const { activeSection, goToSection } = useActiveSection({
+    containerRef,
+    isEnabled: hasTabs,
+    sectionNames
+  });
+
+  if (!hasTabs) {
     return null;
   }
 
@@ -24,8 +37,9 @@ const FormSection = ({ groups }: FormSectionProps) => {
     <Box className="sticky top-0 bg-background-paper z-100">
       <Tabs
         defaultTab={tabMemo[0].value}
-        onChange={navigateToSection}
+        onChange={goToSection}
         scrollButtons={false}
+        selectedTab={activeSection}
         tabs={tabMemo}
         variant="scrollable"
       />

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,27 @@
-export const useNavigateToSection = () => {
-  return (sectionName: string) => {
-    const section = document.querySelector(
-      `[data-section-group-form-id="${sectionName}"]`
-    );
-
-    section?.scrollIntoView({ behavior: 'smooth' });
-  };
+export const sectionAnchorAttribute = 'data-section-group-form-id';
+
+export const getSectionAnchors = (container: HTMLElement): Array<HTMLElement> =>
+  Array.from(
+    container.querySelectorAll<HTMLElement>(`[${sectionAnchorAttribute}]`)
+  );
+
+interface NavigateToSectionProps {
+  container: HTMLElement | null;
+  sectionName: string;
+}
+
+// The lookup stays inside the form: two forms can share a group name.
+export const navigateToSection = ({
+  container,
+  sectionName
+}: NavigateToSectionProps): void => {
+  if (!container) {
+    return;
+  }
+
+  const section = getSectionAnchors(container).find(
+    (anchor) => anchor.getAttribute(sectionAnchorAttribute) === sectionName
+  );
+
+  section?.scrollIntoView({ behavior: 'smooth' });
 };

package/src/Form/Section/useActiveSection.ts

@@ -0,0 +1,213 @@
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+import {
+  getSectionAnchors,
+  navigateToSection,
+  sectionAnchorAttribute
+} from './navigateToSection';
+
+// Distance from the top of the scroll area under which a section is the one in
+// view: the pinned tab bar plus the scroll margin of the group titles.
+const sectionOffset = 64;
+// `scrollend` is missing from older browsers, and is not fired when the
+// clicked section is already in place.
+const scrollEndFallbackDelay = 1000;
+
+const getScrollParent = (element: HTMLElement | null): HTMLElement | null => {
+  let parent = element?.parentElement ?? null;
+
+  while (parent && parent !== document.body) {
+    // An ancestor that can scroll but has nothing to scroll (no height of its
+    // own) is not the one the user moves: keep looking further up.
+    if (
+      /(auto|scroll)/.test(getComputedStyle(parent).overflowY) &&
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null;
+};
+
+interface ComputeActiveSectionProps {
+  container: HTMLElement;
+  scrollParent: HTMLElement | null;
+  sectionNames: Array<string>;
+}
+
+const computeActiveSection = ({
+  container,
+  scrollParent,
+  sectionNames
+}: ComputeActiveSectionProps): string => {
+  const scrollingElement = scrollParent ?? document.documentElement;
+
+  // A tab can have no section in the form: only the sections displayed count.
+  const sections = getSectionAnchors(container)
+    .filter((anchor) =>
+      sectionNames.includes(anchor.getAttribute(sectionAnchorAttribute) || '')
+    )
+    .map((anchor) => ({
+      name: anchor.getAttribute(sectionAnchorAttribute) as string,
+      top: anchor.getBoundingClientRect().top
+    }));
+
+  if (!sections.length) {
+    return sectionNames[0];
+  }
+
+  const isScrolledToBottom =
+    scrollingElement.scrollTop > 0 &&
+    scrollingElement.scrollTop + scrollingElement.clientHeight >=
+      scrollingElement.scrollHeight - 1;
+
+  // The last sections can be too short to ever reach the top.
+  if (isScrolledToBottom) {
+    return (
+      [...sectionNames]
+        .reverse()
+        .find((name) => sections.some((section) => section.name === name)) ||
+      sectionNames[0]
+    );
+  }
+
+  const line =
+    (scrollParent ? scrollParent.getBoundingClientRect().top : 0) +
+    sectionOffset;
+
+  const passedSections = sections.filter(({ top }) => top <= line);
+
+  if (!passedSections.length) {
+    return sectionNames.find((name) =>
+      sections.some((section) => section.name === name)
+    ) as string;
+  }
+
+  return passedSections.reduce((closest, section) =>
+    section.top > closest.top ? section : closest
+  ).name;
+};
+
+interface UseActiveSectionProps {
+  containerRef: RefObject<HTMLElement | null>;
+  isEnabled: boolean;
+  sectionNames: Array<string>;
+}
+
+interface UseActiveSection {
+  activeSection: string;
+  goToSection: (sectionName: string) => void;
+}
+
+export const useActiveSection = ({
+  containerRef,
+  isEnabled,
+  sectionNames
+}: UseActiveSectionProps): UseActiveSection => {
+  const [activeSection, setActiveSection] = useState(sectionNames[0]);
+
+  const isScrollingToSection = useRef(false);
+  const scrollTargetRef = useRef<HTMLElement | Window | null>(null);
+  const fallbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+  const stopWaitingRef = useRef<(() => void) | undefined>(undefined);
+  const refreshActiveSectionRef = useRef<(() => void) | undefined>(undefined);
+
+  const sectionNamesKey = sectionNames.join('\n');
+
+  const stopWaitingForScrollEnd = useCallback((): void => {
+    stopWaitingRef.current?.();
+    stopWaitingRef.current = undefined;
+    clearTimeout(fallbackTimeoutRef.current);
+    isScrollingToSection.current = false;
+  }, []);
+
+  // The scroll events fired while waiting are ignored, and none fires when the
+  // clicked section is already in place: the position is read again once done.
+  const endScrollWait = useCallback((): void => {
+    stopWaitingForScrollEnd();
+    refreshActiveSectionRef.current?.();
+  }, [stopWaitingForScrollEnd]);
+
+  const goToSection = useCallback(
+    (sectionName: string): void => {
+      stopWaitingForScrollEnd();
+
+      // The clicked tab is the active one until the smooth scroll ends, so the
+      // highlight does not run through the sections in between.
+      setActiveSection(sectionName);
+      isScrollingToSection.current = true;
+
+      const target = scrollTargetRef.current;
+      target?.addEventListener('scrollend', endScrollWait, { once: true });
+      stopWaitingRef.current = () =>
+        target?.removeEventListener('scrollend', endScrollWait);
+      fallbackTimeoutRef.current = setTimeout(
+        endScrollWait,
+        scrollEndFallbackDelay
+      );
+
+      navigateToSection({ container: containerRef.current, sectionName });
+    },
+    [containerRef, endScrollWait, stopWaitingForScrollEnd]
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (!isEnabled || !container) {
+      return undefined;
+    }
+
+    const scrollParent = getScrollParent(container);
+    const scrollTarget = scrollParent ?? window;
+    scrollTargetRef.current = scrollTarget;
+
+    let animationFrame = 0;
+
+    const refresh = (): void => {
+      setActiveSection(
+        computeActiveSection({
+          container,
+          scrollParent,
+          sectionNames: sectionNamesKey.split('\n')
+        })
+      );
+    };
+
+    const update = (): void => {
+      if (isScrollingToSection.current) {
+        return;
+      }
+
+      refresh();
+    };
+
+    const onScroll = (): void => {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(update);
+    };
+
+    refreshActiveSectionRef.current = refresh;
+    scrollTarget.addEventListener('scroll', onScroll, { passive: true });
+    update();
+
+    return () => {
+      scrollTarget.removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(animationFrame);
+      refreshActiveSectionRef.current = undefined;
+      stopWaitingForScrollEnd();
+    };
+  }, [containerRef, isEnabled, sectionNamesKey, stopWaitingForScrollEnd]);
+
+  return { activeSection, goToSection };
+};

package/src/components/Tabs/Tabs.tsx

@@ -15,6 +15,7 @@ export interface TabI {
 type Props = {
   children?: Array<JSX.Element>;
   defaultTab: string;
+  selectedTab?: string;
   tabList?: TabsProps;
   variant?: 'standard' | 'scrollable' | 'fullWidth';
   scrollButtons?: boolean | 'auto';
@@ -25,6 +26,7 @@ type Props = {
 export const Tabs = ({
   children,
   defaultTab,
+  selectedTab: controlledTab,
   tabs,
   tabList,
   variant,
@@ -33,7 +35,11 @@ export const Tabs = ({
 }: Props): JSX.Element => {
   const { classes } = useTabsStyles();
 
-  const [selectedTab, setSelectedTab] = useState(defaultTab);
+  const [internalTab, setSelectedTab] = useState(defaultTab);
+
+  // The parent drives the tab when it passes one (e.g. a form following its
+  // scroll); otherwise the tab keeps its own state.
+  const selectedTab = controlledTab ?? internalTab;
 
   const changeTab = useCallback(
     (_: React.SyntheticEvent, newValue: string): void => {