@ndla/ui 42.1.2 → 43.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "42.1.2",
+  "version": "43.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,26 +31,26 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.14",
+    "@ndla/accordion": "^2.2.16",
     "@ndla/article-scripts": "^3.0.19",
-    "@ndla/button": "^10.2.0",
+    "@ndla/button": "^11.0.1",
     "@ndla/carousel": "^3.1.11",
     "@ndla/core": "^4.1.4",
-    "@ndla/forms": "^4.3.14",
+    "@ndla/dropdown-menu": "^1.0.1",
+    "@ndla/forms": "^4.3.16",
     "@ndla/hooks": "^2.0.8",
     "@ndla/icons": "^4.0.1",
     "@ndla/licenses": "^7.1.1",
-    "@ndla/modal": "^3.0.11",
-    "@ndla/notion": "^5.0.12",
-    "@ndla/safelink": "^4.1.13",
+    "@ndla/modal": "^4.0.0",
+    "@ndla/notion": "^5.0.14",
+    "@ndla/safelink": "^4.1.15",
+    "@ndla/select": "^2.4.7",
     "@ndla/switch": "^1.1.8",
     "@ndla/tabs": "^3.0.4",
     "@ndla/tooltip": "^4.1.13",
     "@ndla/util": "^3.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
-    "focus-trap-react": "^8.9.2",
     "framer-motion": "^6.5.1",
     "html-react-parser": "^3.0.8",
     "i18next-browser-languagedetector": "^6.1.1",
@@ -67,8 +67,7 @@
     "i18next": "^21.9.2",
     "lodash": "^4.17.20",
     "react": ">= 16.8.0",
-    "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.3.0"
+    "react-i18next": "^11.18.6"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
@@ -83,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "01511e002ccec48113b64d59fa4af86f39f25521"
+  "gitHead": "8e45543b08254be6779eacff708494896344bee8"
 }

package/src/Article/ArticleNotions.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle } from '@ndla/modal';
+import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
 import { mq, breakpoints, fonts, colors } from '@ndla/core';
 import { Explanation, NotionFlip } from '@ndla/icons/common';
 import { ConceptNotion } from '../Notion';
@@ -165,48 +165,42 @@ type ArticleNotionsProps = {
 export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
-  const headingId = 'popupNotionHeading';
 
   return (
     <ArticleNotionsContainer>
-      <Modal
-        aria-labelledby={headingId}
-        activateButton={
+      <Modal>
+        <ModalTrigger>
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
-            <span id={headingId}>{t('article.notionsPrompt')}</span>
+            <span>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
-        }
-        size="large"
-      >
-        {(onClose: () => void) => (
-          <div>
-            <ModalHeader className="no-padding">
-              <ModalHeadingContainer>
-                <Explanation />
-                <ModalTitle>{t('article.notionsPrompt')}</ModalTitle>
-              </ModalHeadingContainer>
-              <ModalCloseButton onClick={onClose} title="Lukk" />
-            </ModalHeader>
-            <ModalBody modifier="notions-modal-body no-padding">
-              <NotionsContainer>
-                {notions.map((notion) => (
-                  <ConceptNotion key={notion.id} concept={notion} type={type} />
+        </ModalTrigger>
+        <ModalContent size="large">
+          <ModalHeader className="no-padding">
+            <ModalHeadingContainer>
+              <Explanation />
+              <ModalTitle>{t('article.notionsPrompt')}</ModalTitle>
+            </ModalHeadingContainer>
+            <ModalCloseButton />
+          </ModalHeader>
+          <ModalBody modifier="notions-modal-body no-padding">
+            <NotionsContainer>
+              {notions.map((notion) => (
+                <ConceptNotion key={notion.id} concept={notion} type={type} />
+              ))}
+            </NotionsContainer>
+            {relatedContent.length > 0 && (
+              <RelatedContentContainer>
+                {relatedContent.map((content, i) => (
+                  <li key={`notion-related-item-${i + 1}`}>
+                    <a href={content.url}>{content.label}</a>
+                  </li>
                 ))}
-              </NotionsContainer>
-              {relatedContent.length > 0 && (
-                <RelatedContentContainer>
-                  {relatedContent.map((content, i) => (
-                    <li key={`notion-related-item-${i + 1}`}>
-                      <a href={content.url}>{content.label}</a>
-                    </li>
-                  ))}
-                </RelatedContentContainer>
-              )}
-            </ModalBody>
-          </div>
-        )}
+              </RelatedContentContainer>
+            )}
+          </ModalBody>
+        </ModalContent>
       </Modal>
     </ArticleNotionsContainer>
   );

package/src/AudioPlayer/Controls.tsx

@@ -8,14 +8,14 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { Root, Trigger, Item, Content, DropdownMenuPortal } from '@radix-ui/react-dropdown-menu';
 import { Root as SliderRoot, Track, Range, SliderThumb } from '@radix-ui/react-slider';
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
 import { Play, Pause, VolumeUp } from '@ndla/icons/common';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Back15, Forward15 } from '@ndla/icons/action';
 import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
 
 const ControlsWrapper = styled.div`
   border: 1px solid ${colors.brand.lighter};
@@ -59,22 +59,15 @@ const SpeedButton = styled(ButtonV2)`
   }
 `;
 
-const SpeedList = styled(Content)`
-  background: ${colors.white};
+const SpeedList = styled(DropdownContent)`
   border: 1px solid ${colors.brand.lighter};
-  border-radius: ${misc.borderRadius};
   padding: 5px 10px;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
 `;
 
-const SpeedValueButton = styled(Item)`
-  height: 28px;
+const SpeedValueButton = styled(ButtonV2)`
   padding: 0 14px;
-  cursor: pointer;
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('14px')};
+  gap: 0px;
   color: ${colors.text.light};
   display: flex;
   justify-content: center;
@@ -82,14 +75,13 @@ const SpeedValueButton = styled(Item)`
   &:active,
   &:focus,
   &[data-highlighted] {
-    background: ${colors.brand.greyLighter};
-    border-radius: 5px;
     outline: none;
     color: ${colors.text.primary};
   }
 `;
 
 const SpeedSelectedMark = styled.span`
+  align-self: flex-start;
   border-radius: 50%;
   background: #d1372e;
   width: 6px;
@@ -311,9 +303,8 @@ const Controls = ({ src, title }: Props) => {
         >
           <Back15 />
         </Back15SecButton>
-
-        <Root>
-          <Trigger asChild>
+        <DropdownMenu>
+          <DropdownTrigger>
             <SpeedButton
               shape="pill"
               variant="ghost"
@@ -324,17 +315,22 @@ const Controls = ({ src, title }: Props) => {
             >
               {speedValue}x
             </SpeedButton>
-          </Trigger>
-          <DropdownMenuPortal>
-            <SpeedList side="top">
-              {speedValues.map((speed) => (
-                <SpeedValueButton key={speed} onSelect={() => setSpeedValue(speed)}>
+          </DropdownTrigger>
+          <SpeedList side="top">
+            {speedValues.map((speed) => (
+              <DropdownItem key={speed}>
+                <SpeedValueButton
+                  variant="ghost"
+                  colorTheme="greyLighter"
+                  size="small"
+                  onSelect={() => setSpeedValue(speed)}
+                >
                   {speed}x{speed === speedValue && <SpeedSelectedMark />}
                 </SpeedValueButton>
-              ))}
-            </SpeedList>
-          </DropdownMenuPortal>
-        </Root>
+              </DropdownItem>
+            ))}
+          </SpeedList>
+        </DropdownMenu>
         <Forward15SecButton
           colorTheme="greyLighter"
           variant="ghost"

package/src/Breadcrumb/index.ts

@@ -14,6 +14,4 @@ export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';
 
 export { default as HomeBreadcrumb } from './HomeBreadcrumb';
 
-export { default as ActionBreadcrumb } from './ActionBreadcrumb';
-
 export default Breadcrumb;

package/src/Filter/FilterButtons.tsx

@@ -11,7 +11,7 @@ import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import ToggleItem from './ToggleItem';
 import FilterCarousel from './FilterCarousel';
 
@@ -126,45 +126,39 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
               </ButtonV2>
             </StyledButtonElementWrapper>
           ))}
-          <Modal
-            aria-label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
-            size="full"
-            animation="subtle"
-            activateButton={
-              <StyledButtonElementWrapper>
+          <Modal aria-label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}>
+            <StyledButtonElementWrapper>
+              <ModalTrigger>
                 <ButtonV2 colorTheme="light" size="normal" shape="pill">
                   <StyledButtonContent>{labels.openFilter}</StyledButtonContent>
                   <StyledButtonContentSelected>
                     <PlusIcon />
                   </StyledButtonContentSelected>
                 </ButtonV2>
-              </StyledButtonElementWrapper>
-            }
-          >
-            {(onClose: () => void) => (
-              <>
-                <ModalHeader>
-                  <h1>{heading}</h1>
-                  <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
-                </ModalHeader>
-                <ModalBody modifier="slide-in-left">
-                  <StyledList>
-                    {items.map((item: ItemProps) => (
-                      <StyledListItem key={item.value}>
-                        <ToggleItem
-                          id={item.value}
-                          value={item.value}
-                          checked={item.selected}
-                          label={item.label}
-                          component="div"
-                          onChange={() => onFilterToggle(item.value)}
-                        />
-                      </StyledListItem>
-                    ))}
-                  </StyledList>
-                </ModalBody>
-              </>
-            )}
+              </ModalTrigger>
+            </StyledButtonElementWrapper>
+            <ModalContent size="full" animation="subtle">
+              <ModalHeader>
+                <h1>{heading}</h1>
+                <ModalCloseButton />
+              </ModalHeader>
+              <ModalBody modifier="slide-in-left">
+                <StyledList>
+                  {items.map((item: ItemProps) => (
+                    <StyledListItem key={item.value}>
+                      <ToggleItem
+                        id={item.value}
+                        value={item.value}
+                        checked={item.selected}
+                        label={item.label}
+                        component="div"
+                        onChange={() => onFilterToggle(item.value)}
+                      />
+                    </StyledListItem>
+                  ))}
+                </StyledList>
+              </ModalBody>
+            </ModalContent>
           </Modal>
         </StyledButtonsWrapper>
       )}

package/src/Filter/FilterListPhone.tsx

@@ -6,9 +6,9 @@
  * FRI OG BEGRENSET
  */
 
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
@@ -69,6 +69,7 @@ const FilterListPhone = ({
   isGroupedOptions,
   showActiveFiltersOnSmallScreen,
 }: Props) => {
+  const [open, setOpen] = useState(false);
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
   const [visibleCount, setVisibleCount] = useState(defaultVisibleCount);
 
@@ -93,6 +94,10 @@ const FilterListPhone = ({
     /* eslint react/no-did-mount-set-state: 1 */
   };
 
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>, option: Option) => {
     let newValues = null;
     if (event.currentTarget.checked) {
@@ -137,74 +142,70 @@ const FilterListPhone = ({
             }}
           />
         )}
-        <Modal
-          size="full"
-          activateButton={
+        <Modal open={open} onOpenChange={setOpen}>
+          <ModalTrigger>
             <ButtonV2 variant="outline" {...classes('modal-button')}>
               {messages.openFilter}
             </ButtonV2>
-          }
-        >
-          {(onClose) => (
-            <>
-              <ModalHeader>
-                <div {...classes('modal-header')}>
-                  <div {...classes('modal-heading')}>
-                    {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
-                    <ButtonV2 variant="outline" onClick={onClose}>
-                      {messages.useFilter}
-                    </ButtonV2>
-                  </div>
-                  <ModalCloseButton title={messages.closeFilter} onClick={onClose} />
+          </ModalTrigger>
+          <ModalContent size="full">
+            <ModalHeader>
+              <div {...classes('modal-header')}>
+                <div {...classes('modal-heading')}>
+                  {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+                  <ButtonV2 variant="outline" onClick={onClose}>
+                    {messages.useFilter}
+                  </ButtonV2>
                 </div>
-              </ModalHeader>
-              <ModalBody modifier="no-side-padding-mobile">
-                {isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
-                {groupedOptions.map((options, index) => (
-                  <ul
-                    key={index}
-                    {...classes('item-wrapper', {
-                      'aligned-grouping': !!alignedGroup,
-                      'collapse-mobile': !!collapseMobile,
-                      'grouped-options': !!isGroupedOptions,
-                    })}
-                  >
-                    {options.map((option) => {
-                      const itemModifiers = [];
+                <ModalCloseButton title={messages.closeFilter} />
+              </div>
+            </ModalHeader>
+            <ModalBody modifier="no-side-padding-mobile">
+              {isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+              {groupedOptions.map((options, index) => (
+                <ul
+                  key={index}
+                  {...classes('item-wrapper', {
+                    'aligned-grouping': !!alignedGroup,
+                    'collapse-mobile': !!collapseMobile,
+                    'grouped-options': !!isGroupedOptions,
+                  })}
+                >
+                  {options.map((option) => {
+                    const itemModifiers = [];
 
-                      const checked = values.some((value) => value === option.value);
+                    const checked = values.some((value) => value === option.value);
 
-                      if (option.noResults) {
-                        itemModifiers.push('no-results');
-                      }
+                    if (option.noResults) {
+                      itemModifiers.push('no-results');
+                    }
 
-                      if (option.disabled) {
-                        itemModifiers.push('disabled');
-                      }
-                      return (
-                        <ToggleItem
-                          key={option.value}
-                          id={preid + option.value}
-                          value={option.value}
-                          checked={checked}
-                          onChange={(event) => handleChange(event, option)}
-                          label={option.title}
-                          disabled={option.disabled}
-                          modifiers={itemModifiers}
-                        />
-                      );
-                    })}
-                  </ul>
-                ))}
+                    if (option.disabled) {
+                      itemModifiers.push('disabled');
+                    }
+                    return (
+                      <ToggleItem
+                        key={option.value}
+                        id={preid + option.value}
+                        value={option.value}
+                        checked={checked}
+                        onChange={(event) => handleChange(event, option)}
+                        label={option.title}
+                        disabled={option.disabled}
+                        modifiers={itemModifiers}
+                      />
+                    );
+                  })}
+                </ul>
+              ))}
 
-                <div {...classes('usefilter-wrapper')}>
-                  <ButtonV2 variant="outline" onClick={onClose}>
-                    {messages.useFilter}
-                  </ButtonV2>
-                </div>
-              </ModalBody>
-            </>
-          )}
+              <div {...classes('usefilter-wrapper')}>
+                <ButtonV2 variant="outline" onClick={onClose}>
+                  {messages.useFilter}
+                </ButtonV2>
+              </div>
+            </ModalBody>
+          </ModalContent>
         </Modal>
       </div>
     );

package/src/LanguageSelector/LanguageSelector.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Root, Trigger, Item, Content, Portal, Arrow } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown } from '@ndla/icons/common';
@@ -20,15 +20,12 @@ interface Props<T extends string> {
   inverted?: boolean;
 }
 
-const PopoverContent = styled(Content)`
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: ${colors.white};
+const StyledDropdownContent = styled(DropdownContent)`
   border-radius: ${spacing.small};
   border: 1px solid ${colors.brand.tertiary};
-  fill: ${colors.brand.tertiary};
+  [data-arrow] {
+    fill: ${colors.brand.tertiary};
+  }
 `;
 
 const LanguageChoice = styled(ButtonV2)`
@@ -67,33 +64,30 @@ const Text = styled.span`
 const LanguageSelector = <T extends string>({ locales, onSelect, inverted }: Props<T>) => {
   const { t, i18n } = useTranslation();
   return (
-    <Root>
-      <Trigger asChild>
+    <DropdownMenu>
+      <DropdownTrigger>
         <ButtonV2 variant="outline" shape="pill" inverted={inverted} aria-label={t('footer.selectLanguage')}>
           {t(`languages.prefixChangeLanguage`)} <ChevronDown />
         </ButtonV2>
-      </Trigger>
-      <Portal>
-        <PopoverContent sideOffset={4}>
-          <Arrow aria-hidden />
-          {locales.map((locale) => (
-            <Item asChild key={locale}>
-              <LanguageChoice
-                role="link"
-                aria-current={i18n.language === locale}
-                variant="ghost"
-                shape="sharp"
-                aria-label={t(`changeLanguage.${locale}`)}
-                onClick={() => onSelect(locale)}
-              >
-                <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
-                <Text>{t(`languages.${locale}`)}</Text>
-              </LanguageChoice>
-            </Item>
-          ))}
-        </PopoverContent>
-      </Portal>
-    </Root>
+      </DropdownTrigger>
+      <StyledDropdownContent sideOffset={4} showArrow>
+        {locales.map((locale) => (
+          <DropdownItem key={locale}>
+            <LanguageChoice
+              role="link"
+              aria-current={i18n.language === locale}
+              variant="ghost"
+              shape="sharp"
+              aria-label={t(`changeLanguage.${locale}`)}
+              onClick={() => onSelect(locale)}
+            >
+              <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
+              <Text>{t(`languages.${locale}`)}</Text>
+            </LanguageChoice>
+          </DropdownItem>
+        ))}
+      </StyledDropdownContent>
+    </DropdownMenu>
   );
 };
 

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
 import { css } from '@emotion/react';
 import { ButtonV2 } from '@ndla/button';
 import { LearningPath } from '@ndla/icons/contentType';
@@ -30,7 +30,7 @@ const buttonToggleCss = css`
   }
 `;
 
-const StyledModal = styled(Modal)`
+const StyledModalContent = styled(ModalContent)`
   background-color: ${colors.brand.greyLightest};
 `;
 
@@ -40,28 +40,29 @@ type ModalWrapperProps = {
 };
 
 const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
+  const [open, setIsOpen] = useState(false);
   const { t } = useTranslation();
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
   if (innerWidth < 601) {
     return (
-      <StyledModal
-        animationDuration={200}
-        size="full"
-        activateButton={
+      <Modal open={open} onOpenChange={setIsOpen}>
+        <ModalTrigger>
           <ButtonV2 css={buttonToggleCss}>
             <LearningPath />
             <span>{t('learningPath.openMenuTooltip')}</span>
           </ButtonV2>
-        }
-      >
-        {(closeModal: VoidFunction) => (
-          <>
-            <ModalHeader>
-              <ModalCloseButton title={t('modal.closeModal')} onClick={closeModal} />
-            </ModalHeader>
-            <ModalBody>{children(closeModal)}</ModalBody>
-          </>
-        )}
-      </StyledModal>
+        </ModalTrigger>
+        <StyledModalContent animationDuration={200} size="full">
+          <ModalHeader>
+            <ModalCloseButton />
+          </ModalHeader>
+          <ModalBody>{children(onClose)}</ModalBody>
+        </StyledModalContent>
+      </Modal>
     );
   }
   return <>{children(() => {})}</>;