@ndla/ui 56.0.121-alpha.0 → 56.0.123-alpha.0

package/README.md

@@ -1,6 +1,6 @@
 # ndla-ui
 
-Main UI component library for NDLA.
+Main UI component library for NDLA
 
 ## Installation
 

package/es/Article/ArticleByline.js

@@ -8,7 +8,7 @@
 
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import { ArrowDownShortLine } from "@ndla/icons";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";

package/es/i18n/index.js

@@ -8,4 +8,4 @@
 
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
-export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./useComponentTranslations";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations } from "./useComponentTranslations";

package/es/i18n/useComponentTranslations.js

@@ -161,4 +161,51 @@ export const useVideoSearchTranslations = translations => {
     close: t("close"),
     ...translations
   }), [t, translations]);
+};
+export const useDatePickerTranslations = translations => {
+  const {
+    t
+  } = useTranslation("translation", {
+    keyPrefix: "component.datePicker"
+  });
+  return useMemo(() => ({
+    dayCell: state => {
+      if (state.unavailable) {
+        return t("dayCell.unavailable", {
+          date: state.formattedDate
+        });
+      } else if (state.selected) {
+        return t("dayCell.selected", {
+          date: state.formattedDate
+        });
+      } else return t("dayCell.select", {
+        date: state.formattedDate
+      });
+    },
+    nextTrigger: view => t(`nextTrigger.${view}`),
+    prevTrigger: view => t(`prevTrigger.${view}`),
+    monthSelect: t("monthSelect"),
+    yearSelect: t("yearSelect"),
+    viewTrigger: view => t(`viewTrigger.${view}`),
+    presetTrigger: value => {
+      if (Array.isArray(value)) {
+        return t("presetTrigger.range", {
+          start: value[0],
+          end: value[1]
+        });
+      } else return t("presetTrigger.single", {
+        date: value
+      });
+    },
+    clearTrigger: t("clearTrigger"),
+    trigger: open => t(`trigger.${open ? "close" : "open"}`),
+    content: t("content"),
+    placeholder: _locale => {
+      return {
+        day: "dd",
+        month: "mm",
+        year: "yyyy"
+      };
+    }
+  }), [t, translations]);
 };

package/es/index.js

@@ -27,7 +27,7 @@ export { default as messagesNN } from "./locale/messages-nn";
 export { default as messagesEN } from "./locale/messages-en";
 export { default as messagesSE } from "./locale/messages-se";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
-export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./i18n";
+export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations } from "./i18n";
 export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
 export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";

package/es/locale/messages-en.js

@@ -405,6 +405,40 @@ const messages = {
       previewVideo: "Preview",
       is360Video: "VR video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Unavailable date. {{date}}",
+        selected: "Selected date. {{date}}",
+        select: "Select date. {{date}}"
+      },
+      nextTrigger: {
+        day: "Go to next month",
+        month: "Go to next year",
+        year: "Go to next decade"
+      },
+      prevTrigger: {
+        day: "Go to previous month",
+        month: "Go to previous year",
+        year: "Go to previous decade"
+      },
+      monthSelect: "Select month",
+      yearSelect: "Select year",
+      viewTrigger: {
+        day: "Switch to day view",
+        month: "Switch to month view",
+        year: "Switch to year view"
+      },
+      presetTrigger: {
+        single: "Select {{date}}",
+        range: "Select from {{start}} to {{end}}"
+      },
+      clearTrigger: "Clear selected dates",
+      trigger: {
+        open: "Open date picker",
+        close: "Close date picker"
+      },
+      content: "Calendar"
     }
   },
   richTextEditor: {

package/es/locale/messages-nb.js

@@ -405,6 +405,40 @@ const messages = {
       previewVideo: "Forhåndsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

package/es/locale/messages-nn.js

@@ -405,6 +405,40 @@ const messages = {
       previewVideo: "Førehandsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikkje tilgjengelig dato. {{date}}",
+        selected: "Valt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvising",
+        month: "Bytt til månedvising",
+        year: "Bytt til årvising"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valte datoer",
+      trigger: {
+        open: "Åpne datoveljar",
+        close: "Lukk datoveljar"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

package/es/locale/messages-se.js

@@ -405,6 +405,40 @@ const messages = {
       previewVideo: "Forhåndsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

package/lib/Article/ArticleByline.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ArticleBylineAccordionItem = exports.ArticleByline = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _reactRouter = require("react-router");
+var _reactRouterDom = require("react-router-dom");
 var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
@@ -100,7 +100,7 @@ const ArticleByline = _ref => {
   } = (0, _reactI18next.useTranslation)();
   const {
     pathname
-  } = (0, _reactRouter.useLocation)();
+  } = (0, _reactRouterDom.useLocation)();
   const [openAccordions, setOpenAccordions] = (0, _react.useState)([]);
   const accordionItemValue = "rulesForUse";
   const onHashChange = (0, _react.useCallback)(e => {

package/lib/i18n/index.d.ts

@@ -7,4 +7,4 @@
  */
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
-export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./useComponentTranslations";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations, } from "./useComponentTranslations";

package/lib/i18n/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "useComboboxTranslations", {
     return _useComponentTranslations.useComboboxTranslations;
   }
 });
+Object.defineProperty(exports, "useDatePickerTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useDatePickerTranslations;
+  }
+});
 Object.defineProperty(exports, "useImageSearchTranslations", {
   enumerable: true,
   get: function () {

package/lib/i18n/useComponentTranslations.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { CollectionItem } from "@ark-ui/react";
-import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
@@ -53,4 +53,5 @@ interface ImageSearchTranslations {
 export declare const useImageSearchTranslations: (translations?: DeepPartial<ImageSearchTranslations>) => ImageSearchTranslations;
 export declare const useAudioSearchTranslations: (translations?: DeepPartial<AudioSearchTranslations>) => AudioSearchTranslations;
 export declare const useVideoSearchTranslations: (translations?: Partial<VideoTranslations>) => VideoTranslations;
+export declare const useDatePickerTranslations: (translations?: Partial<DatePickerRootProps["translations"]>) => NonNullable<DatePickerRootProps["translations"]>;
 export {};

package/lib/i18n/useComponentTranslations.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useVideoSearchTranslations = exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useImageSearchTranslations = exports.useComboboxTranslations = exports.useAudioSearchTranslations = void 0;
+exports.useVideoSearchTranslations = exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useImageSearchTranslations = exports.useDatePickerTranslations = exports.useComboboxTranslations = exports.useAudioSearchTranslations = void 0;
 var _reactI18next = require("react-i18next");
 var _react = require("react");
 /**
@@ -173,4 +173,52 @@ const useVideoSearchTranslations = translations => {
     ...translations
   }), [t, translations]);
 };
-exports.useVideoSearchTranslations = useVideoSearchTranslations;
+exports.useVideoSearchTranslations = useVideoSearchTranslations;
+const useDatePickerTranslations = translations => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)("translation", {
+    keyPrefix: "component.datePicker"
+  });
+  return (0, _react.useMemo)(() => ({
+    dayCell: state => {
+      if (state.unavailable) {
+        return t("dayCell.unavailable", {
+          date: state.formattedDate
+        });
+      } else if (state.selected) {
+        return t("dayCell.selected", {
+          date: state.formattedDate
+        });
+      } else return t("dayCell.select", {
+        date: state.formattedDate
+      });
+    },
+    nextTrigger: view => t(`nextTrigger.${view}`),
+    prevTrigger: view => t(`prevTrigger.${view}`),
+    monthSelect: t("monthSelect"),
+    yearSelect: t("yearSelect"),
+    viewTrigger: view => t(`viewTrigger.${view}`),
+    presetTrigger: value => {
+      if (Array.isArray(value)) {
+        return t("presetTrigger.range", {
+          start: value[0],
+          end: value[1]
+        });
+      } else return t("presetTrigger.single", {
+        date: value
+      });
+    },
+    clearTrigger: t("clearTrigger"),
+    trigger: open => t(`trigger.${open ? "close" : "open"}`),
+    content: t("content"),
+    placeholder: _locale => {
+      return {
+        day: "dd",
+        month: "mm",
+        year: "yyyy"
+      };
+    }
+  }), [t, translations]);
+};
+exports.useDatePickerTranslations = useDatePickerTranslations;

package/lib/index.d.ts

@@ -26,7 +26,7 @@ export { default as messagesEN } from "./locale/messages-en";
 export { default as messagesSE } from "./locale/messages-se";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
-export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
+export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations, } from "./i18n";
 export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";

package/lib/index.js

@@ -525,6 +525,12 @@ Object.defineProperty(exports, "useComboboxTranslations", {
     return _i18n.useComboboxTranslations;
   }
 });
+Object.defineProperty(exports, "useDatePickerTranslations", {
+  enumerable: true,
+  get: function () {
+    return _i18n.useDatePickerTranslations;
+  }
+});
 Object.defineProperty(exports, "useImageSearchTranslations", {
   enumerable: true,
   get: function () {

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

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-en.js

@@ -412,6 +412,40 @@ const messages = {
       previewVideo: "Preview",
       is360Video: "VR video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Unavailable date. {{date}}",
+        selected: "Selected date. {{date}}",
+        select: "Select date. {{date}}"
+      },
+      nextTrigger: {
+        day: "Go to next month",
+        month: "Go to next year",
+        year: "Go to next decade"
+      },
+      prevTrigger: {
+        day: "Go to previous month",
+        month: "Go to previous year",
+        year: "Go to previous decade"
+      },
+      monthSelect: "Select month",
+      yearSelect: "Select year",
+      viewTrigger: {
+        day: "Switch to day view",
+        month: "Switch to month view",
+        year: "Switch to year view"
+      },
+      presetTrigger: {
+        single: "Select {{date}}",
+        range: "Select from {{start}} to {{end}}"
+      },
+      clearTrigger: "Clear selected dates",
+      trigger: {
+        open: "Open date picker",
+        close: "Close date picker"
+      },
+      content: "Calendar"
     }
   },
   richTextEditor: {

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

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-nb.js

@@ -412,6 +412,40 @@ const messages = {
       previewVideo: "Forhåndsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

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

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-nn.js

@@ -412,6 +412,40 @@ const messages = {
       previewVideo: "Førehandsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikkje tilgjengelig dato. {{date}}",
+        selected: "Valt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvising",
+        month: "Bytt til månedvising",
+        year: "Bytt til årvising"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valte datoer",
+      trigger: {
+        open: "Åpne datoveljar",
+        close: "Lukk datoveljar"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

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

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-se.js

@@ -412,6 +412,40 @@ const messages = {
       previewVideo: "Forhåndsvis",
       is360Video: "VR-video",
       close: "Lukk"
+    },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}"
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår"
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår"
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning"
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}"
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger"
+      },
+      content: "Kalender"
     }
   },
   richTextEditor: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.121-alpha.0",
+  "version": "56.0.123-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,11 +32,12 @@
     "types"
   ],
   "dependencies": {
+    "@ark-ui/react": "^5.9.0",
     "@ndla/core": "^6.0.0-alpha.0",
     "@ndla/icons": "^8.0.58-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.87-alpha.0",
-    "@ndla/safelink": "^7.0.89-alpha.0",
+    "@ndla/primitives": "^1.0.89-alpha.0",
+    "@ndla/safelink": "^7.0.91-alpha.0",
     "@ndla/styled-system": "^0.0.34",
     "@ndla/util": "^5.0.8-alpha.0",
     "html-react-parser": "^5.1.19"
@@ -46,7 +47,7 @@
     "react": ">= 18",
     "react-dom": ">= 18",
     "react-i18next": "^15.4.1",
-    "react-router": ">= 6.0.0"
+    "react-router-dom": ">= 6.0.0"
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.54",
@@ -57,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d9ad62bb693321e31691b09d045af548f650c049"
+  "gitHead": "dc0f32d958e7f1df5a4330a412ad3ce03452d300"
 }

package/src/Article/ArticleByline.tsx

@@ -9,7 +9,7 @@
 import type { TFunction } from "i18next";
 import { type ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,

package/src/i18n/index.ts

@@ -16,4 +16,5 @@ export {
   useAudioSearchTranslations,
   useImageSearchTranslations,
   useVideoSearchTranslations,
+  useDatePickerTranslations,
 } from "./useComponentTranslations";

package/src/i18n/useComponentTranslations.ts

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import type { CollectionItem } from "@ark-ui/react";
-import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 import { useMemo } from "react";
 
@@ -198,3 +198,38 @@ export const useVideoSearchTranslations = (translations?: Partial<VideoTranslati
     [t, translations],
   );
 };
+
+export const useDatePickerTranslations = (
+  translations?: Partial<DatePickerRootProps["translations"]>,
+): NonNullable<DatePickerRootProps["translations"]> => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.datePicker" });
+
+  return useMemo(
+    () => ({
+      dayCell: (state) => {
+        if (state.unavailable) {
+          return t("dayCell.unavailable", { date: state.formattedDate });
+        } else if (state.selected) {
+          return t("dayCell.selected", { date: state.formattedDate });
+        } else return t("dayCell.select", { date: state.formattedDate });
+      },
+      nextTrigger: (view) => t(`nextTrigger.${view}`),
+      prevTrigger: (view) => t(`prevTrigger.${view}`),
+      monthSelect: t("monthSelect"),
+      yearSelect: t("yearSelect"),
+      viewTrigger: (view) => t(`viewTrigger.${view}`),
+      presetTrigger: (value) => {
+        if (Array.isArray(value)) {
+          return t("presetTrigger.range", { start: value[0], end: value[1] });
+        } else return t("presetTrigger.single", { date: value });
+      },
+      clearTrigger: t("clearTrigger"),
+      trigger: (open) => t(`trigger.${open ? "close" : "open"}`),
+      content: t("content"),
+      placeholder: (_locale) => {
+        return { day: "dd", month: "mm", year: "yyyy" };
+      },
+    }),
+    [t, translations],
+  );
+};

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   useAudioSearchTranslations,
   useImageSearchTranslations,
   useVideoSearchTranslations,
+  useDatePickerTranslations,
 } from "./i18n";
 
 export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";

package/src/locale/messages-en.ts

@@ -402,6 +402,40 @@ const messages = {
       is360Video: "VR video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Unavailable date. {{date}}",
+        selected: "Selected date. {{date}}",
+        select: "Select date. {{date}}",
+      },
+      nextTrigger: {
+        day: "Go to next month",
+        month: "Go to next year",
+        year: "Go to next decade",
+      },
+      prevTrigger: {
+        day: "Go to previous month",
+        month: "Go to previous year",
+        year: "Go to previous decade",
+      },
+      monthSelect: "Select month",
+      yearSelect: "Select year",
+      viewTrigger: {
+        day: "Switch to day view",
+        month: "Switch to month view",
+        year: "Switch to year view",
+      },
+      presetTrigger: {
+        single: "Select {{date}}",
+        range: "Select from {{start}} to {{end}}",
+      },
+      clearTrigger: "Clear selected dates",
+      trigger: {
+        open: "Open date picker",
+        close: "Close date picker",
+      },
+      content: "Calendar",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-nb.ts

@@ -403,6 +403,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-nn.ts

@@ -403,6 +403,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikkje tilgjengelig dato. {{date}}",
+        selected: "Valt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvising",
+        month: "Bytt til månedvising",
+        year: "Bytt til årvising",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valte datoer",
+      trigger: {
+        open: "Åpne datoveljar",
+        close: "Lukk datoveljar",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-se.ts

@@ -404,6 +404,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {