@nebula.js/stardust 3.0.0-alpha0 → 3.0.0-alpha11

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.0-alpha0
+* @nebula.js/stardust v3.0.0-alpha11
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -16197,7 +16197,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "30d9" ;
+	const NEBULA_VERSION_HASH = "f812" ;
 	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-alpha0" );
+	  element.setAttribute('data-nebulajs-version', "3.0.0-alpha11" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -31322,8 +31322,7 @@
 	    disableRipple: true,
 	    size: dense ? 'small' : 'medium',
 	    sx: dense && {
-	      padding: '0px',
-	      paddingLeft: '6px'
+	      padding: '0px 0px 0px 12px'
 	    }
 	  });
 	}
@@ -31646,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"),
@@ -31672,7 +31672,8 @@
 	      borderColor: '#BFE5D0'
 	    },
 	    ["& .".concat(classes$a.excludedTextWithCheckbox)]: {
-	      color: '#828282'
+	      color: '#828282',
+	      fontStyle: 'italic'
 	    }
 	  };
 	});
@@ -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',
@@ -32060,13 +32061,22 @@
 	    setIsLoadingData(true);
 	    return new Promise(resolve => {
 	      local.current.timeout = setTimeout(() => {
-	        const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
-	        const reqPromise = model.getListObjectData('/qListObjectDef', sorted.map(s => ({
-	          qTop: s.start,
-	          qHeight: s.stop - s.start + 1,
+	        const lastItemInQueue = local.current.queue.slice(-1)[0];
+	        const reqPromise = model.getListObjectData('/qListObjectDef', // we need to ask for two payloads
+	        // 2nd one is our starting index + MINIMUM_BATCH_SIZE items
+	        // 1st one is 2nd ones starting index - MINIMUM_BATCH_SIZE items
+	        // we do this because we don't want to miss any items between fast scrolls
+	        [{
+	          qTop: lastItemInQueue.start > MINIMUM_BATCH_SIZE ? lastItemInQueue.start - MINIMUM_BATCH_SIZE : 0,
+	          qHeight: MINIMUM_BATCH_SIZE,
+	          qLeft: 0,
+	          qWidth: 1
+	        }, {
+	          qTop: lastItemInQueue.start,
+	          qHeight: MINIMUM_BATCH_SIZE,
 	          qLeft: 0,
 	          qWidth: 1
-	        }))).then(p => {
+	        }]).then(p => {
 	          const processedPages = postProcessPages ? postProcessPages(p) : p;
 	          local.current.validPages = true;
 	          listData.current.pages = processedPages;
@@ -32105,7 +32115,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 +32137,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
@@ -32154,7 +32169,7 @@
 	  } = layout;
 	  return /*#__PURE__*/React.createElement(StyledInfiniteLoader, {
 	    isItemLoaded: isItemLoaded,
-	    itemCount: count,
+	    itemCount: listCount,
 	    loadMoreItems: loadMoreItems,
 	    threshold: 0,
 	    minimumBatchSize: MINIMUM_BATCH_SIZE,
@@ -32791,32 +32806,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 +33252,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,
@@ -33410,15 +33451,14 @@
 
 	const PREFIX$6 = 'MultiState';
 	const classes$6 = {
-	  item: "".concat(PREFIX$6, "-item"),
-	  badge: "".concat(PREFIX$6, "-badge")
+	  item: "".concat(PREFIX$6, "-item")
 	};
-	const StyledListBoxPopover = styled(ListBoxPopover)(_ref => {
+	const StyledGrid$5 = styled(Grid)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
 	  return {
-	    ["& .".concat(classes$6.item)]: {
+	    ["&.".concat(classes$6.item)]: {
 	      backgroundColor: theme.palette.background.paper,
 	      position: 'relative',
 	      cursor: 'pointer',
@@ -33428,9 +33468,6 @@
 	      },
 	      height: '100%',
 	      alignItems: 'center'
-	    },
-	    ["& .".concat(classes$6.badge)]: {
-	      padding: theme.spacing(0, 1)
 	    }
 	  };
 	});
@@ -33489,7 +33526,9 @@
 	      xs: true,
 	      zeroMinWidth: true
 	    }, /*#__PURE__*/React.createElement(Badge, {
-	      className: classes$6.badge,
+	      style: {
+	        padding: '0px 8px'
+	      },
 	      color: "secondary",
 	      badgeContent: field.states.length
 	    }, /*#__PURE__*/React.createElement(Typography, {
@@ -33559,12 +33598,12 @@
 	      }
 	    }
 	  }, Fields);
-	  const Component = moreAlignTo ? PopoverFields : /*#__PURE__*/React.createElement(Grid, {
+	  const Component = moreAlignTo ? PopoverFields : /*#__PURE__*/React.createElement(StyledGrid$5, {
 	    container: true,
 	    gap: 0,
 	    className: classes$6.item,
 	    onClick: handleShowFields
-	  }, Header, showFields && PopoverFields, showStateIx > -1 && /*#__PURE__*/React.createElement(StyledListBoxPopover, {
+	  }, Header, showFields && PopoverFields, showStateIx > -1 && /*#__PURE__*/React.createElement(ListBoxPopover, {
 	    alignTo: alignTo,
 	    show: showStateIx > -1,
 	    close: handleCloseShowState,
@@ -33572,7 +33611,7 @@
 	    fieldName: field.selections[showStateIx].qField,
 	    stateName: field.states[showStateIx]
 	  }));
-	  return moreAlignTo && showStateIx > -1 ? /*#__PURE__*/React.createElement(StyledListBoxPopover, {
+	  return moreAlignTo && showStateIx > -1 ? /*#__PURE__*/React.createElement(ListBoxPopover, {
 	    alignTo: alignTo,
 	    show: showStateIx > -1,
 	    close: handleCloseShowState,
@@ -34469,7 +34508,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);
@@ -34481,6 +34520,8 @@
 	  };
 
 	  react.exports.useEffect(() => {
+	    if (!shouldConfirmOnBlur) return undefined;
+
 	    const handleEvent = event => {
 	      const interactInside = ref.current && ref.current.contains(event.target);
 	      const isConfirmed = isConfirmedRef.current;
@@ -34499,7 +34540,7 @@
 	      document.removeEventListener('mousedown', handleEvent);
 	      document.removeEventListener('keydown', handleEvent);
 	    };
-	  }, [ref, selections]);
+	  }, [ref, selections, shouldConfirmOnBlur]);
 	}
 
 	const PREFIX$4 = 'ListBoxInline';
@@ -34541,7 +34582,8 @@
 	    showGray = true,
 	    sortByState = 1,
 	    scrollState = undefined,
-	    setCount = undefined
+	    setCount = undefined,
+	    shouldConfirmOnBlur = undefined
 	  } = options;
 	  let {
 	    frequencyMode,
@@ -34696,7 +34738,7 @@
 	    }
 	  }, [selections]);
 	  const listBoxRef = react.exports.useRef(null);
-	  useConfirmUnfocus(listBoxRef, selections);
+	  useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
 	  react.exports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -34722,7 +34764,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;
@@ -34797,13 +34841,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
@@ -37215,7 +37260,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) {
@@ -42002,6 +42047,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.
 	 */
 
 	/**
@@ -42427,7 +42473,7 @@
 	var enigmaMocker_dev = {exports: {}};
 
 	/*
-	* @nebula.js/enigma-mocker v2.11.0
+	* @nebula.js/enigma-mocker v3.0.0-alpha10
 	* Copyright (c) 2022 QlikTech International AB
 	* Released under the MIT license.
 	*/