@ndla/ui 43.0.0 → 43.0.1

package/lib/locale/messages-en.d.ts

@@ -97,6 +97,7 @@ declare const messages: {
                 share: string;
                 shared: string;
                 unShare: string;
+                copyLink: string;
                 link: string;
                 header: {
                     private: string;

package/lib/locale/messages-en.js

@@ -1100,6 +1100,7 @@ var messages = _objectSpread(_objectSpread({
         share: 'Share folder',
         shared: 'Shared',
         unShare: 'Sharing stopped. The folder is no longer shared',
+        copyLink: 'Copy link to folder',
         link: 'Link is copied',
         header: {
           private: 'Do you want to share this folder?',

package/lib/locale/messages-nb.d.ts

@@ -97,6 +97,7 @@ declare const messages: {
                 share: string;
                 shared: string;
                 unShare: string;
+                copyLink: string;
                 link: string;
                 header: {
                     private: string;

package/lib/locale/messages-nb.js

@@ -1098,6 +1098,7 @@ var messages = _objectSpread(_objectSpread({
         share: 'Del mappe',
         shared: 'Delt',
         unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        copyLink: 'Kopier lenke til mappa',
         link: 'Lenken er kopiert',
         header: {
           private: 'Vil du dele denne mappa?',

package/lib/locale/messages-nn.d.ts

@@ -98,6 +98,7 @@ declare const messages: {
                 shared: string;
                 unShare: string;
                 link: string;
+                copyLink: string;
                 header: {
                     private: string;
                     shared: string;

package/lib/locale/messages-nn.js

@@ -1099,6 +1099,7 @@ var messages = _objectSpread(_objectSpread({
         shared: 'Delt',
         unShare: 'Delinga er avslutta. Mappa er ikkje lenger delt',
         link: 'Lenka er kopiert',
+        copyLink: 'Kopier lenke til mappa',
         header: {
           private: 'Vil du dele denne mappa?',
           shared: 'Denne mappa er delt',

package/lib/locale/messages-se.d.ts

@@ -97,6 +97,7 @@ declare const messages: {
                 share: string;
                 shared: string;
                 unShare: string;
+                copyLink: string;
                 link: string;
                 header: {
                     private: string;

package/lib/locale/messages-se.js

@@ -1098,6 +1098,7 @@ var messages = _objectSpread(_objectSpread({
         share: 'Juoge máhpa',
         shared: 'Juogaduvvon',
         unShare: 'Juohkin lea loahpahuvvon. Máhppa ii leat šat juogaduvvon.',
+        copyLink: 'Kopier lenke til mappa',
         link: 'Liŋka lea máŋgejuvvon.',
         header: {
           private: 'Áiggut go juogadit dán máhpa?',

package/lib/locale/messages-sma.d.ts

@@ -97,6 +97,7 @@ declare const messages: {
                 share: string;
                 shared: string;
                 unShare: string;
+                copyLink: string;
                 link: string;
                 header: {
                     private: string;

package/lib/locale/messages-sma.js

@@ -1098,6 +1098,7 @@ var messages = _objectSpread(_objectSpread({
         share: 'Del mappe',
         shared: 'Delt',
         unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        copyLink: 'Kopier lenke til mappa',
         link: 'Lenken er kopiert',
         header: {
           private: 'Vil du dele denne mappen?',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "43.0.0",
+  "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.15",
+    "@ndla/accordion": "^2.2.16",
     "@ndla/article-scripts": "^3.0.19",
-    "@ndla/button": "^11.0.0",
+    "@ndla/button": "^11.0.1",
     "@ndla/carousel": "^3.1.11",
     "@ndla/core": "^4.1.4",
-    "@ndla/dropdown-menu": "^1.0.0",
-    "@ndla/forms": "^4.3.15",
+    "@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.13",
-    "@ndla/safelink": "^4.1.14",
+    "@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-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",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2aa95438581ea00bd5f1eac85a1514511bfe0de2"
+  "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/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/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(() => {})}</>;

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>