@nebula.js/stardust 1.7.0 → 2.2.0

package/core/esm/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.
 */
@@ -5690,7 +5690,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-var NEBULA_VERSION_HASH = "6a15" ;
+var NEBULA_VERSION_HASH = "34e9" ;
 var counter = 0;
 var NebulaApp = forwardRef(function (_ref, ref) {
   var initialContext = _ref.initialContext,
@@ -5766,7 +5766,7 @@ function boot(_ref2) {
   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, {
@@ -5774,7 +5774,17 @@ function boot(_ref2) {
     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) {
@@ -7597,6 +7607,16 @@ function useActionState(item) {
   };
 }
 
+/**
+ * @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,
@@ -7614,8 +7634,12 @@ var Item = React.forwardRef(function (_ref, ref) {
     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: {
@@ -7659,7 +7683,9 @@ function useDefaultSelectionActions(_ref) {
       _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 = useContext(InstanceContext),
       translator = _useContext.translator;
@@ -7683,8 +7709,13 @@ function useDefaultSelectionActions(_ref) {
       return api.canCancel();
     },
     action: function action() {
+      onCancel();
       api.cancel();
+    },
+    keyboardAction: function keyboardAction(e) {
+      onKeyDeactivate(e);
       onCancel();
+      api.cancel();
     },
     getSvgIconShape: close
   }, {
@@ -7695,8 +7726,13 @@ function useDefaultSelectionActions(_ref) {
       return api.canConfirm();
     },
     action: function action() {
+      onConfirm();
       api.confirm();
+    },
+    keyboardAction: function keyboardAction(e) {
+      onKeyDeactivate(e);
       onConfirm();
+      api.confirm();
     },
     getSvgIconShape: tick
   }];
@@ -7793,6 +7829,16 @@ var More$1 = React.forwardRef(function (_ref2, ref) {
   })));
 });
 
+/**
+ * @interface
+ * @extends HTMLElement
+ * @since 2.1.0
+ */
+
+var ActionToolbarElement = {
+  /** @type {'njs-action-toolbar-popover'} */
+  className: 'njs-action-toolbar-popover'
+};
 var useStyles$8 = makeStyles$1(function (theme) {
   return {
     itemSpacing: {
@@ -7893,14 +7939,19 @@ var ActionsToolbar = function ActionsToolbar(_ref2) {
       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 = useContext(InstanceContext),
-      translator = _useContext.translator;
+      translator = _useContext.translator,
+      keyboardNavigation = _useContext.keyboardNavigation;
 
   var _useState = useState$1(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7923,12 +7974,21 @@ var ActionsToolbar = function ActionsToolbar(_ref2) {
       setMoreAlignTo = _useState8[1];
 
   var moreRef = useRef();
+  var actionsRef = useRef();
   var theme = useTheme$1();
   var dividerStyle = useMemo$1(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];
+  };
+
   useEffect$1(function () {
     return function () {
       return setShowMoreItems(false);
@@ -7937,6 +7997,22 @@ var ActionsToolbar = function ActionsToolbar(_ref2) {
   useEffect$1(function () {
     setMoreEnabled(more$1.enabled);
   }, [more$1.enabled]);
+  useEffect$1(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 = useMemo$1(function () {
     return actions.filter(function (a) {
       return !a.hidden;
@@ -7969,10 +8045,23 @@ var ActionsToolbar = function ActionsToolbar(_ref2) {
     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, {
+    ref: actionsRef,
+    onKeyDown: tabCallback,
     container: true,
     spacing: 0,
     wrap: "nowrap"
@@ -8015,6 +8104,7 @@ var ActionsToolbar = function ActionsToolbar(_ref2) {
     hideBackdrop: true,
     style: popoverStyle,
     PaperProps: {
+      className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
         padding: theme.spacing(1, 1)
@@ -8050,7 +8140,9 @@ var useStyles$7 = makeStyles(function (theme) {
 });
 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 = useContext(InstanceContext),
       translator = _useContext.translator;
@@ -8084,7 +8176,7 @@ function ListBoxSearch(_ref) {
       position: "start"
     }, /*#__PURE__*/React.createElement(Search, null)),
     className: [classes.root].join(' '),
-    autoFocus: true,
+    autoFocus: autoFocus,
     margin: "dense",
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
@@ -9344,6 +9436,106 @@ function mount(_ref2) {
   }), 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
@@ -9356,37 +9548,77 @@ function mount(_ref2) {
  * 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 resetTriggers = function resetTriggers(element) {
+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);
+
+    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,
@@ -9399,11 +9631,11 @@ function createDetectElementResize(nonce) {
       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;
@@ -9414,11 +9646,11 @@ function createDetectElementResize(nonce) {
       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);
           });
         }
@@ -9426,12 +9658,12 @@ function createDetectElementResize(nonce) {
     };
 
     /* 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) {
@@ -9443,7 +9675,7 @@ function createDetectElementResize(nonce) {
           if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
             pfx = domPrefixes[i];
             keyframeprefix = '-' + pfx.toLowerCase() + '-';
-            animationstartevent = startEvents[i];
+            animationStartEvent = startEvents[i];
             animation = true;
             break;
           }
@@ -9451,9 +9683,9 @@ function createDetectElementResize(nonce) {
       }
     }
 
-    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) {
@@ -9486,8 +9718,8 @@ function createDetectElementResize(nonce) {
     } 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);
@@ -9506,13 +9738,13 @@ function createDetectElementResize(nonce) {
         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);
@@ -9527,7 +9759,7 @@ function createDetectElementResize(nonce) {
       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 {
@@ -9545,68 +9777,6 @@ function createDetectElementResize(nonce) {
   };
 }
 
-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);
 
@@ -9733,7 +9903,8 @@ var AutoSizer = function (_React$PureComponent) {
         {
           className: className,
           ref: this._setRef,
-          style: _extends({}, outerStyle, style) },
+          style: _extends({}, outerStyle, style)
+        },
         !bailoutOnChildren && children(childParams)
       );
     }
@@ -9928,7 +10099,8 @@ function ListBoxInline(_ref2) {
   }))), search ? /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(ListBoxSearch, {
-    model: model
+    model: model,
+    autoFocus: false
   })) : '', /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: true
@@ -10108,7 +10280,9 @@ function hcHandler(_ref) {
 
 function fieldType(f) {
   if ( // a string starting with '=' is just a convention we use
-  typeof f === 'string' && f[0] === '=' || _typeof$1(f) === 'object' && f.qDef && f.qDef.qDef || _typeof$1(f) === 'object' && f.qLibraryId && f.type === 'measure') {
+  typeof f === 'string' && f[0] === '=' || // based on NxMeasure and NxInlineMeasureDef
+  _typeof$1(f) === 'object' && f.qDef && f.qDef.qDef || // use 'type' instead of 'qType' since this is not a real property
+  _typeof$1(f) === 'object' && f.qLibraryId && f.type === 'measure') {
     return 'measure';
   }
 
@@ -10165,14 +10339,12 @@ function populateData(_ref) {
  * 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
@@ -10183,7 +10355,6 @@ function populateData(_ref) {
  */
 
 /**
- * @experimental
  * @since 1.1.0
  * @ignore
  * @param {number} nDataGroups
@@ -10957,7 +11128,6 @@ function importProperties(_ref) {
 
 /**
  * @interface hyperCubeConversion
- * @experimental
  * @since 1.1.0
  * @implements {ConversionType}
  */
@@ -11104,7 +11274,6 @@ var convertTo = /*#__PURE__*/function () {
 }();
 /**
  * @interface ConversionType
- * @experimental
  * @since 1.1.0
  * @property {importProperties} importProperties
  * @property {exportProperties} exportProperties
@@ -11113,7 +11282,6 @@ var convertTo = /*#__PURE__*/function () {
 /**
  * @interface
  * @alias Conversion
- * @experimental
  * @since 1.1.0
  * @description Provides conversion functionality to extensions.
  * @example
@@ -11135,7 +11303,6 @@ var convertTo = /*#__PURE__*/function () {
 var conversion = {
   /**
    * @type {hyperCubeConversion}
-   * @experimental
    * @since 1.1.0
    * @description Provides conversion functionality to extensions with hyperCubes.
    */
@@ -11469,6 +11636,26 @@ var ITEM_SPACING = 4;
 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$1(function (theme) {
   return {
     containerStyle: {
@@ -11484,7 +11671,8 @@ var Header = function Header(_ref) {
   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;
@@ -11530,13 +11718,15 @@ var Header = function Header(_ref) {
     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, {
     ref: containerRef,
@@ -11554,15 +11744,27 @@ var Header = function Header(_ref) {
     direction: "column"
   }, showTitle && /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
-    noWrap: true
+    noWrap: true,
+    className: CellTitle.className
   }, layout.title), showSubtitle && /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
-    noWrap: true
+    noWrap: true,
+    className: CellSubTitle.className
   }, layout.subtitle))), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, Toolbar));
 };
 
+/**
+ * @interface
+ * @extends HTMLElement
+ * @since 2.0.0
+ */
+
+var CellFooter = {
+  /** @type {'njs-cell-footer'} */
+  className: 'njs-cell-footer'
+};
 var useStyles = makeStyles$1(function (theme) {
   return {
     itemStyle: {
@@ -11585,10 +11787,103 @@ var Footer = function Footer(_ref) {
     className: itemStyle
   }, /*#__PURE__*/React.createElement(Typography, {
     noWrap: true,
-    variant: "body2"
+    variant: "body2",
+    className: CellFooter.className
   }, layout.footnote))) : null;
 };
 
+var RenderDebouncer = /*#__PURE__*/function () {
+  function RenderDebouncer() {
+    _classCallCheck(this, RenderDebouncer);
+
+    this.timer = null;
+    this.next = null;
+    this.running = false;
+  }
+
+  _createClass(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
@@ -11612,19 +11907,24 @@ var Supernova = function Supernova(_ref) {
   var _useContext = useContext(InstanceContext),
       themeName = _useContext.theme,
       language = _useContext.language,
-      constraints = _useContext.constraints;
-
-  var renderDebouncer = useRef(null);
+      constraints = _useContext.constraints,
+      keyboardNavigation = _useContext.keyboardNavigation;
 
-  var _useState = useState$1(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMounted = _useState2[0],
-      setIsMounted = _useState2[1];
+  var _useState = useState$1(function () {
+    return new RenderDebouncer();
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      renderDebouncer = _useState2[0];
 
-  var _useState3 = useState$1(0),
+  var _useState3 = useState$1(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      renderCnt = _useState4[0],
-      setRenderCnt = _useState4[1];
+      isMounted = _useState4[0],
+      setIsMounted = _useState4[1];
+
+  var _useState5 = useState$1(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      renderCnt = _useState6[0],
+      setRenderCnt = _useState6[1];
 
   var _useRect = useRect$1(),
       _useRect2 = _slicedToArray(_useRect, 3),
@@ -11632,10 +11932,10 @@ var Supernova = function Supernova(_ref) {
       containerRect = _useRect2[1],
       containerNode = _useRect2[2];
 
-  var _useState5 = useState$1(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      snNode = _useState6[0],
-      setSnNode = _useState6[1];
+  var _useState7 = useState$1(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      snNode = _useState8[0],
+      setSnNode = _useState8[1];
 
   var snRef = useCallback(function (ref) {
     if (!ref) {
@@ -11653,8 +11953,7 @@ var Supernova = function Supernova(_ref) {
     component.mounted(snNode);
     setIsMounted(true);
     return function () {
-      clearTimeout(renderDebouncer.current);
-      renderDebouncer.current = null;
+      renderDebouncer.stop();
       component.willUnmount();
     };
   }, [snNode, component]); // Render
@@ -11669,13 +11968,7 @@ var Supernova = function Supernova(_ref) {
       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) {
@@ -11694,7 +11987,7 @@ var Supernova = function Supernova(_ref) {
         permissions.push('fetch');
       }
 
-      Promise.resolve(component.render({
+      return Promise.resolve(component.render({
         layout: layout,
         options: options,
         plugins: plugins,
@@ -11703,7 +11996,8 @@ var Supernova = function Supernova(_ref) {
           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
@@ -11711,8 +12005,10 @@ var Supernova = function Supernova(_ref) {
           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);
@@ -11720,8 +12016,8 @@ var Supernova = function Supernova(_ref) {
 
         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,
@@ -11835,7 +12131,7 @@ var LoadingSn = function LoadingSn(_ref) {
       return clearTimeout(handle);
     };
   }, []);
-  return showLoading && /*#__PURE__*/React.createElement(Loading, null);
+  return showLoading ? /*#__PURE__*/React.createElement(Loading, null) : null;
 };
 
 var handleModal = function handleModal(_ref2) {
@@ -12076,12 +12372,12 @@ var getType = /*#__PURE__*/function () {
 
 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({
@@ -12096,7 +12392,8 @@ var loadType = /*#__PURE__*/function () {
               model: model,
               app: app,
               selections: selections,
-              nebbie: nebbie
+              nebbie: nebbie,
+              focusHandler: focusHandler
             });
             return _context3.abrupt("return", sn);
 
@@ -12132,14 +12429,16 @@ var Cell = forwardRef(function (_ref9, ref) {
       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 = useContext(InstanceContext),
       translator = _useContext.translator,
-      language = _useContext.language;
+      language = _useContext.language,
+      keyboardNavigation = _useContext.keyboardNavigation;
 
   var theme = useTheme$1();
 
@@ -12168,9 +12467,10 @@ var Cell = forwardRef(function (_ref9, ref) {
       appLayout = _useAppLayout2[0];
 
   var _useRect3 = useRect$1(),
-      _useRect4 = _slicedToArray(_useRect3, 2),
+      _useRect4 = _slicedToArray(_useRect3, 3),
       contentRef = _useRect4[0],
-      contentRect = _useRect4[1];
+      contentRect = _useRect4[1],
+      contentNode = _useRect4[2];
 
   var _useState3 = useState$1(initialSnOptions),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -12195,6 +12495,27 @@ var Cell = forwardRef(function (_ref9, ref) {
     enter: null,
     leave: null
   });
+  var focusHandler = useRef({
+    focusToolbarButton: function focusToolbarButton(last) {
+      // eslint-disable-next-line react/no-this-in-sfc
+      this.emit(last ? 'focus_toolbar_last' : 'focus_toolbar_first');
+    }
+  });
+  useEffect$1(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) {
@@ -12220,6 +12541,13 @@ var Cell = forwardRef(function (_ref9, ref) {
     }, 750);
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    // Enter or space
+    if (['Enter', ' ', 'Spacebar'].includes(e.key)) {
+      halo.root.toggleFocusOfCells(currentId);
+    }
+  };
+
   useEffect$1(function () {
     if (initialError || !appLayout || !layout) {
       return undefined;
@@ -12291,7 +12619,8 @@ var Cell = forwardRef(function (_ref9, ref) {
                   model: model,
                   app: app,
                   selections: selections,
-                  nebbie: nebbie
+                  nebbie: nebbie,
+                  focusHandler: focusHandler.current
                 });
 
               case 3:
@@ -12364,6 +12693,15 @@ var Cell = forwardRef(function (_ref9, ref) {
       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() {
@@ -12505,8 +12843,11 @@ var Cell = forwardRef(function (_ref9, ref) {
     layout: layout,
     sn: state.sn,
     anchorEl: cellNode,
-    hovering: hovering
+    hovering: hovering,
+    focusHandler: focusHandler.current
   }, "\xA0"), /*#__PURE__*/React.createElement(Grid, {
+    tabIndex: keyboardNavigation ? 0 : -1,
+    onKeyDown: keyboardNavigation ? handleKeyDown : null,
     item: true,
     xs: true,
     style: {
@@ -12532,10 +12873,12 @@ function glue(_ref) {
       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,
@@ -12548,7 +12891,9 @@ function glue(_ref) {
   };
 
   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];
 }
 
@@ -12800,7 +13145,6 @@ function viz() {
 
     /**
      * 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.
@@ -13710,6 +14054,7 @@ function initiate(component) {
   component.__hooks = {
     obsolete: false,
     error: false,
+    waitForData: false,
     chain: {
       promise: null,
       resolve: function resolve() {}
@@ -13725,6 +14070,9 @@ function initiate(component) {
     resizer: {
       setters: [],
       explicitResize: explicitResize
+    },
+    accessibility: {
+      setter: null
     }
   };
 }
@@ -13737,6 +14085,7 @@ function teardown(component) {
   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);
@@ -13840,7 +14189,7 @@ function maybeEndChain(hooks) {
   }
 
   hooks.chain.promise = null;
-  hooks.chain.resolve();
+  hooks.chain.resolve(!hooks.waitForData);
 }
 
 function runSnaps(component, layout) {
@@ -13932,6 +14281,8 @@ function hook(cb) {
     run: run,
     teardown: teardown,
     runSnaps: runSnaps,
+    focus: focus,
+    blur: blur,
     observeActions: observeActions,
     getImperativeHandle: getImperativeHandle,
     updateRectOnNextRun: updateRectOnNextRun
@@ -14446,6 +14797,7 @@ function useTheme() {
  * Gets the embed instance used.
  * @entry
  * @experimental
+ * @since 1.7.0
  * @returns {Embed} The embed instance used.
  * @example
  * import { useEmbed } from '@nebula.js/stardust';
@@ -14578,9 +14930,9 @@ function useAction(fn, deps) {
 }
 /**
  * @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.
  */
 
 /**
@@ -14739,6 +15091,183 @@ function onTakeSnapshot(cb) {
 
   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(_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,
@@ -14810,6 +15339,8 @@ function createWithHooks(generator, opts, galaxy) {
       // --- dynamic values ---
       layout: {},
       appLayout: {},
+      keyboardNavigation: opts.keyboardNavigation,
+      focusHandler: opts.focusHandler,
       constraints: forcedConstraints,
       options: {},
       plugins: []
@@ -14836,6 +15367,17 @@ function createWithHooks(generator, opts, galaxy) {
         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) {
@@ -14935,6 +15477,12 @@ function createWithHooks(generator, opts, galaxy) {
     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);
     },
@@ -15098,7 +15646,6 @@ var noop = function noop() {};
 /**
  * @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.
@@ -15112,7 +15659,6 @@ var noop = function noop() {};
 /**
  * @function exportProperties
  * @description Exports properties for a chart with a hypercube.
- * @experimental
  * @since 1.1.0
  * @param {Object} args
  * @param {Object} args.propertyTree
@@ -17134,6 +17680,7 @@ function create(_ref) {
 
 /**
  * @interface Context
+ * @property {boolean=} keyboardNavigation
  * @property {object=} constraints
  * @property {boolean=} constraints.active
  * @property {boolean=} constraints.passive
@@ -17151,7 +17698,8 @@ var DEFAULT_CONTEXT =
 
   /** @type {string=} */
   deviceType: 'auto',
-  constraints: {}
+  constraints: {},
+  keyboardNavigation: false
 };
 /**
  * @interface SnapshotConfiguration
@@ -17442,8 +17990,8 @@ function nuked() {
               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 = {};
                       }
@@ -17571,7 +18119,6 @@ function nuked() {
        * 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");
@@ -17597,7 +18144,6 @@ function nuked() {
                   /**
                    * @class
                    * @alias FieldInstance
-                   * @experimental
                    * @since 1.1.0
                    */
                   fieldSels = {
@@ -17613,7 +18159,6 @@ function nuked() {
                      * @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);
@@ -17641,7 +18186,6 @@ function nuked() {
 
                     /**
                      * Unmounts the field listbox from the DOM.
-                     * @experimental
                      * @since 1.1.0
                      * @example
                      * listbox.unmount();
@@ -17748,5 +18292,5 @@ var __DO_NOT_USE__ = {
   locale: locale
 };
 
-export { __DO_NOT_USE__, conversion, index as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useSelections, useStaleLayout, useState, useTheme, useTranslator };
+export { __DO_NOT_USE__, conversion, index as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
 //# sourceMappingURL=dev.js.map