@nebula.js/stardust 1.7.0 → 2.2.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v1.7.0
+* @nebula.js/stardust v2.2.0
 * Copyright (c) 2021 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8,7 +8,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.stardust = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -11479,7 +11479,7 @@
     return [appSelections, navState];
   }
 
-  var NEBULA_VERSION_HASH = "6a15" ;
+  var NEBULA_VERSION_HASH = "34e9" ;
   var counter = 0;
   var NebulaApp = react.exports.forwardRef(function (_ref, ref) {
     var initialContext = _ref.initialContext,
@@ -11555,7 +11555,7 @@
     var appRef = React.createRef();
     var element = document.createElement('div');
     element.style.display = 'none';
-    element.setAttribute('data-nebulajs-version', "1.7.0" );
+    element.setAttribute('data-nebulajs-version', "2.2.0" );
     element.setAttribute('data-app-id', app.id);
     document.body.appendChild(element);
     ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -11563,7 +11563,17 @@
       app: app,
       initialContext: context
     }), element, resolveRender);
+    var cells = {};
     return [{
+      toggleFocusOfCells: function toggleFocusOfCells(cellIdToFocus) {
+        Object.keys(cells).forEach(function (i) {
+          cells[i].current.toggleFocus(i === cellIdToFocus);
+        });
+      },
+      cells: cells,
+      addCell: function addCell(id, cell) {
+        cells[id] = cell;
+      },
       add: function add(component) {
         _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
           return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -19499,6 +19509,16 @@
     };
   }
 
+  /**
+   * @interface
+   * @extends HTMLElement
+   * @since 2.0.0
+   */
+
+  var ActionElement = {
+    /** @type {'njs-cell-action'} */
+    className: 'njs-cell-action'
+  };
   var Item = React.forwardRef(function (_ref, ref) {
     var item = _ref.item,
         _ref$addAnchor = _ref.addAnchor,
@@ -19516,8 +19536,12 @@
       ref: !addAnchor ? ref : null,
       title: item.label,
       onClick: item.action,
+      onKeyDown: function onKeyDown(e) {
+        return ['Enter', ' ', 'Spacebar'].includes(e.key) && item.keyboardAction();
+      },
       disabled: disabled,
-      style: style
+      style: style,
+      className: ActionElement.className
     }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
       ref: ref,
       style: {
@@ -19561,7 +19585,9 @@
         _ref$onConfirm = _ref.onConfirm,
         onConfirm = _ref$onConfirm === void 0 ? function () {} : _ref$onConfirm,
         _ref$onCancel = _ref.onCancel,
-        onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
+        onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
+        _ref$onKeyDeactivate = _ref.onKeyDeactivate,
+        onKeyDeactivate = _ref$onKeyDeactivate === void 0 ? function () {} : _ref$onKeyDeactivate;
 
     var _useContext = react.exports.useContext(InstanceContext),
         translator = _useContext.translator;
@@ -19585,8 +19611,13 @@
         return api.canCancel();
       },
       action: function action() {
+        onCancel();
         api.cancel();
+      },
+      keyboardAction: function keyboardAction(e) {
+        onKeyDeactivate(e);
         onCancel();
+        api.cancel();
       },
       getSvgIconShape: close
     }, {
@@ -19597,8 +19628,13 @@
         return api.canConfirm();
       },
       action: function action() {
+        onConfirm();
         api.confirm();
+      },
+      keyboardAction: function keyboardAction(e) {
+        onKeyDeactivate(e);
         onConfirm();
+        api.confirm();
       },
       getSvgIconShape: tick
     }];
@@ -19695,6 +19731,16 @@
     })));
   });
 
+  /**
+   * @interface
+   * @extends HTMLElement
+   * @since 2.1.0
+   */
+
+  var ActionToolbarElement = {
+    /** @type {'njs-action-toolbar-popover'} */
+    className: 'njs-action-toolbar-popover'
+  };
   var useStyles$8 = makeStyles(function (theme) {
     return {
       itemSpacing: {
@@ -19795,14 +19841,19 @@
         popover = _ref2$popover === void 0 ? {
       show: false,
       anchorEl: null
-    } : _ref2$popover;
+    } : _ref2$popover,
+        _ref2$focusHandler = _ref2.focusHandler,
+        focusHandler = _ref2$focusHandler === void 0 ? null : _ref2$focusHandler,
+        _ref2$actionsRefMock = _ref2.actionsRefMock,
+        actionsRefMock = _ref2$actionsRefMock === void 0 ? null : _ref2$actionsRefMock;
     var defaultSelectionActions = useDefaultSelectionActions(selections);
 
     var _useStyles2 = useStyles$8(),
         itemSpacing = _useStyles2.itemSpacing;
 
     var _useContext = react.exports.useContext(InstanceContext),
-        translator = _useContext.translator;
+        translator = _useContext.translator,
+        keyboardNavigation = _useContext.keyboardNavigation;
 
     var _useState = react.exports.useState(false),
         _useState2 = _slicedToArray$2(_useState, 2),
@@ -19825,12 +19876,21 @@
         setMoreAlignTo = _useState8[1];
 
     var moreRef = react.exports.useRef();
+    var actionsRef = react.exports.useRef();
     var theme = useTheme$2();
     var dividerStyle = react.exports.useMemo(function () {
       return {
         margin: theme.spacing(0.5, 0)
       };
     });
+
+    var getEnabledButton = function getEnabledButton(last) {
+      var actionsElement = actionsRef.current || actionsRefMock;
+      if (!actionsElement) return null;
+      var buttons = actionsElement.querySelectorAll('button:not(.Mui-disabled)');
+      return buttons[last ? buttons.length - 1 : 0];
+    };
+
     react.exports.useEffect(function () {
       return function () {
         return setShowMoreItems(false);
@@ -19839,6 +19899,22 @@
     react.exports.useEffect(function () {
       setMoreEnabled(more$1.enabled);
     }, [more$1.enabled]);
+    react.exports.useEffect(function () {
+      if (!focusHandler) return;
+
+      var focusFirst = function focusFirst() {
+        var enabledButton = getEnabledButton(false);
+        enabledButton && enabledButton.focus();
+      };
+
+      var focusLast = function focusLast() {
+        var enabledButton = getEnabledButton(true);
+        enabledButton && enabledButton.focus();
+      };
+
+      focusHandler.on('focus_toolbar_first', focusFirst);
+      focusHandler.on('focus_toolbar_last', focusLast);
+    }, []);
     var newActions = react.exports.useMemo(function () {
       return actions.filter(function (a) {
         return !a.hidden;
@@ -19871,10 +19947,23 @@
       setMoreAlignTo(moreRef);
     }
 
+    var tabCallback = // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
+    keyboardNavigation && focusHandler && focusHandler.refocusContent ? function (evt) {
+      if (evt.key !== 'Tab') return;
+      var isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
+
+      if (isTabbingOut) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        focusHandler.refocusContent();
+      }
+    } : null;
     var showActions = newActions.length > 0;
     var showMore = moreActions.length > 0;
     var showDivider = showActions && selections.show || showMore && selections.show;
     var Actions = /*#__PURE__*/React.createElement(Grid$1, {
+      ref: actionsRef,
+      onKeyDown: tabCallback,
       container: true,
       spacing: 0,
       wrap: "nowrap"
@@ -19917,6 +20006,7 @@
       hideBackdrop: true,
       style: popoverStyle,
       PaperProps: {
+        className: ActionToolbarElement.className,
         style: {
           pointerEvents: 'auto',
           padding: theme.spacing(1, 1)
@@ -19952,7 +20042,9 @@
   });
   var TREE_PATH = '/qListObjectDef';
   function ListBoxSearch(_ref) {
-    var model = _ref.model;
+    var model = _ref.model,
+        _ref$autoFocus = _ref.autoFocus,
+        autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus;
 
     var _useContext = react.exports.useContext(InstanceContext),
         translator = _useContext.translator;
@@ -19986,7 +20078,7 @@
         position: "start"
       }, /*#__PURE__*/React.createElement(Search, null)),
       className: [classes.root].join(' '),
-      autoFocus: true,
+      autoFocus: autoFocus,
       margin: "dense",
       fullWidth: true,
       placeholder: translator.get('Listbox.Search'),
@@ -21246,6 +21338,106 @@
     }), element);
   }
 
+  var classCallCheck = function (instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  };
+
+  var createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  var inherits = function (subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  };
+
+  var possibleConstructorReturn = function (self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  };
+
+  var slicedToArray = function () {
+    function sliceIterator(arr, i) {
+      var _arr = [];
+      var _n = true;
+      var _d = false;
+      var _e = undefined;
+
+      try {
+        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+          _arr.push(_s.value);
+
+          if (i && _arr.length === i) break;
+        }
+      } catch (err) {
+        _d = true;
+        _e = err;
+      } finally {
+        try {
+          if (!_n && _i["return"]) _i["return"]();
+        } finally {
+          if (_d) throw _e;
+        }
+      }
+
+      return _arr;
+    }
+
+    return function (arr, i) {
+      if (Array.isArray(arr)) {
+        return arr;
+      } else if (Symbol.iterator in Object(arr)) {
+        return sliceIterator(arr, i);
+      } else {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance");
+      }
+    };
+  }();
+
   /**
    * Detect Element Resize.
    * https://github.com/sdecima/javascript-detect-element-resize
@@ -21258,37 +21450,77 @@
    * 4) Add nonce for style element.
    **/
 
-  function createDetectElementResize(nonce) {
-    // Check `document` and `window` in case of server-side rendering
-    var _window;
-    if (typeof window !== 'undefined') {
-      _window = window;
-    } else if (typeof self !== 'undefined') {
-      _window = self;
-    } else {
-      _window = global;
-    }
+  // Check `document` and `window` in case of server-side rendering
+  var windowObject = void 0;
+  if (typeof window !== 'undefined') {
+    windowObject = window;
 
-    var attachEvent = typeof document !== 'undefined' && document.attachEvent;
+    // eslint-disable-next-line no-restricted-globals
+  } else if (typeof self !== 'undefined') {
+    // eslint-disable-next-line no-restricted-globals
+    windowObject = self;
+  } else {
+    windowObject = global;
+  }
 
-    if (!attachEvent) {
-      var requestFrame = function () {
-        var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
-          return _window.setTimeout(fn, 20);
-        };
-        return function (fn) {
-          return raf(fn);
-        };
-      }();
+  var cancelFrame = null;
+  var requestFrame = null;
 
-      var cancelFrame = function () {
-        var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
-        return function (id) {
-          return cancel(id);
-        };
-      }();
+  var TIMEOUT_DURATION = 20;
+
+  var clearTimeoutFn = windowObject.clearTimeout;
+  var setTimeoutFn = windowObject.setTimeout;
+
+  var cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+
+  var requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+
+  if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
+    // For environments that don't support animation frame,
+    // fallback to a setTimeout based approach.
+    cancelFrame = clearTimeoutFn;
+    requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
+      return setTimeoutFn(callback, TIMEOUT_DURATION);
+    };
+  } else {
+    // Counter intuitively, environments that support animation frames can be trickier.
+    // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
+    // In this case, we should fallback to a setTimeout() implementation.
+    cancelFrame = function cancelFrame(_ref) {
+      var _ref2 = slicedToArray(_ref, 2),
+          animationFrameID = _ref2[0],
+          timeoutID = _ref2[1];
+
+      cancelAnimationFrameFn(animationFrameID);
+      clearTimeoutFn(timeoutID);
+    };
+    requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
+      var animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+        clearTimeoutFn(timeoutID);
+        callback();
+      });
+
+      var timeoutID = setTimeoutFn(function timeoutCallback() {
+        cancelAnimationFrameFn(animationFrameID);
+        callback();
+      }, TIMEOUT_DURATION);
 
-      var resetTriggers = function resetTriggers(element) {
+      return [animationFrameID, timeoutID];
+    };
+  }
+
+  function createDetectElementResize(nonce) {
+    var animationKeyframes = void 0;
+    var animationName = void 0;
+    var animationStartEvent = void 0;
+    var animationStyle = void 0;
+    var checkTriggers = void 0;
+    var resetTriggers = void 0;
+    var scrollListener = void 0;
+
+    var attachEvent = typeof document !== 'undefined' && document.attachEvent;
+    if (!attachEvent) {
+      resetTriggers = function resetTriggers(element) {
         var triggers = element.__resizeTriggers__,
             expand = triggers.firstElementChild,
             contract = triggers.lastElementChild,
@@ -21301,11 +21533,11 @@
         expand.scrollTop = expand.scrollHeight;
       };
 
-      var checkTriggers = function checkTriggers(element) {
-        return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height;
+      checkTriggers = function checkTriggers(element) {
+        return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
       };
 
-      var scrollListener = function scrollListener(e) {
+      scrollListener = function scrollListener(e) {
         // Don't measure (which forces) reflow for scrolls that happen inside of children!
         if (e.target.className && typeof e.target.className.indexOf === 'function' && e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
           return;
@@ -21316,11 +21548,11 @@
         if (this.__resizeRAF__) {
           cancelFrame(this.__resizeRAF__);
         }
-        this.__resizeRAF__ = requestFrame(function () {
+        this.__resizeRAF__ = requestFrame(function animationFrame() {
           if (checkTriggers(element)) {
             element.__resizeLast__.width = element.offsetWidth;
             element.__resizeLast__.height = element.offsetHeight;
-            element.__resizeListeners__.forEach(function (fn) {
+            element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
               fn.call(element, e);
             });
           }
@@ -21328,12 +21560,12 @@
       };
 
       /* Detect CSS Animations support to detect element display/re-attach */
-      var animation = false,
-          keyframeprefix = '',
-          animationstartevent = 'animationstart',
-          domPrefixes = 'Webkit Moz O ms'.split(' '),
-          startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
-          pfx = '';
+      var animation = false;
+      var keyframeprefix = '';
+      animationStartEvent = 'animationstart';
+      var domPrefixes = 'Webkit Moz O ms'.split(' ');
+      var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
+      var pfx = '';
       {
         var elm = document.createElement('fakeelement');
         if (elm.style.animationName !== undefined) {
@@ -21345,7 +21577,7 @@
             if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
               pfx = domPrefixes[i];
               keyframeprefix = '-' + pfx.toLowerCase() + '-';
-              animationstartevent = startEvents[i];
+              animationStartEvent = startEvents[i];
               animation = true;
               break;
             }
@@ -21353,9 +21585,9 @@
         }
       }
 
-      var animationName = 'resizeanim';
-      var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-      var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+      animationName = 'resizeanim';
+      animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+      animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
     }
 
     var createStyles = function createStyles(doc) {
@@ -21388,8 +21620,8 @@
       } else {
         if (!element.__resizeTriggers__) {
           var doc = element.ownerDocument;
-          var elementStyle = _window.getComputedStyle(element);
-          if (elementStyle && elementStyle.position == 'static') {
+          var elementStyle = windowObject.getComputedStyle(element);
+          if (elementStyle && elementStyle.position === 'static') {
             element.style.position = 'relative';
           }
           createStyles(doc);
@@ -21408,13 +21640,13 @@
           element.addEventListener('scroll', scrollListener, true);
 
           /* Listen for a css animation to detect element display/re-attach */
-          if (animationstartevent) {
+          if (animationStartEvent) {
             element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-              if (e.animationName == animationName) {
+              if (e.animationName === animationName) {
                 resetTriggers(element);
               }
             };
-            element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
+            element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
           }
         }
         element.__resizeListeners__.push(fn);
@@ -21429,7 +21661,7 @@
         if (!element.__resizeListeners__.length) {
           element.removeEventListener('scroll', scrollListener, true);
           if (element.__resizeTriggers__.__animationListener__) {
-            element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
+            element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
             element.__resizeTriggers__.__animationListener__ = null;
           }
           try {
@@ -21447,68 +21679,6 @@
     };
   }
 
-  var classCallCheck = function (instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  };
-
-  var createClass = function () {
-    function defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-      }
-    }
-
-    return function (Constructor, protoProps, staticProps) {
-      if (protoProps) defineProperties(Constructor.prototype, protoProps);
-      if (staticProps) defineProperties(Constructor, staticProps);
-      return Constructor;
-    };
-  }();
-
-  var _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  var inherits = function (subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-    }
-
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-  };
-
-  var possibleConstructorReturn = function (self, call) {
-    if (!self) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return call && (typeof call === "object" || typeof call === "function") ? call : self;
-  };
-
   var AutoSizer = function (_React$PureComponent) {
     inherits(AutoSizer, _React$PureComponent);
 
@@ -21635,7 +21805,8 @@
           {
             className: className,
             ref: this._setRef,
-            style: _extends({}, outerStyle, style) },
+            style: _extends({}, outerStyle, style)
+          },
           !bailoutOnChildren && children(childParams)
         );
       }
@@ -21830,7 +22001,8 @@
     }))), search ? /*#__PURE__*/React.createElement(Grid$1, {
       item: true
     }, /*#__PURE__*/React.createElement(ListBoxSearch, {
-      model: model
+      model: model,
+      autoFocus: false
     })) : '', /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       xs: true
@@ -22010,7 +22182,9 @@
 
   function fieldType(f) {
     if ( // a string starting with '=' is just a convention we use
-    typeof f === 'string' && f[0] === '=' || _typeof$3(f) === 'object' && f.qDef && f.qDef.qDef || _typeof$3(f) === 'object' && f.qLibraryId && f.type === 'measure') {
+    typeof f === 'string' && f[0] === '=' || // based on NxMeasure and NxInlineMeasureDef
+    _typeof$3(f) === 'object' && f.qDef && f.qDef.qDef || // use 'type' instead of 'qType' since this is not a real property
+    _typeof$3(f) === 'object' && f.qLibraryId && f.type === 'measure') {
       return 'measure';
     }
 
@@ -22067,14 +22241,12 @@
    * An object that imports from this structure is responsible for putting the existing properties where they should be
    * in the new model.
    * @interface ExportFormat
-   * @experimental
    * @since 1.1.0
    * @property {(ExportDataDef[])=} data
    * @property {object=} properties
    */
 
   /**
-   * @experimental
    * @since 1.1.0
    * @interface ExportDataDef
    * @property {qae.NxDimension[]} dimensions
@@ -22085,7 +22257,6 @@
    */
 
   /**
-   * @experimental
    * @since 1.1.0
    * @ignore
    * @param {number} nDataGroups
@@ -22859,7 +23030,6 @@
 
   /**
    * @interface hyperCubeConversion
-   * @experimental
    * @since 1.1.0
    * @implements {ConversionType}
    */
@@ -23006,7 +23176,6 @@
   }();
   /**
    * @interface ConversionType
-   * @experimental
    * @since 1.1.0
    * @property {importProperties} importProperties
    * @property {exportProperties} exportProperties
@@ -23015,7 +23184,6 @@
   /**
    * @interface
    * @alias Conversion
-   * @experimental
    * @since 1.1.0
    * @description Provides conversion functionality to extensions.
    * @example
@@ -23037,7 +23205,6 @@
   var conversion = {
     /**
      * @type {hyperCubeConversion}
-     * @experimental
      * @since 1.1.0
      * @description Provides conversion functionality to extensions with hyperCubes.
      */
@@ -23371,6 +23538,26 @@
   var DIVIDER = 1;
   var NUMBER_OF_ITEMS = 6;
   var MIN_WIDTH = (ITEM_WIDTH + ITEM_SPACING) * NUMBER_OF_ITEMS + DIVIDER + ITEM_SPACING;
+  /**
+   * @interface
+   * @extends HTMLElement
+   * @since 2.0.0
+   */
+
+  var CellTitle = {
+    /** @type {'njs-cell-title'} */
+    className: 'njs-cell-title'
+  };
+  /**
+   * @interface
+   * @extends HTMLElement
+   * @since 2.0.0
+   */
+
+  var CellSubTitle = {
+    /** @type {'njs-cell-sub-title'} */
+    className: 'njs-cell-sub-title'
+  };
   var useStyles$1 = makeStyles(function (theme) {
     return {
       containerStyle: {
@@ -23386,7 +23573,8 @@
     var layout = _ref.layout,
         sn = _ref.sn,
         anchorEl = _ref.anchorEl,
-        hovering = _ref.hovering;
+        hovering = _ref.hovering,
+        focusHandler = _ref.focusHandler;
     var showTitle = layout.showTitles && !!layout.title;
     var showSubtitle = layout.showTitles && !!layout.subtitle;
     var showInSelectionActions = layout.qSelectionInfo && layout.qSelectionInfo.qInSelections;
@@ -23432,13 +23620,15 @@
       show: showToolbar,
       selections: {
         show: showInSelectionActions,
-        api: sn.component.selections
+        api: sn.component.selections,
+        onKeyDeactivate: focusHandler.refocusContent
       },
       actions: actions,
       popover: {
         show: showPopoverToolbar,
         anchorEl: anchorEl
-      }
+      },
+      focusHandler: focusHandler
     });
     return /*#__PURE__*/React.createElement(Grid$1, {
       ref: containerRef,
@@ -23456,15 +23646,27 @@
       direction: "column"
     }, showTitle && /*#__PURE__*/React.createElement(Typography$1, {
       variant: "h6",
-      noWrap: true
+      noWrap: true,
+      className: CellTitle.className
     }, layout.title), showSubtitle && /*#__PURE__*/React.createElement(Typography$1, {
       variant: "body2",
-      noWrap: true
+      noWrap: true,
+      className: CellSubTitle.className
     }, layout.subtitle))), /*#__PURE__*/React.createElement(Grid$1, {
       item: true
     }, Toolbar));
   };
 
+  /**
+   * @interface
+   * @extends HTMLElement
+   * @since 2.0.0
+   */
+
+  var CellFooter = {
+    /** @type {'njs-cell-footer'} */
+    className: 'njs-cell-footer'
+  };
   var useStyles = makeStyles(function (theme) {
     return {
       itemStyle: {
@@ -23487,10 +23689,103 @@
       className: itemStyle
     }, /*#__PURE__*/React.createElement(Typography$1, {
       noWrap: true,
-      variant: "body2"
+      variant: "body2",
+      className: CellFooter.className
     }, layout.footnote))) : null;
   };
 
+  var RenderDebouncer = /*#__PURE__*/function () {
+    function RenderDebouncer() {
+      _classCallCheck$1(this, RenderDebouncer);
+
+      this.timer = null;
+      this.next = null;
+      this.running = false;
+    }
+
+    _createClass$2(RenderDebouncer, [{
+      key: "start",
+      value: function start() {
+        if (this.running) {
+          return;
+        }
+
+        this.running = true;
+        this.scheduleNext();
+      }
+    }, {
+      key: "scheduleNext",
+      value: function scheduleNext() {
+        var _this = this;
+
+        this.timer = setTimeout(function () {
+          _this.doNext();
+        }, 10);
+      }
+    }, {
+      key: "doNext",
+      value: function () {
+        var _doNext = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          var fn;
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  fn = this.next;
+                  this.next = null;
+
+                  if (!fn) {
+                    _context.next = 8;
+                    break;
+                  }
+
+                  _context.next = 5;
+                  return fn();
+
+                case 5:
+                  this.scheduleNext();
+                  _context.next = 9;
+                  break;
+
+                case 8:
+                  this.stop();
+
+                case 9:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, this);
+        }));
+
+        function doNext() {
+          return _doNext.apply(this, arguments);
+        }
+
+        return doNext;
+      }()
+    }, {
+      key: "schedule",
+      value: function schedule(fn) {
+        this.next = fn;
+        this.start();
+      }
+    }, {
+      key: "stop",
+      value: function stop() {
+        if (!this.running) {
+          return;
+        }
+
+        clearTimeout(this.timer);
+        this.timer = null;
+        this.running = false;
+      }
+    }]);
+
+    return RenderDebouncer;
+  }();
+
   /**
    * @interface
    * @extends HTMLElement
@@ -23514,19 +23809,24 @@
     var _useContext = react.exports.useContext(InstanceContext),
         themeName = _useContext.theme,
         language = _useContext.language,
-        constraints = _useContext.constraints;
-
-    var renderDebouncer = react.exports.useRef(null);
+        constraints = _useContext.constraints,
+        keyboardNavigation = _useContext.keyboardNavigation;
 
-    var _useState = react.exports.useState(false),
-        _useState2 = _slicedToArray$2(_useState, 2),
-        isMounted = _useState2[0],
-        setIsMounted = _useState2[1];
+    var _useState = react.exports.useState(function () {
+      return new RenderDebouncer();
+    }),
+        _useState2 = _slicedToArray$2(_useState, 1),
+        renderDebouncer = _useState2[0];
 
-    var _useState3 = react.exports.useState(0),
+    var _useState3 = react.exports.useState(false),
         _useState4 = _slicedToArray$2(_useState3, 2),
-        renderCnt = _useState4[0],
-        setRenderCnt = _useState4[1];
+        isMounted = _useState4[0],
+        setIsMounted = _useState4[1];
+
+    var _useState5 = react.exports.useState(0),
+        _useState6 = _slicedToArray$2(_useState5, 2),
+        renderCnt = _useState6[0],
+        setRenderCnt = _useState6[1];
 
     var _useRect = useRect$1(),
         _useRect2 = _slicedToArray$2(_useRect, 3),
@@ -23534,10 +23834,10 @@
         containerRect = _useRect2[1],
         containerNode = _useRect2[2];
 
-    var _useState5 = react.exports.useState(null),
-        _useState6 = _slicedToArray$2(_useState5, 2),
-        snNode = _useState6[0],
-        setSnNode = _useState6[1];
+    var _useState7 = react.exports.useState(null),
+        _useState8 = _slicedToArray$2(_useState7, 2),
+        snNode = _useState8[0],
+        setSnNode = _useState8[1];
 
     var snRef = react.exports.useCallback(function (ref) {
       if (!ref) {
@@ -23555,8 +23855,7 @@
       component.mounted(snNode);
       setIsMounted(true);
       return function () {
-        clearTimeout(renderDebouncer.current);
-        renderDebouncer.current = null;
+        renderDebouncer.stop();
         component.willUnmount();
       };
     }, [snNode, component]); // Render
@@ -23571,13 +23870,7 @@
         return;
       }
 
-      if (renderDebouncer.current) {
-        // rendering already scheduled
-        return;
-      }
-
-      renderDebouncer.current = setTimeout(function () {
-        // temporarily map constraints to permissions
+      renderDebouncer.schedule(function () {
         var permissions = [];
 
         if (!constraints.passive) {
@@ -23596,7 +23889,7 @@
           permissions.push('fetch');
         }
 
-        Promise.resolve(component.render({
+        return Promise.resolve(component.render({
           layout: layout,
           options: options,
           plugins: plugins,
@@ -23605,7 +23898,8 @@
             constraints: constraints,
             // halo.public.theme is a singleton so themeName is used as dep to make sure this effect is triggered
             theme: halo.public.theme,
-            appLayout: appLayout
+            appLayout: appLayout,
+            keyboardNavigation: keyboardNavigation
           }, component.isHooked ? {} : {
             logicalSize: sn.logicalSize({
               layout: layout
@@ -23613,8 +23907,10 @@
             localeInfo: (appLayout || {}).qLocaleInfo,
             permissions: permissions
           })
-        })).then(function () {
-          renderDebouncer.current = null;
+        })).then(function (done) {
+          if (done === false) {
+            return;
+          }
 
           if (renderCnt === 0 && typeof options.onInitialRender === 'function') {
             options.onInitialRender.call(null);
@@ -23622,8 +23918,8 @@
 
           setRenderCnt(renderCnt + 1);
         });
-      }, 10);
-    }, [containerRect, options, plugins, snNode, containerNode, layout, appLayout, themeName, language, constraints, isMounted]);
+      });
+    }, [containerRect, options, plugins, snNode, containerNode, layout, appLayout, themeName, language, constraints, isMounted, keyboardNavigation]);
     return /*#__PURE__*/React.createElement("div", {
       ref: containerRef,
       "data-render-count": renderCnt,
@@ -23737,7 +24033,7 @@
         return clearTimeout(handle);
       };
     }, []);
-    return showLoading && /*#__PURE__*/React.createElement(Loading, null);
+    return showLoading ? /*#__PURE__*/React.createElement(Loading, null) : null;
   };
 
   var handleModal = function handleModal(_ref2) {
@@ -23978,12 +24274,12 @@
 
   var loadType = /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref7) {
-      var dispatch, types, visualization, version, model, app, selections, nebbie, snType, sn;
+      var dispatch, types, visualization, version, model, app, selections, nebbie, focusHandler, snType, sn;
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              dispatch = _ref7.dispatch, types = _ref7.types, visualization = _ref7.visualization, version = _ref7.version, model = _ref7.model, app = _ref7.app, selections = _ref7.selections, nebbie = _ref7.nebbie;
+              dispatch = _ref7.dispatch, types = _ref7.types, visualization = _ref7.visualization, version = _ref7.version, model = _ref7.model, app = _ref7.app, selections = _ref7.selections, nebbie = _ref7.nebbie, focusHandler = _ref7.focusHandler;
               _context3.prev = 1;
               _context3.next = 4;
               return getType({
@@ -23998,7 +24294,8 @@
                 model: model,
                 app: app,
                 selections: selections,
-                nebbie: nebbie
+                nebbie: nebbie,
+                focusHandler: focusHandler
               });
               return _context3.abrupt("return", sn);
 
@@ -24034,14 +24331,16 @@
         initialSnOptions = _ref9.initialSnOptions,
         initialSnPlugins = _ref9.initialSnPlugins,
         initialError = _ref9.initialError,
-        onMount = _ref9.onMount;
+        onMount = _ref9.onMount,
+        currentId = _ref9.currentId;
     var app = halo.app,
         types = halo.types;
     var nebbie = halo.public.nebbie;
 
     var _useContext = react.exports.useContext(InstanceContext),
         translator = _useContext.translator,
-        language = _useContext.language;
+        language = _useContext.language,
+        keyboardNavigation = _useContext.keyboardNavigation;
 
     var theme = useTheme$2();
 
@@ -24070,9 +24369,10 @@
         appLayout = _useAppLayout2[0];
 
     var _useRect3 = useRect$1(),
-        _useRect4 = _slicedToArray$2(_useRect3, 2),
+        _useRect4 = _slicedToArray$2(_useRect3, 3),
         contentRef = _useRect4[0],
-        contentRect = _useRect4[1];
+        contentRect = _useRect4[1],
+        contentNode = _useRect4[2];
 
     var _useState3 = react.exports.useState(initialSnOptions),
         _useState4 = _slicedToArray$2(_useState3, 2),
@@ -24097,6 +24397,27 @@
       enter: null,
       leave: null
     });
+    var focusHandler = react.exports.useRef({
+      focusToolbarButton: function focusToolbarButton(last) {
+        // eslint-disable-next-line react/no-this-in-sfc
+        this.emit(last ? 'focus_toolbar_last' : 'focus_toolbar_first');
+      }
+    });
+    react.exports.useEffect(function () {
+      eventmixin(focusHandler.current);
+    }, []);
+
+    focusHandler.current.blurCallback = function (resetFocus) {
+      halo.root.toggleFocusOfCells();
+
+      if (resetFocus && contentNode) {
+        contentNode.focus();
+      }
+    };
+
+    focusHandler.current.refocusContent = function () {
+      state.sn.component && typeof state.sn.component.focus === 'function' && state.sn.component.focus();
+    };
 
     var handleOnMouseEnter = function handleOnMouseEnter() {
       if (hoveringDebouncer.current.leave) {
@@ -24122,6 +24443,13 @@
       }, 750);
     };
 
+    var handleKeyDown = function handleKeyDown(e) {
+      // Enter or space
+      if (['Enter', ' ', 'Spacebar'].includes(e.key)) {
+        halo.root.toggleFocusOfCells(currentId);
+      }
+    };
+
     react.exports.useEffect(function () {
       if (initialError || !appLayout || !layout) {
         return undefined;
@@ -24193,7 +24521,8 @@
                     model: model,
                     app: app,
                     selections: selections,
-                    nebbie: nebbie
+                    nebbie: nebbie,
+                    focusHandler: focusHandler.current
                   });
 
                 case 3:
@@ -24266,6 +24595,15 @@
         getQae: function getQae() {
           return state.sn.generator.qae;
         },
+        toggleFocus: function toggleFocus(active) {
+          if (typeof state.sn.component.focus === 'function') {
+            if (active) {
+              state.sn.component.focus();
+            } else {
+              state.sn.component.blur();
+            }
+          }
+        },
         setSnOptions: setSnOptions,
         setSnPlugins: setSnPlugins,
         takeSnapshot: function takeSnapshot() {
@@ -24407,8 +24745,11 @@
       layout: layout,
       sn: state.sn,
       anchorEl: cellNode,
-      hovering: hovering
+      hovering: hovering,
+      focusHandler: focusHandler.current
     }, "\xA0"), /*#__PURE__*/React.createElement(Grid$1, {
+      tabIndex: keyboardNavigation ? 0 : -1,
+      onKeyDown: keyboardNavigation ? handleKeyDown : null,
       item: true,
       xs: true,
       style: {
@@ -24434,10 +24775,12 @@
         initialError = _ref.initialError;
     var root = halo.root;
     var cellRef = React.createRef();
+    var currentId = uid();
     var portal = ReactDOM.createPortal( /*#__PURE__*/React.createElement(Cell, {
       ref: cellRef,
       halo: halo,
       model: model,
+      currentId: currentId,
       initialSnOptions: initialSnOptions,
       initialSnPlugins: initialSnPlugins,
       initialError: initialError,
@@ -24450,7 +24793,9 @@
     };
 
     model.on('closed', unmount);
-    root.add(portal);
+    root.add(portal); // Cannot use model.id as it is not unique in a given mashup
+
+    root.addCell(currentId, cellRef);
     return [unmount, cellRef];
   }
 
@@ -24702,7 +25047,6 @@
 
       /**
        * Converts the visualization to a different registered type
-       * @experimental
        * @since 1.1.0
        * @param {string} newType - Which registered type to convert to.
        * @param {boolean=} forceUpdate - Whether to run setProperties or not, defaults to true.
@@ -25612,6 +25956,7 @@
     component.__hooks = {
       obsolete: false,
       error: false,
+      waitForData: false,
       chain: {
         promise: null,
         resolve: function resolve() {}
@@ -25627,6 +25972,9 @@
       resizer: {
         setters: [],
         explicitResize: explicitResize
+      },
+      accessibility: {
+        setter: null
       }
     };
   }
@@ -25639,6 +25987,7 @@
     component.__hooks.actions = null;
     component.__hooks.imperativeHandle = null;
     component.__hooks.resizer = null;
+    component.__hooks.accessibility = null;
     component.__actionsDispatch = null;
     clearTimeout(component.__hooks.micro);
     cancelAnimationFrame(component.__hooks.macro);
@@ -25742,7 +26091,7 @@
     }
 
     hooks.chain.promise = null;
-    hooks.chain.resolve();
+    hooks.chain.resolve(!hooks.waitForData);
   }
 
   function runSnaps(component, layout) {
@@ -25834,6 +26183,8 @@
       run: run,
       teardown: teardown,
       runSnaps: runSnaps,
+      focus: focus,
+      blur: blur,
       observeActions: observeActions,
       getImperativeHandle: getImperativeHandle,
       updateRectOnNextRun: updateRectOnNextRun
@@ -26348,6 +26699,7 @@
    * Gets the embed instance used.
    * @entry
    * @experimental
+   * @since 1.7.0
    * @returns {Embed} The embed instance used.
    * @example
    * import { useEmbed } from '@nebula.js/stardust';
@@ -26480,9 +26832,9 @@
   }
   /**
    * @interface Constraints
-   * @property {boolean=} passive
-   * @property {boolean=} active
-   * @property {boolean=} select
+   * @property {boolean=} passive Whether or not passive constraints are on. Should block any passive interaction by users, ie: tooltips
+   * @property {boolean=} active Whether or not active constraints are on. Should block any active interaction by users, ie: scroll, click
+   * @property {boolean=} select Whether or not active select are on. Should block any selection action. Implied when active is true.
    */
 
   /**
@@ -26641,6 +26993,183 @@
 
     h.fn = cb;
   }
+  /**
+   * Gets render state instance.
+   *
+   * Used to update properties and get a new layout without triggering onInitialRender.
+   * @entry
+   * @experimental
+   * @returns {{ pending, restore }} The render state.
+   * @example
+   * import { useRenderState } from '@nebula.js/stardust';
+   *
+   * const renderState = useRenderState();
+   * useState(() => {
+   *   if(needProperteisUpdate(...)) {
+   *      useRenderState.pending();
+   *      updateProperties(...);
+   *   } else {
+   *      useRenderState.restore();
+   *      ...
+   *   }
+   * }, [...]);
+   */
+
+  function useRenderState() {
+    getHook(++currentIndex);
+    var hooks = currentComponent.__hooks;
+    return {
+      pending: function pending() {
+        hooks.waitForData = true;
+      },
+      restore: function restore() {
+        hooks.waitForData = false;
+      }
+    };
+  }
+  /**
+   * @experimental
+   * @interface Keyboard
+   * @property {boolean} enabled Whether or not Nebula handles keyboard navigation or not.
+   * @property {boolean} active Set to true when the chart is activated, ie a user tabs to the chart and presses Enter or Space.
+   * @property {function=} blur Function used by the visualization to tell Nebula to it wants to relinquish focus
+   * @property {function=} focus Function used by the visualization to tell Nebula to it wants focus
+   * @property {function=} focusSelection Function used by the visualization to tell Nebula to focus the selection toolbar
+   */
+
+  /**
+   * Gets the desired keyboard settings and status to applied when rendering the visualization.
+   * A visualization should in general only have tab stops if either `keyboard.enabled` is false or if active is true.
+   * This means that either Nebula isn't configured to handle keyboard input or the chart is currently focused.
+   * Enabling or disabling keyboardNavigation are set on the embed configuration and
+   * should be respected by the visualization.
+   * @entry
+   * @returns {Keyboard}
+   * @example
+   * // configure nebula to enable navigation between charts
+   * embed(app, {
+   *   context: {
+   *     keyboardNavigation: true, // tell Nebula to handle navigation
+   *   }
+   * }).render({ element, id: 'sdfsdf' });
+   *
+   * @example
+   * import { useKeyboard } from '@nebula.js/stardust';
+   * // ...
+   * const keyboard = useKeyboard();
+   * useEffect(() => {
+   *  // Set a tab stop on our button if in focus or if Nebulas navigation is disabled
+   *  button.setAttribute('tabIndex', keyboard.active || !keyboard.enabled ? 0 : -1);
+   *  // If navigation is enabled and focus has shifted, lets focus the button
+   *  keyboard.enabled && keyboard.active && button.focus();
+   * }, [keyboard])
+   *
+   */
+
+  function useKeyboard() {
+    var keyboardNavigation = useInternalContext('keyboardNavigation');
+    var focusHandler = useInternalContext('focusHandler');
+
+    if (!currentComponent.__hooks.accessibility.exitFunction) {
+      var exitFunction = function (resetFocus) {
+        var acc = this.__hooks.accessibility;
+
+        if (acc.enabled && acc.active) {
+          blur(this);
+          focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(resetFocus);
+        }
+      }.bind(currentComponent);
+
+      currentComponent.__hooks.accessibility.exitFunction = exitFunction;
+
+      var focusFunction = function () {
+        var acc = this.__hooks.accessibility;
+
+        if (acc.enabled && !acc.active) {
+          focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(false);
+          focus(this);
+        }
+      }.bind(currentComponent);
+
+      currentComponent.__hooks.accessibility.focusFunction = focusFunction;
+
+      var focusSelectionFunction = function (focusLast) {
+        var acc = this.__hooks.accessibility;
+
+        if (acc.enabled) {
+          focusHandler && focusHandler.focusToolbarButton && focusHandler.focusToolbarButton(focusLast);
+        }
+      }.bind(currentComponent);
+
+      currentComponent.__hooks.accessibility.focusSelectionFunction = focusSelectionFunction;
+    }
+
+    var focusFunc = currentComponent.__hooks.accessibility.focusFunction;
+    var exitFunc = currentComponent.__hooks.accessibility.exitFunction;
+    var focusSelectionFunc = currentComponent.__hooks.accessibility.focusSelectionFunction;
+
+    var _useState9 = useState({
+      active: false,
+      enabled: keyboardNavigation,
+      blur: exitFunc,
+      focus: focusFunc,
+      focusSelection: focusSelectionFunc
+    }),
+        _useState10 = _slicedToArray$2(_useState9, 2),
+        acc = _useState10[0],
+        setAcc = _useState10[1];
+
+    currentComponent.__hooks.accessibility.setter = setAcc;
+    currentComponent.__hooks.accessibility.enabled = keyboardNavigation;
+    useEffect(function () {
+      return setAcc({
+        active: false,
+        enabled: keyboardNavigation,
+        blur: exitFunc,
+        focus: focusFunc,
+        focusSelection: focusSelectionFunc
+      });
+    }, [keyboardNavigation]);
+    return acc;
+  }
+  function focus(component) {
+    var acc = component.__hooks.accessibility;
+
+    if (acc.active) {
+      return;
+    }
+
+    acc.active = true;
+
+    if (acc && acc.setter) {
+      acc.setter({
+        active: true,
+        enabled: acc.enabled,
+        blur: acc.exitFunction,
+        focus: acc.focusFunction,
+        focusSelection: acc.focusSelectionFunction
+      });
+    }
+  }
+  function blur(component) {
+    var acc = component.__hooks.accessibility; // Incomplete/Invalid/Legacy viz hasn't been initialized with hooks
+
+    if (!acc || !acc.active) {
+      return;
+    }
+
+    acc.active = false;
+
+    if (acc && acc.setter) {
+      acc.setter({
+        active: false,
+        enabled: acc.enabled,
+        blur: acc.exitFunction,
+        focus: acc.focusFunction,
+        focusSelection: acc.focusSelectionFunction
+      });
+    }
+  }
 
   var defaultComponent = {
     app: null,
@@ -26712,6 +27241,8 @@
         // --- dynamic values ---
         layout: {},
         appLayout: {},
+        keyboardNavigation: opts.keyboardNavigation,
+        focusHandler: opts.focusHandler,
         constraints: forcedConstraints,
         options: {},
         plugins: []
@@ -26738,6 +27269,17 @@
           if (r.context && r.context.theme) {
             // changed is set further down only if the name is different
             this.context.theme = r.context.theme;
+          } // false equals undefined, so we to cast to bool here
+
+
+          if (r.context && !!r.context.keyboardNavigation !== !!this.context.keyboardNavigation) {
+            this.context.keyboardNavigation = !!r.context.keyboardNavigation;
+            changed = true;
+          }
+
+          if (r.context && r.context.focusHandler) {
+            // Needs to be added here due to how the client renders
+            this.context.focusHandler = r.context.focusHandler;
           }
 
           if (r.options) {
@@ -26837,6 +27379,12 @@
       setSnapshotData: function setSnapshotData(layout) {
         return generator.component.runSnaps(this, layout);
       },
+      focus: function focus() {
+        generator.component.focus(this);
+      },
+      blur: function blur() {
+        generator.component.blur(this);
+      },
       getImperativeHandle: function getImperativeHandle() {
         return generator.component.getImperativeHandle(this);
       },
@@ -27000,7 +27548,6 @@
   /**
    * @function importProperties
    * @description Imports properties for a chart with a hypercube.
-   * @experimental
    * @since 1.1.0
    * @param {Object} args
    * @param {ExportFormat} args.exportFormat The export object which is the output of exportProperties.
@@ -27014,7 +27561,6 @@
   /**
    * @function exportProperties
    * @description Exports properties for a chart with a hypercube.
-   * @experimental
    * @since 1.1.0
    * @param {Object} args
    * @param {Object} args.propertyTree
@@ -29036,6 +29582,7 @@
 
   /**
    * @interface Context
+   * @property {boolean=} keyboardNavigation
    * @property {object=} constraints
    * @property {boolean=} constraints.active
    * @property {boolean=} constraints.passive
@@ -29053,7 +29600,8 @@
 
     /** @type {string=} */
     deviceType: 'auto',
-    constraints: {}
+    constraints: {},
+    keyboardNavigation: false
   };
   /**
    * @interface SnapshotConfiguration
@@ -29344,8 +29892,8 @@
                 switch (_context4.prev = _context4.next) {
                   case 0:
                     // filter valid values to avoid triggering unnecessary rerender
-                    ['theme', 'language', 'constraints'].forEach(function (key) {
-                      if (ctx[key] && ctx[key] !== currentContext[key]) {
+                    ['theme', 'language', 'constraints', 'keyboardNavigation'].forEach(function (key) {
+                      if (Object.prototype.hasOwnProperty.call(ctx, key) && ctx[key] !== currentContext[key]) {
                         if (!changes) {
                           changes = {};
                         }
@@ -29473,7 +30021,6 @@
          * Gets the listbox instance of the specified field
          * @param {string|LibraryField} fieldIdentifier Fieldname as a string or a Library dimension
          * @returns {Promise<FieldInstance>}
-         * @experimental
          * @since 1.1.0
          * @example
          * const fieldInstance = await n.field("MyField");
@@ -29499,7 +30046,6 @@
                     /**
                      * @class
                      * @alias FieldInstance
-                     * @experimental
                      * @since 1.1.0
                      */
                     fieldSels = {
@@ -29515,7 +30061,6 @@
                        * @param {boolean=} [options.search=true] To show the search bar
                        * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
                        * @param {object=} [options.properties={}] Properties object to extend default properties with
-                       * @experimental
                        * @since 1.1.0
                        * @example
                        * fieldInstance.mount(element);
@@ -29543,7 +30088,6 @@
 
                       /**
                        * Unmounts the field listbox from the DOM.
-                       * @experimental
                        * @since 1.1.0
                        * @example
                        * listbox.unmount();
@@ -29664,6 +30208,7 @@
   exports.useEmbed = useEmbed;
   exports.useGlobal = useGlobal;
   exports.useImperativeHandle = useImperativeHandle;
+  exports.useKeyboard = useKeyboard;
   exports.useLayout = useLayout;
   exports.useMemo = useMemo;
   exports.useModel = useModel;
@@ -29671,6 +30216,7 @@
   exports.usePlugins = usePlugins;
   exports.usePromise = usePromise;
   exports.useRect = useRect;
+  exports.useRenderState = useRenderState;
   exports.useSelections = useSelections;
   exports.useStaleLayout = useStaleLayout;
   exports.useState = useState;
@@ -29679,5 +30225,5 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=stardust.dev.js.map