@nebula.js/stardust 4.2.1 → 4.2.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.2.1
+* @nebula.js/stardust v4.2.3
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1898,6 +1898,24 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var ScreenReader_OneSearchResult = {
+	id: "ScreenReader.OneSearchResult",
+	locale: {
+		"en-US": "There is one available result"
+	}
+};
+var ScreenReader_ManySearchResults = {
+	id: "ScreenReader.ManySearchResults",
+	locale: {
+		"en-US": "There are {0} available results"
+	}
+};
+var ScreenReader_SearchFieldLabel = {
+	id: "ScreenReader.SearchFieldLabel",
+	locale: {
+		"en-US": "Search Field"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -1948,7 +1966,10 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+	ScreenReader_OneSearchResult: ScreenReader_OneSearchResult,
+	ScreenReader_ManySearchResults: ScreenReader_ManySearchResults,
+	ScreenReader_SearchFieldLabel: ScreenReader_SearchFieldLabel
 };
 
 function appLocaleFn(language) {
@@ -8373,7 +8394,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "65bf" ;
+const NEBULA_VERSION_HASH = "e554" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8620,7 +8641,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.2.1" );
+  element.setAttribute('data-nebulajs-version', "4.2.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10610,6 +10631,21 @@ function ScreenReaderForSelections(_ref2) {
     "aria-live": "assertive"
   }, text);
 }
+function getScreenReaderSearchText(listCount) {
+  let t;
+  switch (listCount) {
+    case 0:
+      t = 'Listbox.NoMatchesForYourTerms';
+      break;
+    case 1:
+      t = 'ScreenReader.OneSearchResult';
+      break;
+    default:
+      t = 'ScreenReader.ManySearchResults';
+      break;
+  }
+  return t;
+}
 
 const KEYS = Object.freeze({
   ENTER: 13,
@@ -12993,7 +13029,7 @@ function useListSizes(_ref) {
   const {
     fontSize = '12px',
     fontFamily = 'Source sans pro'
-  } = ((_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.content) || {};
+  } = (theme === null || theme === void 0 ? void 0 : (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.content) || {};
   const font = "".concat(fontSize, " ").concat(fontFamily); // font format as supported by HTML canvas
   const textWidth = useTextWidth({
     text: getMeasureText(layout),
@@ -13698,6 +13734,7 @@ function ListBox(_ref) {
     checkboxes = checkboxOption,
     histogram
   } = layout !== null && layout !== void 0 ? layout : {};
+  const [screenReaderText, setScreenReaderText] = useState$1('');
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
@@ -13725,6 +13762,7 @@ function ListBox(_ref) {
     }),
     itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
   const {
+    getStoreValue,
     setStoreValue
   } = useDataStore(model);
   const loadMoreItems = useCallback(itemsLoader.loadMoreItems, [layout]);
@@ -13855,6 +13893,14 @@ function ListBox(_ref) {
     listCount
   } = sizes;
   setStoreValue('listCount', listCount);
+  const inputText = getStoreValue('inputText');
+  useEffect$1(() => {
+    if (inputText) {
+      const srText = getScreenReaderSearchText(listCount);
+      const srFinalText = translator.get(srText, [listCount]);
+      setScreenReaderText(srFinalText);
+    }
+  }, [inputText, listCount]);
   const setScrollPosition = position => {
     const {
       scrollIndex,
@@ -13966,7 +14012,10 @@ function ListBox(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledWrapper, null, /*#__PURE__*/React__default.createElement(ScreenReaderForSelections, {
     className: "screenReaderOnly",
     layout: layout
-  }), !listCount && cardinal > 0 && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "screenReaderOnly",
+    "aria-live": "assertive"
+  }, screenReaderText), !listCount && cardinal > 0 && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
     width: width,
     text: "Listbox.NoMatchesForYourTerms"
   }), /*#__PURE__*/React__default.createElement(InfiniteLoader, {
@@ -14675,7 +14724,8 @@ function ListBoxSearch(_ref3) {
   const inputRef = useRef();
   const theme = useTheme$1();
   const {
-    getStoreValue
+    getStoreValue,
+    setStoreValue
   } = useDataStore(model);
   const isRtl = direction === 'rtl';
   const inpuTextAlign = isRtl ? 'right' : 'left';
@@ -14708,6 +14758,9 @@ function ListBoxSearch(_ref3) {
       setWildcardOn(false);
     }
   }, [wildcardOn, inputRef.current]);
+  useEffect$1(() => {
+    setStoreValue('inputText', value);
+  }, [value]);
   const onChange = async e => {
     setValue(e.target.value);
     if (!e.target.value.length) {
@@ -14842,7 +14895,8 @@ function ListBoxSearch(_ref3) {
       style: {
         textAlign: "".concat(inpuTextAlign)
       },
-      'data-testid': 'search-input-field'
+      'data-testid': 'search-input-field',
+      'aria-label': translator.get('ScreenReader.SearchFieldLabel')
     }
   });
 }
@@ -15430,7 +15484,8 @@ function ListBoxPopover(_ref) {
     selectionState: selectionState$1,
     direction: "ltr",
     onSetListCount: c => setListCount(c),
-    onCtrlF: onCtrlF
+    onCtrlF: onCtrlF,
+    theme: theme
   }))));
 }