@ndla/ui 56.0.40-alpha.0 → 56.0.41-alpha.0

package/es/AudioPlayer/Controls.js

@@ -8,6 +8,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line } from "@ndla/icons/action";
 import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
@@ -115,7 +116,9 @@ const formatTime = seconds => {
   const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
   return `${minutes}:${formattedSeconds}`;
 };
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = createListCollection({
+  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+});
 const Controls = _ref => {
   let {
     src,
@@ -253,7 +256,7 @@ const Controls = _ref => {
           })
         })]
       }), /*#__PURE__*/_jsxs(StyledSelectRoot, {
-        items: speedValues,
+        collection: speedValues,
         value: [speedValue.toString()],
         onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
         positioning: {
@@ -276,7 +279,7 @@ const Controls = _ref => {
           })
         }), /*#__PURE__*/_jsx(SelectPositioner, {
           children: /*#__PURE__*/_jsx(SelectContent, {
-            children: speedValues.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
+            children: speedValues.items.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
               item: speed,
               children: [/*#__PURE__*/_jsxs(SelectItemText, {
                 children: [speed, "x"]

package/lib/AudioPlayer/Controls.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _react2 = require("@ark-ui/react");
 var _action = require("@ndla/icons/action");
 var _common = require("@ndla/icons/common");
 var _editor = require("@ndla/icons/editor");
@@ -121,7 +122,9 @@ const formatTime = seconds => {
   const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
   return `${minutes}:${formattedSeconds}`;
 };
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = (0, _react2.createListCollection)({
+  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+});
 const Controls = _ref => {
   let {
     src,
@@ -259,7 +262,7 @@ const Controls = _ref => {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelectRoot, {
-        items: speedValues,
+        collection: speedValues,
         value: [speedValue.toString()],
         onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
         positioning: {
@@ -282,7 +285,7 @@ const Controls = _ref => {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectPositioner, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectContent, {
-            children: speedValues.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
+            children: speedValues.items.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
               item: speed,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItemText, {
                 children: [speed, "x"]

package/lib/TagSelector/TagSelector.d.ts

@@ -6,10 +6,10 @@
  *
  */
 /// <reference types="react" />
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import { ComboboxControlProps, ComboboxInputProps, ComboboxRootProps, TagsInputControlProps, TagsInputInputProps, TagsInputRootProps } from "@ndla/primitives";
-export type TagSelectorRootProps<T extends ComboboxCollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
-export declare const TagSelectorRoot: <T extends ComboboxCollectionItem>({ allowCustomValue, multiple, selectionBehavior, editable, addOnPaste, onValueChange, children, value, translations, ...rest }: TagSelectorRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
+export declare const TagSelectorRoot: <T extends unknown>({ allowCustomValue, multiple, selectionBehavior, editable, addOnPaste, onValueChange, children, value, translations, ...rest }: TagSelectorRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;
 export declare const TagSelectorLabel: ({ textStyle, fontWeight, ...props }: import("@ndla/primitives").ComboboxLabelProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TagSelectorItemInput: import("react").ForwardRefExoticComponent<import("@ark-ui/react").TagsInputItemInputProps & {

package/lib/i18n/useComponentTranslations.d.ts

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { ComboboxCollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
 import { TagSelectorRootProps } from "../TagSelector/TagSelector";
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 export declare const useTagsInputTranslations: (translations?: Partial<TagsInputRootProps["translations"]>) => TagsInputRootProps["translations"];
-export declare const useComboboxTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<ComboboxRootProps<T>["translations"]>) => ComboboxRootProps<T>["translations"];
-export declare const useTagSelectorTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<TagSelectorRootProps<T>["translations"]>) => TagSelectorRootProps<T>["translations"];
+export declare const useComboboxTranslations: <T extends unknown>(translations?: Partial<ComboboxRootProps<T>["translations"]>) => ComboboxRootProps<T>["translations"];
+export declare const useTagSelectorTranslations: <T extends unknown>(translations?: Partial<TagSelectorRootProps<T>["translations"]>) => TagSelectorRootProps<T>["translations"];
 export declare const usePaginationTranslations: (translations?: Partial<PaginationRootProps["translations"]>) => PaginationRootProps["translations"];
 interface AudioSearchTranslations {
     searchPlaceholder: string;

package/lib/index.d.ts

@@ -48,7 +48,7 @@ export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
-export type { Article as ArticleType } from "./types";
+export type { Article as ArticleType, HeadingLevel } from "./types";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.40-alpha.0",
+  "version": "56.0.41-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.2",
     "@ndla/icons": "^8.0.27-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.36-alpha.0",
-    "@ndla/safelink": "^7.0.36-alpha.0",
+    "@ndla/primitives": "^1.0.37-alpha.0",
+    "@ndla/safelink": "^7.0.37-alpha.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4bdd26c1af4c3ed459924af5888de4040de6d47b"
+  "gitHead": "29f766c461881909c892102640cd09944f64d694"
 }

package/src/AudioPlayer/Controls.tsx

@@ -8,7 +8,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import { type SliderValueChangeDetails, createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line } from "@ndla/icons/action";
 import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
@@ -152,7 +152,7 @@ const formatTime = (seconds: number) => {
   return `${minutes}:${formattedSeconds}`;
 };
 
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = createListCollection({ items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"] });
 
 interface Props {
   src: string;
@@ -291,7 +291,7 @@ const Controls = ({ src, title }: Props) => {
           </StyledText>
         </ProgressWrapper>
         <StyledSelectRoot
-          items={speedValues}
+          collection={speedValues}
           value={[speedValue.toString()]}
           onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
           positioning={{ placement: "top" }}
@@ -310,7 +310,7 @@ const Controls = ({ src, title }: Props) => {
           </SelectControl>
           <SelectPositioner>
             <SelectContent>
-              {speedValues.map((speed) => (
+              {speedValues.items.map((speed) => (
                 <SelectItem key={speed} item={speed}>
                   <SelectItemText>{speed}x</SelectItemText>
                   <SelectItemIndicator>

package/src/TagSelector/TagSelector.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState } from "react";
-import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
+import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
 
 import { Meta, StoryFn } from "@storybook/react";
 import { CloseLine } from "@ndla/icons/action";
@@ -63,11 +63,13 @@ export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args
     setOptions(filtered);
   };
 
+  const collection = createListCollection({ items: options });
+
   return (
     <TagSelectorRoot
       {...args}
       value={value}
-      items={options}
+      collection={collection}
       onInputValueChange={handleChange}
       onValueChange={(details) => setValue(details.value)}
       translations={componentTranslations}

package/src/TagSelector/TagSelector.tsx

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, useEffect, useId, useRef } from "react";
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
 import { CloseLine } from "@ndla/icons/action";
 import {
@@ -34,9 +34,9 @@ import {
 } from "@ndla/primitives";
 import { contains } from "@ndla/util";
 
-export type TagSelectorRootProps<T extends ComboboxCollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
+export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
 
-export const TagSelectorRoot = <T extends ComboboxCollectionItem>({
+export const TagSelectorRoot = <T extends CollectionItem>({
   allowCustomValue = true,
   multiple = true,
   selectionBehavior = "clear",

package/src/i18n/useComponentTranslations.ts

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
 import { TagSelectorRootProps } from "../TagSelector/TagSelector";
 
@@ -33,7 +33,7 @@ export const useTagsInputTranslations = (
   };
 };
 
-export const useComboboxTranslations = <T extends ComboboxCollectionItem>(
+export const useComboboxTranslations = <T extends CollectionItem>(
   translations?: Partial<ComboboxRootProps<T>["translations"]>,
 ): ComboboxRootProps<T>["translations"] => {
   const { t } = useTranslation("translation", { keyPrefix: "component.combobox" });
@@ -45,7 +45,7 @@ export const useComboboxTranslations = <T extends ComboboxCollectionItem>(
   };
 };
 
-export const useTagSelectorTranslations = <T extends ComboboxCollectionItem>(
+export const useTagSelectorTranslations = <T extends CollectionItem>(
   translations?: Partial<TagSelectorRootProps<T>["translations"]>,
 ): TagSelectorRootProps<T>["translations"] => {
   const tagsInputTranslations = useTagsInputTranslations();

package/src/index.ts

@@ -142,7 +142,7 @@ export { Gloss, GlossExample } from "./Gloss";
 
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 
-export type { Article as ArticleType } from "./types";
+export type { Article as ArticleType, HeadingLevel } from "./types";
 
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";