@ndla/ui 55.0.12-alpha.0 → 55.0.14-alpha.0

package/es/SnackBar/SnackbarProvider.js

@@ -58,7 +58,7 @@ export const SnackbarProvider = _ref => {
 };
 const snackbarInAnimation = keyframes({
   "0%": {
-    transform: "translateY(".concat(spacing.medium, ")"),
+    transform: `translateY(${spacing.medium})`,
     opacity: 0
   },
   "100%": {
@@ -70,7 +70,7 @@ const snackbarOutAnimation = keyframes({
     opacity: 1
   },
   "100%": {
-    transform: "translateY(".concat(spacing.medium, ")"),
+    transform: `translateY(${spacing.medium})`,
     opacity: 0
   }
 });
@@ -109,15 +109,12 @@ const SnackbarContainer = _ref4 => {
   return _jsx(StyledSnackList, {
     "aria-live": "polite",
     role: "region",
-    children: snacks.map(snack => {
-      var _snack$render, _snack$render2;
-      return _jsx(BaseSnack, {
-        ...snack,
-        children: (_snack$render = (_snack$render2 = snack.render) === null || _snack$render2 === void 0 ? void 0 : _snack$render2.call(snack, snack.id)) !== null && _snack$render !== void 0 ? _snack$render : _jsx(DefaultSnack, {
-          ...snack
-        })
-      }, snack.id);
-    })
+    children: snacks.map(snack => _jsx(BaseSnack, {
+      ...snack,
+      children: snack.render?.(snack.id) ?? _jsx(DefaultSnack, {
+        ...snack
+      })
+    }, snack.id))
   });
 };
 export default SnackbarProvider;

package/es/TagSelector/TagSelector.js

@@ -1,145 +1,138 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
- * Copyright (c) 2022-present, NDLA.
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
  *
  */
 
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import CreatableSelect from "react-select/creatable";
-import { colors, fonts, spacing, utils } from "@ndla/core";
-import { createAriaMessages } from "./ariaMessages";
-import Control from "./Control";
-import DropdownIndicator from "./DropdownIndicator";
-import Input from "./Input";
-import Menu from "./Menu";
-import MenuList from "./MenuList";
-import Option from "./Option";
-import SelectContainer from "./SelectContainer";
-import ValueButton from "./ValueButton";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const styles = {
-  menu: () => ({}),
-  dropdownIndicator: () => ({}),
-  placeholder: provided => ({
-    ...provided,
-    padding: "0 ".concat(spacing.small),
-    color: colors.brand.primary,
-    margin: 0
-  }),
-  valueContainer: provided => ({
-    ...provided,
-    padding: 0
-  }),
-  indicatorSeparator: () => ({
-    display: "none"
-  }),
-  indicatorsContainer: provided => ({
-    ...provided,
-    alignSelf: "flex-end"
-  })
-};
-const StyledTagSelector = /*#__PURE__*/_styled("div", {
-  target: "eor9swf1",
-  label: "StyledTagSelector"
-})(process.env.NODE_ENV === "production" ? {
-  name: "3z2sxu",
-  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden"
-} : {
-  name: "3z2sxu",
-  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q29DIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gXCJyZWFjdC1zZWxlY3RcIjtcbmltcG9ydCBDcmVhdGFibGVTZWxlY3QgZnJvbSBcInJlYWN0LXNlbGVjdC9jcmVhdGFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZywgdXRpbHMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgY3JlYXRlQXJpYU1lc3NhZ2VzIH0gZnJvbSBcIi4vYXJpYU1lc3NhZ2VzXCI7XG5pbXBvcnQgQ29udHJvbCBmcm9tIFwiLi9Db250cm9sXCI7XG5pbXBvcnQgRHJvcGRvd25JbmRpY2F0b3IgZnJvbSBcIi4vRHJvcGRvd25JbmRpY2F0b3JcIjtcbmltcG9ydCBJbnB1dCBmcm9tIFwiLi9JbnB1dFwiO1xuaW1wb3J0IE1lbnUgZnJvbSBcIi4vTWVudVwiO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gXCIuL01lbnVMaXN0XCI7XG5pbXBvcnQgT3B0aW9uIGZyb20gXCIuL09wdGlvblwiO1xuaW1wb3J0IFNlbGVjdENvbnRhaW5lciBmcm9tIFwiLi9TZWxlY3RDb250YWluZXJcIjtcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IFZhbHVlQnV0dG9uIGZyb20gXCIuL1ZhbHVlQnV0dG9uXCI7XG5cbmNvbnN0IHN0eWxlczogU3R5bGVzQ29uZmlnPFRhZ1R5cGUsIHRydWU+ID0ge1xuICBtZW51OiAoKSA9PiAoe30pLFxuICBkcm9wZG93bkluZGljYXRvcjogKCkgPT4gKHt9KSxcbiAgcGxhY2Vob2xkZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBwYWRkaW5nOiBgMCAke3NwYWNpbmcuc21hbGx9YCxcbiAgICBjb2xvcjogY29sb3JzLmJyYW5kLnByaW1hcnksXG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbiAgdmFsdWVDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHsgLi4ucHJvdmlkZWQsIHBhZGRpbmc6IDAgfSksXG4gIGluZGljYXRvclNlcGFyYXRvcjogKCkgPT4gKHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgfSksXG59O1xuXG5jb25zdCBTdHlsZWRUYWdTZWxlY3RvciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDE7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5pbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wcyB7XG4gIGxhYmVsSGlkZGVuPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWw8U3R5bGVkTGFiZWxQcm9wcz5gXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICR7KHApID0+IHAubGFiZWxIaWRkZW4gJiYgdXRpbHMubGFiZWxIaWRkZW59XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBsYWJlbDogc3RyaW5nO1xuICB0YWdzOiBzdHJpbmdbXTtcbiAgc2VsZWN0ZWQ6IHN0cmluZ1tdO1xuICBvbkNoYW5nZTogKHRhZ3M6IHN0cmluZ1tdKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKG5hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHtcbiAgc2VsZWN0ZWQ6IF9zZWxlY3RlZCxcbiAgdGFnczogX3RhZ3MsXG4gIG9uQ2hhbmdlLFxuICBvbkNyZWF0ZVRhZyxcbiAgY2xhc3NOYW1lLFxuICBsYWJlbCxcbiAgbGFiZWxIaWRkZW4sXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtpbnB1dCwgc2V0SW5wdXRdID0gdXNlU3RhdGUoXCJcIik7XG4gIGNvbnN0IHRhZ3MgPSB1c2VNZW1vKCgpID0+IF90YWdzLm1hcCgodGFnKSA9PiAoeyB2YWx1ZTogdGFnLCBsYWJlbDogdGFnIH0pKSwgW190YWdzXSk7XG4gIGNvbnN0IHNlbGVjdGVkID0gdXNlTWVtbygoKSA9PiBfc2VsZWN0ZWQubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3NlbGVjdGVkXSk7XG5cbiAgY29uc3QgaGFuZGxlU3BhY2VDbGljayA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChlLmtleSA9PT0gXCIgXCIpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09IFwiXCIpIHtcbiAgICAgICAgb25DaGFuZ2UoX3NlbGVjdGVkLmNvbmNhdChpbnB1dCkpO1xuICAgICAgfVxuICAgICAgc2V0SW5wdXQoXCJcIik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh0YWdzOiBNdWx0aVZhbHVlPFRhZ1R5cGU+KSA9PiB7XG4gICAgb25DaGFuZ2UodGFncy5tYXAoKHRhZykgPT4gdGFnLnZhbHVlKSk7XG4gIH07XG5cbiAgY29uc3QgY3JlYXRlTGFiZWwgPSAodGFnOiBzdHJpbmcpID0+IHQoXCJ0YWdTZWxlY3Rvci5jcmVhdGVMYWJlbFwiLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW49e2xhYmVsSGlkZGVufSBodG1sRm9yPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCIgaWQ9XCJ0YWdzZWxlY3Rvci1sYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9TdHlsZWRMYWJlbD5cbiAgICAgICl9XG4gICAgICA8Q3JlYXRhYmxlU2VsZWN0XG4gICAgICAgIGlkPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCJcbiAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtsYWJlbCA/IFwidGFnc2VsZWN0b3ItbGFiZWxcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgYXJpYUxpdmVNZXNzYWdlcz17Y3JlYXRlQXJpYU1lc3NhZ2VzKHQpfVxuICAgICAgICBjb21wb25lbnRzPXt7XG4gICAgICAgICAgRHJvcGRvd25JbmRpY2F0b3IsXG4gICAgICAgICAgTXVsdGlWYWx1ZTogVmFsdWVCdXR0b24sXG4gICAgICAgICAgU2VsZWN0Q29udGFpbmVyLFxuICAgICAgICAgIE1lbnVMaXN0LFxuICAgICAgICAgIENvbnRyb2wsXG4gICAgICAgICAgT3B0aW9uLFxuICAgICAgICAgIE1lbnUsXG4gICAgICAgICAgSW5wdXQsXG4gICAgICAgIH19XG4gICAgICAgIGZvcm1hdENyZWF0ZUxhYmVsPXtjcmVhdGVMYWJlbH1cbiAgICAgICAgaW5wdXRWYWx1ZT17aW5wdXR9XG4gICAgICAgIGlzQ2xlYXJhYmxlPXtmYWxzZX1cbiAgICAgICAgaXNNdWx0aVxuICAgICAgICBub09wdGlvbnNNZXNzYWdlPXsoKSA9PiB0KFwidGFnU2VsZWN0b3Iubm9PcHRpb25zXCIpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KFwidGFnU2VsZWN0b3IucGxhY2Vob2xkZXJcIil9XG4gICAgICAgIHNjcmVlblJlYWRlclN0YXR1cz17KHsgY291bnQgfSkgPT4gdChcInRhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzXCIsIHsgY291bnQgfSl9XG4gICAgICAgIHN0eWxlcz17c3R5bGVzfVxuICAgICAgICB0YWJTZWxlY3RzVmFsdWU9e2ZhbHNlfVxuICAgICAgICB2YWx1ZT17c2VsZWN0ZWR9XG4gICAgICAvPlxuICAgIDwvU3R5bGVkVGFnU2VsZWN0b3I+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBUYWdTZWxlY3RvcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /*#__PURE__*/_styled("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", fonts.weight.semibold, ";", p => p.labelHidden && utils.labelHidden, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RGtEIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gXCJyZWFjdC1zZWxlY3RcIjtcbmltcG9ydCBDcmVhdGFibGVTZWxlY3QgZnJvbSBcInJlYWN0LXNlbGVjdC9jcmVhdGFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZywgdXRpbHMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgY3JlYXRlQXJpYU1lc3NhZ2VzIH0gZnJvbSBcIi4vYXJpYU1lc3NhZ2VzXCI7XG5pbXBvcnQgQ29udHJvbCBmcm9tIFwiLi9Db250cm9sXCI7XG5pbXBvcnQgRHJvcGRvd25JbmRpY2F0b3IgZnJvbSBcIi4vRHJvcGRvd25JbmRpY2F0b3JcIjtcbmltcG9ydCBJbnB1dCBmcm9tIFwiLi9JbnB1dFwiO1xuaW1wb3J0IE1lbnUgZnJvbSBcIi4vTWVudVwiO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gXCIuL01lbnVMaXN0XCI7XG5pbXBvcnQgT3B0aW9uIGZyb20gXCIuL09wdGlvblwiO1xuaW1wb3J0IFNlbGVjdENvbnRhaW5lciBmcm9tIFwiLi9TZWxlY3RDb250YWluZXJcIjtcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IFZhbHVlQnV0dG9uIGZyb20gXCIuL1ZhbHVlQnV0dG9uXCI7XG5cbmNvbnN0IHN0eWxlczogU3R5bGVzQ29uZmlnPFRhZ1R5cGUsIHRydWU+ID0ge1xuICBtZW51OiAoKSA9PiAoe30pLFxuICBkcm9wZG93bkluZGljYXRvcjogKCkgPT4gKHt9KSxcbiAgcGxhY2Vob2xkZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBwYWRkaW5nOiBgMCAke3NwYWNpbmcuc21hbGx9YCxcbiAgICBjb2xvcjogY29sb3JzLmJyYW5kLnByaW1hcnksXG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbiAgdmFsdWVDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHsgLi4ucHJvdmlkZWQsIHBhZGRpbmc6IDAgfSksXG4gIGluZGljYXRvclNlcGFyYXRvcjogKCkgPT4gKHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgfSksXG59O1xuXG5jb25zdCBTdHlsZWRUYWdTZWxlY3RvciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDE7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5pbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wcyB7XG4gIGxhYmVsSGlkZGVuPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWw8U3R5bGVkTGFiZWxQcm9wcz5gXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICR7KHApID0+IHAubGFiZWxIaWRkZW4gJiYgdXRpbHMubGFiZWxIaWRkZW59XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBsYWJlbDogc3RyaW5nO1xuICB0YWdzOiBzdHJpbmdbXTtcbiAgc2VsZWN0ZWQ6IHN0cmluZ1tdO1xuICBvbkNoYW5nZTogKHRhZ3M6IHN0cmluZ1tdKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKG5hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHtcbiAgc2VsZWN0ZWQ6IF9zZWxlY3RlZCxcbiAgdGFnczogX3RhZ3MsXG4gIG9uQ2hhbmdlLFxuICBvbkNyZWF0ZVRhZyxcbiAgY2xhc3NOYW1lLFxuICBsYWJlbCxcbiAgbGFiZWxIaWRkZW4sXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtpbnB1dCwgc2V0SW5wdXRdID0gdXNlU3RhdGUoXCJcIik7XG4gIGNvbnN0IHRhZ3MgPSB1c2VNZW1vKCgpID0+IF90YWdzLm1hcCgodGFnKSA9PiAoeyB2YWx1ZTogdGFnLCBsYWJlbDogdGFnIH0pKSwgW190YWdzXSk7XG4gIGNvbnN0IHNlbGVjdGVkID0gdXNlTWVtbygoKSA9PiBfc2VsZWN0ZWQubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3NlbGVjdGVkXSk7XG5cbiAgY29uc3QgaGFuZGxlU3BhY2VDbGljayA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChlLmtleSA9PT0gXCIgXCIpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09IFwiXCIpIHtcbiAgICAgICAgb25DaGFuZ2UoX3NlbGVjdGVkLmNvbmNhdChpbnB1dCkpO1xuICAgICAgfVxuICAgICAgc2V0SW5wdXQoXCJcIik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh0YWdzOiBNdWx0aVZhbHVlPFRhZ1R5cGU+KSA9PiB7XG4gICAgb25DaGFuZ2UodGFncy5tYXAoKHRhZykgPT4gdGFnLnZhbHVlKSk7XG4gIH07XG5cbiAgY29uc3QgY3JlYXRlTGFiZWwgPSAodGFnOiBzdHJpbmcpID0+IHQoXCJ0YWdTZWxlY3Rvci5jcmVhdGVMYWJlbFwiLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW49e2xhYmVsSGlkZGVufSBodG1sRm9yPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCIgaWQ9XCJ0YWdzZWxlY3Rvci1sYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9TdHlsZWRMYWJlbD5cbiAgICAgICl9XG4gICAgICA8Q3JlYXRhYmxlU2VsZWN0XG4gICAgICAgIGlkPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCJcbiAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtsYWJlbCA/IFwidGFnc2VsZWN0b3ItbGFiZWxcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgYXJpYUxpdmVNZXNzYWdlcz17Y3JlYXRlQXJpYU1lc3NhZ2VzKHQpfVxuICAgICAgICBjb21wb25lbnRzPXt7XG4gICAgICAgICAgRHJvcGRvd25JbmRpY2F0b3IsXG4gICAgICAgICAgTXVsdGlWYWx1ZTogVmFsdWVCdXR0b24sXG4gICAgICAgICAgU2VsZWN0Q29udGFpbmVyLFxuICAgICAgICAgIE1lbnVMaXN0LFxuICAgICAgICAgIENvbnRyb2wsXG4gICAgICAgICAgT3B0aW9uLFxuICAgICAgICAgIE1lbnUsXG4gICAgICAgICAgSW5wdXQsXG4gICAgICAgIH19XG4gICAgICAgIGZvcm1hdENyZWF0ZUxhYmVsPXtjcmVhdGVMYWJlbH1cbiAgICAgICAgaW5wdXRWYWx1ZT17aW5wdXR9XG4gICAgICAgIGlzQ2xlYXJhYmxlPXtmYWxzZX1cbiAgICAgICAgaXNNdWx0aVxuICAgICAgICBub09wdGlvbnNNZXNzYWdlPXsoKSA9PiB0KFwidGFnU2VsZWN0b3Iubm9PcHRpb25zXCIpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KFwidGFnU2VsZWN0b3IucGxhY2Vob2xkZXJcIil9XG4gICAgICAgIHNjcmVlblJlYWRlclN0YXR1cz17KHsgY291bnQgfSkgPT4gdChcInRhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzXCIsIHsgY291bnQgfSl9XG4gICAgICAgIHN0eWxlcz17c3R5bGVzfVxuICAgICAgICB0YWJTZWxlY3RzVmFsdWU9e2ZhbHNlfVxuICAgICAgICB2YWx1ZT17c2VsZWN0ZWR9XG4gICAgICAvPlxuICAgIDwvU3R5bGVkVGFnU2VsZWN0b3I+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBUYWdTZWxlY3RvcjtcbiJdfQ== */"));
-const TagSelector = _ref => {
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import { Cross } from "@ndla/icons/action";
+import { ComboboxClearTrigger, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxRoot, ComboboxTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemPreview, TagsInputItemText, TagsInputRoot, TagsInputItemInput } from "@ndla/primitives";
+import { contains } from "@ndla/util";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+export const TagSelectorRoot = _ref => {
   let {
-    selected: _selected,
-    tags: _tags,
-    onChange,
-    onCreateTag,
-    className,
-    label,
-    labelHidden
+    allowCustomValue = true,
+    multiple = true,
+    selectionBehavior = "clear",
+    editable,
+    addOnPaste = false,
+    onValueChange,
+    children,
+    value,
+    translations,
+    ...rest
   } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [input, setInput] = useState("");
-  const tags = useMemo(() => _tags.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_tags]);
-  const selected = useMemo(() => _selected.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_selected]);
-  const handleSpaceClick = e => {
-    if (e.key === " ") {
-      e.preventDefault();
-      if (!_selected.find(tag => tag === input) && input !== "") {
-        onChange(_selected.concat(input));
-      }
-      setInput("");
-    }
-  };
-  const handleChange = tags => {
-    onChange(tags.map(tag => tag.value));
+  const ids = {
+    root: useId(),
+    input: useId(),
+    control: useId()
   };
-  const createLabel = tag => t("tagSelector.createLabel", {
-    tag
+  const controlRef = useRef(undefined);
+  useEffect(() => {
+    if (!controlRef.current) {
+      controlRef.current = document.getElementById(ids.control);
+    }
+  }, [ids.control]);
+  return _jsx(ComboboxRoot, {
+    ids: ids,
+    asChild: true,
+    allowCustomValue: allowCustomValue,
+    multiple: multiple,
+    selectionBehavior: selectionBehavior,
+    onValueChange: onValueChange,
+    translations: translations,
+    onPointerDownOutside: event => {
+      if (contains(controlRef.current, event.detail.originalEvent.target)) {
+        event.preventDefault();
+      }
+    },
+    value: value,
+    ...rest,
+    children: _jsx(ComboboxContext, {
+      children: api => _jsx(TagsInputRoot, {
+        ids: ids,
+        value: value,
+        onInputValueChange: details => api.setInputValue(details.inputValue),
+        editable: editable,
+        onValueChange: onValueChange,
+        addOnPaste: addOnPaste,
+        translations: translations,
+        children: children
+      })
+    })
   });
-  return _jsxs(StyledTagSelector, {
-    className: className,
-    children: [label && _jsx(StyledLabel, {
-      labelHidden: labelHidden,
-      htmlFor: "tagselector-creatable",
-      id: "tagselector-label",
-      children: label
-    }), _jsx(CreatableSelect, {
-      id: "tagselector-creatable",
-      "aria-labelledby": label ? "tagselector-label" : undefined,
-      ariaLiveMessages: createAriaMessages(t),
-      components: {
-        DropdownIndicator,
-        MultiValue: ValueButton,
-        SelectContainer,
-        MenuList,
-        Control,
-        Option,
-        Menu,
-        Input
-      },
-      formatCreateLabel: createLabel,
-      inputValue: input,
-      isClearable: false,
-      isMulti: true,
-      noOptionsMessage: () => t("tagSelector.noOptions"),
-      onChange: handleChange,
-      onCreateOption: onCreateTag,
-      onInputChange: setInput,
-      onKeyDown: handleSpaceClick,
-      options: tags,
-      placeholder: t("tagSelector.placeholder"),
-      screenReaderStatus: _ref2 => {
-        let {
-          count
-        } = _ref2;
-        return t("tagSelector.aria.screenReaderStatus", {
-          count
-        });
+};
+export const TagSelectorLabel = ComboboxLabel;
+export const TagSelectorItemInput = TagsInputItemInput;
+export const TagSelectorTrigger = ComboboxTrigger;
+export const TagSelectorControl = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return _jsx(ComboboxControl, {
+    asChild: true,
+    children: _jsx(TagsInputControl, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+export const TagSelectorClearTrigger = ComboboxClearTrigger;
+// If you need to modify the TagsInputItem, you can use this.
+export const TagSelectorInputBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const tagsApi = useTagsInputContext();
+  return _jsx(ComboboxInput, {
+    asChild: true,
+    children: _jsx(TagsInputInput, {
+      ...props,
+      onKeyDown: event => {
+        if (event.key === "Enter") {
+          tagsApi.addValue(tagsApi.inputValue);
+        }
       },
-      styles: styles,
-      tabSelectsValue: false,
-      value: selected
+      ref: ref,
+      children: children
+    })
+  });
+});
+export const TagSelectorInput = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const tagsApi = useTagsInputContext();
+  return _jsxs(_Fragment, {
+    children: [tagsApi.value.map((value, index) => _jsxs(TagsInputItem, {
+      index: index,
+      value: value,
+      children: [_jsxs(TagsInputItemPreview, {
+        children: [_jsx(TagsInputItemText, {
+          children: value
+        }), _jsx(TagsInputItemDeleteTrigger, {
+          children: _jsx(Cross, {})
+        })]
+      }), _jsx(TagsInputItemInput, {})]
+    }, value)), _jsx(ComboboxInput, {
+      asChild: true,
+      children: _jsx(TagsInputInput, {
+        ...props,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            tagsApi.addValue(tagsApi.inputValue);
+          }
+        },
+        ref: ref,
+        children: children
+      })
     })]
   });
-};
-export default TagSelector;
+});

package/es/TreeStructure/AddFolderButton.js

@@ -51,7 +51,7 @@ const AddFolderButton = _ref => {
   } = useTranslation();
   const ref = useRef(null);
   const tooltip = loading ? t("loading") : canAddFolder ? t("myNdla.newFolderUnder", {
-    folderName: focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.name
+    folderName: focusedFolder?.name
   }) : t("treeStructure.maxFoldersAlreadyAdded");
   return _jsx(Tooltip, {
     tooltip: tooltip,
@@ -62,20 +62,18 @@ const AddFolderButton = _ref => {
       disabled: loading || !canAddFolder,
       "aria-label": tooltip,
       onMouseDown: e => {
-        var _ref$current;
         e.preventDefault();
         e.stopPropagation();
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        ref.current?.focus();
       },
       onMouseUp: e => {
-        var _ref$current2;
         e.preventDefault();
         e.stopPropagation();
-        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.focus();
+        ref.current?.focus();
       },
       onClick: e => {
         e.currentTarget.focus();
-        setNewFolderParentId(focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id);
+        setNewFolderParentId(focusedFolder?.id);
         setShowTree(true);
       },
       children: [_jsx(StyledPlus, {}), " ", t("myNdla.newFolder")]

package/es/TreeStructure/ComboboxButton.js

@@ -68,11 +68,10 @@ const ComboboxButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     "data-open": showTree,
     onMouseDown: e => {
       if (!e.defaultPrevented) {
-        var _innerRef$current;
         e.preventDefault();
         e.stopPropagation();
         onToggleTree(!showTree);
-        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.focus();
+        innerRef.current?.focus();
       }
     },
     children: [loading && _jsx(ContentLoader, {
@@ -104,11 +103,10 @@ const ComboboxButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       shape: "sharp",
       onKeyDown: onKeyDown,
       onClick: () => {
-        var _innerRef$current2;
-        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 || _innerRef$current2.focus();
+        innerRef.current?.focus();
         onToggleTree(showTree);
       },
-      children: selectedFolder === null || selectedFolder === void 0 ? void 0 : selectedFolder.name
+      children: selectedFolder?.name
     }), _jsx(IconButton, {
       disabled: loading,
       "aria-busy": loading,
@@ -119,8 +117,7 @@ const ComboboxButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       colorTheme: "greyLighter",
       size: "small",
       onClick: () => {
-        var _innerRef$current3;
-        (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 || _innerRef$current3.focus();
+        innerRef.current?.focus();
         onToggleTree(!showTree);
       },
       children: showTree ? _jsx(ChevronUp, {}) : _jsx(ChevronDown, {})

package/es/TreeStructure/FolderItem.js

@@ -103,7 +103,7 @@ const FolderItem = _ref => {
   const levelVariable = useMemo(() => ({
     "--level": level
   }), [level]);
-  const focused = (focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id;
+  const focused = focusedFolder?.id === id;
   const handleClickFolder = () => {
     if (!selected) {
       setSelectedFolder(folder);
@@ -116,21 +116,19 @@ const FolderItem = _ref => {
     }
   };
   useEffect(() => {
-    if ((focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id && !isCreatingFolder) {
+    if (focusedFolder?.id === id && !isCreatingFolder) {
       if (type === "navigation") {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        ref.current?.focus();
       }
       if (type === "picker") {
-        var _ref$current2;
-        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.scrollIntoView({
+        ref.current?.scrollIntoView({
           behavior: "smooth",
           block: "start"
         });
       }
     }
   }, [focusedFolder, ref, id, isCreatingFolder, type]);
-  const linkPath = "/minndla/folders/".concat(id);
+  const linkPath = `/minndla/folders/${id}`;
   const containsResource = targetResource && folder.resources.some(resource => resource.resourceId === targetResource.resourceId);
   const emptyFolder = folder.subfolders.length === 0;
   const isMaxDepth = level > maxLevel;
@@ -139,10 +137,10 @@ const FolderItem = _ref => {
   const tabable = selected || focused || !focusedFolder && !folder.parentId && index === 0;
   return type === "navigation" ? _jsxs(FolderNameLink, {
     role: "treeitem",
-    "aria-owns": folder.subfolders.length ? treestructureId(type, "subfolders-".concat(folder.id)) : undefined,
+    "aria-owns": folder.subfolders.length ? treestructureId(type, `subfolders-${folder.id}`) : undefined,
     "aria-expanded": isMaxDepth || emptyFolder ? undefined : isOpen,
     "aria-current": selected ? "page" : undefined,
-    "aria-describedby": containsResource ? "alreadyAdded-".concat(folder.id) : undefined,
+    "aria-describedby": containsResource ? `alreadyAdded-${folder.id}` : undefined,
     ref: ref,
     style: levelVariable,
     onKeyDown: e => {
@@ -163,10 +161,9 @@ const FolderItem = _ref => {
       "data-open": isOpen,
       "data-hide-arrow": hideArrow,
       onClick: e => {
-        var _ref$current3;
         e.stopPropagation();
         e.preventDefault();
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || _ref$current3.focus();
+        ref.current?.focus();
         if (isOpen) {
           onCloseFolder(id);
         } else {
@@ -183,9 +180,9 @@ const FolderItem = _ref => {
     id: treestructureId(type, folder.id),
     "aria-expanded": isMaxDepth || emptyFolder ? undefined : isOpen,
     "aria-selected": selected,
-    "data-focused": (focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === folder.id,
-    "aria-describedby": containsResource ? "alreadyAdded-".concat(folder.id) : undefined,
-    "aria-label": "".concat(name).concat(folder.status === "shared" ? ", ".concat(t("myNdla.folder.sharing.shared")) : ""),
+    "data-focused": focusedFolder?.id === folder.id,
+    "aria-describedby": containsResource ? `alreadyAdded-${folder.id}` : undefined,
+    "aria-label": `${name}${folder.status === "shared" ? `, ${t("myNdla.folder.sharing.shared")}` : ""}`,
     variant: "ghost",
     shape: "sharp",
     fontWeight: "normal",
@@ -220,7 +217,7 @@ const FolderItem = _ref => {
       children: name
     }), containsResource && _jsx(StyledDone, {
       "aria-label": t("myNdla.alreadyInFolder"),
-      id: "alreadyAdded-".concat(folder.id),
+      id: `alreadyAdded-${folder.id}`,
       title: t("myNdla.alreadyInFolder")
     })]
   });

package/es/TreeStructure/FolderItems.js

@@ -44,7 +44,7 @@ const FolderItems = _ref => {
     ...rest
   } = _ref;
   return _jsxs(StyledUL, {
-    id: level === 0 && type === "picker" ? treestructureId(type, "popup") : parentFolder ? treestructureId(type, "subfolders-".concat(parentFolder.id)) : undefined,
+    id: level === 0 && type === "picker" ? treestructureId(type, "popup") : parentFolder ? treestructureId(type, `subfolders-${parentFolder.id}`) : undefined,
     tabIndex: -1,
     "aria-labelledby": level === 0 && type === "picker" ? treestructureId(type, "label") : undefined,
     role: level === 0 ? "tree" : "group",
@@ -53,7 +53,7 @@ const FolderItems = _ref => {
         subfolders,
         id
       } = folder;
-      const isOpen = openFolders === null || openFolders === void 0 ? void 0 : openFolders.includes(id);
+      const isOpen = openFolders?.includes(id);
       return _jsxs(StyledLI, {
         tabIndex: -1,
         role: "none",
@@ -81,7 +81,7 @@ const FolderItems = _ref => {
           ...rest,
           children: newFolderParentId === id && _jsx("li", {
             role: "none",
-            children: newFolderInput === null || newFolderInput === void 0 ? void 0 : newFolderInput({
+            children: newFolderInput?.({
               parentId: id,
               onClose: onCancelNewFolder,
               onCreate

package/es/TreeStructure/TreeStructure.js

@@ -67,7 +67,7 @@ const TreeStructure = _ref => {
     ariaDescribedby
   } = _ref;
   const ref = useRef(null);
-  const defaultSelectedFolderId = defaultOpenFolders === null || defaultOpenFolders === void 0 ? void 0 : defaultOpenFolders[defaultOpenFolders.length - 1];
+  const defaultSelectedFolderId = defaultOpenFolders?.[defaultOpenFolders.length - 1];
   const [openFolders, setOpenFolders] = useState(defaultOpenFolders || []);
   const [newFolderParentId, setNewFolderParentId] = useState();
   const [focusedFolder, _setFocusedFolder] = useState();
@@ -104,13 +104,12 @@ const TreeStructure = _ref => {
   };
   const setSelectedFolder = folder => {
     _setSelectedFolder(folder);
-    onSelectFolder === null || onSelectFolder === void 0 || onSelectFolder(folder.id);
+    onSelectFolder?.(folder.id);
   };
   const setFocusedFolder = folder => {
-    var _ref$current;
     _setFocusedFolder(folder);
     setNewFolderParentId(undefined);
-    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus({
+    ref.current?.focus({
       preventScroll: true
     });
   };
@@ -121,7 +120,7 @@ const TreeStructure = _ref => {
     const closedFolder = flattenedFolders.find(folder => folder.id === id);
     if (closedFolder) {
       const subFolders = closedFolder.subfolders && flattenFolders(closedFolder.subfolders);
-      if (subFolders.some(folder => folder.id === (selectedFolder === null || selectedFolder === void 0 ? void 0 : selectedFolder.id))) {
+      if (subFolders.some(folder => folder.id === selectedFolder?.id)) {
         setFocusedFolder(closedFolder);
       }
     }
@@ -129,24 +128,22 @@ const TreeStructure = _ref => {
   };
   const onNewFolderCreated = (newFolder, parentId) => {
     if (newFolder) {
-      var _ref$current2;
       setSelectedFolder(newFolder);
       setFocusedFolder(newFolder);
       setOpenFolders(uniq(openFolders.concat(parentId)));
-      setNewFolderParentId === null || setNewFolderParentId === void 0 || setNewFolderParentId(undefined);
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.focus({
+      setNewFolderParentId?.(undefined);
+      ref.current?.focus({
         preventScroll: true
       });
     }
   };
   const onCancelNewFolder = () => {
-    var _ref$current3;
-    setNewFolderParentId === null || setNewFolderParentId === void 0 || setNewFolderParentId(undefined);
-    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || _ref$current3.focus({
+    setNewFolderParentId?.(undefined);
+    ref.current?.focus({
       preventScroll: true
     });
   };
-  const canAddFolder = selectedFolder && (selectedFolder === null || selectedFolder === void 0 ? void 0 : selectedFolder.breadcrumbs.length) < (maxLevel || 1);
+  const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maxLevel || 1);
   return _jsxs(StyledTreeStructure, {
     onBlur: e => {
       if (type === "picker" && !e.currentTarget.contains(e.relatedTarget)) {

package/es/TreeStructure/helperFunctions.js

@@ -28,5 +28,5 @@ export const flattenFolders = (folders, openFolders) => {
   }, []);
 };
 export const treestructureId = (type, modifier) => {
-  return "".concat(type, "-treestructure-").concat(modifier);
+  return `${type}-treestructure-${modifier}`;
 };

package/es/ZendeskButton/ZendeskButton.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef, useState } from "react";
+import { Button } from "@ndla/primitives";
+
+// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export const ZendeskButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    locale,
+    variant = "secondary",
+    widgetKey,
+    children,
+    ...rest
+  } = _ref;
+  const [loading, setLoading] = useState(false);
+  const handleClick = () => {
+    if (window && !window.zE) {
+      setLoading(true);
+      // Asynchronously load zendesk scripts for better performance
+      const script = document.createElement("script");
+      script.id = "ze-snippet";
+      script.type = "text/javascript";
+      script.async = true;
+      script.onload = () => {
+        if (window.zE) {
+          window.zE("webWidget", "setLocale", locale);
+          window.zE("webWidget:on", "close", () => {
+            setLoading(false);
+          });
+          window.zE("webWidget", "open");
+        }
+      };
+      script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;
+      document.body.appendChild(script);
+    } else if (window?.zE) {
+      window.zE("webWidget", "open");
+    }
+  };
+  return _jsx(Button, {
+    onClick: handleClick,
+    variant: variant,
+    id: "zendeskButton",
+    disabled: loading,
+    ...rest,
+    ref: ref,
+    children: children
+  });
+});

package/es/i18n/formatNestedMessages.js

@@ -15,7 +15,7 @@ export const formatNestedMessages = function (phrases) {
   Object.keys(phrases).forEach(key => {
     const value = phrases[key];
     if ({}.hasOwnProperty.call(phrases, key)) {
-      const keyWithPrefix = prefix ? "".concat(prefix, ".").concat(key) : key;
+      const keyWithPrefix = prefix ? `${prefix}.${key}` : key;
       if (typeof value === "object") {
         formatNestedMessages(value, formattedMessages, keyWithPrefix);
       } else {

package/es/i18n/index.js

@@ -7,4 +7,5 @@
  */
 
 export { i18nInstance } from "./i18n";
-export { formatNestedMessages } from "./formatNestedMessages";
+export { formatNestedMessages } from "./formatNestedMessages";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations } from "./useComponentTranslations";