@nebula.js/stardust 4.2.1 → 4.2.2

package/core/package.json

@@ -1,9 +1,9 @@
 {
   "module": "esm/index.js",
   "peerDependencies": {
-    "@mui/material": "^5.13.3",
+    "@mui/material": "^5.13.5",
     "@mui/icons-material": "^5.11.16",
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "react": "^17.0.2 || ^18.1.0",
     "react-dom": "^17.0.2 || ^18.1.0"

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.2.1
+* @nebula.js/stardust v4.2.2
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1955,6 +1955,24 @@
 			"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,
@@ -2005,7 +2023,10 @@
 		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) {
@@ -10439,7 +10460,6 @@
 	  }
 
 	  if (!contains(state.elements.popper, arrowElement)) {
-
 	    return;
 	  }
 
@@ -10581,7 +10601,6 @@
 	      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
 	      _options$roundOffsets = options.roundOffsets,
 	      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
 	  var commonStyles = {
 	    placement: getBasePlacement(state.placement),
 	    variation: getVariation(state.placement),
@@ -11649,8 +11668,7 @@
 
 	        state.orderedModifiers = orderedModifiers.filter(function (m) {
 	          return m.enabled;
-	        }); // Validate the provided modifiers so that the consumer will get warned
-
+	        });
 	        runModifierEffects();
 	        return instance.update();
 	      },
@@ -11670,7 +11688,6 @@
 	        // anymore
 
 	        if (!areValidElements(reference, popper)) {
-
 	          return;
 	        } // Store the reference and popper rects to be read by modifiers
 
@@ -11695,7 +11712,6 @@
 	        });
 
 	        for (var index = 0; index < state.orderedModifiers.length; index++) {
-
 	          if (state.reset === true) {
 	            state.reset = false;
 	            index = -1;
@@ -11733,7 +11749,6 @@
 	    };
 
 	    if (!areValidElements(reference, popper)) {
-
 	      return instance;
 	    }
 
@@ -11748,11 +11763,11 @@
 	    // one.
 
 	    function runModifierEffects() {
-	      state.orderedModifiers.forEach(function (_ref3) {
-	        var name = _ref3.name,
-	            _ref3$options = _ref3.options,
-	            options = _ref3$options === void 0 ? {} : _ref3$options,
-	            effect = _ref3.effect;
+	      state.orderedModifiers.forEach(function (_ref) {
+	        var name = _ref.name,
+	            _ref$options = _ref.options,
+	            options = _ref$options === void 0 ? {} : _ref$options,
+	            effect = _ref.effect;
 
 	        if (typeof effect === 'function') {
 	          var cleanupFn = effect({
@@ -14769,7 +14784,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "65bf" ;
+	const NEBULA_VERSION_HASH = "7f71" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15016,7 +15031,7 @@
 	  const appRef = React.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.2" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -18919,6 +18934,13 @@
 	  // item and use the first valid item as a fallback
 	  reactExports.Children.forEach(children, (child, index) => {
 	    if (! /*#__PURE__*/reactExports.isValidElement(child)) {
+	      if (activeItemIndex === index) {
+	        activeItemIndex += 1;
+	        if (activeItemIndex >= children.length) {
+	          // there are no focusable items within the list.
+	          activeItemIndex = -1;
+	        }
+	      }
 	      return;
 	    }
 	    if (!child.props.disabled) {
@@ -18967,7 +18989,8 @@
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 	const _excluded$a = ["onEntering"],
-	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
 	  let offset = 0;
 	  if (typeof vertical === 'number') {
@@ -19029,6 +19052,7 @@
 	  outline: 0
 	});
 	const Popover = /*#__PURE__*/reactExports.forwardRef(function Popover(inProps, ref) {
+	  var _slotProps$paper, _slots$root, _slots$paper;
 	  const props = useThemeProps({
 	    props: inProps,
 	    name: 'MuiPopover'
@@ -19048,7 +19072,9 @@
 	      elevation = 8,
 	      marginThreshold = 16,
 	      open,
-	      PaperProps = {},
+	      PaperProps: PaperPropsProp = {},
+	      slots,
+	      slotProps,
 	      transformOrigin = {
 	        vertical: 'top',
 	        horizontal: 'left'
@@ -19061,14 +19087,15 @@
 	    } = props,
 	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
+	  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
 	  const paperRef = reactExports.useRef();
-	  const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
+	  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
 	  const ownerState = _extends$4({}, props, {
 	    anchorOrigin,
 	    anchorReference,
 	    elevation,
 	    marginThreshold,
-	    PaperProps,
+	    externalPaperSlotProps,
 	    transformOrigin,
 	    TransitionComponent,
 	    transitionDuration: transitionDurationProp,
@@ -19217,16 +19244,46 @@
 	  // If the anchorEl prop is provided, use its parent body element as the container
 	  // If neither are provided let the Modal take care of choosing the container
 	  const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(PopoverRoot, _extends$4({
-	    BackdropProps: {
-	      invisible: true
+	  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
+	  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+	  const paperProps = useSlotProps({
+	    elementType: PaperSlot,
+	    externalSlotProps: _extends$4({}, externalPaperSlotProps, {
+	      style: isPositioned ? externalPaperSlotProps.style : _extends$4({}, externalPaperSlotProps.style, {
+	        opacity: 0
+	      })
+	    }),
+	    additionalProps: {
+	      elevation,
+	      ref: handlePaperRef
 	    },
-	    className: clsx(classes.root, className),
-	    container: container,
-	    open: open,
-	    ref: ref,
-	    ownerState: ownerState
-	  }, other, {
+	    ownerState,
+	    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+	  });
+	  const _useSlotProps = useSlotProps({
+	      elementType: RootSlot,
+	      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+	      externalForwardedProps: other,
+	      additionalProps: {
+	        ref,
+	        slotProps: {
+	          backdrop: {
+	            invisible: true
+	          }
+	        },
+	        container,
+	        open
+	      },
+	      ownerState,
+	      className: clsx(classes.root, className)
+	    }),
+	    {
+	      slotProps: rootSlotPropsProp
+	    } = _useSlotProps,
+	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$4({}, rootProps, !isHostComponent(RootSlot) && {
+	    slotProps: rootSlotPropsProp
+	  }, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$4({
 	      appear: true,
 	      in: open,
@@ -19234,17 +19291,7 @@
 	      onExited: handleExited,
 	      timeout: transitionDuration
 	    }, TransitionProps, {
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PopoverPaper, _extends$4({
-	        elevation: elevation
-	      }, PaperProps, {
-	        ref: handlePaperRef,
-	        className: clsx(classes.paper, PaperProps.className)
-	      }, isPositioned ? undefined : {
-	        style: _extends$4({}, PaperProps.style, {
-	          opacity: 0
-	        })
-	      }, {
-	        ownerState: ownerState,
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PaperSlot, _extends$4({}, paperProps, {
 	        children: children
 	      }))
 	    }))
@@ -22330,6 +22377,21 @@
 	    "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,
@@ -25272,6 +25334,7 @@
 	    checkboxes = checkboxOption,
 	    histogram
 	  } = layout !== null && layout !== void 0 ? layout : {};
+	  const [screenReaderText, setScreenReaderText] = reactExports.useState('');
 	  const loaderRef = reactExports.useRef(null);
 	  const local = reactExports.useRef({
 	    queue: [],
@@ -25299,6 +25362,7 @@
 	    }),
 	    itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
 	  const {
+	    getStoreValue,
 	    setStoreValue
 	  } = useDataStore(model);
 	  const loadMoreItems = reactExports.useCallback(itemsLoader.loadMoreItems, [layout]);
@@ -25429,6 +25493,14 @@
 	    listCount
 	  } = sizes;
 	  setStoreValue('listCount', listCount);
+	  const inputText = getStoreValue('inputText');
+	  reactExports.useEffect(() => {
+	    if (inputText) {
+	      const srText = getScreenReaderSearchText(listCount);
+	      const srFinalText = translator.get(srText, [listCount]);
+	      setScreenReaderText(srFinalText);
+	    }
+	  }, [inputText, listCount]);
 	  const setScrollPosition = position => {
 	    const {
 	      scrollIndex,
@@ -25540,7 +25612,10 @@
 	  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(ScreenReaderForSelections, {
 	    className: "screenReaderOnly",
 	    layout: layout
-	  }), !listCount && cardinal > 0 && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
+	  }), /*#__PURE__*/React.createElement("div", {
+	    className: "screenReaderOnly",
+	    "aria-live": "assertive"
+	  }, screenReaderText), !listCount && cardinal > 0 && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
 	    width: width,
 	    text: "Listbox.NoMatchesForYourTerms"
 	  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
@@ -26249,7 +26324,8 @@
 	  const inputRef = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const {
-	    getStoreValue
+	    getStoreValue,
+	    setStoreValue
 	  } = useDataStore(model);
 	  const isRtl = direction === 'rtl';
 	  const inpuTextAlign = isRtl ? 'right' : 'left';
@@ -26282,6 +26358,9 @@
 	      setWildcardOn(false);
 	    }
 	  }, [wildcardOn, inputRef.current]);
+	  reactExports.useEffect(() => {
+	    setStoreValue('inputText', value);
+	  }, [value]);
 	  const onChange = async e => {
 	    setValue(e.target.value);
 	    if (!e.target.value.length) {
@@ -26416,7 +26495,8 @@
 	      style: {
 	        textAlign: "".concat(inpuTextAlign)
 	      },
-	      'data-testid': 'search-input-field'
+	      'data-testid': 'search-input-field',
+	      'aria-label': translator.get('ScreenReader.SearchFieldLabel')
 	    }
 	  });
 	}