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

package/lib/SnackBar/SnackbarProvider.js

@@ -67,7 +67,7 @@ const SnackbarProvider = _ref => {
 exports.SnackbarProvider = SnackbarProvider;
 const snackbarInAnimation = (0, _react2.keyframes)({
   "0%": {
-    transform: "translateY(".concat(_core.spacing.medium, ")"),
+    transform: `translateY(${_core.spacing.medium})`,
     opacity: 0
   },
   "100%": {
@@ -79,7 +79,7 @@ const snackbarOutAnimation = (0, _react2.keyframes)({
     opacity: 1
   },
   "100%": {
-    transform: "translateY(".concat(_core.spacing.medium, ")"),
+    transform: `translateY(${_core.spacing.medium})`,
     opacity: 0
   }
 });
@@ -119,15 +119,12 @@ const SnackbarContainer = _ref4 => {
   return (0, _jsxRuntime.jsx)(StyledSnackList, {
     "aria-live": "polite",
     role: "region",
-    children: snacks.map(snack => {
-      var _snack$render, _snack$render2;
-      return (0, _jsxRuntime.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 : (0, _jsxRuntime.jsx)(_DefaultSnackbar.default, {
-          ...snack
-        })
-      }, snack.id);
-    })
+    children: snacks.map(snack => (0, _jsxRuntime.jsx)(BaseSnack, {
+      ...snack,
+      children: snack.render?.(snack.id) ?? (0, _jsxRuntime.jsx)(_DefaultSnackbar.default, {
+        ...snack
+      })
+    }, snack.id))
   });
 };
 var _default = exports.default = SnackbarProvider;

package/lib/TagSelector/TagSelector.d.ts

@@ -1,18 +1,33 @@
 /**
- * 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.
  *
  */
-interface Props {
-    label: string;
-    tags: string[];
-    selected: string[];
-    onChange: (tags: string[]) => void;
-    onCreateTag: (name: string) => void;
-    className?: string;
-    labelHidden?: boolean;
-}
-declare const TagSelector: ({ selected: _selected, tags: _tags, onChange, onCreateTag, className, label, labelHidden, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default TagSelector;
+/// <reference types="react" />
+import type { ComboboxCollectionItem } 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 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 & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TagSelectorTrigger: import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxTriggerProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TagSelectorControl: import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxControlProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("@ark-ui/react").TagsInputControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TagSelectorClearTrigger: import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxClearTriggerProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;
+export declare const TagSelectorInputBase: import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxInputProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("@ark-ui/react").TagsInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TagSelectorInput: import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxInputProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("@ark-ui/react").TagsInputInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/TagSelector/TagSelector.js

@@ -3,148 +3,143 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+exports.TagSelectorTrigger = exports.TagSelectorRoot = exports.TagSelectorLabel = exports.TagSelectorItemInput = exports.TagSelectorInputBase = exports.TagSelectorInput = exports.TagSelectorControl = exports.TagSelectorClearTrigger = void 0;
 var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _creatable = _interopRequireDefault(require("react-select/creatable"));
-var _core = require("@ndla/core");
-var _ariaMessages = require("./ariaMessages");
-var _Control = _interopRequireDefault(require("./Control"));
-var _DropdownIndicator = _interopRequireDefault(require("./DropdownIndicator"));
-var _Input = _interopRequireDefault(require("./Input"));
-var _Menu = _interopRequireDefault(require("./Menu"));
-var _MenuList = _interopRequireDefault(require("./MenuList"));
-var _Option = _interopRequireDefault(require("./Option"));
-var _SelectContainer = _interopRequireDefault(require("./SelectContainer"));
-var _ValueButton = _interopRequireDefault(require("./ValueButton"));
+var _react2 = require("@ark-ui/react");
+var _action = require("@ndla/icons/action");
+var _primitives = require("@ndla/primitives");
+var _util = require("@ndla/util");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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.
  *
  */
-const styles = {
-  menu: () => ({}),
-  dropdownIndicator: () => ({}),
-  placeholder: provided => ({
-    ...provided,
-    padding: "0 ".concat(_core.spacing.small),
-    color: _core.colors.brand.primary,
-    margin: 0
-  }),
-  valueContainer: provided => ({
-    ...provided,
-    padding: 0
-  }),
-  indicatorSeparator: () => ({
-    display: "none"
-  }),
-  indicatorsContainer: provided => ({
-    ...provided,
-    alignSelf: "flex-end"
-  })
-};
-const StyledTagSelector = /*#__PURE__*/(0, _base.default)("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__*/(0, _base.default)("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", _core.fonts.weight.semibold, ";", p => p.labelHidden && _core.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 => {
+
+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
-  } = (0, _reactI18next.useTranslation)();
-  const [input, setInput] = (0, _react.useState)("");
-  const tags = (0, _react.useMemo)(() => _tags.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_tags]);
-  const selected = (0, _react.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 ids = {
+    root: (0, _react.useId)(),
+    input: (0, _react.useId)(),
+    control: (0, _react.useId)()
   };
-  const handleChange = tags => {
-    onChange(tags.map(tag => tag.value));
-  };
-  const createLabel = tag => t("tagSelector.createLabel", {
-    tag
+  const controlRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!controlRef.current) {
+      controlRef.current = document.getElementById(ids.control);
+    }
+  }, [ids.control]);
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxRoot, {
+    ids: ids,
+    asChild: true,
+    allowCustomValue: allowCustomValue,
+    multiple: multiple,
+    selectionBehavior: selectionBehavior,
+    onValueChange: onValueChange,
+    translations: translations,
+    onPointerDownOutside: event => {
+      if ((0, _util.contains)(controlRef.current, event.detail.originalEvent.target)) {
+        event.preventDefault();
+      }
+    },
+    value: value,
+    ...rest,
+    children: (0, _jsxRuntime.jsx)(_react2.ComboboxContext, {
+      children: api => (0, _jsxRuntime.jsx)(_primitives.TagsInputRoot, {
+        ids: ids,
+        value: value,
+        onInputValueChange: details => api.setInputValue(details.inputValue),
+        editable: editable,
+        onValueChange: onValueChange,
+        addOnPaste: addOnPaste,
+        translations: translations,
+        children: children
+      })
+    })
   });
-  return (0, _jsxRuntime.jsxs)(StyledTagSelector, {
-    className: className,
-    children: [label && (0, _jsxRuntime.jsx)(StyledLabel, {
-      labelHidden: labelHidden,
-      htmlFor: "tagselector-creatable",
-      id: "tagselector-label",
-      children: label
-    }), (0, _jsxRuntime.jsx)(_creatable.default, {
-      id: "tagselector-creatable",
-      "aria-labelledby": label ? "tagselector-label" : undefined,
-      ariaLiveMessages: (0, _ariaMessages.createAriaMessages)(t),
-      components: {
-        DropdownIndicator: _DropdownIndicator.default,
-        MultiValue: _ValueButton.default,
-        SelectContainer: _SelectContainer.default,
-        MenuList: _MenuList.default,
-        Control: _Control.default,
-        Option: _Option.default,
-        Menu: _Menu.default,
-        Input: _Input.default
-      },
-      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
-        });
+};
+exports.TagSelectorRoot = TagSelectorRoot;
+const TagSelectorLabel = exports.TagSelectorLabel = _primitives.ComboboxLabel;
+const TagSelectorItemInput = exports.TagSelectorItemInput = _primitives.TagsInputItemInput;
+const TagSelectorTrigger = exports.TagSelectorTrigger = _primitives.ComboboxTrigger;
+const TagSelectorControl = exports.TagSelectorControl = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxControl, {
+    asChild: true,
+    children: (0, _jsxRuntime.jsx)(_primitives.TagsInputControl, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+const TagSelectorClearTrigger = exports.TagSelectorClearTrigger = _primitives.ComboboxClearTrigger;
+// If you need to modify the TagsInputItem, you can use this.
+const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const tagsApi = (0, _react2.useTagsInputContext)();
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+    asChild: true,
+    children: (0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
+      ...props,
+      onKeyDown: event => {
+        if (event.key === "Enter") {
+          tagsApi.addValue(tagsApi.inputValue);
+        }
       },
-      styles: styles,
-      tabSelectsValue: false,
-      value: selected
+      ref: ref,
+      children: children
+    })
+  });
+});
+const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const tagsApi = (0, _react2.useTagsInputContext)();
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [tagsApi.value.map((value, index) => (0, _jsxRuntime.jsxs)(_primitives.TagsInputItem, {
+      index: index,
+      value: value,
+      children: [(0, _jsxRuntime.jsxs)(_primitives.TagsInputItemPreview, {
+        children: [(0, _jsxRuntime.jsx)(_primitives.TagsInputItemText, {
+          children: value
+        }), (0, _jsxRuntime.jsx)(_primitives.TagsInputItemDeleteTrigger, {
+          children: (0, _jsxRuntime.jsx)(_action.Cross, {})
+        })]
+      }), (0, _jsxRuntime.jsx)(_primitives.TagsInputItemInput, {})]
+    }, value)), (0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+      asChild: true,
+      children: (0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
+        ...props,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            tagsApi.addValue(tagsApi.inputValue);
+          }
+        },
+        ref: ref,
+        children: children
+      })
     })]
   });
-};
-var _default = exports.default = TagSelector;
+});

package/lib/TreeStructure/AddFolderButton.js

@@ -56,7 +56,7 @@ const AddFolderButton = _ref => {
   } = (0, _reactI18next.useTranslation)();
   const ref = (0, _react.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 (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
     tooltip: tooltip,
@@ -67,20 +67,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: [(0, _jsxRuntime.jsx)(StyledPlus, {}), " ", t("myNdla.newFolder")]

package/lib/TreeStructure/ComboboxButton.js

@@ -75,11 +75,10 @@ const ComboboxButton = /*#__PURE__*/(0, _react.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 && (0, _jsxRuntime.jsx)(_ContentLoader.default, {
@@ -111,11 +110,10 @@ const ComboboxButton = /*#__PURE__*/(0, _react.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
     }), (0, _jsxRuntime.jsx)(_button.IconButtonV2, {
       disabled: loading,
       "aria-busy": loading,
@@ -126,8 +124,7 @@ const ComboboxButton = /*#__PURE__*/(0, _react.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 ? (0, _jsxRuntime.jsx)(_common.ChevronUp, {}) : (0, _jsxRuntime.jsx)(_common.ChevronDown, {})

package/lib/TreeStructure/FolderItem.js

@@ -108,7 +108,7 @@ const FolderItem = _ref => {
   const levelVariable = (0, _react.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);
@@ -121,21 +121,19 @@ const FolderItem = _ref => {
     }
   };
   (0, _react.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;
@@ -144,10 +142,10 @@ const FolderItem = _ref => {
   const tabable = selected || focused || !focusedFolder && !folder.parentId && index === 0;
   return type === "navigation" ? (0, _jsxRuntime.jsxs)(FolderNameLink, {
     role: "treeitem",
-    "aria-owns": folder.subfolders.length ? (0, _helperFunctions.treestructureId)(type, "subfolders-".concat(folder.id)) : undefined,
+    "aria-owns": folder.subfolders.length ? (0, _helperFunctions.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 => {
@@ -168,10 +166,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 {
@@ -188,9 +185,9 @@ const FolderItem = _ref => {
     id: (0, _helperFunctions.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",
@@ -225,7 +222,7 @@ const FolderItem = _ref => {
       children: name
     }), containsResource && (0, _jsxRuntime.jsx)(StyledDone, {
       "aria-label": t("myNdla.alreadyInFolder"),
-      id: "alreadyAdded-".concat(folder.id),
+      id: `alreadyAdded-${folder.id}`,
       title: t("myNdla.alreadyInFolder")
     })]
   });

package/lib/TreeStructure/FolderItems.js

@@ -49,7 +49,7 @@ const FolderItems = _ref => {
     ...rest
   } = _ref;
   return (0, _jsxRuntime.jsxs)(StyledUL, {
-    id: level === 0 && type === "picker" ? (0, _helperFunctions.treestructureId)(type, "popup") : parentFolder ? (0, _helperFunctions.treestructureId)(type, "subfolders-".concat(parentFolder.id)) : undefined,
+    id: level === 0 && type === "picker" ? (0, _helperFunctions.treestructureId)(type, "popup") : parentFolder ? (0, _helperFunctions.treestructureId)(type, `subfolders-${parentFolder.id}`) : undefined,
     tabIndex: -1,
     "aria-labelledby": level === 0 && type === "picker" ? (0, _helperFunctions.treestructureId)(type, "label") : undefined,
     role: level === 0 ? "tree" : "group",
@@ -58,7 +58,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 (0, _jsxRuntime.jsxs)(StyledLI, {
         tabIndex: -1,
         role: "none",
@@ -86,7 +86,7 @@ const FolderItems = _ref => {
           ...rest,
           children: newFolderParentId === id && (0, _jsxRuntime.jsx)("li", {
             role: "none",
-            children: newFolderInput === null || newFolderInput === void 0 ? void 0 : newFolderInput({
+            children: newFolderInput?.({
               parentId: id,
               onClose: onCancelNewFolder,
               onCreate

package/lib/TreeStructure/TreeStructure.js

@@ -72,7 +72,7 @@ const TreeStructure = _ref => {
     ariaDescribedby
   } = _ref;
   const ref = (0, _react.useRef)(null);
-  const defaultSelectedFolderId = defaultOpenFolders === null || defaultOpenFolders === void 0 ? void 0 : defaultOpenFolders[defaultOpenFolders.length - 1];
+  const defaultSelectedFolderId = defaultOpenFolders?.[defaultOpenFolders.length - 1];
   const [openFolders, setOpenFolders] = (0, _react.useState)(defaultOpenFolders || []);
   const [newFolderParentId, setNewFolderParentId] = (0, _react.useState)();
   const [focusedFolder, _setFocusedFolder] = (0, _react.useState)();
@@ -109,13 +109,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
     });
   };
@@ -126,7 +125,7 @@ const TreeStructure = _ref => {
     const closedFolder = flattenedFolders.find(folder => folder.id === id);
     if (closedFolder) {
       const subFolders = closedFolder.subfolders && (0, _helperFunctions.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);
       }
     }
@@ -134,24 +133,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 (0, _jsxRuntime.jsxs)(StyledTreeStructure, {
     onBlur: e => {
       if (type === "picker" && !e.currentTarget.contains(e.relatedTarget)) {

package/lib/TreeStructure/helperFunctions.js

@@ -35,6 +35,6 @@ const flattenFolders = (folders, openFolders) => {
 };
 exports.flattenFolders = flattenFolders;
 const treestructureId = (type, modifier) => {
-  return "".concat(type, "-treestructure-").concat(modifier);
+  return `${type}-treestructure-${modifier}`;
 };
 exports.treestructureId = treestructureId;