@nebula.js/stardust 3.1.3 → 3.2.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.3
+* @nebula.js/stardust v3.2.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -953,6 +953,46 @@ var CurrentSelections_Of = {
 		"zh-TW": "{0}/ {1}"
 	}
 };
+var Listbox_Dismiss = {
+	id: "Listbox.Dismiss",
+	locale: {
+		"de-DE": "Schließen",
+		"en-US": "Dismiss",
+		"es-ES": "Descartar",
+		"fr-FR": "Ignorer",
+		"it-IT": "Ignora",
+		"ja-JP": "却下",
+		"ko-KR": "해제",
+		"nl-NL": "Overslaan",
+		"pl-PL": "Zamknij",
+		"pt-BR": "Ignorar",
+		"ru-RU": "Пропустить",
+		"sv-SE": "Hoppa över",
+		"tr-TR": "Kapat",
+		"zh-CN": "离开",
+		"zh-TW": "解除"
+	}
+};
+var Listbox_ItemsOverflow = {
+	id: "Listbox.ItemsOverflow",
+	locale: {
+		"de-DE": "Derzeit wird ein eingeschränkter Datensatz angezeigt, verwenden Sie die Suche, um die Größe zu reduzieren",
+		"en-US": "Currently showing a limited data set, use search to reduce the size",
+		"es-ES": "Actualmente se muestra un conjunto de datos limitado, utilice la búsqueda para reducir el tamaño",
+		"fr-FR": "Ensemble de données limité actuellement affiché. Utilisez la rechercher pour réduire la taille.",
+		"it-IT": "Attualmente visualizzato un set di dati limitato; utilizzare la ricerca per ridurre le dimensioni",
+		"ja-JP": "現在表示されているデータ セットは制限されているため、検索を使ってサイズを縮小してください",
+		"ko-KR": "현재 제한된 데이터 집합이 표시되고 있습니다. 검색을 사용하여 크기를 줄이십시오.",
+		"nl-NL": "Er wordt momenteel een beperkte gegevensverzameling getoond, gebruik Zoeken om de omvang te verkleinen",
+		"pl-PL": "Wyświetlany jest ograniczony zestaw danych. Użyj wyszukiwania, aby zmniejszyć rozmiar.",
+		"pt-BR": "Atualmente mostrando um conjunto de dados limitado, use a pesquisa para reduzir o tamanho",
+		"ru-RU": "Сейчас отображается ограниченный набор данных. Используйте поиск, чтобы уменьшить размер.",
+		"sv-SE": "En begränsad datauppsättning visas. Använd sök för att minska storleken",
+		"tr-TR": "Şu anda sınırlı bir veri kümesi gösteriliyor. Boyutu azaltmak için arama işlevini kullanın",
+		"zh-CN": "目前显示有限的数据集，使用搜索来减少大小",
+		"zh-TW": "目前顯示有限資料集，請使用搜尋減少大小"
+	}
+};
 var Listbox_Lock = {
 	id: "Listbox.Lock",
 	locale: {
@@ -973,6 +1013,26 @@ var Listbox_Lock = {
 		"zh-TW": "鎖定選項"
 	}
 };
+var Listbox_NoMatchesForYourTerms = {
+	id: "Listbox.NoMatchesForYourTerms",
+	locale: {
+		"de-DE": "Für Ihre Suche wurden keine Übereinstimmungen gefunden.",
+		"en-US": "There are no matches for your search.",
+		"es-ES": "No hay resultados para su búsqueda.",
+		"fr-FR": "Aucun résultat ne correspond à votre recherche.",
+		"it-IT": "Non è stata trovata alcuna corrispondenza per questa ricerca.",
+		"ja-JP": "検索に一致するものがありません。",
+		"ko-KR": "검색에 대해 일치하는 항목이 없습니다.",
+		"nl-NL": "Er zijn geen overeenkomsten voor uw zoekopdracht.",
+		"pl-PL": "Brak dopasowań dla tego wyszukiwania.",
+		"pt-BR": "Não há correspondências para sua pesquisa.",
+		"ru-RU": "Нет совпадений по вашему поисковому запросу.",
+		"sv-SE": "Det finns inga matchningar för din sökning.",
+		"tr-TR": "Aramanızla eşleşen sonuç yok.",
+		"zh-CN": "您的搜索条件没有任何匹配结果。",
+		"zh-TW": "沒有與您搜尋相符的項目。"
+	}
+};
 var Listbox_ResultFilterLabel = {
 	id: "Listbox.ResultFilterLabel",
 	locale: {
@@ -993,26 +1053,6 @@ var Listbox_ResultFilterLabel = {
 		"zh-TW": "搜尋結果篩選"
 	}
 };
-var Listbox_NoMatchesForYourTerms = {
-	id: "Listbox.NoMatchesForYourTerms",
-	locale: {
-		"de-DE": "Für Ihre Suche wurden keine Übereinstimmungen gefunden.",
-		"en-US": "There are no matches for your search.",
-		"es-ES": "No hay resultados para su búsqueda.",
-		"fr-FR": "Aucun résultat ne correspond à votre recherche.",
-		"it-IT": "Non esistono corrispondenze per la ricerca.",
-		"ja-JP": "検索に一致するものがありません。",
-		"ko-KR": "검색에 대해 일치하는 항목이 없습니다.",
-		"nl-NL": "Er zijn geen overeenkomsten voor uw zoekopdracht.",
-		"pl-PL": "Brak dopasowań dla tego wyszukiwania.",
-		"pt-BR": "Não há correspondências para sua pesquisa.",
-		"ru-RU": "Нет совпадений для искомого текста.",
-		"sv-SE": "Det finns inga matchningar för din sökning.",
-		"tr-TR": "Aramanızla eşleşen sonuç yok.",
-		"zh-CN": "您的搜索条件没有任何匹配结果。",
-		"zh-TW": "沒有與您搜尋相符的項目。"
-	}
-};
 var Listbox_ScreenReaderInstructions = {
 	id: "Listbox.ScreenReaderInstructions",
 	locale: {
@@ -1573,25 +1613,15 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
-var Listbox_ItemsOverflow = {
-	id: "Listbox.ItemsOverflow",
-	locale: {
-		"en-US": "Currently showing a limited data set, use search to reduce the size"
-	}
-};
-var Listbox_Dismiss = {
-	id: "Listbox.Dismiss",
-	locale: {
-		"en-US": "Dismiss"
-	}
-};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
 	CurrentSelections_Of: CurrentSelections_Of,
+	Listbox_Dismiss: Listbox_Dismiss,
+	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
 	Listbox_Lock: Listbox_Lock,
-	Listbox_ResultFilterLabel: Listbox_ResultFilterLabel,
 	Listbox_NoMatchesForYourTerms: Listbox_NoMatchesForYourTerms,
+	Listbox_ResultFilterLabel: Listbox_ResultFilterLabel,
 	Listbox_ScreenReaderInstructions: Listbox_ScreenReaderInstructions,
 	Listbox_Search: Listbox_Search,
 	Listbox_Search_ScreenReaderInstructions: Listbox_Search_ScreenReaderInstructions,
@@ -1619,9 +1649,7 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
-	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
-	Listbox_Dismiss: Listbox_Dismiss
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
 };
 
 function appLocaleFn(language) {
@@ -7940,7 +7968,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "b117" ;
+const NEBULA_VERSION_HASH = "f2f8" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8459,7 +8487,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.1.3" );
+  element.setAttribute('data-nebulajs-version', "3.2.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -9963,7 +9991,8 @@ function RowColumn(_ref3) {
   };
   const iconStyles = {
     alignItems: 'center',
-    display: 'flex'
+    display: 'flex',
+    fontSize: '8px'
   };
   const showLock = isSelected && isLocked;
   const showTick = !checkboxes && isSelected && !isLocked;
@@ -13219,7 +13248,8 @@ function ListBoxSearch(_ref3) {
     keyboard,
     dense = false,
     visible = true,
-    wildCardSearch = true
+    wildCardSearch = true,
+    searchEnabled
   } = _ref3;
   const {
     translator
@@ -13305,7 +13335,7 @@ function ListBoxSearch(_ref3) {
     }
     return response;
   };
-  if (!visible) {
+  if (!visible || searchEnabled === false) {
     return null;
   }
   return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
@@ -13536,7 +13566,8 @@ const createObjectSelections = _ref2 => {
 const getClickOutFuncs = _ref3 => {
   let {
     elements,
-    objectSelections
+    objectSelections,
+    options
   } = _ref3;
   const handler = createHandler({
     elements,
@@ -13544,14 +13575,18 @@ const getClickOutFuncs = _ref3 => {
   });
   return {
     activateClickOut() {
+      var _options$onSelectionA;
       document.addEventListener('mousedown', handler);
+      (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
     },
     deactivateClickOut() {
+      var _options$onSelectionD;
       document.removeEventListener('mousedown', handler);
+      (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
     }
   };
 };
-function useObjectSelections(app, model, elements) {
+function useObjectSelections(app, model, elements, options) {
   const elementsArr = Array.isArray(elements) ? elements : [elements];
   const [appSelections] = useAppSelections(app);
   const [layout] = useLayout$1(model);
@@ -13577,7 +13612,8 @@ function useObjectSelections(app, model, elements) {
       deactivateClickOut
     } = getClickOutFuncs({
       elements: elementsArr,
-      objectSelections
+      objectSelections,
+      options
     });
     objectSelections.addListener('activated', activateClickOut);
     objectSelections.addListener('deactivated', deactivateClickOut);
@@ -15035,7 +15071,6 @@ function ListBoxInline(_ref3) {
     checkboxes,
     search = true,
     focusSearch = false,
-    toolbar = true,
     rangeSelect = true,
     model,
     selections,
@@ -15047,6 +15082,9 @@ function ListBoxInline(_ref3) {
     showGray = true,
     scrollState = undefined
   } = options;
+  let {
+    toolbar = true
+  } = options;
 
   // Hook that will trigger update when used in useEffects.
   // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
@@ -15060,9 +15098,6 @@ function ListBoxInline(_ref3) {
     return [ref, setRef];
   };
   const theme = useTheme$1();
-  const lock = useCallback(() => {
-    model.lock('/qListObjectDef');
-  }, [model]);
   const unlock = useCallback(() => {
     model.unlock('/qListObjectDef');
   }, [model]);
@@ -15088,13 +15123,19 @@ function ListBoxInline(_ref3) {
     // this will be static until we can access the useKeyboard hook
     active: keyboardActive
   };
+  if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
+    toolbar = layout.toolbar;
+  }
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
+      if (search === 'inSelection') {
+        setShowSearch(true);
+      }
     };
     const hide = () => {
       setShowToolbar(false);
-      if (search === 'toggle') {
+      if (search === 'toggle' || search === 'inSelection') {
         setShowSearch(false);
       }
     };
@@ -15131,31 +15172,19 @@ function ListBoxInline(_ref3) {
     model,
     translator
   }) : [];
-  const hasSelections$1 = hasSelections(layout);
-  const searchVisible = (search === true || search === 'toggle' && showSearch) && !selectDisabled();
+  const searchVisible = (search === true || (search === 'toggle' || search === 'inSelection') && showSearch) && !selectDisabled();
   const dense = (_layout$layoutOptions = (_layout$layoutOptions2 = layout.layoutOptions) === null || _layout$layoutOptions2 === void 0 ? void 0 : _layout$layoutOptions2.dense) !== null && _layout$layoutOptions !== void 0 ? _layout$layoutOptions : false;
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
-  const wildCardSearch = layout === null || layout === void 0 ? void 0 : layout.wildCardSearch;
+  const {
+    wildCardSearch,
+    searchEnabled
+  } = layout;
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
-  const getSearchOrUnlock = () => {
-    const showSearchIcon = search === 'toggle' && !hasSelections$1;
-    return showSearchIcon ? /*#__PURE__*/React__default.createElement(IconButton, {
-      onClick: onShowSearch,
-      tabIndex: -1,
-      title: translator.get('Listbox.Search'),
-      size: "large"
-    }, /*#__PURE__*/React__default.createElement(SearchIcon, null)) : /*#__PURE__*/React__default.createElement(IconButton, {
-      onClick: lock,
-      tabIndex: -1,
-      disabled: !hasSelections$1,
-      size: "large"
-    }, /*#__PURE__*/React__default.createElement(Unlock, null));
-  };
   return /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
@@ -15168,28 +15197,44 @@ function ListBoxInline(_ref3) {
       flexFlow: 'column nowrap'
     },
     onKeyDown: handleKeyDown
-  }, toolbar && /*#__PURE__*/React__default.createElement(Grid, {
+  }, toolbar && layout.title && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     style: {
       padding: theme.spacing(1)
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
+    item: true,
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
   }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
     tabIndex: -1,
     onClick: unlock,
     disabled: !isLocked,
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Lock, {
-    title: translator.get('Listbox.Unlock')
-  })) : getSearchOrUnlock()), /*#__PURE__*/React__default.createElement(Grid, {
+    title: translator.get('Listbox.Unlock'),
+    style: {
+      fontSize: '12px'
+    }
+  })) : searchEnabled !== false && /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: {
+      fontSize: '12px'
+    }
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
     noWrap: true
-  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
@@ -15235,7 +15280,8 @@ function ListBoxInline(_ref3) {
     keyboard: keyboard,
     visible: searchVisible,
     searchContainerRef: searchContainerRef,
-    wildCardSearch: wildCardSearch
+    wildCardSearch: wildCardSearch,
+    searchEnabled: searchEnabled
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -15521,7 +15567,7 @@ function ListBoxWrapper(_ref) {
     options
   });
   const elementRef = useRef(element);
-  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, elementRef)[0];
+  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, elementRef, options)[0];
   if (!selections || !model) {
     return null;
   }
@@ -22369,9 +22415,9 @@ function create(_ref) {
         version
       } = typeInfo;
       if (!tc[name]) {
-        // Fall back to existing version
+        // Chart not registered, so we'll do that now.
         {
-          console.warn("Visualization ".concat(name, " is not registered.")); // eslint-disable-line no-console
+          console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
         }
 
         this.register({
@@ -22402,26 +22448,6 @@ function create(_ref) {
   };
 }
 
-/**
- * @interface Context
- * @property {boolean=} keyboardNavigation
- * @property {object=} constraints
- * @property {boolean=} constraints.active
- * @property {boolean=} constraints.passive
- * @property {boolean=} constraints.select
- */
-const DEFAULT_CONTEXT = /** @lends Context */{
-  /** @type {string=} */
-  theme: 'light',
-  /** @type {string=} */
-  language: 'en-US',
-  /** @type {string=} */
-  deviceType: 'auto',
-  constraints: {},
-  keyboardNavigation: false,
-  disableCellPadding: false
-};
-
 /**
  * @interface SnapshotConfiguration
  * @private
@@ -22451,30 +22477,68 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
 
 /**
  * @interface Configuration
+ * @property {LoadType=} load Fallback load function for missing types
+ * @property {Context=} context Settings for the rendering instance
+ * @property {Array<TypeInfo>=} types Visualization types to register
+ * @property {Array<ThemeInfo>=} themes Themes to register
+ * @property {object=} anything
+ * @example
+ * import { embed } from '@nebula.js/stardust'
+ * n = embed(app, {
+ *   context: {
+ *     keyboardNavigation: true,
+ *     theme: 'purple',
+ *   },
+ *   load: ({ name, version }) => {
+ *     if (name === 'linechart') {
+ *       return Promise.resolve(line);
+ *     }
+ *   },
+ *   types: [
+ *     {
+ *       name: 'bar',
+ *       load: () => Promise.resolve(bar),
+ *     },
+ *   ],
+ *   themes: [
+ *     {
+ *       id: 'purple',
+ *       load: () => Promise.resolve(purpleThemeJson),
+ *     },
+ *   ],
+ * });
  */
-const DEFAULT_CONFIG = /** @lends Configuration */{
-  /**
-   * @type {Context=}
-   */
-  context: DEFAULT_CONTEXT,
+
+const DEFAULT_CONFIG = {
+  context: {},
   load: () => undefined,
-  /**
-   * @type {(TypeInfo[])=}
-   */
   types: [],
-  /**
-   * @type {(ThemeInfo[])=}
-   */
   themes: [],
-  /** @type {object=} */
   anything: {},
-  /**
-   * @type {SnapshotConfiguration=}
-   * @private
-   */
   snapshot: DEFAULT_SNAPSHOT_CONFIG
 };
 
+/**
+ * @interface Context
+ * @property {boolean=} keyboardNavigation
+ * @property {object=} constraints
+ * @property {boolean=} constraints.active
+ * @property {boolean=} constraints.passive
+ * @property {boolean=} constraints.select
+ */
+const DEFAULT_CONTEXT = /** @lends Context */{
+  /** @type {string=} */
+  theme: 'light',
+  /** @type {string=} */
+  language: 'en-US',
+  /** @type {string=} */
+  deviceType: 'auto',
+  constraints: {},
+  keyboardNavigation: false,
+  disableCellPadding: false
+};
+DEFAULT_CONFIG.context = DEFAULT_CONTEXT;
+
 /**
  * @interface Galaxy
  */
@@ -22747,7 +22811,34 @@ function nuked() {
          */
 
         /**
-         * @typedef { boolean | 'toggle' } SearchMode
+         * @typedef { boolean | 'toggle' | 'inSelection' } SearchMode
+         */
+
+        /**
+         * @typedef { 'selectionActivated' | 'selectionDeactivated' } FieldEventTypes
+         */
+
+        /**
+         * Event listener function on instance
+         *
+         * @method
+         * @name FieldInstance#on
+         * @param {FieldEventTypes} eventType event type that function needs to listen
+         * @param {Function} callback a callback function to run when event emits
+         * @example
+         * const handleSomeEvent () => {...};
+         * fieldInstance.on('someEvent', handleSomeEvent);
+         * ...
+         * fieldInstance.removeListener('someEvent', handleSomeEvent);
+         */
+
+        /**
+         * Remove listener on instance
+         *
+         * @method
+         * @name FieldInstance#removeListener
+         * @param {FieldEventTypes} eventType event type
+         * @param {Function} callback handler
          */
 
         /**
@@ -22766,7 +22857,7 @@ function nuked() {
            * @param {ListLayout=} [options.listLayout=vertical] Layout direction vertical|horizontal (not applicable for existing objects)
            * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
            * @param {boolean=} [options.histogram=false] Show histogram bar (not applicable for existing objects)
-           * @param {SearchMode=} [options.search=true] Show the search bar permanently or using the toggle button: false|true|toggle|toggleShow
+           * @param {SearchMode=} [options.search=true] Show the search bar permanently, using the toggle button or when in selection: false|true|toggle|inSelection
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields (not applicable for existing objects)
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
@@ -22786,12 +22877,17 @@ function nuked() {
             if (this._instance) {
               throw new Error("Field or object ".concat(fieldName || qId, " already mounted"));
             }
+            const onSelectionActivated = () => fieldSels.emit('selectionActivated');
+            const onSelectionDeactivated = () => fieldSels.emit('selectionDeactivated');
             this._instance = ListBoxPortal({
               element,
               app,
               fieldIdentifier,
               qId,
-              options: getOptions$1(options),
+              options: getOptions$1(_objectSpread2({
+                onSelectionActivated,
+                onSelectionDeactivated
+              }, options)),
               stateName: options.stateName || '$'
             });
             root.add(this._instance);
@@ -22810,6 +22906,7 @@ function nuked() {
             }
           }
         };
+        eventmixin(fieldSels);
         return fieldSels;
       },
       /**