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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.0-alpha0
+* @nebula.js/stardust v3.0.0-alpha3
 * 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 = "2bc2" ;
 	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-alpha3" );
 	  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',
@@ -32807,8 +32808,9 @@
 	  const onKeyDown = e => {
 	    switch (e.key) {
 	      case 'Enter':
-	        model.acceptListObjectSearch(TREE_PATH, true);
-	        setValue('');
+	        // This is disabled to "solve" QB-10955 with the lowest risk
+	        // await model.acceptListObjectSearch(TREE_PATH, true);
+	        // setValue('');
 	        break;
 
 	      case 'Escape':
@@ -33410,15 +33412,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 +33429,6 @@
 	      },
 	      height: '100%',
 	      alignItems: 'center'
-	    },
-	    ["& .".concat(classes$6.badge)]: {
-	      padding: theme.spacing(0, 1)
 	    }
 	  };
 	});
@@ -33489,7 +33487,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 +33559,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 +33572,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 +34469,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 +34481,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 +34501,7 @@
 	      document.removeEventListener('mousedown', handleEvent);
 	      document.removeEventListener('keydown', handleEvent);
 	    };
-	  }, [ref, selections]);
+	  }, [ref, selections, shouldConfirmOnBlur]);
 	}
 
 	const PREFIX$4 = 'ListBoxInline';
@@ -34541,7 +34543,8 @@
 	    showGray = true,
 	    sortByState = 1,
 	    scrollState = undefined,
-	    setCount = undefined
+	    setCount = undefined,
+	    shouldConfirmOnBlur = undefined
 	  } = options;
 	  let {
 	    frequencyMode,
@@ -34696,7 +34699,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 +34725,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;
@@ -37215,7 +37220,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 +42007,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 +42433,7 @@
 	var enigmaMocker_dev = {exports: {}};
 
 	/*
-	* @nebula.js/enigma-mocker v2.11.0
+	* @nebula.js/enigma-mocker v3.0.0-alpha2
 	* Copyright (c) 2022 QlikTech International AB
 	* Released under the MIT license.
 	*/