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

package/core/esm/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.
 */
@@ -11424,7 +11424,7 @@ function create$3(definition) {
   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', ''));
@@ -11997,7 +11997,7 @@ function boot(_ref2) {
   const appRef = React__default.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__default.createElement(NebulaApp, {
@@ -13628,8 +13628,7 @@ function ListBoxRadioButton(_ref) {
     disableRipple: true,
     size: dense ? 'small' : 'medium',
     sx: dense && {
-      padding: '0px',
-      paddingLeft: '6px'
+      padding: '0px 0px 0px 12px'
     }
   });
 }
@@ -13952,7 +13951,8 @@ const Root$1 = styled('div')(_ref2 => {
       paddingRight: '8px'
     },
     ["&.".concat(classes$a.barContainer)]: {
-      position: 'relative'
+      height: '100%',
+      display: 'inline-block'
     },
     ["& .".concat(classes$a.bar)]: {
       border: "".concat(barBorderWidthPx, "px solid"),
@@ -13978,7 +13978,8 @@ const Root$1 = styled('div')(_ref2 => {
       borderColor: '#BFE5D0'
     },
     ["& .".concat(classes$a.excludedTextWithCheckbox)]: {
-      color: '#828282'
+      color: '#828282',
+      fontStyle: 'italic'
     }
   };
 });
@@ -13987,8 +13988,7 @@ function RowColumn(_ref3) {
   let {
     index,
     style,
-    data,
-    column = false
+    data
   } = _ref3;
   const {
     onClick,
@@ -13997,6 +13997,7 @@ function RowColumn(_ref3) {
     onMouseEnter,
     pages,
     isLocked,
+    column = false,
     checkboxes = false,
     dense = false,
     frequencyMode = 'N',
@@ -15113,8 +15114,9 @@ function ListBoxSearch(_ref) {
   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':
@@ -15716,15 +15718,14 @@ var DownArrow = (props => SvgIcon(downArrow(props)));
 
 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',
@@ -15734,9 +15735,6 @@ const StyledListBoxPopover = styled(ListBoxPopover)(_ref => {
       },
       height: '100%',
       alignItems: 'center'
-    },
-    ["& .".concat(classes$6.badge)]: {
-      padding: theme.spacing(0, 1)
     }
   };
 });
@@ -15795,7 +15793,9 @@ function MultiState(_ref2) {
       xs: true,
       zeroMinWidth: true
     }, /*#__PURE__*/React__default.createElement(Badge, {
-      className: classes$6.badge,
+      style: {
+        padding: '0px 8px'
+      },
       color: "secondary",
       badgeContent: field.states.length
     }, /*#__PURE__*/React__default.createElement(Typography, {
@@ -15865,12 +15865,12 @@ function MultiState(_ref2) {
       }
     }
   }, Fields);
-  const Component = moreAlignTo ? PopoverFields : /*#__PURE__*/React__default.createElement(Grid, {
+  const Component = moreAlignTo ? PopoverFields : /*#__PURE__*/React__default.createElement(StyledGrid$5, {
     container: true,
     gap: 0,
     className: classes$6.item,
     onClick: handleShowFields
-  }, Header, showFields && PopoverFields, showStateIx > -1 && /*#__PURE__*/React__default.createElement(StyledListBoxPopover, {
+  }, Header, showFields && PopoverFields, showStateIx > -1 && /*#__PURE__*/React__default.createElement(ListBoxPopover, {
     alignTo: alignTo,
     show: showStateIx > -1,
     close: handleCloseShowState,
@@ -15878,7 +15878,7 @@ function MultiState(_ref2) {
     fieldName: field.selections[showStateIx].qField,
     stateName: field.states[showStateIx]
   }));
-  return moreAlignTo && showStateIx > -1 ? /*#__PURE__*/React__default.createElement(StyledListBoxPopover, {
+  return moreAlignTo && showStateIx > -1 ? /*#__PURE__*/React__default.createElement(ListBoxPopover, {
     alignTo: alignTo,
     show: showStateIx > -1,
     close: handleCloseShowState,
@@ -16775,7 +16775,7 @@ AutoSizer.defaultProps = {
  * user interact outside of passed element ref.
  */
 
-function useConfirmUnfocus(ref, selections) {
+function useConfirmUnfocus(ref, selections, shouldConfirmOnBlur) {
   const [_isConfirmed, _setIsConfirmed] = useState$1(false); // Wrap state in ref to use inside eventListener callback
 
   const isConfirmedRef = useRef(_isConfirmed);
@@ -16787,6 +16787,8 @@ function useConfirmUnfocus(ref, selections) {
   };
 
   useEffect$1(() => {
+    if (!shouldConfirmOnBlur) return undefined;
+
     const handleEvent = event => {
       const interactInside = ref.current && ref.current.contains(event.target);
       const isConfirmed = isConfirmedRef.current;
@@ -16805,7 +16807,7 @@ function useConfirmUnfocus(ref, selections) {
       document.removeEventListener('mousedown', handleEvent);
       document.removeEventListener('keydown', handleEvent);
     };
-  }, [ref, selections]);
+  }, [ref, selections, shouldConfirmOnBlur]);
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -16847,7 +16849,8 @@ function ListBoxInline(_ref) {
     showGray = true,
     sortByState = 1,
     scrollState = undefined,
-    setCount = undefined
+    setCount = undefined,
+    shouldConfirmOnBlur = undefined
   } = options;
   let {
     frequencyMode,
@@ -17002,7 +17005,7 @@ function ListBoxInline(_ref) {
     }
   }, [selections]);
   const listBoxRef = useRef(null);
-  useConfirmUnfocus(listBoxRef, selections);
+  useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -17028,7 +17031,9 @@ function ListBoxInline(_ref) {
   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;
@@ -19521,7 +19526,7 @@ const Cell = forwardRef((_ref6, ref) => {
 
     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
 
   useEffect$1(() => {
     if (!validating) {
@@ -24308,6 +24313,7 @@ const mergeConfigs = (base, c) => ({
  * @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.
  */
 
 /**
@@ -24733,7 +24739,7 @@ var enigmaMocker = {exports: {}};
 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.
 */