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

package/core/esm/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.
 */
@@ -11424,7 +11424,7 @@ function create$3(definition) {
   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', ''));
@@ -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-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__default.createElement(NebulaApp, {
@@ -13951,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"),
@@ -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',
@@ -14411,7 +14412,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 +14434,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
@@ -15097,32 +15103,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 +15549,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,
@@ -16773,7 +16805,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);
@@ -16785,6 +16817,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;
@@ -16803,7 +16837,7 @@ function useConfirmUnfocus(ref, selections) {
       document.removeEventListener('mousedown', handleEvent);
       document.removeEventListener('keydown', handleEvent);
     };
-  }, [ref, selections]);
+  }, [ref, selections, shouldConfirmOnBlur]);
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -16845,7 +16879,8 @@ function ListBoxInline(_ref) {
     showGray = true,
     sortByState = 1,
     scrollState = undefined,
-    setCount = undefined
+    setCount = undefined,
+    shouldConfirmOnBlur = undefined
   } = options;
   let {
     frequencyMode,
@@ -17000,7 +17035,7 @@ function ListBoxInline(_ref) {
     }
   }, [selections]);
   const listBoxRef = useRef(null);
-  useConfirmUnfocus(listBoxRef, selections);
+  useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -17026,7 +17061,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;
@@ -17101,13 +17138,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
@@ -19519,7 +19557,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) {
@@ -24306,6 +24344,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.
  */
 
 /**
@@ -24731,7 +24770,7 @@ var enigmaMocker = {exports: {}};
 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.
 */