@nebula.js/stardust 3.1.3 → 3.2.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.3
+* @nebula.js/stardust v3.2.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1020,6 +1020,46 @@
 			"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: {
@@ -1040,6 +1080,26 @@
 			"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: {
@@ -1060,26 +1120,6 @@
 			"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: {
@@ -1640,25 +1680,15 @@
 			"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,
@@ -1686,9 +1716,7 @@
 		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) {
@@ -14360,7 +14388,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "b117" ;
+	const NEBULA_VERSION_HASH = "070a" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -14879,7 +14907,7 @@
 	  const appRef = React.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.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -21658,7 +21686,8 @@
 	  };
 	  const iconStyles = {
 	    alignItems: 'center',
-	    display: 'flex'
+	    display: 'flex',
+	    fontSize: '8px'
 	  };
 	  const showLock = isSelected && isLocked;
 	  const showTick = !checkboxes && isSelected && !isLocked;
@@ -24768,7 +24797,8 @@
 	    keyboard,
 	    dense = false,
 	    visible = true,
-	    wildCardSearch = true
+	    wildCardSearch = true,
+	    searchEnabled
 	  } = _ref3;
 	  const {
 	    translator
@@ -24854,7 +24884,7 @@
 	    }
 	    return response;
 	  };
-	  if (!visible) {
+	  if (!visible || searchEnabled === false) {
 	    return null;
 	  }
 	  return /*#__PURE__*/React.createElement(StyledOutlinedInput, {
@@ -25085,7 +25115,8 @@
 	const getClickOutFuncs = _ref3 => {
 	  let {
 	    elements,
-	    objectSelections
+	    objectSelections,
+	    options
 	  } = _ref3;
 	  const handler = createHandler({
 	    elements,
@@ -25093,14 +25124,18 @@
 	  });
 	  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);
@@ -25126,7 +25161,8 @@
 	      deactivateClickOut
 	    } = getClickOutFuncs({
 	      elements: elementsArr,
-	      objectSelections
+	      objectSelections,
+	      options
 	    });
 	    objectSelections.addListener('activated', activateClickOut);
 	    objectSelections.addListener('deactivated', deactivateClickOut);
@@ -26584,7 +26620,6 @@
 	    checkboxes,
 	    search = true,
 	    focusSearch = false,
-	    toolbar = true,
 	    rangeSelect = true,
 	    model,
 	    selections,
@@ -26596,6 +26631,9 @@
 	    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
@@ -26609,9 +26647,6 @@
 	    return [ref, setRef];
 	  };
 	  const theme = useTheme$1();
-	  const lock = reactExports.useCallback(() => {
-	    model.lock('/qListObjectDef');
-	  }, [model]);
 	  const unlock = reactExports.useCallback(() => {
 	    model.unlock('/qListObjectDef');
 	  }, [model]);
@@ -26637,13 +26672,19 @@
 	    // 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;
+	  }
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
+	      if (search === 'inSelection') {
+	        setShowSearch(true);
+	      }
 	    };
 	    const hide = () => {
 	      setShowToolbar(false);
-	      if (search === 'toggle') {
+	      if (search === 'toggle' || search === 'inSelection') {
 	        setShowSearch(false);
 	      }
 	    };
@@ -26680,31 +26721,19 @@
 	    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.createElement(IconButton$1, {
-	      onClick: onShowSearch,
-	      tabIndex: -1,
-	      title: translator.get('Listbox.Search'),
-	      size: "large"
-	    }, /*#__PURE__*/React.createElement(SearchIcon, null)) : /*#__PURE__*/React.createElement(IconButton$1, {
-	      onClick: lock,
-	      tabIndex: -1,
-	      disabled: !hasSelections$1,
-	      size: "large"
-	    }, /*#__PURE__*/React.createElement(Unlock, null));
-	  };
 	  return /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
@@ -26717,28 +26746,44 @@
 	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown
-	  }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
+	  }, toolbar && layout.title && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    style: {
 	      padding: theme.spacing(1)
 	    }
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
-	    item: true
+	    item: true,
+	    sx: {
+	      display: 'flex',
+	      alignItems: 'center'
+	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
 	    tabIndex: -1,
 	    onClick: unlock,
 	    disabled: !isLocked,
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
-	    title: translator.get('Listbox.Unlock')
-	  })) : getSearchOrUnlock()), /*#__PURE__*/React.createElement(Grid$1, {
+	    title: translator.get('Listbox.Unlock'),
+	    style: {
+	      fontSize: '12px'
+	    }
+	  })) : searchEnabled !== false && /*#__PURE__*/React.createElement(IconButton$1, {
+	    onClick: onShowSearch,
+	    tabIndex: -1,
+	    title: translator.get('Listbox.Search'),
+	    size: "large"
+	  }, /*#__PURE__*/React.createElement(SearchIcon, {
+	    style: {
+	      fontSize: '12px'
+	    }
+	  }))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
 	    noWrap: true
-	  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
@@ -26784,7 +26829,8 @@
 	    keyboard: keyboard,
 	    visible: searchVisible,
 	    searchContainerRef: searchContainerRef,
-	    wildCardSearch: wildCardSearch
+	    wildCardSearch: wildCardSearch,
+	    searchEnabled: searchEnabled
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
@@ -27070,7 +27116,7 @@
 	    options
 	  });
 	  const elementRef = reactExports.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;
 	  }
@@ -33918,9 +33964,9 @@
 	        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({
@@ -33951,26 +33997,6 @@
 	  };
 	}
 
-	/**
-	 * @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
@@ -34000,30 +34026,68 @@
 
 	/**
 	 * @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
 	 */
@@ -34296,7 +34360,34 @@
 	         */
 
 	        /**
-	         * @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
 	         */
 
 	        /**
@@ -34315,7 +34406,7 @@
 	           * @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)
@@ -34335,12 +34426,17 @@
 	            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);
@@ -34359,6 +34455,7 @@
 	            }
 	          }
 	        };
+	        eventmixin(fieldSels);
 	        return fieldSels;
 	      },
 	      /**