@nebula.js/stardust 3.0.2-alpha.0 → 3.0.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.2-alpha.0
+* @nebula.js/stardust v3.0.3
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -12326,7 +12326,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "04ac" ;
+const NEBULA_VERSION_HASH = "8956" ;
 ClassNameGenerator.configure(componentName => {
 
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -12899,7 +12899,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.2-alpha.0" );
+  element.setAttribute('data-nebulajs-version', "3.0.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -16009,6 +16009,7 @@ var SearchIcon = (props => SvgIcon(search(props)));
 const TREE_PATH = '/qListObjectDef';
 function ListBoxSearch(_ref) {
   let {
+    selections,
     model,
     keyboard,
     dense = false,
@@ -16018,44 +16019,68 @@ function ListBoxSearch(_ref) {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
-  const [isSearching, setIsSearching] = useState$1(false);
   const theme = useTheme$1();
 
+  const cancel = () => selections.isActive() && selections.cancel();
+
   const abortSearch = async () => {
-    await model.abortListObjectSearch(TREE_PATH);
-    setIsSearching(false);
+    if (!selections.isModal()) {
+      return;
+    }
+
+    try {
+      await model.abortListObjectSearch(TREE_PATH);
+    } finally {
+      setValue('');
+    }
   };
 
   useEffect$1(() => {
-    if (!visible && isSearching) {
-      abortSearch();
+    if (!visible) {
+      abortSearch(); // abort when toggling off search
     }
   }, [visible]);
+  useEffect$1(() => {
+    selections.on('deactivated', abortSearch);
+    return () => {
+      selections.removeListener && selections.removeListener('deactivated', abortSearch);
+    };
+  }, []);
 
-  const onChange = e => {
+  const onChange = async e => {
     setValue(e.target.value);
 
-    if (e.target.value.length === 0) {
-      abortSearch();
-    } else {
-      model.searchListObjectFor(TREE_PATH, e.target.value);
-      setIsSearching(true);
+    if (!e.target.value.length) {
+      return abortSearch();
+    }
+
+    return model.searchListObjectFor(TREE_PATH, e.target.value);
+  };
+
+  const handleFocus = () => {
+    if (!selections.isModal()) {
+      selections.begin(['/qListObjectDef']);
     }
   };
 
   const onKeyDown = e => {
+    let response;
+
     switch (e.key) {
       case 'Enter':
         // Maybe we only want to accept if isSearching is true
-        model.acceptListObjectSearch(TREE_PATH, true);
+        response = model.acceptListObjectSearch(TREE_PATH, true);
         setValue('');
         break;
 
       case 'Escape':
-        abortSearch();
-        setValue('');
+        response = cancel();
+        e.preventDefault();
+        e.stopPropagation();
         break;
     }
+
+    return response;
   };
 
   if (!visible) {
@@ -16092,6 +16117,7 @@ function ListBoxSearch(_ref) {
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
     value: value,
+    onFocus: handleFocus,
     onChange: onChange,
     onKeyDown: onKeyDown,
     inputProps: {
@@ -16457,6 +16483,7 @@ function ListBoxPopover(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    selections: selections,
     model: model,
     visible: true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
@@ -17919,15 +17946,25 @@ function ListBoxInline(_ref) {
     active: keyboardActive
   };
   useEffect$1(() => {
-    const show = () => setShowToolbar(true);
+    const show = () => {
+      setShowToolbar(true);
+    };
 
-    const hide = () => setShowToolbar(false);
+    const hide = () => {
+      setShowToolbar(false);
+
+      if (search === 'toggle') {
+        setShowSearch(false);
+      }
+    };
 
     if (selections) {
-      if (!selections.isModal(model)) {
+      if (!selections.isModal()) {
         selections.on('deactivated', hide);
         selections.on('activated', show);
       }
+
+      setShowToolbar(selections.isActive());
     }
 
     return () => {
@@ -17937,11 +17974,6 @@ function ListBoxInline(_ref) {
       }
     };
   }, [selections]);
-  useEffect$1(() => {
-    if (selections) {
-      setShowToolbar(selections.isActive());
-    }
-  }, [selections]);
   const listBoxRef = useRef(null);
   useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
   useEffect$1(() => {
@@ -18050,10 +18082,12 @@ function ListBoxInline(_ref) {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    selections: selections,
     model: model,
     dense: dense,
     keyboard: keyboard,
-    visible: searchVisible
+    visible: searchVisible,
+    searchContainerRef: searchContainerRef
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -21570,6 +21604,7 @@ function initiate(component) {
     },
     list: [],
     snaps: [],
+    menus: [],
     actions: {
       list: []
     },
@@ -21687,6 +21722,15 @@ function runSnaps(component, layout) {
 
   return Promise.resolve();
 }
+function runMenu(component, menu, event) {
+  try {
+    return Promise.all(component.__hooks.menus.map(h => Promise.resolve(h.fn(menu, event)))).then(menus => menus[menus.length - 1]);
+  } catch (e) {
+    console.error(e);
+  }
+
+  return Promise.resolve();
+}
 function getImperativeHandle(component) {
   return component.__hooks.imperativeHandle;
 }
@@ -21763,6 +21807,7 @@ function hook(cb) {
     run,
     teardown,
     runSnaps,
+    runMenu,
     focus,
     blur,
     observeActions,
@@ -22556,6 +22601,30 @@ function onTakeSnapshot(cb) {
 
   h.fn = cb;
 }
+/**
+ * Registers a callback that is called when the context menu opens
+ * @entry
+ * @param {function(menu, event): void} addItemCallback
+ * @ignore
+ * @example
+ * import { onContextMenu } from '@nebula.js/stardust';
+ 
+ * onContextMenu((menu, event) => {
+ *  menu.addItem(item, index);
+ * });
+ */
+
+function onContextMenu(cb) {
+  const h = getHook(++currentIndex);
+
+  if (!h.value) {
+    h.value = 1;
+
+    currentComponent.__hooks.menus.push(h);
+  }
+
+  h.fn = cb;
+}
 /**
  * @interface RenderState
  * @property {any} pending
@@ -22946,6 +23015,10 @@ function createWithHooks(generator, opts, galaxy) {
       return generator.component.runSnaps(this, layout);
     },
 
+    onContextMenu(menu, event) {
+      return generator.component.runMenu(this, menu, event);
+    },
+
     focus() {
       generator.component.focus(this);
     },
@@ -25677,7 +25750,7 @@ var enigmaMocker = {exports: {}};
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.0.1
+* @nebula.js/enigma-mocker v3.0.2
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -26246,5 +26319,5 @@ const __DO_NOT_USE__ = {
   locale
 };
 
-export { index as EnigmaMocker, __DO_NOT_USE__, conversion, index$1 as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
+export { index as EnigmaMocker, __DO_NOT_USE__, conversion, index$1 as embed, onContextMenu, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
 //# sourceMappingURL=dev.js.map