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

package/dist/stardust.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.
 */
@@ -15399,7 +15399,7 @@
 	  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', ''));
 	});
@@ -15607,7 +15607,7 @@
 	  const appRef = React.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);
@@ -21956,6 +21956,8 @@
 	function getFieldKeyboardNavigation(_ref) {
 	  let {
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    confirm,
 	    cancel,
 	    setScrollPosition,
@@ -21975,7 +21977,8 @@
 	    const {
 	      keyCode,
 	      shiftKey = false,
-	      ctrlKey = false
+	      ctrlKey = false,
+	      metaKey = false
 	    } = event.nativeEvent;
 	    switch (keyCode) {
 	      case KEYS.SHIFT:
@@ -22030,6 +22033,18 @@
 	        }
 	        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.
@@ -22413,7 +22428,7 @@
 	    ["& .".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'
 	    }),
@@ -24716,6 +24731,8 @@
 	    histogram,
 	    isSingleSelect,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    selections,
 	    keyboard,
@@ -24773,7 +24790,9 @@
 	      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,
@@ -25441,8 +25460,9 @@
 	};
 
 	const useFrequencyMax = (app, layout) => {
-	  const [frequencyMax, setFrequencyMax] = reactExports.useState();
 	  const needFetch = needToFetchFrequencyMax(layout);
+	  const [frequencyMax, setFrequencyMax] = reactExports.useState();
+	  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = reactExports.useState(needFetch);
 	  reactExports.useEffect(() => {
 	    if (!needFetch) {
 	      return;
@@ -25450,10 +25470,14 @@
 	    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"];
@@ -25486,7 +25510,9 @@
 	    },
 	    currentScrollIndex = {
 	      set: () => {}
-	    }
+	    },
+	    renderedCallback,
+	    onCtrlF
 	  } = _ref;
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -25506,6 +25532,10 @@
 
 	  // 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,
@@ -25531,11 +25561,15 @@
 	  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 = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -25694,7 +25728,10 @@
 	      last
 	    }))
 	  });
-	  const frequencyMax = useFrequencyMax(app, layout);
+	  const selectAll = () => {
+	    selectionState.clearItemStates(false);
+	    model.selectListObjectAll('/qListObjectDef');
+	  };
 	  const {
 	    List,
 	    Grid
@@ -25710,6 +25747,8 @@
 	    showGray,
 	    interactionEvents,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    isVertical,
 	    pages,
@@ -26383,7 +26422,8 @@
 	    autoFocus = true,
 	    wildCardSearch = false,
 	    searchEnabled,
-	    direction
+	    direction,
+	    hide
 	  } = _ref3;
 	  const {
 	    translator
@@ -26469,6 +26509,16 @@
 	        e.preventDefault();
 	        e.stopPropagation();
 	        break;
+	      case 'f':
+	      case 'F':
+	        if (e.ctrlKey || e.metaKey) {
+	          if (hide) {
+	            hide();
+	          }
+	          e.preventDefault();
+	          e.stopPropagation();
+	        }
+	        break;
 	    }
 	    return response;
 	  };
@@ -26926,6 +26976,7 @@
 	  const open = show && Boolean(alignTo.current);
 	  const [listCount, setListCount] = reactExports.useState(0);
 	  const theme = useTheme$1();
+	  const searchContainerRef = reactExports.useRef();
 	  const [model] = useSessionModel({
 	    qInfo: {
 	      qType: 'njsListbox'
@@ -26987,6 +27038,10 @@
 	    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.createElement(Popover$1, {
 	    open: open,
@@ -27053,7 +27108,10 @@
 	    xs: true
 	  }, /*#__PURE__*/React.createElement("div", {
 	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(ListBoxSearch, {
+	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    ref: searchContainerRef
+	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    visible: true,
 	    model: model,
 	    listCount: listCount,
@@ -27063,14 +27121,15 @@
 	      enabled: false
 	    },
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-	  }), /*#__PURE__*/React.createElement(ListBox, {
+	  })), /*#__PURE__*/React.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
 	  }))));
 	}
 
@@ -28439,7 +28498,7 @@
 	    ["& .".concat(classes$4.listboxWrapper)]: {
 	      padding: containerPadding
 	    },
-	    '&:focus': {
+	    '&:focus:not(:hover)': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
 	    },
 	    '&:focus-visible': {
@@ -28481,7 +28540,8 @@
 	    postProcessPages = undefined,
 	    calculatePagesHeight,
 	    showGray = true,
-	    scrollState = undefined
+	    scrollState = undefined,
+	    renderedCallback
 	  } = options;
 	  let {
 	    toolbar = true
@@ -28621,6 +28681,14 @@
 	    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,
@@ -28763,10 +28831,10 @@
 	    visible: searchVisible,
 	    search: search,
 	    autoFocus: shouldAutoFocus,
-	    searchContainerRef: searchContainerRef,
 	    wildCardSearch: wildCardSearch,
 	    searchEnabled: searchEnabled,
-	    direction: direction
+	    direction: direction,
+	    hide: showSearchIcon && onShowSearch
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -28810,7 +28878,9 @@
 	      currentScrollIndex: {
 	        state: currentScrollIndex,
 	        set: setCurrentScrollIndex
-	      }
+	      },
+	      renderedCallback: renderedCallback,
+	      onCtrlF: onCtrlF
 	    });
 	  })))));
 	}
@@ -29090,7 +29160,8 @@
 	    qId,
 	    stateName,
 	    element,
-	    options
+	    options,
+	    renderedCallback
 	  } = _ref;
 	  const {
 	    isExistingObject,
@@ -29121,7 +29192,8 @@
 	  const opts = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,
-	    app
+	    app,
+	    renderedCallback
 	  }), [options, selections, model, app]);
 	  if (!selections || !model) {
 	    return null;
@@ -29137,7 +29209,8 @@
 	    fieldIdentifier,
 	    qId,
 	    stateName = '$',
-	    options = {}
+	    options = {},
+	    renderedCallback
 	  } = _ref2;
 	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(ListBoxWrapper, {
 	    app: app,
@@ -29145,7 +29218,8 @@
 	    fieldIdentifier: fieldIdentifier,
 	    qId: qId,
 	    stateName: stateName,
-	    options: options
+	    options: options,
+	    renderedCallback: renderedCallback
 	  }), element, uid());
 	}
 
@@ -36670,13 +36744,14 @@
 	           * @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"));
@@ -36686,18 +36761,21 @@
 	            }
 	            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.