@nebula.js/stardust 4.5.0-alpha.0 → 4.5.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.5.0-alpha.0
+* @nebula.js/stardust v4.5.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -722,26 +722,26 @@
 	  }
 	})(runtime);
 
-	function ownKeys(object, enumerableOnly) {
-	  var keys = Object.keys(object);
+	function ownKeys(e, r) {
+	  var t = Object.keys(e);
 	  if (Object.getOwnPropertySymbols) {
-	    var symbols = Object.getOwnPropertySymbols(object);
-	    enumerableOnly && (symbols = symbols.filter(function (sym) {
-	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-	    })), keys.push.apply(keys, symbols);
-	  }
-	  return keys;
-	}
-	function _objectSpread2(target) {
-	  for (var i = 1; i < arguments.length; i++) {
-	    var source = null != arguments[i] ? arguments[i] : {};
-	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-	      _defineProperty(target, key, source[key]);
-	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+	    var o = Object.getOwnPropertySymbols(e);
+	    r && (o = o.filter(function (r) {
+	      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+	    })), t.push.apply(t, o);
+	  }
+	  return t;
+	}
+	function _objectSpread2(e) {
+	  for (var r = 1; r < arguments.length; r++) {
+	    var t = null != arguments[r] ? arguments[r] : {};
+	    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+	      _defineProperty(e, r, t[r]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+	      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
 	    });
 	  }
-	  return target;
+	  return e;
 	}
 	function _defineProperty(obj, key, value) {
 	  key = _toPropertyKey(key);
@@ -4417,7 +4417,11 @@
 	}
 
 	function isMuiElement(element, muiNames) {
-	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+	  var _muiName, _element$type;
+	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+	  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+	  // eslint-disable-next-line no-underscore-dangle
+	  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
 	}
 
 	function ownerDocument(node) {
@@ -4456,6 +4460,13 @@
 	  }
 	}
 
+	/**
+	 * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+	 * This is useful for effects that are only needed for client-side rendering but not for SSR.
+	 *
+	 * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+	 * and confirm it doesn't apply to your use-case.
+	 */
 	const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
 	var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -4520,7 +4531,8 @@
 	}
 
 	/**
-	 * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * See RFC in https://github.com/reactjs/rfcs/pull/220
 	 */
 
 	function useEventCallback(fn) {
@@ -6940,7 +6952,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.14.6
+	 * @mui/styled-engine v5.14.11
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -7620,10 +7632,20 @@
 	const maxWidth = props => {
 	  if (props.maxWidth !== undefined && props.maxWidth !== null) {
 	    const styleFromPropValue = propValue => {
-	      var _props$theme;
+	      var _props$theme, _props$theme2;
 	      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
+	      if (!breakpoint) {
+	        return {
+	          maxWidth: sizingTransform(propValue)
+	        };
+	      }
+	      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+	        return {
+	          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+	        };
+	      }
 	      return {
-	        maxWidth: breakpoint || sizingTransform(propValue)
+	        maxWidth: breakpoint
 	      };
 	    };
 	    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -11129,6 +11151,12 @@
 	const ButtonGroupContext = /*#__PURE__*/reactExports.createContext({});
 	var ButtonGroupContext$1 = ButtonGroupContext;
 
+	/**
+	 * @ignore - internal component.
+	 */
+	const ButtonGroupButtonContext = /*#__PURE__*/reactExports.createContext(undefined);
+	var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
+
 	const _excluded$C = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 	const useUtilityClasses$q = ownerState => {
 	  const {
@@ -11334,6 +11362,7 @@
 	const Button = /*#__PURE__*/reactExports.forwardRef(function Button(inProps, ref) {
 	  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
 	  const contextProps = reactExports.useContext(ButtonGroupContext$1);
+	  const buttonGroupButtonContextPositionClassName = reactExports.useContext(ButtonGroupButtonContext$1);
 	  const resolvedProps = resolveProps(contextProps, inProps);
 	  const props = useThemeProps({
 	    props: resolvedProps,
@@ -11378,9 +11407,10 @@
 	    ownerState: ownerState,
 	    children: endIconProp
 	  });
+	  const positionClassName = buttonGroupButtonContextPositionClassName || '';
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$5({
 	    ownerState: ownerState,
-	    className: clsx(contextProps.className, classes.root, className),
+	    className: clsx(contextProps.className, classes.root, className, positionClassName),
 	    component: component,
 	    disabled: disabled,
 	    focusRipple: !disableFocusRipple,
@@ -11712,7 +11742,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "d1ff" ;
+	const NEBULA_VERSION_HASH = "7c03" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -11973,7 +12003,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.5.0-alpha.0" );
+	  element.setAttribute('data-nebulajs-version', "4.5.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12934,51 +12964,6 @@
 	      return;
 	    }
 	    const doc = ownerDocument(rootRef.current);
-	    const contain = nativeEvent => {
-	      const {
-	        current: rootElement
-	      } = rootRef;
-
-	      // Cleanup functions are executed lazily in React 17.
-	      // Contain can be called between the component being unmounted and its cleanup function being run.
-	      if (rootElement === null) {
-	        return;
-	      }
-	      if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
-	        ignoreNextEnforceFocus.current = false;
-	        return;
-	      }
-	      if (!rootElement.contains(doc.activeElement)) {
-	        // if the focus event is not coming from inside the children's react tree, reset the refs
-	        if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
-	          reactFocusEventTarget.current = null;
-	        } else if (reactFocusEventTarget.current !== null) {
-	          return;
-	        }
-	        if (!activated.current) {
-	          return;
-	        }
-	        let tabbable = [];
-	        if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
-	          tabbable = getTabbable(rootRef.current);
-	        }
-	        if (tabbable.length > 0) {
-	          var _lastKeydown$current, _lastKeydown$current2;
-	          const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
-	          const focusNext = tabbable[0];
-	          const focusPrevious = tabbable[tabbable.length - 1];
-	          if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
-	            if (isShiftTab) {
-	              focusPrevious.focus();
-	            } else {
-	              focusNext.focus();
-	            }
-	          }
-	        } else {
-	          rootElement.focus();
-	        }
-	      }
-	    };
 	    const loopFocus = nativeEvent => {
 	      lastKeydown.current = nativeEvent;
 	      if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -12996,6 +12981,62 @@
 	        }
 	      }
 	    };
+	    const contain = () => {
+	      const rootElement = rootRef.current;
+
+	      // Cleanup functions are executed lazily in React 17.
+	      // Contain can be called between the component being unmounted and its cleanup function being run.
+	      if (rootElement === null) {
+	        return;
+	      }
+	      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+	        ignoreNextEnforceFocus.current = false;
+	        return;
+	      }
+
+	      // The focus is already inside
+	      if (rootElement.contains(doc.activeElement)) {
+	        return;
+	      }
+
+	      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+	      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+	        return;
+	      }
+
+	      // if the focus event is not coming from inside the children's react tree, reset the refs
+	      if (doc.activeElement !== reactFocusEventTarget.current) {
+	        reactFocusEventTarget.current = null;
+	      } else if (reactFocusEventTarget.current !== null) {
+	        return;
+	      }
+	      if (!activated.current) {
+	        return;
+	      }
+	      let tabbable = [];
+	      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+	        tabbable = getTabbable(rootRef.current);
+	      }
+
+	      // one of the sentinel nodes was focused, so move the focus
+	      // to the first/last tabbable element inside the focus trap
+	      if (tabbable.length > 0) {
+	        var _lastKeydown$current, _lastKeydown$current2;
+	        const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+	        const focusNext = tabbable[0];
+	        const focusPrevious = tabbable[tabbable.length - 1];
+	        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+	          if (isShiftTab) {
+	            focusPrevious.focus();
+	          } else {
+	            focusNext.focus();
+	          }
+	        }
+	        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+	      } else {
+	        rootElement.focus();
+	      }
+	    };
 	    doc.addEventListener('focusin', contain);
 	    doc.addEventListener('keydown', loopFocus, true);
 
@@ -13007,7 +13048,7 @@
 	    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
 	    const interval = setInterval(() => {
 	      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
-	        contain(null);
+	        contain();
 	      }
 	    }, 50);
 	    return () => {
@@ -15448,7 +15489,7 @@
 	  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
 	  const createHandleKeyDown = otherHandlers => event => {
 	    var _otherHandlers$onKeyD;
-	    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+	    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
 
 	    // The handler doesn't take event.defaultPrevented into account:
 	    //
@@ -15469,7 +15510,7 @@
 	  };
 	  const createHandleBackdropClick = otherHandlers => event => {
 	    var _otherHandlers$onClic;
-	    (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+	    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
 	    if (event.target !== event.currentTarget) {
 	      return;
 	    }
@@ -15517,8 +15558,8 @@
 	      }
 	    };
 	    return {
-	      onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-	      onExited: createChainedFunction(handleExited, children.props.onExited)
+	      onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+	      onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
 	    };
 	  };
 	  return {
@@ -15656,53 +15697,51 @@
 	    if (isEmpty$1(newState)) {
 	      return;
 	    }
-	    setState(prevState => {
-	      return updateState(prevState, newState);
-	    });
+	    setState(prevState => updateState(prevState, newState));
 	  }, [getUpdatedState]);
-	  const syncHeightWithFlushSync = () => {
-	    const newState = getUpdatedState();
-	    if (isEmpty$1(newState)) {
-	      return;
-	    }
+	  useEnhancedEffect$1(() => {
+	    const syncHeightWithFlushSync = () => {
+	      const newState = getUpdatedState();
+	      if (isEmpty$1(newState)) {
+	        return;
+	      }
 
-	    // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-	    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-	    // Related issue - https://github.com/facebook/react/issues/24331
-	    reactDomExports.flushSync(() => {
-	      setState(prevState => {
-	        return updateState(prevState, newState);
+	      // In React 18, state updates in a ResizeObserver's callback are happening after
+	      // the paint, this leads to an infinite rendering.
+	      //
+	      // Using flushSync ensures that the states is updated before the next pain.
+	      // Related issue - https://github.com/facebook/react/issues/24331
+	      reactDomExports.flushSync(() => {
+	        setState(prevState => updateState(prevState, newState));
 	      });
-	    });
-	  };
-	  reactExports.useEffect(() => {
-	    const handleResize = debounce$1(() => {
+	    };
+	    const handleResize = () => {
 	      renders.current = 0;
-
-	      // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-	      // ResizeObserver's handler that runs because of the change in the layout is trying to
-	      // access a dom node that is no longer there (as the fallback component is being shown instead).
-	      // See https://github.com/mui/material-ui/issues/32640
-	      if (inputRef.current) {
-	        syncHeightWithFlushSync();
-	      }
-	    });
-	    let resizeObserver;
+	      syncHeightWithFlushSync();
+	    };
+	    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+	    // in test.
+	    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+	    // Also see https://github.com/mui/mui-x/issues/8733
+	    let rAF;
+	    const debounceHandleResize = debounce$1(handleResize);
 	    const input = inputRef.current;
 	    const containerWindow = ownerWindow(input);
-	    containerWindow.addEventListener('resize', handleResize);
+	    containerWindow.addEventListener('resize', debounceHandleResize);
+	    let resizeObserver;
 	    if (typeof ResizeObserver !== 'undefined') {
 	      resizeObserver = new ResizeObserver(handleResize);
 	      resizeObserver.observe(input);
 	    }
 	    return () => {
-	      handleResize.clear();
-	      containerWindow.removeEventListener('resize', handleResize);
+	      debounceHandleResize.clear();
+	      cancelAnimationFrame(rAF);
+	      containerWindow.removeEventListener('resize', debounceHandleResize);
 	      if (resizeObserver) {
 	        resizeObserver.disconnect();
 	      }
 	    };
-	  });
+	  }, [getUpdatedState]);
 	  useEnhancedEffect$1(() => {
 	    syncHeight();
 	  });
@@ -15907,7 +15946,7 @@
 	    type
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${capitalize(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
 	    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
 	  };
 	  return composeClasses(slots, getInputBaseUtilityClass, classes);
@@ -17227,7 +17266,7 @@
 	}
 	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 	const useUtilityClasses$e = ownerState => {
 	  const {
 	    open,
@@ -19243,7 +19282,7 @@
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 	const _excluded$a = ["onEntering"],
-	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
 	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
 	  let offset = 0;
@@ -19337,7 +19376,8 @@
 	      transitionDuration: transitionDurationProp = 'auto',
 	      TransitionProps: {
 	        onEntering
-	      } = {}
+	      } = {},
+	      disableScrollLock = false
 	    } = props,
 	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
@@ -19414,18 +19454,18 @@
 	    const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
 	    // Check if the vertical axis needs shifting
-	    if (top < marginThreshold) {
+	    if (marginThreshold !== null && top < marginThreshold) {
 	      const diff = top - marginThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
-	    } else if (bottom > heightThreshold) {
+	    } else if (marginThreshold !== null && bottom > heightThreshold) {
 	      const diff = bottom - heightThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
 	    }
 
 	    // Check if the horizontal axis needs shifting
-	    if (left < marginThreshold) {
+	    if (marginThreshold !== null && left < marginThreshold) {
 	      const diff = left - marginThreshold;
 	      left -= diff;
 	      elemTransformOrigin.horizontal += diff;
@@ -19456,6 +19496,12 @@
 	    element.style.transformOrigin = positioning.transformOrigin;
 	    setIsPositioned(true);
 	  }, [getPositioningStyle]);
+	  reactExports.useEffect(() => {
+	    if (disableScrollLock) {
+	      window.addEventListener('scroll', setPositioningStyles);
+	    }
+	    return () => window.removeEventListener('scroll', setPositioningStyles);
+	  }, [anchorEl, disableScrollLock, setPositioningStyles]);
 	  const handleEntering = (element, isAppearing) => {
 	    if (onEntering) {
 	      onEntering(element, isAppearing);
@@ -19536,7 +19582,8 @@
 	    } = _useSlotProps,
 	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$5({}, rootProps, !isHostComponent(RootSlot) && {
-	    slotProps: rootSlotPropsProp
+	    slotProps: rootSlotPropsProp,
+	    disableScrollLock
 	  }, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
 	      appear: true,
@@ -20064,17 +20111,18 @@
 	function getRadioUtilityClass(slot) {
 	  return generateUtilityClass('MuiRadio', slot);
 	}
-	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
+	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 	var radioClasses$1 = radioClasses;
 
 	const _excluded$6 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
 	  const {
 	    classes,
-	    color
+	    color,
+	    size
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`]
+	    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
 	  };
 	  return _extends$5({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 	};
@@ -21850,6 +21898,9 @@
 	const barPadPx = 4;
 	const barBorderWidthPx = 1;
 	const barWithCheckboxLeftPadPx = 29;
+	const GRID_ROW_HEIGHT = 32;
+	const LIST_ROW_HEIGHT = 29;
+	const DENSE_ROW_HEIGHT = 20; // same for both list and grid in dense mode
 
 	const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 	const getBarWidth = _ref => {
@@ -22691,13 +22742,13 @@
 	const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
 	const focusSearch = container => {
 	  const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
-	  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+	  searchField === null || searchField === void 0 || searchField.focus();
 	  return searchField;
 	};
 	const focusRow = container => {
 	  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
-	  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
-	  row === null || row === void 0 ? void 0 : row.focus();
+	  row === null || row === void 0 || row.setAttribute('tabIndex', 0);
+	  row === null || row === void 0 || row.focus();
 	  return row;
 	};
 
@@ -22879,18 +22930,18 @@
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowStart');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('start');
 	        break;
 	      case KEYS.END:
 	        focusListItems.setLast(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowEnd');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('end');
 	        break;
 	      case KEYS.A:
 	        if (ctrlKey || metaKey) {
@@ -25071,9 +25122,8 @@
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
 	  const itemPadding = 4;
-	  const denseItemHeight = 20;
-	  const normalItemHeight = isGridMode ? 32 : 29;
-	  let itemHeight = dense ? denseItemHeight : normalItemHeight;
+	  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
+	  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
 	  if (isGridMode) {
 	    // Emulate a margin between items using padding, since the list library
 	    // needs an explicit row height and cannot handle margins.
@@ -25651,7 +25701,7 @@
 	  const cardinal = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qCardinal;
 	  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages.length && !awaitingFrequencyMax || cardinal === 0) {
 	    // All necessary data fetching done - signal rendering done!
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -26404,7 +26454,7 @@
 	    actionsRefMock = null,
 	    // for testing
 	    direction = 'ltr',
-	    autoConfirm
+	    autoConfirm = false
 	  } = _ref3;
 	  const defaultSelectionActions = useDefaultSelectionActions(selections);
 	  const {
@@ -26451,14 +26501,7 @@
 	    focusHandler.on('focus_toolbar_last', focusLast);
 	  }, []);
 	  if (autoConfirm) {
-	    const canConfirm = selections.show;
-	    if (canConfirm) {
-	      const confirm = defaultSelectionActions.find(o => o.key === 'confirm') || {
-	        action: () => {}
-	      };
-	      confirm.action();
-	    }
-	    return null;
+	    return undefined;
 	  }
 	  let moreEnabled = more$1.enabled;
 	  let moreActions = more$1.actions;
@@ -26535,13 +26578,15 @@
 	    transformOrigin: popoverTransformOrigin,
 	    hideBackdrop: true,
 	    style: popoverStyle,
-	    PaperProps: {
-	      id: 'njs-action-toolbar-popover',
-	      'data-testid': 'njs-action-toolbar-popover',
-	      className: ActionToolbarElement.className,
-	      style: {
-	        pointerEvents: 'auto',
-	        padding: theme.spacing(0.5, 0.25)
+	    slotProps: {
+	      paper: {
+	        id: 'njs-action-toolbar-popover',
+	        'data-testid': 'njs-action-toolbar-popover',
+	        className: ActionToolbarElement.className,
+	        style: {
+	          pointerEvents: 'auto',
+	          padding: theme.spacing(0.5, 0.25)
+	        }
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -26672,7 +26717,7 @@
 	  function focusRow(container) {
 	    const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
 	    row.setAttribute('tabIndex', 0);
-	    row === null || row === void 0 ? void 0 : row.focus();
+	    row === null || row === void 0 || row.focus();
 	  }
 	  const onKeyDown = async e => {
 	    const {
@@ -26698,7 +26743,7 @@
 	            focusRow(container);
 
 	            // Clean up.
-	            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	            container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	              elm.classList.remove('last-focused');
 	            });
 	          }
@@ -27007,12 +27052,12 @@
 	    activateClickOut() {
 	      var _options$onSelectionA;
 	      document.addEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
+	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 || _options$onSelectionA.call(options);
 	    },
 	    deactivateClickOut() {
 	      var _options$onSelectionD;
 	      document.removeEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
+	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 || _options$onSelectionD.call(options);
 	    }
 	  };
 	};
@@ -27137,7 +27182,7 @@
 	      if (selected && !additive) {
 	        state.itemStates[elementNumber] = false;
 	      } else if (!selected) {
-	        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+	        selectedValues === null || selectedValues === void 0 || selectedValues.push(elementNumber);
 	        state.itemStates[elementNumber] = true;
 	      }
 	    },
@@ -27277,7 +27322,7 @@
 	  });
 	  const onCtrlF = () => {
 	    const input = searchContainerRef.current.querySelector('input');
-	    input === null || input === void 0 ? void 0 : input.focus();
+	    input === null || input === void 0 || input.focus();
 	  };
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
@@ -28530,12 +28575,12 @@
 	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
 
 	function removeInnnerTabStops(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
 	    elm.setAttribute('tabIndex', -1);
 	  });
 	}
 	function removeLastFocused(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	    elm.classList.remove('last-focused');
 	  });
 	}
@@ -28583,13 +28628,13 @@
 	      const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
 	      const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
 	      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
 	    },
 	    focusSelection() {
 	      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+	      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
+	      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
 	    }
 	  };
 	  return keyboard;
@@ -28631,7 +28676,7 @@
 	      keyboard.blur();
 	      const c = currentTarget.closest('.listbox-container');
 	      c.setAttribute('tabIndex', -1);
-	      c === null || c === void 0 ? void 0 : c.focus();
+	      c === null || c === void 0 || c.focus();
 	    }
 	  };
 	  const handleKeyDown = event => {
@@ -28794,11 +28839,9 @@
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
-	    autoConfirm
+	    keyboard
 	  } = _ref;
 	  return {
-	    autoConfirm,
 	    show: showToolbar && !isDetached,
 	    popover: {
 	      show: showToolbar && isDetached,
@@ -28819,10 +28862,10 @@
 	      show: showToolbar,
 	      api: selections,
 	      onConfirm: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      },
 	      onCancel: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      }
 	    }
 	  };
@@ -29104,10 +29147,6 @@
 	  const showSearchToggle = search === 'toggle' && showSearch;
 	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
 	  const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-	  const searchHeight = dense ? 27 : 40;
-	  const extraheight = dense ? 39 : 49;
-	  const searchAddHeight = searchVisible ? searchHeight : 0;
-	  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
 	  const headerHeight = 32;
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
@@ -29118,17 +29157,18 @@
 	      onShowSearch();
 	    } else {
 	      const input = searchContainer.current.querySelector('input');
-	      input === null || input === void 0 ? void 0 : input.focus();
+	      input === null || input === void 0 || input.focus();
 	    }
 	  };
-	  const getActionToolbarProps = isDetached => getListboxActionProps({
+	  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
 	    isDetached: isPopover ? false : isDetached,
 	    showToolbar,
 	    containerRef,
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
+	    keyboard
+	  })), {}, {
 	    autoConfirm
 	  });
 	  const shouldAutoFocus = searchVisible && search === 'toggle';
@@ -29176,7 +29216,7 @@
 	    }
 	  }));
 	  if (isInvalid) {
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
 	    direction: direction
@@ -29189,7 +29229,6 @@
 	    containerPadding: containerPadding,
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px"),
 	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown,
@@ -29244,7 +29283,7 @@
 	    direction: "column",
 	    style: {
 	      height: '100%',
-	      minHeight: '50px'
+	      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -29459,7 +29498,7 @@
 	   */
 	  wildCardSearch: false,
 	  /**
-	   * Automatically confirm selections without showing the selections toolbar.
+	   * Automatically confirm selections when clicking outside a listbox, without showing the selections toolbar.
 	   * @type {boolean=}
 	   * @default
 	   */