@ndla/ui 56.0.192-alpha.0 → 56.0.194-alpha.0

package/src/Article/ArticleByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useAccordionContext } from "@ark-ui/react";
+import { useAccordionContext } from "@ark-ui/react/accordion";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,

package/src/AudioPlayer/AudioProgress.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 import {
   SliderRoot,
   SliderLabel,

package/src/AudioPlayer/Controls.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { createListCollection } from "@ark-ui/react";
+import { createListCollection } from "@ark-ui/react/collection";
 import { Replay15Line, Forward15Line, VolumeUpFill, CheckLine } from "@ndla/icons";
 import {
   Button,

package/src/AudioPlayer/VolumeSlider.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 import {
   SliderControl,
   SliderRoot,

package/src/AudioPlayer/useAudioControls.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 import { useCallback, useRef, useState, type ReactEventHandler } from "react";
 
 export const useAudioControls = () => {

package/src/Embed/ConceptEmbed.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Portal } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { ConceptMetaData } from "@ndla/types-embed";

package/src/Embed/EmbedWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ark, type HTMLArkProps } from "@ark-ui/react";
+import { ark, type HTMLArkProps } from "@ark-ui/react/factory";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";

package/src/Embed/GlossEmbed.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Portal } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { ConceptMetaData } from "@ndla/types-embed";

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
+import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent, Button } from "@ndla/primitives";
 import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { AnchorHeading } from "../AnchorHeading/AnchorHeading";
@@ -199,3 +199,30 @@ export const Error: StoryObj<typeof UuDisclaimerEmbed> = {
     ),
   },
 };
+export const SkipContent: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData,
+      data,
+    },
+    children: (
+      <div>
+        <h2>Dette er noe ugyldig innhold</h2>
+        <Button>Denne kan hoppes over!</Button>
+        <p>
+          Innholdet kan enkelt hoppes over ved å bruke knappen skip-knappen som dukker opp når du bruker
+          tastaturnavigering inne i popoveren.
+        </p>
+      </div>
+    ),
+  },
+  render: (args) => (
+    <>
+      <UuDisclaimerEmbed {...args} />
+      <h2>Dette er noe gyldig innhold</h2>
+      <Button>Denne vil ikke hoppes over</Button>
+    </>
+  ),
+};

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -6,12 +6,13 @@
  *
  */
 
-import { Portal } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { visuallyHidden } from "@ndla/styled-system/patterns";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
-import { type ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 interface Props {
@@ -44,14 +45,35 @@ const StyledErrorWarningFill = styled(ErrorWarningFill, {
 
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
     width: "surface.xlarge",
     maxHeight: "50vh",
     overflowY: "auto",
   },
 });
 
+const HiddenButton = styled(Button, {
+  base: {
+    "&:not(:focus)": {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0,0,0,0)",
+      whiteSpace: "nowrap",
+      borderWidth: "0",
+    },
+  },
+});
+
 export const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {
   const { t } = useTranslation();
+  const skipRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
   if (embed.status === "error") {
     return (
       <DisclaimerWrapper>
@@ -67,7 +89,7 @@ export const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Pr
   return (
     // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
     <DisclaimerWrapper role="region" data-embed-type="uu-disclaimer">
-      <PopoverRoot>
+      <PopoverRoot initialFocusEl={() => contentRef.current}>
         <PopoverTrigger asChild>
           <StyledIconButton
             size="small"
@@ -79,12 +101,16 @@ export const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Pr
           </StyledIconButton>
         </PopoverTrigger>
         <Portal>
-          <StyledPopoverContent>
+          <StyledPopoverContent ref={contentRef}>
             <div>{transformedDisclaimer}</div>
+            <HiddenButton onClick={() => skipRef.current?.focus()}>{t("uuDisclaimer.skipContent")}</HiddenButton>
           </StyledPopoverContent>
         </Portal>
       </PopoverRoot>
       <div data-uu-content="">{children}</div>
+      <div className={visuallyHidden()} tabIndex={-1} ref={skipRef}>
+        {t("uuDisclaimer.contentCompleted")}
+      </div>
     </DisclaimerWrapper>
   );
 };

package/src/FileList/FileList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ark } from "@ark-ui/react";
+import { ark } from "@ark-ui/react/factory";
 import { styled } from "@ndla/styled-system/jsx";
 import { type ComponentPropsWithoutRef } from "react";
 

package/src/Gloss/Gloss.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { AccordionItemTrigger } from "@ark-ui/react";
+import { AccordionItemTrigger } from "@ark-ui/react/accordion";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,

package/src/TagSelector/TagSelector.stories.tsx

@@ -6,7 +6,8 @@
  *
  */
 
-import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
+import { createListCollection } from "@ark-ui/react/collection";
+import { type ComboboxInputValueChangeDetails } from "@ark-ui/react/combobox";
 import { CloseLine, ArrowDownShortLine, CheckLine } from "@ndla/icons";
 import {
   ComboboxContent,

package/src/TagSelector/TagSelector.tsx

@@ -6,7 +6,9 @@
  *
  */
 
-import { type CollectionItem, useTagsInputContext, useComboboxContext } from "@ark-ui/react";
+import { type CollectionItem } from "@ark-ui/react/collection";
+import { useComboboxContext } from "@ark-ui/react/combobox";
+import { useTagsInputContext } from "@ark-ui/react/tags-input";
 import { CloseLine } from "@ndla/icons";
 import {
   ComboboxClearTrigger,

package/src/i18n/useComponentTranslations.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import type { CollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react/collection";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -208,10 +208,10 @@ export const useDatePickerTranslations = (
     () => ({
       dayCell: (state) => {
         if (state.unavailable) {
-          return t("dayCell.unavailable", { date: state.formattedDate });
+          return t("dayCell.unavailable", { date: state.valueText });
         } else if (state.selected) {
-          return t("dayCell.selected", { date: state.formattedDate });
-        } else return t("dayCell.select", { date: state.formattedDate });
+          return t("dayCell.selected", { date: state.valueText });
+        } else return t("dayCell.select", { date: state.valueText });
       },
       nextTrigger: (view) => t(`nextTrigger.${view}`),
       prevTrigger: (view) => t(`prevTrigger.${view}`),