@nebula.js/stardust 4.0.0-alpha.2 → 4.0.0-alpha.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.2
+* @nebula.js/stardust v4.0.0-alpha.3
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8043,7 +8043,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "9a45" ;
+const NEBULA_VERSION_HASH = "ee80" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8251,7 +8251,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.2" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9325,6 +9325,8 @@ const KEYS = Object.freeze({
 function getFieldKeyboardNavigation(_ref) {
   let {
     select,
+    selectAll,
+    onCtrlF,
     confirm,
     cancel,
     setScrollPosition,
@@ -9344,7 +9346,8 @@ function getFieldKeyboardNavigation(_ref) {
     const {
       keyCode,
       shiftKey = false,
-      ctrlKey = false
+      ctrlKey = false,
+      metaKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -9399,6 +9402,18 @@ function getFieldKeyboardNavigation(_ref) {
         }
         setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
         break;
+      case KEYS.A:
+        if (ctrlKey || metaKey) {
+          selectAll();
+          break;
+        }
+        return;
+      case KEYS.F:
+        if (ctrlKey || metaKey) {
+          onCtrlF();
+          break;
+        }
+        return;
       default:
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
@@ -9782,7 +9797,7 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
     }, ellipsis), {}, {
-      flex: "0 1 ".concat(frequencyWidth, "px"),
+      flex: "0 1 ".concat(frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth), "px"),
       textAlign: 'right',
       paddingLeft: '2px'
     }),
@@ -12085,6 +12100,8 @@ function getListBoxComponents(_ref) {
     histogram,
     isSingleSelect,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     selections,
     keyboard,
@@ -12142,7 +12159,9 @@ function getListBoxComponents(_ref) {
       select,
       confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
       cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections),
-      setScrollPosition
+      setScrollPosition,
+      selectAll,
+      onCtrlF
     },
     frequencyMax,
     histogram,
@@ -12956,8 +12975,9 @@ const getFrequencyMax = async (layout, app) => {
 };
 
 const useFrequencyMax = (app, layout) => {
-  const [frequencyMax, setFrequencyMax] = useState$1();
   const needFetch = needToFetchFrequencyMax(layout);
+  const [frequencyMax, setFrequencyMax] = useState$1();
+  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = useState$1(needFetch);
   useEffect$1(() => {
     if (!needFetch) {
       return;
@@ -12965,10 +12985,14 @@ const useFrequencyMax = (app, layout) => {
     const fetch = async () => {
       const newValue = await getFrequencyMax(layout, app);
       setFrequencyMax(newValue);
+      setAwaitingFrequencyMax(false);
     };
     fetch();
   }, [needFetch && layout]);
-  return needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax;
+  return {
+    frequencyMax: needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax,
+    awaitingFrequencyMax
+  };
 };
 
 const _excluded$4 = ["isLoadingData"];
@@ -13001,7 +13025,9 @@ function ListBox(_ref) {
     },
     currentScrollIndex = {
       set: () => {}
-    }
+    },
+    renderedCallback,
+    onCtrlF
   } = _ref;
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -13021,6 +13047,10 @@ function ListBox(_ref) {
 
   // The time from scroll end until new data is being fetched, may be exposed in API later on.
   const scrollTimeout = 0;
+  const {
+    frequencyMax,
+    awaitingFrequencyMax
+  } = useFrequencyMax(app, layout);
   const _useItemsLoader = useItemsLoader({
       local,
       loaderRef,
@@ -13046,11 +13076,15 @@ function ListBox(_ref) {
   if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages) {
     selectionState.update({
       setPages,
-      pages: itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages,
+      pages: itemsLoader.pages,
       isSingleSelect,
       selectDisabled,
       layout
     });
+    if (itemsLoader.pages.length && !awaitingFrequencyMax) {
+      // All necessary data fetching done - signal rendering done!
+      renderedCallback();
+    }
   }
   const isItemLoaded = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -13209,7 +13243,10 @@ function ListBox(_ref) {
       last
     }))
   });
-  const frequencyMax = useFrequencyMax(app, layout);
+  const selectAll = () => {
+    selectionState.clearItemStates(false);
+    model.selectListObjectAll('/qListObjectDef');
+  };
   const {
     List,
     Grid
@@ -13225,6 +13262,8 @@ function ListBox(_ref) {
     showGray,
     interactionEvents,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     isVertical,
     pages,
@@ -13898,7 +13937,8 @@ function ListBoxSearch(_ref3) {
     autoFocus = true,
     wildCardSearch = false,
     searchEnabled,
-    direction
+    direction,
+    hide
   } = _ref3;
   const {
     translator
@@ -13984,6 +14024,16 @@ function ListBoxSearch(_ref3) {
         e.preventDefault();
         e.stopPropagation();
         break;
+      case 'f':
+      case 'F':
+        if (e.ctrlKey || e.metaKey) {
+          if (hide) {
+            hide();
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        break;
     }
     return response;
   };
@@ -14441,6 +14491,7 @@ function ListBoxPopover(_ref) {
   const open = show && Boolean(alignTo.current);
   const [listCount, setListCount] = useState$1(0);
   const theme = useTheme$1();
+  const searchContainerRef = useRef();
   const [model] = useSessionModel({
     qInfo: {
       qType: 'njsListbox'
@@ -14502,6 +14553,10 @@ function ListBoxPopover(_ref) {
     translator,
     selectionState: selectionState$1
   });
+  const onCtrlF = () => {
+    const input = searchContainerRef.current.querySelector('input');
+    input === null || input === void 0 ? void 0 : input.focus();
+  };
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
     open: open,
@@ -14568,7 +14623,10 @@ function ListBoxPopover(_ref) {
     xs: true
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    ref: searchContainerRef
+  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     visible: true,
     model: model,
     listCount: listCount,
@@ -14578,14 +14636,15 @@ function ListBoxPopover(_ref) {
       enabled: false
     },
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-  }), /*#__PURE__*/React__default.createElement(ListBox, {
+  })), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
     app: app,
     layout: layout,
     selections: selections,
     selectionState: selectionState$1,
     direction: "ltr",
-    onSetListCount: c => setListCount(c)
+    onSetListCount: c => setListCount(c),
+    onCtrlF: onCtrlF
   }))));
 }
 
@@ -15954,7 +16013,7 @@ const StyledGrid$3 = styled$1(Grid, {
     ["& .".concat(classes$4.listboxWrapper)]: {
       padding: containerPadding
     },
-    '&:focus': {
+    '&:focus:not(:hover)': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
     },
     '&:focus-visible': {
@@ -15996,7 +16055,8 @@ function ListBoxInline(_ref3) {
     postProcessPages = undefined,
     calculatePagesHeight,
     showGray = true,
-    scrollState = undefined
+    scrollState = undefined,
+    renderedCallback
   } = options;
   let {
     toolbar = true
@@ -16136,6 +16196,14 @@ function ListBoxInline(_ref3) {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
+  const onCtrlF = () => {
+    if (search === 'toggle') {
+      onShowSearch();
+    } else {
+      const input = searchContainer.current.querySelector('input');
+      input === null || input === void 0 ? void 0 : input.focus();
+    }
+  };
   const getActionToolbarProps = isPopover => getListboxActionProps({
     isPopover,
     showToolbar,
@@ -16278,10 +16346,10 @@ function ListBoxInline(_ref3) {
     visible: searchVisible,
     search: search,
     autoFocus: shouldAutoFocus,
-    searchContainerRef: searchContainerRef,
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
-    direction: direction
+    direction: direction,
+    hide: showSearchIcon && onShowSearch
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -16325,7 +16393,9 @@ function ListBoxInline(_ref3) {
       currentScrollIndex: {
         state: currentScrollIndex,
         set: setCurrentScrollIndex
-      }
+      },
+      renderedCallback: renderedCallback,
+      onCtrlF: onCtrlF
     });
   })))));
 }
@@ -16605,7 +16675,8 @@ function ListBoxWrapper(_ref) {
     qId,
     stateName,
     element,
-    options
+    options,
+    renderedCallback
   } = _ref;
   const {
     isExistingObject,
@@ -16636,7 +16707,8 @@ function ListBoxWrapper(_ref) {
   const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
-    app
+    app,
+    renderedCallback
   }), [options, selections, model, app]);
   if (!selections || !model) {
     return null;
@@ -16652,7 +16724,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier,
     qId,
     stateName = '$',
-    options = {}
+    options = {},
+    renderedCallback
   } = _ref2;
   return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(ListBoxWrapper, {
     app: app,
@@ -16660,7 +16733,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier: fieldIdentifier,
     qId: qId,
     stateName: stateName,
-    options: options
+    options: options,
+    renderedCallback: renderedCallback
   }), element, uid());
 }
 
@@ -24185,13 +24259,14 @@ function nuked() {
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
            * @param {string=} [options.stateName="$"] Sets the state to make selections in (not applicable for existing objects)
            * @param {object=} [options.properties={}] Properties object to extend default properties with
+           * @returns {Promise<void>} A promise that resolves when the data is fetched.
            *
            * @since 1.1.0
            * @instance
            * @example
            * fieldInstance.mount(element);
            */
-          mount(element) {
+          async mount(element) {
             let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
             if (!element) {
               throw new Error("Element for ".concat(fieldName || qId, " not provided"));
@@ -24201,18 +24276,21 @@ function nuked() {
             }
             const onSelectionActivated = () => fieldSels.emit('selectionActivated');
             const onSelectionDeactivated = () => fieldSels.emit('selectionDeactivated');
-            this._instance = ListBoxPortal({
-              element,
-              app,
-              fieldIdentifier,
-              qId,
-              options: getOptions$1(_objectSpread2({
-                onSelectionActivated,
-                onSelectionDeactivated
-              }, options)),
-              stateName: options.stateName || '$'
+            return new Promise(resolve => {
+              this._instance = ListBoxPortal({
+                element,
+                app,
+                fieldIdentifier,
+                qId,
+                options: getOptions$1(_objectSpread2({
+                  onSelectionActivated,
+                  onSelectionDeactivated
+                }, options)),
+                stateName: options.stateName || '$',
+                renderedCallback: resolve
+              });
+              root.add(this._instance);
             });
-            root.add(this._instance);
           },
           /**
            * Unmounts the field listbox from the DOM.