@nebula.js/stardust 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/qlik-oss/nebula.js/compare/v2.1.0...v2.2.0) (2021-11-17)
+
+**Note:** Version bump only for package @nebula.js/stardust
+
 # [2.1.0](https://github.com/qlik-oss/nebula.js/compare/v2.0.0...v2.1.0) (2021-10-20)
 
 ### Features

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.1.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 = "5337" ;
+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', "2.1.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, {
@@ -7634,6 +7634,9 @@ 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,
     className: ActionElement.className
@@ -7680,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;
@@ -7704,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
   }, {
@@ -7716,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
   }];
@@ -7924,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),
@@ -7954,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);
@@ -7968,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;
@@ -8000,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"
@@ -10222,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';
   }
 
@@ -11611,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;
@@ -11657,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,
@@ -12068,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) {
@@ -12309,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, blurCallback, 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, blurCallback = _ref7.blurCallback, 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({
@@ -12330,7 +12393,7 @@ var loadType = /*#__PURE__*/function () {
               app: app,
               selections: selections,
               nebbie: nebbie,
-              blurCallback: blurCallback
+              focusHandler: focusHandler
             });
             return _context3.abrupt("return", sn);
 
@@ -12404,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),
@@ -12431,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) {
@@ -12463,14 +12548,6 @@ var Cell = forwardRef(function (_ref9, ref) {
     }
   };
 
-  var relinquishFocus = function relinquishFocus(resetFocus) {
-    halo.root.toggleFocusOfCells();
-
-    if (resetFocus && cellNode) {
-      cellNode.focus();
-    }
-  };
-
   useEffect$1(function () {
     if (initialError || !appLayout || !layout) {
       return undefined;
@@ -12543,7 +12620,7 @@ var Cell = forwardRef(function (_ref9, ref) {
                   app: app,
                   selections: selections,
                   nebbie: nebbie,
-                  blurCallback: relinquishFocus
+                  focusHandler: focusHandler.current
                 });
 
               case 3:
@@ -12744,14 +12821,12 @@ var Cell = forwardRef(function (_ref9, ref) {
       height: '100%',
       overflow: 'hidden'
     },
-    tabIndex: keyboardNavigation ? 0 : -1,
     elevation: 0,
     square: true,
     className: CellElement.className,
     ref: cellRef,
     onMouseEnter: handleOnMouseEnter,
-    onMouseLeave: handleOnMouseLeave,
-    onKeyDown: keyboardNavigation ? handleKeyDown : null
+    onMouseLeave: handleOnMouseLeave
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "column",
@@ -12768,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: {
@@ -15054,6 +15132,7 @@ function useRenderState() {
  * @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
  */
 
 /**
@@ -15087,7 +15166,7 @@ function useRenderState() {
 
 function useKeyboard() {
   var keyboardNavigation = useInternalContext('keyboardNavigation');
-  var blurCallback = useInternalContext('blurCallback');
+  var focusHandler = useInternalContext('focusHandler');
 
   if (!currentComponent.__hooks.accessibility.exitFunction) {
     var exitFunction = function (resetFocus) {
@@ -15095,7 +15174,7 @@ function useKeyboard() {
 
       if (acc.enabled && acc.active) {
         blur(this);
-        blurCallback && blurCallback(resetFocus);
+        focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(resetFocus);
       }
     }.bind(currentComponent);
 
@@ -15105,22 +15184,34 @@ function useKeyboard() {
       var acc = this.__hooks.accessibility;
 
       if (acc.enabled && !acc.active) {
-        blurCallback && blurCallback(false);
+        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
+    focus: focusFunc,
+    focusSelection: focusSelectionFunc
   }),
       _useState10 = _slicedToArray(_useState9, 2),
       acc = _useState10[0],
@@ -15133,7 +15224,8 @@ function useKeyboard() {
       active: false,
       enabled: keyboardNavigation,
       blur: exitFunc,
-      focus: focusFunc
+      focus: focusFunc,
+      focusSelection: focusSelectionFunc
     });
   }, [keyboardNavigation]);
   return acc;
@@ -15152,7 +15244,8 @@ function focus(component) {
       active: true,
       enabled: acc.enabled,
       blur: acc.exitFunction,
-      focus: acc.focusFunction
+      focus: acc.focusFunction,
+      focusSelection: acc.focusSelectionFunction
     });
   }
 }
@@ -15170,7 +15263,8 @@ function blur(component) {
       active: false,
       enabled: acc.enabled,
       blur: acc.exitFunction,
-      focus: acc.focusFunction
+      focus: acc.focusFunction,
+      focusSelection: acc.focusSelectionFunction
     });
   }
 }
@@ -15246,7 +15340,7 @@ function createWithHooks(generator, opts, galaxy) {
       layout: {},
       appLayout: {},
       keyboardNavigation: opts.keyboardNavigation,
-      blurCallback: opts.blurCallback,
+      focusHandler: opts.focusHandler,
       constraints: forcedConstraints,
       options: {},
       plugins: []
@@ -15281,9 +15375,9 @@ function createWithHooks(generator, opts, galaxy) {
           changed = true;
         }
 
-        if (r.context && r.context.blurCallback) {
+        if (r.context && r.context.focusHandler) {
           // Needs to be added here due to how the client renders
-          this.context.blurCallback = r.context.blurCallback;
+          this.context.focusHandler = r.context.focusHandler;
         }
 
         if (r.options) {