@nebula.js/stardust 2.7.0 → 2.8.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.7.0
+* @nebula.js/stardust v2.8.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -11064,7 +11064,7 @@
     return [appSelections, navState];
   }
 
-  const NEBULA_VERSION_HASH = "b1d7" ;
+  const NEBULA_VERSION_HASH = "0577" ;
   let counter = 0;
   const NebulaApp = react.exports.forwardRef((_ref, ref) => {
     let {
@@ -11124,7 +11124,7 @@
     const appRef = React.createRef();
     const element = document.createElement('div');
     element.style.display = 'none';
-    element.setAttribute('data-nebulajs-version', "2.7.0" );
+    element.setAttribute('data-nebulajs-version', "2.8.0" );
     element.setAttribute('data-app-id', app.id);
     document.body.appendChild(element);
     ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -11223,7 +11223,7 @@
     }, function () {});
   }
 
-  var styles$r = function styles(theme) {
+  var styles$t = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -11307,7 +11307,7 @@
     }, other), children, titleAccess ? /*#__PURE__*/react.exports.createElement("title", null, titleAccess) : null);
   });
   SvgIcon$1.muiName = 'SvgIcon';
-  var SvgIcon$2 = withStyles(styles$r, {
+  var SvgIcon$2 = withStyles(styles$t, {
     name: 'MuiSvgIcon'
   })(SvgIcon$1);
 
@@ -12373,7 +12373,7 @@
     };
   }
 
-  var styles$q = function styles(theme) {
+  var styles$s = function styles(theme) {
     var elevations = {};
     theme.shadows.forEach(function (shadow, index) {
       elevations["elevation".concat(index)] = {
@@ -12417,7 +12417,7 @@
       ref: ref
     }, other));
   });
-  var Paper$1 = withStyles(styles$q, {
+  var Paper$1 = withStyles(styles$s, {
     name: 'MuiPaper'
   })(Paper);
 
@@ -12493,7 +12493,7 @@
 
   var DURATION = 550;
   var DELAY_RIPPLE = 80;
-  var styles$p = function styles(theme) {
+  var styles$r = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -12773,12 +12773,12 @@
       exit: true
     }, ripples));
   });
-  var TouchRipple$1 = withStyles(styles$p, {
+  var TouchRipple$1 = withStyles(styles$r, {
     flip: false,
     name: 'MuiTouchRipple'
   })( /*#__PURE__*/react.exports.memo(TouchRipple));
 
-  var styles$o = {
+  var styles$q = {
     /* Styles applied to the root element. */
     root: {
       display: 'inline-flex',
@@ -13082,11 +13082,11 @@
       center: centerRipple
     }, TouchRippleProps)) : null);
   });
-  var ButtonBase$1 = withStyles(styles$o, {
+  var ButtonBase$1 = withStyles(styles$q, {
     name: 'MuiButtonBase'
   })(ButtonBase);
 
-  var styles$n = function styles(theme) {
+  var styles$p = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13211,13 +13211,13 @@
       className: classes.label
     }, children));
   });
-  var IconButton$1 = withStyles(styles$n, {
+  var IconButton$1 = withStyles(styles$p, {
     name: 'MuiIconButton'
   })(IconButton);
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var styles$m = function styles(theme) {
+  var styles$o = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13509,7 +13509,7 @@
       className: clsx(classes.badge, classes["".concat(anchorOrigin.horizontal).concat(capitalize(anchorOrigin.vertical), "}")], classes["anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))], color !== 'default' && classes["color".concat(capitalize(color))], invisible && classes.invisible, variant === 'dot' && classes.dot)
     }, displayValue));
   });
-  var Badge$1 = withStyles(styles$m, {
+  var Badge$1 = withStyles(styles$o, {
     name: 'MuiBadge'
   })(Badge);
 
@@ -13523,7 +13523,7 @@
   });
   var Box$1 = Box;
 
-  var styles$l = function styles(theme) {
+  var styles$n = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13695,11 +13695,11 @@
       ref: ref
     }, other));
   });
-  var Typography$1 = withStyles(styles$l, {
+  var Typography$1 = withStyles(styles$n, {
     name: 'MuiTypography'
   })(Typography);
 
-  var styles$k = function styles(theme) {
+  var styles$m = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: _extends$4({}, theme.typography.button, {
@@ -14024,7 +14024,7 @@
       className: classes.label
     }, startIcon, children, endIcon));
   });
-  var Button$1 = withStyles(styles$k, {
+  var Button$1 = withStyles(styles$m, {
     name: 'MuiButton'
   })(Button);
 
@@ -14043,7 +14043,7 @@
     return react.exports.useContext(FormControlContext$1);
   }
 
-  var styles$j = {
+  var styles$l = {
     root: {
       padding: 9
     },
@@ -14166,7 +14166,7 @@
       value: value
     }, inputProps)), checked ? checkedIcon : icon);
   }); // NB: If changed, please update Checkbox, Switch and Radio
-  var SwitchBase$1 = withStyles(styles$j, {
+  var SwitchBase$1 = withStyles(styles$l, {
     name: 'PrivateSwitchBase'
   })(SwitchBase);
 
@@ -14194,7 +14194,7 @@
     d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
   }));
 
-  var styles$i = function styles(theme) {
+  var styles$k = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -14245,17 +14245,17 @@
       }
     };
   };
-  var defaultCheckedIcon = /*#__PURE__*/react.exports.createElement(CheckBoxIcon, null);
-  var defaultIcon = /*#__PURE__*/react.exports.createElement(CheckBoxOutlineBlankIcon, null);
+  var defaultCheckedIcon$1 = /*#__PURE__*/react.exports.createElement(CheckBoxIcon, null);
+  var defaultIcon$1 = /*#__PURE__*/react.exports.createElement(CheckBoxOutlineBlankIcon, null);
   var defaultIndeterminateIcon = /*#__PURE__*/react.exports.createElement(IndeterminateCheckBoxIcon, null);
   var Checkbox = /*#__PURE__*/react.exports.forwardRef(function Checkbox(props, ref) {
     var _props$checkedIcon = props.checkedIcon,
-        checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,
+        checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon$1 : _props$checkedIcon,
         classes = props.classes,
         _props$color = props.color,
         color = _props$color === void 0 ? 'secondary' : _props$color,
         _props$icon = props.icon,
-        iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,
+        iconProp = _props$icon === void 0 ? defaultIcon$1 : _props$icon,
         _props$indeterminate = props.indeterminate,
         indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
         _props$indeterminateI = props.indeterminateIcon,
@@ -14287,12 +14287,12 @@
       ref: ref
     }, other));
   });
-  var Checkbox$1 = withStyles(styles$i, {
+  var Checkbox$1 = withStyles(styles$k, {
     name: 'MuiCheckbox'
   })(Checkbox);
 
   var SIZE = 44;
-  var styles$h = function styles(theme) {
+  var styles$j = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -14452,7 +14452,7 @@
       strokeWidth: thickness
     })));
   });
-  var CircularProgress$1 = withStyles(styles$h, {
+  var CircularProgress$1 = withStyles(styles$j, {
     name: 'MuiCircularProgress',
     flip: false
   })(CircularProgress);
@@ -14937,7 +14937,7 @@
     }));
   }
 
-  var styles$g = {
+  var styles$i = {
     /* Styles applied to the root element. */
     root: {
       zIndex: -1,
@@ -14969,7 +14969,7 @@
       "aria-hidden": true,
       ref: ref
     }, other, {
-      style: _extends$4({}, styles$g.root, invisible ? styles$g.invisible : {}, other.style)
+      style: _extends$4({}, styles$i.root, invisible ? styles$i.invisible : {}, other.style)
     })) : null;
   });
   var SimpleBackdrop$1 = SimpleBackdrop;
@@ -14986,7 +14986,7 @@
 
 
   var defaultManager = new ModalManager();
-  var styles$f = function styles(theme) {
+  var styles$h = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -15187,7 +15187,7 @@
       }
     };
 
-    var inlineStyle = styles$f(theme || {
+    var inlineStyle = styles$h(theme || {
       zIndex: zIndex$1
     });
     var childProps = {};
@@ -15226,7 +15226,7 @@
   });
   var Modal$1 = Modal;
 
-  var styles$e = function styles(theme) {
+  var styles$g = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -15300,7 +15300,7 @@
       ref: ref
     }, other));
   });
-  var Divider$1 = withStyles(styles$e, {
+  var Divider$1 = withStyles(styles$g, {
     name: 'MuiDivider'
   })(Divider);
 
@@ -15326,7 +15326,7 @@
   }
 
   var useEnhancedEffect$3 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
-  var styles$d = {
+  var styles$f = {
     /* Styles applied to the shadow textarea element. */
     shadow: {
       // Visibility needed to hide the extra text area on iPads
@@ -15468,7 +15468,7 @@
       readOnly: true,
       ref: shadowRef,
       tabIndex: -1,
-      style: _extends$4({}, styles$d.shadow, style)
+      style: _extends$4({}, styles$f.shadow, style)
     }));
   });
   var TextareaAutosize$1 = TextareaAutosize;
@@ -15494,7 +15494,7 @@
     return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
   } // Determine if an Input is adorned on start.
 
-  var styles$c = function styles(theme) {
+  var styles$e = function styles(theme) {
     var light = theme.palette.type === 'light';
     var placeholder = {
       color: 'currentColor',
@@ -15926,11 +15926,11 @@
       startAdornment: startAdornment
     })) : null);
   });
-  var InputBase$1 = withStyles(styles$c, {
+  var InputBase$1 = withStyles(styles$e, {
     name: 'MuiInputBase'
   })(InputBase);
 
-  var styles$b = function styles(theme) {
+  var styles$d = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -16026,7 +16026,7 @@
       className: clsx(classes.label, disabled && classes.disabled)
     }, label));
   });
-  var FormControlLabel$1 = withStyles(styles$b, {
+  var FormControlLabel$1 = withStyles(styles$d, {
     name: 'MuiFormControlLabel'
   })(FormControlLabel);
 
@@ -16107,7 +16107,7 @@
   // justifyContent: 'flex-start',
 
 
-  var styles$a = function styles(theme) {
+  var styles$c = function styles(theme) {
     return _extends$4({
       /* Styles applied to the root element. */
       root: {},
@@ -16274,7 +16274,7 @@
       ref: ref
     }, other));
   });
-  var StyledGrid = withStyles(styles$a, {
+  var StyledGrid = withStyles(styles$c, {
     name: 'MuiGrid'
   })(Grid);
 
@@ -16284,7 +16284,7 @@
     return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
   }
 
-  var styles$9 = {
+  var styles$b = {
     entering: {
       opacity: 1,
       transform: getScale(1)
@@ -16446,7 +16446,7 @@
           opacity: 0,
           transform: getScale(0.75),
           visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles$9[state], style, children.props.style),
+        }, styles$b[state], style, children.props.style),
         ref: handleRef
       }, childProps));
     });
@@ -16454,7 +16454,7 @@
   Grow.muiSupportAuto = true;
   var Grow$1 = Grow;
 
-  var styles$8 = function styles(theme) {
+  var styles$a = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -16527,11 +16527,11 @@
     }, other));
   });
   Icon.muiName = 'Icon';
-  var Icon$1 = withStyles(styles$8, {
+  var Icon$1 = withStyles(styles$a, {
     name: 'MuiIcon'
   })(Icon);
 
-  var styles$7 = {
+  var styles$9 = {
     /* Styles applied to the root element. */
     root: {
       display: 'flex',
@@ -16602,7 +16602,7 @@
       color: "textSecondary"
     }, children) : children));
   });
-  var InputAdornment$1 = withStyles(styles$7, {
+  var InputAdornment$1 = withStyles(styles$9, {
     name: 'MuiInputAdornment'
   })(InputAdornment);
 
@@ -16614,7 +16614,7 @@
 
   var ListContext$1 = ListContext;
 
-  var styles$6 = {
+  var styles$8 = {
     /* Styles applied to the root element. */
     root: {
       listStyle: 'none',
@@ -16662,11 +16662,11 @@
       ref: ref
     }, other), subheader, children));
   });
-  var List$1 = withStyles(styles$6, {
+  var List$1 = withStyles(styles$8, {
     name: 'MuiList'
   })(List);
 
-  var styles$5 = function styles(theme) {
+  var styles$7 = function styles(theme) {
     return {
       /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
       root: {
@@ -16847,11 +16847,11 @@
       ref: handleRef
     }, componentProps), children));
   });
-  var ListItem$1 = withStyles(styles$5, {
+  var ListItem$1 = withStyles(styles$7, {
     name: 'MuiListItem'
   })(ListItem);
 
-  var styles$4 = function styles(theme) {
+  var styles$6 = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -16882,7 +16882,7 @@
       ref: ref
     }, other));
   });
-  var ListItemIcon$1 = withStyles(styles$4, {
+  var ListItemIcon$1 = withStyles(styles$6, {
     name: 'MuiListItemIcon'
   })(ListItemIcon);
 
@@ -16936,7 +16936,7 @@
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
 
-  var styles$3 = {
+  var styles$5 = {
     /* Styles applied to the root element. */
     root: {},
 
@@ -17196,7 +17196,7 @@
       className: clsx(classes.paper, PaperProps.className)
     }), children)));
   });
-  var Popover$1 = withStyles(styles$3, {
+  var Popover$1 = withStyles(styles$5, {
     name: 'MuiPopover'
   })(Popover);
 
@@ -17443,7 +17443,7 @@
   });
   var MenuList$1 = MenuList;
 
-  var styles$2 = function styles(theme) {
+  var styles$4 = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: _extends$4({}, theme.typography.body1, _defineProperty$1({
@@ -17505,11 +17505,11 @@
       ref: ref
     }, other));
   });
-  var MenuItem$1 = withStyles(styles$2, {
+  var MenuItem$1 = withStyles(styles$4, {
     name: 'MuiMenuItem'
   })(MenuItem);
 
-  var styles$1 = function styles(theme) {
+  var styles$3 = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -17624,11 +17624,11 @@
       }
     })));
   });
-  var NotchedOutline$1 = withStyles(styles$1, {
+  var NotchedOutline$1 = withStyles(styles$3, {
     name: 'PrivateNotchedOutline'
   })(NotchedOutline);
 
-  var styles = function styles(theme) {
+  var styles$2 = function styles(theme) {
     var borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
     return {
       /* Styles applied to the root element. */
@@ -17769,10 +17769,186 @@
     }, other));
   });
   OutlinedInput.muiName = 'Input';
-  var OutlinedInput$1 = withStyles(styles, {
+  var OutlinedInput$1 = withStyles(styles$2, {
     name: 'MuiOutlinedInput'
   })(OutlinedInput);
 
+  /**
+   * @ignore - internal component.
+   */
+
+  var RadioButtonUncheckedIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+
+  /**
+   * @ignore - internal component.
+   */
+
+  var RadioButtonCheckedIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
+    d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+  }));
+
+  var styles$1 = function styles(theme) {
+    return {
+      root: {
+        position: 'relative',
+        display: 'flex',
+        '&$checked $layer': {
+          transform: 'scale(1)',
+          transition: theme.transitions.create('transform', {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.shortest
+          })
+        }
+      },
+      layer: {
+        left: 0,
+        position: 'absolute',
+        transform: 'scale(0)',
+        transition: theme.transitions.create('transform', {
+          easing: theme.transitions.easing.easeIn,
+          duration: theme.transitions.duration.shortest
+        })
+      },
+      checked: {}
+    };
+  };
+  /**
+   * @ignore - internal component.
+   */
+
+  function RadioButtonIcon(props) {
+    var checked = props.checked,
+        classes = props.classes,
+        fontSize = props.fontSize;
+    return /*#__PURE__*/react.exports.createElement("div", {
+      className: clsx(classes.root, checked && classes.checked)
+    }, /*#__PURE__*/react.exports.createElement(RadioButtonUncheckedIcon, {
+      fontSize: fontSize
+    }), /*#__PURE__*/react.exports.createElement(RadioButtonCheckedIcon, {
+      fontSize: fontSize,
+      className: classes.layer
+    }));
+  }
+  var RadioButtonIcon$1 = withStyles(styles$1, {
+    name: 'PrivateRadioButtonIcon'
+  })(RadioButtonIcon);
+
+  /**
+   * @ignore - internal component.
+   */
+
+  var RadioGroupContext = react.exports.createContext();
+
+  var RadioGroupContext$1 = RadioGroupContext;
+
+  function useRadioGroup() {
+    return react.exports.useContext(RadioGroupContext$1);
+  }
+
+  var styles = function styles(theme) {
+    return {
+      /* Styles applied to the root element. */
+      root: {
+        color: theme.palette.text.secondary
+      },
+
+      /* Pseudo-class applied to the root element if `checked={true}`. */
+      checked: {},
+
+      /* Pseudo-class applied to the root element if `disabled={true}`. */
+      disabled: {},
+
+      /* Styles applied to the root element if `color="primary"`. */
+      colorPrimary: {
+        '&$checked': {
+          color: theme.palette.primary.main,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        '&$disabled': {
+          color: theme.palette.action.disabled
+        }
+      },
+
+      /* Styles applied to the root element if `color="secondary"`. */
+      colorSecondary: {
+        '&$checked': {
+          color: theme.palette.secondary.main,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        '&$disabled': {
+          color: theme.palette.action.disabled
+        }
+      }
+    };
+  };
+  var defaultCheckedIcon = /*#__PURE__*/react.exports.createElement(RadioButtonIcon$1, {
+    checked: true
+  });
+  var defaultIcon = /*#__PURE__*/react.exports.createElement(RadioButtonIcon$1, null);
+  var Radio = /*#__PURE__*/react.exports.forwardRef(function Radio(props, ref) {
+    var checkedProp = props.checked,
+        classes = props.classes,
+        _props$color = props.color,
+        color = _props$color === void 0 ? 'secondary' : _props$color,
+        nameProp = props.name,
+        onChangeProp = props.onChange,
+        _props$size = props.size,
+        size = _props$size === void 0 ? 'medium' : _props$size,
+        other = _objectWithoutProperties(props, ["checked", "classes", "color", "name", "onChange", "size"]);
+
+    var radioGroup = useRadioGroup();
+    var checked = checkedProp;
+    var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
+    var name = nameProp;
+
+    if (radioGroup) {
+      if (typeof checked === 'undefined') {
+        checked = radioGroup.value === props.value;
+      }
+
+      if (typeof name === 'undefined') {
+        name = radioGroup.name;
+      }
+    }
+
+    return /*#__PURE__*/react.exports.createElement(SwitchBase$1, _extends$4({
+      color: color,
+      type: "radio",
+      icon: /*#__PURE__*/react.exports.cloneElement(defaultIcon, {
+        fontSize: size === 'small' ? 'small' : 'medium'
+      }),
+      checkedIcon: /*#__PURE__*/react.exports.cloneElement(defaultCheckedIcon, {
+        fontSize: size === 'small' ? 'small' : 'medium'
+      }),
+      classes: {
+        root: clsx(classes.root, classes["color".concat(capitalize(color))]),
+        checked: classes.checked,
+        disabled: classes.disabled
+      },
+      name: name,
+      checked: checked,
+      onChange: onChange,
+      ref: ref
+    }, other));
+  });
+  var Radio$1 = withStyles(styles, {
+    name: 'MuiRadio'
+  })(Radio);
+
   function useRect$1() {
     const [node, setNode] = react.exports.useState();
     const [rect, setRect] = react.exports.useState();
@@ -18883,13 +19059,22 @@
     return flatten(elementNbrs);
   }
   function applySelectionsOnPages(pages, elmNumbers) {
+    let clearAllButElmNumbers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
     const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';
 
     const matrices = pages.map(page => {
       const qMatrix = page.qMatrix.map(p => {
         const [p0] = p;
         const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
-        const qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
+        let qState;
+
+        if (clearAllButElmNumbers) {
+          qState = selectionMatchesElement ? 'S' : 'A';
+        } else {
+          qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
+        }
+
         return [_objectSpread2(_objectSpread2({}, p0), {}, {
           qState
         }), p.slice(1)];
@@ -18992,7 +19177,8 @@
       rangeSelect = true,
       checkboxes = false,
       selectDisabled,
-      doc = document
+      doc = document,
+      isSingleSelect = false
     } = _ref;
     const [instantPages, setInstantPages] = react.exports.useState(pages);
     const [mouseDown, setMouseDown] = react.exports.useState(false);
@@ -19000,10 +19186,7 @@
     const [selected, setSelected] = react.exports.useState([]);
     const [isRangeSelection, setIsRangeSelection] = react.exports.useState(false);
     const [preSelected, setPreSelected] = react.exports.useState([]);
-    const elemNumbersOrdered = getElemNumbersFromPages(pages);
-
-    const getIsSingleSelect = () => !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne); // Select values for real, by calling the backend.
-
+    const elemNumbersOrdered = getElemNumbersFromPages(pages); // Select values for real, by calling the backend.
 
     const select = async function () {
       let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -19014,7 +19197,6 @@
       }
 
       setSelectingValues(true);
-      const isSingleSelect = getIsSingleSelect();
       const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
       await selectValues({
         selections,
@@ -19043,6 +19225,8 @@
     const selectManually = function () {
       let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      setIsRangeSelection(false); // range is not supported for manual select
+
       setMouseDown(true);
       preSelect(elementIds, additive || isRangeSelection);
       const p = select(elementIds, additive || isRangeSelection);
@@ -19071,7 +19255,7 @@
     const onMouseUp = react.exports.useCallback(event => {
       const elemNumber = +event.currentTarget.getAttribute('data-n');
 
-      if (getIsSingleSelect() || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
+      if (isSingleSelect || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
       ) {
         return;
       }
@@ -19082,9 +19266,10 @@
       // Ensure we end interactions when mouseup happens outside the Listbox.
       setMouseDown(false);
       setSelectingValues(false);
+      setIsRangeSelection(false);
     }, []);
     const onMouseEnter = react.exports.useCallback(event => {
-      if (getIsSingleSelect() || !mouseDown || selectingValues || selectDisabled()) {
+      if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
         return;
       }
 
@@ -19124,7 +19309,7 @@
       } // Render pre-selections before they have been selected in Engine.
 
 
-      const newPages = applySelectionsOnPages(pages, preSelected);
+      const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
       setInstantPages(newPages);
     }, [preSelected]);
     const interactionEvents = {};
@@ -19167,7 +19352,7 @@
 
   const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
 
-  const useStyles$c = makeStyles$1(theme => ({
+  const useStyles$d = makeStyles$1(theme => ({
     cbIcon: {
       borderRadius: 3,
       width: 16,
@@ -19204,7 +19389,7 @@
       label,
       dense
     } = _ref;
-    const styles = useStyles$c();
+    const styles = useStyles$d();
     return /*#__PURE__*/React.createElement(Checkbox$1, {
       edge: "start",
       checked: checked,
@@ -19291,6 +19476,41 @@
     return labels;
   }
 
+  const useStyles$c = makeStyles$1(() => ({
+    denseRadioButton: {
+      height: '100%',
+      boxSizing: 'border-box',
+      '& svg': {
+        width: '0.7em',
+        height: '0.7em'
+      }
+    },
+    radioButton: {
+      right: '5px'
+    }
+  }));
+  function ListBoxRadioButton(_ref) {
+    let {
+      checked,
+      label,
+      dense
+    } = _ref;
+    const styles = useStyles$c();
+    return /*#__PURE__*/React.createElement(Radio$1, {
+      checked: checked,
+      value: label,
+      name: label,
+      inputProps: {
+        'aria-labelledby': label
+      },
+      className: dense ? styles.denseRadioButton : styles.radioButton,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      disableRipple: true
+    });
+  }
+
   const KEYS = Object.freeze({
     ENTER: 13,
     ESCAPE: 27,
@@ -19521,6 +19741,7 @@
     checkboxLabel: {
       margin: 0,
       width: '100%',
+      height: '100%',
       // For checkboxes the first child is the checkbox container, second is the label container.
       '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
         display: 'flex',
@@ -19583,6 +19804,7 @@
       color: '#828282'
     }
   }));
+
   function RowColumn(_ref) {
     let {
       index,
@@ -19600,6 +19822,7 @@
       checkboxes = false,
       dense = false,
       frequencyMode = 'N',
+      isSingleSelect,
       actions,
       frequencyMax = '',
       histogram = false,
@@ -19690,6 +19913,11 @@
         checked: isSelected,
         dense: dense
       });
+      const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
+        label: lbl,
+        checked: isSelected,
+        dense: dense
+      });
       const labelTag = typeof lbl === 'string' ? getValueField({
         lbl,
         color,
@@ -19697,7 +19925,7 @@
       }) : lbl;
       return /*#__PURE__*/React.createElement(FormControlLabel$1, {
         color: color,
-        control: cb,
+        control: isSingleSelect ? rb : cb,
         className: classes.checkboxLabel,
         label: labelTag,
         key: qElemNumber
@@ -19858,6 +20086,7 @@
       selectDisabled = () => false
     } = _ref2;
     const [layout] = useLayout$1(model);
+    const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
     const [pages, setPages] = react.exports.useState(null);
     const [isLoadingData, setIsLoadingData] = react.exports.useState(false);
     const {
@@ -19871,7 +20100,8 @@
       rangeSelect,
       checkboxes,
       selectDisabled,
-      doc: document
+      doc: document,
+      isSingleSelect
     });
     const loaderRef = react.exports.useRef(null);
     const local = react.exports.useRef({
@@ -20005,6 +20235,7 @@
           checkboxes,
           dense,
           frequencyMode,
+          isSingleSelect,
           actions: {
             select,
             confirm: () => selections && selections.confirm.call(selections),
@@ -20613,7 +20844,6 @@
     let {
       model,
       keyboard,
-      autoFocus = true,
       dense = false
     } = _ref;
     const {
@@ -20647,7 +20877,6 @@
         size: dense ? 'small' : 'normal'
       })),
       className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
-      autoFocus: autoFocus,
       margin: "dense",
       fullWidth: true,
       placeholder: translator.get('Listbox.Search'),
@@ -20655,7 +20884,7 @@
       onChange: onChange,
       onKeyDown: onKeyDown,
       inputProps: {
-        tabIndex: !keyboard.enabled || keyboard.active ? 0 : -1
+        tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
       }
     });
   }
@@ -22299,7 +22528,19 @@
         break;
     }
 
-    const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+    const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode; // Hook that will trigger update when used in useEffects.
+    // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
+
+
+    const useRefWithCallback = () => {
+      const [ref, setInternalRef] = react.exports.useState({});
+      const setRef = react.exports.useCallback(node => {
+        setInternalRef({
+          current: node
+        });
+      }, [setInternalRef]);
+      return [ref, setRef];
+    };
 
     const listdef = _objectSpread2({
       qInfo: {
@@ -22370,10 +22611,10 @@
       keyboardNavigation
     } = react.exports.useContext(InstanceContext);
     const moreAlignTo = react.exports.useRef();
+    const [searchContainer, searchContainerRef] = useRefWithCallback();
     const [layout] = useLayout$1(model);
     const [showToolbar, setShowToolbar] = react.exports.useState(false);
     const [showSearch, setShowSearch] = react.exports.useState(false);
-    const [autoFocusSearch, setAutoFocusSearch] = react.exports.useState(focusSearch);
     const [keyboardActive, setKeyboardActive] = react.exports.useState(false);
     const handleKeyDown = getListboxInlineKeyboardNavigation({
       setKeyboardActive
@@ -22401,6 +22642,17 @@
         setShowToolbar(selections.isActive());
       }
     }, [selections]);
+    react.exports.useEffect(() => {
+      if (!searchContainer || !searchContainer.current) {
+        return;
+      } // Focus search field on toggle-show or when focusSearch is true.
+
+
+      if (search && focusSearch || search === 'toggle' && showSearch) {
+        const input = searchContainer.current.querySelector('input');
+        input && input.focus();
+      }
+    }, [searchContainer && searchContainer.current, showSearch, search, focusSearch]);
 
     if (!model || !layout || !translator) {
       return null;
@@ -22420,7 +22672,6 @@
     const onShowSearch = () => {
       const newValue = !showSearch;
       setShowSearch(newValue);
-      setAutoFocusSearch(newValue);
     };
 
     const getSearchOrUnlock = () => search === 'toggle' && !hasSelections ? /*#__PURE__*/React.createElement(IconButton$1, {
@@ -22488,10 +22739,10 @@
         onCancel: () => {}
       }
     }))), searchVisible && /*#__PURE__*/React.createElement(Grid$1, {
-      item: true
+      item: true,
+      ref: searchContainerRef
     }, /*#__PURE__*/React.createElement(ListBoxSearch, {
       model: model,
-      autoFocus: autoFocusSearch,
       dense: dense,
       keyboard: keyboard
     })), /*#__PURE__*/React.createElement(Grid$1, {
@@ -22919,7 +23170,7 @@
       dataContainer = dataContainer[step];
     }
 
-    if (typeof value !== 'undefined') {
+    if (typeof value !== 'undefined' && propertyName !== '__proto__' && propertyName !== 'constructor') {
       dataContainer[propertyName] = value;
     } else {
       delete dataContainer[propertyName];
@@ -29919,7 +30170,7 @@
            */
 
           /**
-           * @typedef { false | true | 'toggle' } SearchMode
+           * @typedef { boolean | 'toggle' } SearchMode
            */
 
           /**