@nebula.js/stardust 2.1.0 → 2.2.0

package/dist/stardust.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.
 */
@@ -11479,7 +11479,7 @@
     return [appSelections, navState];
   }
 
-  var NEBULA_VERSION_HASH = "5337" ;
+  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', "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, {
@@ -19536,6 +19536,9 @@
       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
@@ -19582,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;
@@ -19606,8 +19611,13 @@
         return api.canCancel();
       },
       action: function action() {
+        onCancel();
         api.cancel();
+      },
+      keyboardAction: function keyboardAction(e) {
+        onKeyDeactivate(e);
         onCancel();
+        api.cancel();
       },
       getSvgIconShape: close
     }, {
@@ -19618,8 +19628,13 @@
         return api.canConfirm();
       },
       action: function action() {
+        onConfirm();
         api.confirm();
+      },
+      keyboardAction: function keyboardAction(e) {
+        onKeyDeactivate(e);
         onConfirm();
+        api.confirm();
       },
       getSvgIconShape: tick
     }];
@@ -19826,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),
@@ -19856,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);
@@ -19870,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;
@@ -19902,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"
@@ -22124,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';
     }
 
@@ -23513,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;
@@ -23559,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,
@@ -23970,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) {
@@ -24211,12 +24274,12 @@
 
   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({
@@ -24232,7 +24295,7 @@
                 app: app,
                 selections: selections,
                 nebbie: nebbie,
-                blurCallback: blurCallback
+                focusHandler: focusHandler
               });
               return _context3.abrupt("return", sn);
 
@@ -24306,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),
@@ -24333,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) {
@@ -24365,14 +24450,6 @@
       }
     };
 
-    var relinquishFocus = function relinquishFocus(resetFocus) {
-      halo.root.toggleFocusOfCells();
-
-      if (resetFocus && cellNode) {
-        cellNode.focus();
-      }
-    };
-
     react.exports.useEffect(function () {
       if (initialError || !appLayout || !layout) {
         return undefined;
@@ -24445,7 +24522,7 @@
                     app: app,
                     selections: selections,
                     nebbie: nebbie,
-                    blurCallback: relinquishFocus
+                    focusHandler: focusHandler.current
                   });
 
                 case 3:
@@ -24646,14 +24723,12 @@
         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$1, {
       container: true,
       direction: "column",
@@ -24670,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: {
@@ -26956,6 +27034,7 @@
    * @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
    */
 
   /**
@@ -26989,7 +27068,7 @@
 
   function useKeyboard() {
     var keyboardNavigation = useInternalContext('keyboardNavigation');
-    var blurCallback = useInternalContext('blurCallback');
+    var focusHandler = useInternalContext('focusHandler');
 
     if (!currentComponent.__hooks.accessibility.exitFunction) {
       var exitFunction = function (resetFocus) {
@@ -26997,7 +27076,7 @@
 
         if (acc.enabled && acc.active) {
           blur(this);
-          blurCallback && blurCallback(resetFocus);
+          focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(resetFocus);
         }
       }.bind(currentComponent);
 
@@ -27007,22 +27086,34 @@
         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$2(_useState9, 2),
         acc = _useState10[0],
@@ -27035,7 +27126,8 @@
         active: false,
         enabled: keyboardNavigation,
         blur: exitFunc,
-        focus: focusFunc
+        focus: focusFunc,
+        focusSelection: focusSelectionFunc
       });
     }, [keyboardNavigation]);
     return acc;
@@ -27054,7 +27146,8 @@
         active: true,
         enabled: acc.enabled,
         blur: acc.exitFunction,
-        focus: acc.focusFunction
+        focus: acc.focusFunction,
+        focusSelection: acc.focusSelectionFunction
       });
     }
   }
@@ -27072,7 +27165,8 @@
         active: false,
         enabled: acc.enabled,
         blur: acc.exitFunction,
-        focus: acc.focusFunction
+        focus: acc.focusFunction,
+        focusSelection: acc.focusSelectionFunction
       });
     }
   }
@@ -27148,7 +27242,7 @@
         layout: {},
         appLayout: {},
         keyboardNavigation: opts.keyboardNavigation,
-        blurCallback: opts.blurCallback,
+        focusHandler: opts.focusHandler,
         constraints: forcedConstraints,
         options: {},
         plugins: []
@@ -27183,9 +27277,9 @@
             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) {