@ndla/ui 50.1.1 → 50.1.2

package/lib/TagSelector/ValueButton.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,47 +10,49 @@ var _core = require("@ndla/core");
 var _action = require("@ndla/icons/action");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
-                                                                                                                                                                                                                                                                                                                                                                                               * Copyright (c) 2022-present, NDLA.
-                                                                                                                                                                                                                                                                                                                                                                                               *
-                                                                                                                                                                                                                                                                                                                                                                                               * This source code is licensed under the GPLv3 license found in the
-                                                                                                                                                                                                                                                                                                                                                                                               * LICENSE file in the root directory of this source tree.
-                                                                                                                                                                                                                                                                                                                                                                                               *
-                                                                                                                                                                                                                                                                                                                                                                                               */
-var StyledValueButton = /*#__PURE__*/(0, _base.default)("div", {
+/**
+ * Copyright (c) 2022-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 StyledValueButton = exports.StyledValueButton = /*#__PURE__*/(0, _base.default)("div", {
   target: "e1m4p4cx0",
   label: "StyledValueButton"
-})("&&{background:", function (_ref) {
-  var selected = _ref.selected;
+})("&&{background:", _ref => {
+  let {
+    selected
+  } = _ref;
   return selected && _core.colors.brand.primary;
-}, ";color:", function (_ref2) {
-  var selected = _ref2.selected;
+}, ";color:", _ref2 => {
+  let {
+    selected
+  } = _ref2;
   return selected && _core.colors.white;
 }, ";padding:", _core.spacing.xxsmall, " ", _core.spacing.small, ";margin:", _core.spacing.xxsmall, ";border:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZhbHVlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQndEIiwiZmlsZSI6IlZhbHVlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgTXVsdGlWYWx1ZVByb3BzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IGJ1dHRvblN0eWxlVjIgYXMgYnV0dG9uU3R5bGUgfSBmcm9tICdAbmRsYS9idXR0b24nO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBDcm9zcyB9IGZyb20gJ0BuZGxhL2ljb25zL2FjdGlvbic7XG5pbXBvcnQgeyBUYWdUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmludGVyZmFjZSBTdHlsZWRQcm9wcyB7XG4gIHNlbGVjdGVkOiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgU3R5bGVkVmFsdWVCdXR0b24gPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgJiYge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgc2VsZWN0ZWQgfSkgPT4gc2VsZWN0ZWQgJiYgY29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICAgIGNvbG9yOiAkeyh7IHNlbGVjdGVkIH0pID0+IHNlbGVjdGVkICYmIGNvbG9ycy53aGl0ZX07XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnh4c21hbGx9ICR7c3BhY2luZy5zbWFsbH07XG4gICAgbWFyZ2luOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgYm9yZGVyOiBub25lO1xuICB9XG5gO1xuXG5jb25zdCBWYWx1ZUJ1dHRvbiA9ICh7IGlubmVyUHJvcHMsIGNoaWxkcmVuLCByZW1vdmVQcm9wcywgaXNGb2N1c2VkIH06IE11bHRpVmFsdWVQcm9wczxUYWdUeXBlLCB0cnVlPikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRWYWx1ZUJ1dHRvblxuICAgICAgc2VsZWN0ZWQ9e2lzRm9jdXNlZH1cbiAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgICAgY3NzPXtidXR0b25TdHlsZSh7IGNvbG9yVGhlbWU6ICdsaWdodGVyJywgc2hhcGU6ICdwaWxsJywgc2l6ZTogJ3NtYWxsJyB9KX1cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgey4uLnJlbW92ZVByb3BzfVxuICAgID5cbiAgICAgIDxzcGFuIGFyaWEtaGlkZGVuPiM8L3NwYW4+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICA8Q3Jvc3MgLz5cbiAgICA8L1N0eWxlZFZhbHVlQnV0dG9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgVmFsdWVCdXR0b247XG4iXX0= */"));
-exports.StyledValueButton = StyledValueButton;
-var ValueButton = function ValueButton(_ref3) {
-  var innerProps = _ref3.innerProps,
-    children = _ref3.children,
-    removeProps = _ref3.removeProps,
-    isFocused = _ref3.isFocused;
-  return (0, _jsxRuntime.jsxs)(StyledValueButton, _objectSpread(_objectSpread(_objectSpread({
+const ValueButton = _ref3 => {
+  let {
+    innerProps,
+    children,
+    removeProps,
+    isFocused
+  } = _ref3;
+  return (0, _jsxRuntime.jsxs)(StyledValueButton, {
     selected: isFocused,
     role: "button",
     css: (0, _button.buttonStyleV2)({
       colorTheme: 'lighter',
       shape: 'pill',
       size: 'small'
-    })
-  }, innerProps), removeProps), {}, {
+    }),
+    ...innerProps,
+    ...removeProps,
     children: [(0, _jsxRuntime.jsx)("span", {
       "aria-hidden": true,
       children: "#"
     }), children, (0, _jsxRuntime.jsx)(_action.Cross, {})]
-  }));
+  });
 };
-var _default = ValueButton;
-exports.default = _default;
+var _default = exports.default = ValueButton;

package/lib/TagSelector/ariaMessages.js

@@ -12,88 +12,90 @@ exports.createAriaMessages = void 0;
  *
  */
 
-var createAriaMessages = function createAriaMessages(t) {
-  return {
-    guidance: function guidance(props) {
-      var isSearchable = props.isSearchable,
-        isMulti = props.isMulti,
-        isDisabled = props.isDisabled,
-        tabSelectsValue = props.tabSelectsValue,
-        context = props.context;
-      switch (context) {
-        case 'menu':
-          return "".concat(t('tagSelector.aria.guidance.menu.updown')).concat(isDisabled ? '' : ", ".concat(t('tagSelector.aria.guidance.menu.enter')), ", ").concat(t('tagSelector.aria.guidance.menu.escape')).concat(tabSelectsValue ? ", ".concat(t('tagSelector.aria.guidance.menu.tab')) : '', ".");
-        case 'input':
-          return "".concat(props['aria-label'] || t('tagSelector.aria.guidance.input.select'), " ").concat(t('tagSelector.aria.guidance.input.focused'), " ").concat(isSearchable ? ", ".concat(t('tagSelector.aria.guidance.input.refine')) : '', ", ").concat(t('tagSelector.aria.guidance.input.down'), ", ").concat(isMulti ? " ".concat(t('tagSelector.aria.guidance.input.left')) : '', ", ").concat(t('tagSelector.aria.guidance.input.space'));
-        case 'value':
-          return t('tagSelector.aria.guidance.value');
-        default:
-          return '';
-      }
-    },
-    onChange: function onChange(props) {
-      var action = props.action,
-        _props$label = props.label,
-        label = _props$label === void 0 ? '' : _props$label,
-        labels = props.labels,
-        isDisabled = props.isDisabled;
-      switch (action) {
-        case 'deselect-option':
-        case 'pop-value':
-        case 'remove-value':
-          return t('tagSelector.aria.onChange.deselect', {
-            label: label
-          });
-        case 'clear':
-          return t('tagSelector.aria.onChange.clear');
-        case 'initial-input-focus':
-          return t('tagSelector.aria.onChange.initialFocus', {
-            labels: labels.join(',')
-          });
-        case 'select-option':
-          return isDisabled ? t('tagSelector.aria.onChange.selectedDisabled', {
-            label: label
-          }) : t('tagSelector.aria.onChange.selected', {
-            label: label
-          });
-        default:
-          return '';
-      }
-    },
-    onFocus: function onFocus(props) {
-      var context = props.context,
-        focused = props.focused,
-        options = props.options,
-        _props$label2 = props.label,
-        label = _props$label2 === void 0 ? '' : _props$label2,
-        selectValue = props.selectValue,
-        isDisabled = props.isDisabled,
-        isSelected = props.isSelected;
-      var getArrayIndex = function getArrayIndex(arr, item) {
-        return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " ").concat(t('tagSelector.aria.onFocus.of'), " ").concat(arr.length) : '';
-      };
-      if (context === 'value' && selectValue) {
-        return t('tagSelector.aria.onFocus.value', {
-          label: label,
-          position: getArrayIndex(selectValue, focused)
+const createAriaMessages = t => ({
+  guidance: props => {
+    const {
+      isSearchable,
+      isMulti,
+      isDisabled,
+      tabSelectsValue,
+      context
+    } = props;
+    switch (context) {
+      case 'menu':
+        return `${t('tagSelector.aria.guidance.menu.updown')}${isDisabled ? '' : `, ${t('tagSelector.aria.guidance.menu.enter')}`}, ${t('tagSelector.aria.guidance.menu.escape')}${tabSelectsValue ? `, ${t('tagSelector.aria.guidance.menu.tab')}` : ''}.`;
+      case 'input':
+        return `${props['aria-label'] || t('tagSelector.aria.guidance.input.select')} ${t('tagSelector.aria.guidance.input.focused')} ${isSearchable ? `, ${t('tagSelector.aria.guidance.input.refine')}` : ''}, ${t('tagSelector.aria.guidance.input.down')}, ${isMulti ? ` ${t('tagSelector.aria.guidance.input.left')}` : ''}, ${t('tagSelector.aria.guidance.input.space')}`;
+      case 'value':
+        return t('tagSelector.aria.guidance.value');
+      default:
+        return '';
+    }
+  },
+  onChange: props => {
+    const {
+      action,
+      label = '',
+      labels,
+      isDisabled
+    } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return t('tagSelector.aria.onChange.deselect', {
+          label
+        });
+      case 'clear':
+        return t('tagSelector.aria.onChange.clear');
+      case 'initial-input-focus':
+        return t('tagSelector.aria.onChange.initialFocus', {
+          labels: labels.join(',')
         });
-      }
-      if (context === 'menu') {
-        var disabled = isDisabled ? " ".concat(t('tagSelector.aria.disabled')) : '';
-        var status = "".concat(isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')).concat(disabled);
-        return t('tagSelector.aria.onFocus.menu', {
-          label: label,
-          status: status,
-          position: getArrayIndex(options, focused)
+      case 'select-option':
+        return isDisabled ? t('tagSelector.aria.onChange.selectedDisabled', {
+          label
+        }) : t('tagSelector.aria.onChange.selected', {
+          label
         });
-      }
-      return '';
-    },
-    onFilter: function onFilter(props) {
-      var inputValue = props.inputValue,
-        resultsMessage = props.resultsMessage;
-      return "".concat(resultsMessage).concat(inputValue ? " ".concat(t('tagSelector.aria.onFilter'), " ") + inputValue : '', ".");
+      default:
+        return '';
+    }
+  },
+  onFocus: props => {
+    const {
+      context,
+      focused,
+      options,
+      label = '',
+      selectValue,
+      isDisabled,
+      isSelected
+    } = props;
+    const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} ${t('tagSelector.aria.onFocus.of')} ${arr.length}` : '';
+    if (context === 'value' && selectValue) {
+      return t('tagSelector.aria.onFocus.value', {
+        label,
+        position: getArrayIndex(selectValue, focused)
+      });
     }
-  };
-};
+    if (context === 'menu') {
+      const disabled = isDisabled ? ` ${t('tagSelector.aria.disabled')}` : '';
+      const status = `${isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')}${disabled}`;
+      return t('tagSelector.aria.onFocus.menu', {
+        label,
+        status,
+        position: getArrayIndex(options, focused)
+      });
+    }
+    return '';
+  },
+  onFilter: props => {
+    const {
+      inputValue,
+      resultsMessage
+    } = props;
+    return `${resultsMessage}${inputValue ? ` ${t('tagSelector.aria.onFilter')} ` + inputValue : ''}.`;
+  }
+});
 exports.createAriaMessages = createAriaMessages;

package/lib/TagSelector/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TagSelector", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TagSelector.default;
   }
 });

package/lib/ToolboxPage/ToolboxInfo.js

@@ -16,14 +16,17 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
-var ToolboxInfo = function ToolboxInfo(_ref) {
-  var title = _ref.title,
-    introduction = _ref.introduction,
-    topics = _ref.topics,
-    onSelectTopic = _ref.onSelectTopic,
-    id = _ref.id;
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t;
+const ToolboxInfo = _ref => {
+  let {
+    title,
+    introduction,
+    topics,
+    onSelectTopic,
+    id
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsx)(_typography.Heading, {
       element: "h1",
@@ -43,5 +46,4 @@ var ToolboxInfo = function ToolboxInfo(_ref) {
     })]
   });
 };
-var _default = ToolboxInfo;
-exports.default = _default;
+var _default = exports.default = ToolboxInfo;

package/lib/ToolboxPage/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ToolboxInfo", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ToolboxInfo.default;
   }
 });

package/lib/Topic/Loader.js

@@ -7,103 +7,100 @@ exports.default = void 0;
 var _ContentLoader = _interopRequireDefault(require("../ContentLoader"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Loader = function Loader() {
-  return (0, _jsxRuntime.jsxs)(_ContentLoader.default, {
-    width: 800,
-    height: 880,
-    children: [(0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "0",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "100",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "25"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "140",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "25"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "180",
-      rx: "3",
-      ry: "3",
-      width: "400",
-      height: "25"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "600",
-      y: "0",
-      rx: "3",
-      ry: "3",
-      width: "200",
-      height: "205"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "280",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "350",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "420",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "490",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "560",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "680",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "750",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), (0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "820",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    })]
-  });
-};
-var _default = Loader;
-exports.default = _default;
+const Loader = () => (0, _jsxRuntime.jsxs)(_ContentLoader.default, {
+  width: 800,
+  height: 880,
+  children: [(0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "0",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "100",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "25"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "140",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "25"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "180",
+    rx: "3",
+    ry: "3",
+    width: "400",
+    height: "25"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "600",
+    y: "0",
+    rx: "3",
+    ry: "3",
+    width: "200",
+    height: "205"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "280",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "350",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "420",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "490",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "560",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "680",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "750",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), (0, _jsxRuntime.jsx)("rect", {
+    x: "0",
+    y: "820",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  })]
+});
+var _default = exports.default = Loader;