@nebula.js/stardust 3.0.0-alpha1 → 3.0.0-alpha10

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.0-alpha1
+* @nebula.js/stardust v3.0.0-alpha10
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -16197,7 +16197,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "4ced" ;
+	const NEBULA_VERSION_HASH = "d97f" ;
 	ClassNameGenerator.configure(componentName => {
 
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -16770,7 +16770,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "3.0.0-alpha1" );
+	  element.setAttribute('data-nebulajs-version', "3.0.0-alpha10" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -31645,7 +31645,8 @@
 	      paddingRight: '8px'
 	    },
 	    ["&.".concat(classes$a.barContainer)]: {
-	      position: 'relative'
+	      height: '100%',
+	      display: 'inline-block'
 	    },
 	    ["& .".concat(classes$a.bar)]: {
 	      border: "".concat(barBorderWidthPx, "px solid"),
@@ -31681,8 +31682,7 @@
 	  let {
 	    index,
 	    style,
-	    data,
-	    column = false
+	    data
 	  } = _ref3;
 	  const {
 	    onClick,
@@ -31691,6 +31691,7 @@
 	    onMouseEnter,
 	    pages,
 	    isLocked,
+	    column = false,
 	    checkboxes = false,
 	    dense = false,
 	    frequencyMode = 'N',
@@ -32105,7 +32106,7 @@
 	    if (typeof setCount === 'function' && layout) {
 	      setCount(layout.qListObject.qSize.qcy);
 	    }
-	  }, [layout]);
+	  }, [layout, layout && layout.qListObject.qSize.qcy]);
 	  react.exports.useEffect(() => {
 	    if (!instantPages || isLoadingData) {
 	      return;
@@ -32127,7 +32128,12 @@
 	  }
 
 	  const isVertical = listLayout !== 'horizontal';
-	  const count = layout.qListObject.qSize.qcy;
+	  let count = layout.qListObject.qSize.qcy; // Should not allow a count of zero since it will stop executing loadMoreItems
+	  // this could happen if a seach returns an empty result
+
+	  if (count === 0) {
+	    count = 1;
+	  }
 
 	  const getCalculatedHeight = ps => {
 	    // If values have been filtered in the currently loaded page, we want to
@@ -32791,32 +32797,57 @@
 	  let {
 	    model,
 	    keyboard,
-	    dense = false
+	    dense = false,
+	    visible = true
 	  } = _ref;
 	  const {
 	    translator
 	  } = react.exports.useContext(InstanceContext);
 	  const [value, setValue] = react.exports.useState('');
+	  const [isSearching, setIsSearching] = react.exports.useState(false);
 	  const theme = useTheme$1();
 
+	  const abortSearch = async () => {
+	    await model.abortListObjectSearch(TREE_PATH);
+	    setIsSearching(false);
+	  };
+
+	  react.exports.useEffect(() => {
+	    if (!visible && isSearching) {
+	      abortSearch();
+	    }
+	  }, [visible]);
+
 	  const onChange = e => {
 	    setValue(e.target.value);
-	    model.searchListObjectFor(TREE_PATH, e.target.value);
+
+	    if (e.target.value.length === 0) {
+	      abortSearch();
+	    } else {
+	      model.searchListObjectFor(TREE_PATH, e.target.value);
+	      setIsSearching(true);
+	    }
 	  };
 
 	  const onKeyDown = e => {
 	    switch (e.key) {
 	      case 'Enter':
+	        // Maybe we only want to accept if isSearching is true
 	        model.acceptListObjectSearch(TREE_PATH, true);
 	        setValue('');
 	        break;
 
 	      case 'Escape':
-	        model.abortListObjectSearch(TREE_PATH);
+	        abortSearch();
+	        setValue('');
 	        break;
 	    }
 	  };
 
+	  if (!visible) {
+	    return null;
+	  }
+
 	  return /*#__PURE__*/React.createElement(OutlinedInput, {
 	    startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
 	      position: "start"
@@ -33212,7 +33243,8 @@
 	  }, /*#__PURE__*/React.createElement("div", {
 	    ref: moreAlignTo
 	  }), /*#__PURE__*/React.createElement(ListBoxSearch, {
-	    model: model
+	    model: model,
+	    visible: true
 	  }), /*#__PURE__*/React.createElement(ListBox, {
 	    model: model,
 	    selections: selections,
@@ -34467,7 +34499,7 @@
 	 * user interact outside of passed element ref.
 	 */
 
-	function useConfirmUnfocus(ref, selections) {
+	function useConfirmUnfocus(ref, selections, shouldConfirmOnBlur) {
 	  const [_isConfirmed, _setIsConfirmed] = react.exports.useState(false); // Wrap state in ref to use inside eventListener callback
 
 	  const isConfirmedRef = react.exports.useRef(_isConfirmed);
@@ -34479,6 +34511,8 @@
 	  };
 
 	  react.exports.useEffect(() => {
+	    if (!shouldConfirmOnBlur) return undefined;
+
 	    const handleEvent = event => {
 	      const interactInside = ref.current && ref.current.contains(event.target);
 	      const isConfirmed = isConfirmedRef.current;
@@ -34497,7 +34531,7 @@
 	      document.removeEventListener('mousedown', handleEvent);
 	      document.removeEventListener('keydown', handleEvent);
 	    };
-	  }, [ref, selections]);
+	  }, [ref, selections, shouldConfirmOnBlur]);
 	}
 
 	const PREFIX$4 = 'ListBoxInline';
@@ -34539,7 +34573,8 @@
 	    showGray = true,
 	    sortByState = 1,
 	    scrollState = undefined,
-	    setCount = undefined
+	    setCount = undefined,
+	    shouldConfirmOnBlur = undefined
 	  } = options;
 	  let {
 	    frequencyMode,
@@ -34694,7 +34729,7 @@
 	    }
 	  }, [selections]);
 	  const listBoxRef = react.exports.useRef(null);
-	  useConfirmUnfocus(listBoxRef, selections);
+	  useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
 	  react.exports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -34720,7 +34755,9 @@
 	  const counts = layout.qListObject.qDimensionInfo.qStateCounts;
 	  const hasSelections = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded > 0;
 	  const searchVisible = (search === true || search === 'toggle' && showSearch) && !selectDisabled();
-	  const minHeight = 49 + (searchVisible ? 40 : 0) + 49;
+	  const searchHeight = dense ? 27 : 40;
+	  const extraheight = dense ? 39 : 49;
+	  const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
 
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
@@ -34795,13 +34832,14 @@
 	      onConfirm: () => {},
 	      onCancel: () => {}
 	    }
-	  }))), searchVisible && /*#__PURE__*/React.createElement(Grid, {
+	  }))), /*#__PURE__*/React.createElement(Grid, {
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    model: model,
 	    dense: dense,
-	    keyboard: keyboard
+	    keyboard: keyboard,
+	    visible: searchVisible
 	  })), /*#__PURE__*/React.createElement(Grid, {
 	    item: true,
 	    xs: true
@@ -37213,7 +37251,7 @@
 
 	    load(layout.visualization, withVersion);
 	    return () => {};
-	  }, [types, state.sn, model, layout, appLayout, language]); // Long running query
+	  }, [types, state.sn, model, selections, layout, appLayout, language]); // Long running query
 
 	  react.exports.useEffect(() => {
 	    if (!validating) {
@@ -42000,6 +42038,7 @@
 	 * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
 	 * @property {number=} [options.sortByState=1] Sort by state, detault 1 = sort descending, 0 = no sorting, -1 sort ascending.
 	 * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
+	 * @property {boolean} [options.shouldConfirmOnBlur=] A boolean that determines if the listbox should actively confirm selections on blur events.
 	 */
 
 	/**
@@ -42425,7 +42464,7 @@
 	var enigmaMocker_dev = {exports: {}};
 
 	/*
-	* @nebula.js/enigma-mocker v3.0.0-alpha0
+	* @nebula.js/enigma-mocker v3.0.0-alpha5
 	* Copyright (c) 2022 QlikTech International AB
 	* Released under the MIT license.
 	*/