@ndla/ui 43.0.0 → 43.0.2

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useState } from 'react';
-import { Drawer } from '@ndla/modal';
+import React, { ReactNode, useCallback, useState } from 'react';
+import { Drawer, Modal, ModalTrigger } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import styled from '@emotion/styled';
@@ -63,42 +63,34 @@ const StyledHeader = styled.div`
 const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
+
+  const closeModal = useCallback(() => {
+    onSearchClose();
+    setIsOpen(false);
+  }, [onSearchClose]);
+
   return (
-    <>
-      <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
-        {t('masthead.menu.search')}
-      </ToggleSearchButton>
+    <Modal open={isOpen} onOpenChange={setIsOpen}>
+      <ModalTrigger>
+        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+          {t('masthead.menu.search')}
+        </ToggleSearchButton>
+      </ModalTrigger>
       <StyledDrawer
-        controlled
         aria-label={t('searchPage.searchFieldPlaceholder')}
         position="top"
         expands
         size="small"
-        animation="slideIn"
         animationDuration={200}
-        isOpen={isOpen}
-        onClose={() => {
-          setIsOpen(false);
-          onSearchClose();
-        }}
       >
-        {(closeModal) => (
-          <>
-            <StyledHeader>
-              {children(closeModal)}
-              <IconButton
-                aria-label={t('welcomePage.closeSearch')}
-                variant="ghost"
-                colorTheme="light"
-                onClick={closeModal}
-              >
-                <Cross className="c-icon--medium" />
-              </IconButton>
-            </StyledHeader>
-          </>
-        )}
+        <StyledHeader>
+          {children(closeModal)}
+          <IconButton aria-label={t('welcomePage.closeSearch')} variant="ghost" colorTheme="light" onClick={closeModal}>
+            <Cross className="c-icon--medium" />
+          </IconButton>
+        </StyledHeader>
       </StyledDrawer>
-    </>
+    </Modal>
   );
 };
 

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
 import VisualElement from './VisualElement';
@@ -64,15 +64,16 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
           <p>{aboutNDLAVideo.description}</p>
-          <Modal size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
-            {(onClose) => (
-              <>
-                <ModalHeader>
-                  <ModalCloseButton onClick={onClose} />
-                </ModalHeader>
-                <ModalBody>{moreAboutNdlaFilm}</ModalBody>
-              </>
-            )}
+          <Modal>
+            <ModalTrigger>
+              <Button variant="link">{t('ndlaFilm.about.more')}</Button>
+            </ModalTrigger>
+            <ModalContent size="full">
+              <ModalHeader>
+                <ModalCloseButton />
+              </ModalHeader>
+              <ModalBody>{moreAboutNdlaFilm}</ModalBody>
+            </ModalContent>
           </Modal>
         </div>
       </StyledAside>

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import CategorySelect from './CategorySelect';
+import { Option, Select, SingleValue } from '@ndla/select';
 import { MovieResourceType } from './types';
 import { OneColumn } from '..';
 import { StyledHeadingH2 } from './filmStyles';
@@ -59,7 +59,6 @@ interface Props {
   onChangeResourceType: (resourceType?: string) => void;
   resourceTypeSelected?: MovieResourceType;
   resourceTypes: MovieResourceType[];
-  ariaControlId: string;
   skipToContentId?: string;
 }
 
@@ -68,10 +67,32 @@ const FilmMovieSearch = ({
   onChangeResourceType,
   resourceTypes,
   resourceTypeSelected,
-  ariaControlId,
   skipToContentId,
 }: Props) => {
   const { t } = useTranslation();
+  const selectedOption = useMemo(() => {
+    if (resourceTypeSelected) {
+      return { value: resourceTypeSelected.id, label: resourceTypeSelected.name };
+    }
+    return { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+  }, [resourceTypeSelected, t]);
+
+  const options: Option[] = useMemo(() => {
+    const fromNdla = { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+    return [fromNdla].concat(resourceTypes.map((rt) => ({ value: rt.id, label: rt.name })));
+  }, [resourceTypes, t]);
+
+  const onChange = useCallback(
+    (value: SingleValue) => {
+      if (value?.value === 'fromNdla') {
+        onChangeResourceType();
+      } else {
+        onChangeResourceType(value?.value);
+      }
+    },
+    [onChangeResourceType],
+  );
+
   return (
     <FilmMovieSearchContainer>
       <OneColumn>
@@ -91,11 +112,13 @@ const FilmMovieSearch = ({
             </StyledUl>
           </nav>
         </TopicNavigation>
-        <CategorySelect
-          onChangeResourceType={onChangeResourceType}
-          resourceTypes={resourceTypes}
-          resourceTypeSelected={resourceTypeSelected}
-          ariaControlId={ariaControlId}
+        <Select<false>
+          options={options}
+          value={selectedOption}
+          onChange={onChange}
+          colorTheme="white"
+          placeholder={t('ndlaFilm.search.chooseCategory')}
+          prefix={`${t('ndlaFilm.search.chooseCategory')} `}
         />
       </OneColumn>
     </FilmMovieSearchContainer>

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle } from '@ndla/modal';
+import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
 import { LearningPathQuiz } from '@ndla/icons/contentType';
@@ -185,31 +185,27 @@ const ResourcesTopicTitle = ({
             onChange={toggleAdditionalResources}
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
-          <Modal
-            wrapperFunctionForButton={(activateButton: ReactNode) => (
-              <TooltipWrapper>
-                <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
-              </TooltipWrapper>
-            )}
-            activateButton={
-              <TooltipButton aria-label={t('resource.dialogTooltip')}>
-                <HelpIcon invertedStyle={invertedStyle} />
-              </TooltipButton>
-            }
-          >
-            {(onClose: () => void) => (
-              <>
-                <ModalHeader>
-                  <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
-                  <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
-                </ModalHeader>
-                <ModalBody>
-                  <hr />
-                  <p>{t('resource.dialogText1')}</p>
-                  <p>{t('resource.dialogText2')}</p>
-                </ModalBody>
-              </>
-            )}
+          <Modal>
+            <TooltipWrapper>
+              <Tooltip tooltip={t('resource.dialogTooltip')}>
+                <ModalTrigger>
+                  <TooltipButton aria-label={t('resource.dialogTooltip')}>
+                    <HelpIcon invertedStyle={invertedStyle} />
+                  </TooltipButton>
+                </ModalTrigger>
+              </Tooltip>
+            </TooltipWrapper>
+            <ModalContent>
+              <ModalHeader>
+                <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
+                <ModalCloseButton />
+              </ModalHeader>
+              <ModalBody>
+                <hr />
+                <p>{t('resource.dialogText1')}</p>
+                <p>{t('resource.dialogText2')}</p>
+              </ModalBody>
+            </ModalContent>
           </Modal>
         </StyledRow>
       )}

package/src/Search/ToggleSearchButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
 import { Search } from '@ndla/icons/common';
 import { ButtonProps, ButtonV2 } from '@ndla/button';
@@ -62,17 +62,20 @@ const StyledSpan = styled.span`
   font-weight: ${fonts.weight.normal};
 `;
 
-const ToggleSearchButton = ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }: Props) => (
-  <StyledButton
-    ndlaFilm={ndlaFilm}
-    hideOnNarrowScreen={hideOnNarrowScreen}
-    hideOnWideScreen={hideOnWideScreen}
-    type="button"
-    {...rest}
-  >
-    <StyledSpan>{children}</StyledSpan>
-    <Search />
-  </StyledButton>
+const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(
+  ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }, ref) => (
+    <StyledButton
+      ndlaFilm={ndlaFilm}
+      hideOnNarrowScreen={hideOnNarrowScreen}
+      hideOnWideScreen={hideOnWideScreen}
+      type="button"
+      ref={ref}
+      {...rest}
+    >
+      <StyledSpan>{children}</StyledSpan>
+      <Search />
+    </StyledButton>
+  ),
 );
 
 export default ToggleSearchButton;

package/src/SearchTypeResult/PopupFilter.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { ModalCloseButton, ModalBody, Modal, ModalTitle } from '@ndla/modal';
+import { ModalCloseButton, ModalBody, ModalTitle, ModalContent } from '@ndla/modal';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,7 @@ const ModalHeaderWrapper = styled.div`
   margin-bottom: ${spacing.normal};
 `;
 
-const ModalContent = styled.div`
+const Content = styled.div`
   max-width: 1040px;
   flex-grow: 1;
 `;
@@ -69,10 +69,8 @@ export type PopupFilterProps = {
   subjectCategories?: { categories: subjectsProps['categories'] };
   subjectValues: string[];
   programmesValues: string[];
-  onClose: () => void;
   onToggleSubject: (value: string) => void;
   onToggleProgramme: (value: string) => void;
-  isOpen: boolean;
 };
 
 const PopupFilter = ({
@@ -82,82 +80,69 @@ const PopupFilter = ({
   programmesValues,
   onToggleSubject,
   onToggleProgramme,
-  onClose,
-  isOpen,
 }: PopupFilterProps) => {
   const { t } = useTranslation();
   const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
-  const headingId = 'popupFilterHeading';
 
   return (
-    <Modal
-      aria-labelledby={headingId}
-      controlled
-      animation="subtle"
-      animationDuration={50}
-      onClose={onClose}
-      isOpen={isOpen}
-      size="full"
-    >
-      {() => (
-        <ModalBody>
-          <ModalWrapper>
-            <ModalContent>
-              <ModalHeaderWrapper>
-                <ModalTitle>{t('searchPage.searchFilterMessages.filterLabel')}</ModalTitle>
-                <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
-              </ModalHeaderWrapper>
-              {subjectCategories && programmes && (
-                <MainFilterButtonWrapper>
-                  <ButtonV2
-                    onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                    colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : undefined}
-                    size="normal"
-                    shape="pill"
-                  >
-                    {t('frontpageMenu.allsubjects')}
-                  </ButtonV2>
-                </MainFilterButtonWrapper>
-              )}
-              {programmes && (
+    <ModalContent animation="subtle" animationDuration={50} size="full">
+      <ModalBody>
+        <ModalWrapper>
+          <Content>
+            <ModalHeaderWrapper>
+              <ModalTitle>{t('searchPage.searchFilterMessages.filterLabel')}</ModalTitle>
+              <ModalCloseButton />
+            </ModalHeaderWrapper>
+            {subjectCategories && programmes && (
+              <MainFilterButtonWrapper>
                 <ButtonV2
-                  onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                  colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : undefined}
+                  onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
+                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : undefined}
                   size="normal"
                   shape="pill"
                 >
-                  {t('frontpageMenu.program')}
+                  {t('frontpageMenu.allsubjects')}
                 </ButtonV2>
-              )}
-              {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
-                <FrontpageAllSubjects
-                  categories={subjectCategories.categories}
-                  selectedSubjects={subjectValues}
-                  onToggleSubject={onToggleSubject}
-                  subjectViewType="checkbox"
-                />
-              )}
-              {selectedMenu === MENU_PROGRAMMES && programmes && (
-                <StyledList>
-                  {programmes.options.map((item: ProgrammeOptionProps) => (
-                    <StyledListItem key={item.id}>
-                      <ToggleItem
-                        id={item.id}
-                        value={item.id}
-                        checked={programmesValues.includes(item.id)}
-                        label={item.name}
-                        component="div"
-                        onChange={() => onToggleProgramme(item.id)}
-                      />
-                    </StyledListItem>
-                  ))}
-                </StyledList>
-              )}
-            </ModalContent>
-          </ModalWrapper>
-        </ModalBody>
-      )}
-    </Modal>
+              </MainFilterButtonWrapper>
+            )}
+            {programmes && (
+              <ButtonV2
+                onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
+                colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : undefined}
+                size="normal"
+                shape="pill"
+              >
+                {t('frontpageMenu.program')}
+              </ButtonV2>
+            )}
+            {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
+              <FrontpageAllSubjects
+                categories={subjectCategories.categories}
+                selectedSubjects={subjectValues}
+                onToggleSubject={onToggleSubject}
+                subjectViewType="checkbox"
+              />
+            )}
+            {selectedMenu === MENU_PROGRAMMES && programmes && (
+              <StyledList>
+                {programmes.options.map((item: ProgrammeOptionProps) => (
+                  <StyledListItem key={item.id}>
+                    <ToggleItem
+                      id={item.id}
+                      value={item.id}
+                      checked={programmesValues.includes(item.id)}
+                      label={item.name}
+                      component="div"
+                      onChange={() => onToggleProgramme(item.id)}
+                    />
+                  </StyledListItem>
+                ))}
+              </StyledList>
+            )}
+          </Content>
+        </ModalWrapper>
+      </ModalBody>
+    </ModalContent>
   );
 };
 

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -10,7 +10,8 @@ import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
-import { ModalCloseButton } from '@ndla/modal';
+import { IconButtonV2 } from '@ndla/button';
+import { Cross } from '@ndla/icons/action';
 
 const Wrapper = styled.div`
   display: flex;
@@ -67,7 +68,9 @@ const SearchNotionsResult = ({ totalCount, onRemove, children }: Props) => {
           {t(`searchPage.resultType.notionsHeading`)}
           <HeadingCount>{t(`searchPage.resultType.hits`, { count: totalCount })}</HeadingCount>
         </Heading>
-        <ModalCloseButton onClick={onRemove} title={t(`searchPage.resultType.notionsRemove`)} />
+        <IconButtonV2 onClick={onRemove} aria-label={t(`searchPage.resultType.notionsRemove`)}>
+          <Cross />
+        </IconButtonV2>
       </HeadingWrapper>
       {children}
     </Wrapper>

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -12,7 +12,7 @@ import { Additional, Core } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
-import { Modal, ModalCloseButton, ModalHeader, ModalTitle } from '@ndla/modal';
+import { Modal, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from '@ndla/modal';
 import { useTranslation } from 'react-i18next';
 
 const BreadcrumbPath = styled.div`
@@ -34,7 +34,7 @@ const ModalButton = styled(ButtonV2)`
   }
 `;
 
-const ModalContent = styled.div`
+const Content = styled.div`
   padding: 0 ${spacing.small} ${spacing.normal};
   ${mq.range({ from: breakpoints.tablet })} {
     padding: 0 ${spacing.large} ${spacing.normal};
@@ -83,37 +83,32 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
     <Breadcrumb breadcrumb={mainContext.breadcrumb}>
       &nbsp;
       {contexts.length > 1 && (
-        <Modal
-          activateButton={
+        <Modal>
+          <ModalTrigger>
             <ModalButton variant="link">
               {t('searchPage.contextModal.button', {
                 count: contexts.length - 1,
               })}
             </ModalButton>
-          }
-          animation="subtle"
-          animationDuration={50}
-        >
-          {(onClose: () => void) => (
-            <>
-              <ModalHeader>
-                <ModalTitle>{t('searchPage.contextModal.heading')}</ModalTitle>
-                <ModalCloseButton onClick={onClose} title={t('searchPage.close')} />
-              </ModalHeader>
-              <ModalContent>
-                <ContextList>
-                  {contexts.map((context) => (
-                    <ContextListItem key={context.url}>
-                      <SafeLink to={context.url}>{title}</SafeLink>
-                      <Breadcrumb breadcrumb={context.breadcrumb}>
-                        {context.isAdditional ? <Additional style={iconStyle} /> : <Core style={iconStyle} />}
-                      </Breadcrumb>
-                    </ContextListItem>
-                  ))}
-                </ContextList>
-              </ModalContent>
-            </>
-          )}
+          </ModalTrigger>
+          <ModalContent animation="subtle" animationDuration={50}>
+            <ModalHeader>
+              <ModalTitle>{t('searchPage.contextModal.heading')}</ModalTitle>
+              <ModalCloseButton />
+            </ModalHeader>
+            <Content>
+              <ContextList>
+                {contexts.map((context) => (
+                  <ContextListItem key={context.url}>
+                    <SafeLink to={context.url}>{title}</SafeLink>
+                    <Breadcrumb breadcrumb={context.breadcrumb}>
+                      {context.isAdditional ? <Additional style={iconStyle} /> : <Core style={iconStyle} />}
+                    </Breadcrumb>
+                  </ContextListItem>
+                ))}
+              </ContextList>
+            </Content>
+          </ModalContent>
         </Modal>
       )}
     </Breadcrumb>

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { Plus as PlusIcon } from '@ndla/icons/action';
 
+import { Modal, ModalTrigger } from '@ndla/modal';
 import PopupFilter, { PopupFilterProps } from '../PopupFilter';
 import ActiveFilters from '../ActiveFilters';
 import { FilterProps } from '../ActiveFilterContent';
@@ -101,15 +102,13 @@ const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilte
     setIsOpen(true);
   };
 
-  const handleModalClose = () => {
-    setIsOpen(false);
-  };
-
   const OpenModalButton = () => (
-    <ButtonV2 type="button" size="normal" colorTheme="greyLighter" shape="pill" onClick={handlePopupOpen}>
-      <FilterButtonText>{t('searchPage.searchFilterMessages.noValuesButtonText')}</FilterButtonText>
-      <PlusIcon />
-    </ButtonV2>
+    <ModalTrigger>
+      <ButtonV2 type="button" size="normal" colorTheme="greyLighter" shape="pill">
+        <FilterButtonText>{t('searchPage.searchFilterMessages.noValuesButtonText')}</FilterButtonText>
+        <PlusIcon />
+      </ButtonV2>
+    </ModalTrigger>
   );
 
   const ActiveFiltersElement = ({ showModalButton }: { showModalButton?: boolean }) => {
@@ -126,7 +125,7 @@ const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilte
   };
 
   return (
-    <>
+    <Modal open={isOpen} onOpenChange={setIsOpen}>
       {isNarrowScreen ? (
         <ActiveFiltersElement showModalButton />
       ) : isNarrowScreen === false ? (
@@ -140,12 +139,10 @@ const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilte
         subjectCategories={subjectCategories}
         subjectValues={subjectValues}
         programmesValues={programmesValues}
-        onClose={handleModalClose}
         onToggleSubject={onToggleSubject}
         onToggleProgramme={onToggleProgramme}
-        isOpen={isOpen}
       />
-    </>
+    </Modal>
   );
 };
 

package/src/Topic/Topic.tsx

@@ -12,7 +12,7 @@ import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core'
 
 import parse from 'html-react-parser';
 import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
-import { ModalCloseButton, Modal, ModalHeader } from '@ndla/modal';
+import { ModalCloseButton, ModalContent, Modal, ModalHeader, ModalTrigger } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { css } from '@emotion/react';
@@ -275,9 +275,8 @@ const Topic = ({
         {topic.image && (
           <TopicHeaderVisualElementWrapper>
             {topic.visualElement ? (
-              <Modal
-                aria-label={t('topicPage.imageModal')}
-                activateButton={
+              <Modal>
+                <ModalTrigger>
                   <VisualElementButton
                     variant="stripped"
                     title={topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')}
@@ -291,19 +290,18 @@ const Topic = ({
                     </ShowVisualElementWrapper>
                     <ExpandVisualElementButton>{VisualElementIcon && <VisualElementIcon />}</ExpandVisualElementButton>
                   </VisualElementButton>
-                }
-                animation="subtle"
-                animationDuration={50}
-                size="large"
-              >
-                {(onClose: () => void) => (
-                  <>
-                    <StyledModalHeader>
-                      <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
-                    </StyledModalHeader>
-                    {topic.visualElement && topic.visualElement.element}
-                  </>
-                )}
+                </ModalTrigger>
+                <ModalContent
+                  aria-label={t('topicPage.imageModal')}
+                  animation="subtle"
+                  animationDuration={50}
+                  size="large"
+                >
+                  <StyledModalHeader>
+                    <ModalCloseButton />
+                  </StyledModalHeader>
+                  {topic.visualElement && topic.visualElement.element}
+                </ModalContent>
               </Modal>
             ) : (
               <TopicHeaderImage