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

package/core/esm/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.
 */
@@ -11424,7 +11424,7 @@ function create$3(definition) {
   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', ''));
@@ -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-alpha11" );
   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',
@@ -14366,13 +14367,22 @@ function ListBox(_ref2) {
     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
-        }))).then(p => {
+        }, {
+          qTop: lastItemInQueue.start,
+          qHeight: MINIMUM_BATCH_SIZE,
+          qLeft: 0,
+          qWidth: 1
+        }]).then(p => {
           const processedPages = postProcessPages ? postProcessPages(p) : p;
           local.current.validPages = true;
           listData.current.pages = processedPages;
@@ -14411,7 +14421,7 @@ function ListBox(_ref2) {
     if (typeof setCount === 'function' && layout) {
       setCount(layout.qListObject.qSize.qcy);
     }
-  }, [layout]);
+  }, [layout, layout && layout.qListObject.qSize.qcy]);
   useEffect$1(() => {
     if (!instantPages || isLoadingData) {
       return;
@@ -14433,7 +14443,12 @@ function ListBox(_ref2) {
   }
 
   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
@@ -14460,7 +14475,7 @@ function ListBox(_ref2) {
   } = layout;
   return /*#__PURE__*/React__default.createElement(StyledInfiniteLoader, {
     isItemLoaded: isItemLoaded,
-    itemCount: count,
+    itemCount: listCount,
     loadMoreItems: loadMoreItems,
     threshold: 0,
     minimumBatchSize: MINIMUM_BATCH_SIZE,
@@ -15097,32 +15112,57 @@ function ListBoxSearch(_ref) {
   let {
     model,
     keyboard,
-    dense = false
+    dense = false,
+    visible = true
   } = _ref;
   const {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
+  const [isSearching, setIsSearching] = useState$1(false);
   const theme = useTheme$1();
 
+  const abortSearch = async () => {
+    await model.abortListObjectSearch(TREE_PATH);
+    setIsSearching(false);
+  };
+
+  useEffect$1(() => {
+    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__default.createElement(OutlinedInput, {
     startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
       position: "start"
@@ -15518,7 +15558,8 @@ function ListBoxPopover(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
-    model: model
+    model: model,
+    visible: true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
     selections: selections,
@@ -15716,15 +15757,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 +15774,6 @@ const StyledListBoxPopover = styled(ListBoxPopover)(_ref => {
       },
       height: '100%',
       alignItems: 'center'
-    },
-    ["& .".concat(classes$6.badge)]: {
-      padding: theme.spacing(0, 1)
     }
   };
 });
@@ -15795,7 +15832,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 +15904,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 +15917,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 +16814,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 +16826,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 +16846,7 @@ function useConfirmUnfocus(ref, selections) {
       document.removeEventListener('mousedown', handleEvent);
       document.removeEventListener('keydown', handleEvent);
     };
-  }, [ref, selections]);
+  }, [ref, selections, shouldConfirmOnBlur]);
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -16847,7 +16888,8 @@ function ListBoxInline(_ref) {
     showGray = true,
     sortByState = 1,
     scrollState = undefined,
-    setCount = undefined
+    setCount = undefined,
+    shouldConfirmOnBlur = undefined
   } = options;
   let {
     frequencyMode,
@@ -17002,7 +17044,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 +17070,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;
@@ -17103,13 +17147,14 @@ function ListBoxInline(_ref) {
       onConfirm: () => {},
       onCancel: () => {}
     }
-  }))), searchVisible && /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     model: model,
     dense: dense,
-    keyboard: keyboard
+    keyboard: keyboard,
+    visible: searchVisible
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -19521,7 +19566,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 +24353,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 +24779,7 @@ var enigmaMocker = {exports: {}};
 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.
 */