@nebula.js/stardust 2.5.0 → 2.6.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.5.0
+* @nebula.js/stardust v2.6.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -7,7 +7,7 @@
 import React, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, createElement, PureComponent, useRef, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { createGenerateClassName, StylesProvider, ThemeProvider, makeStyles, useTheme as useTheme$1 } from '@material-ui/styles';
-import { Grid, Typography, IconButton, makeStyles as makeStyles$1, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@material-ui/core';
+import { Checkbox, Grid, FormControlLabel, Typography, IconButton, makeStyles as makeStyles$1, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@material-ui/core';
 
 var runtime = {exports: {}};
 
@@ -5234,7 +5234,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-const NEBULA_VERSION_HASH = "daf8" ;
+const NEBULA_VERSION_HASH = "375a" ;
 let counter = 0;
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
@@ -5294,7 +5294,7 @@ function boot(_ref2) {
   const appRef = React.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "2.5.0" );
+  element.setAttribute('data-nebulajs-version', "2.6.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6566,6 +6566,7 @@ function useSelectionsInteractions(_ref) {
     selections,
     pages = [],
     rangeSelect = true,
+    checkboxes = false,
     doc = document
   } = _ref;
   const [instantPages, setInstantPages] = useState$1(pages);
@@ -6604,6 +6605,14 @@ function useSelectionsInteractions(_ref) {
     });
   };
 
+  const onClick = useCallback(event => {
+    if (selectingValues) {
+      return;
+    }
+
+    const elemNumber = +event.currentTarget.getAttribute('data-n');
+    setPreSelected([elemNumber]);
+  }, [selectingValues]);
   const onMouseDown = useCallback(event => {
     if (selectingValues) {
       return;
@@ -6665,7 +6674,7 @@ function useSelectionsInteractions(_ref) {
     setSelected(alreadySelected);
   }, [pages]);
   useEffect$1(() => {
-    if (selectingValues || !pages || !mouseDown) {
+    if (selectingValues || !pages || !checkboxes && !mouseDown) {
       return;
     } // Render pre-selections before they have been selected in Engine.
 
@@ -6673,15 +6682,28 @@ function useSelectionsInteractions(_ref) {
     const newPages = applySelectionsOnPages(pages, preSelected);
     setInstantPages(newPages);
   }, [preSelected]);
-  const rangeSelectEvents = rangeSelect ? {
-    onMouseUp,
-    onMouseEnter
-  } : {};
+  const interactionEvents = {};
+
+  if (checkboxes) {
+    Object.assign(interactionEvents, {
+      onClick
+    });
+  } else if (rangeSelect) {
+    Object.assign(interactionEvents, {
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter
+    });
+  } else {
+    Object.assign(interactionEvents, {
+      onMouseUp,
+      onMouseDown
+    });
+  }
+
   return {
     instantPages,
-    interactionEvents: _objectSpread2({
-      onMouseDown
-    }, rangeSelectEvents)
+    interactionEvents
   };
 }
 
@@ -6696,187 +6718,196 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
 
 var Tick = (props => SvgIcon(tick(props)));
 
+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$b = makeStyles(theme => ({
-  row: {
-    flexWrap: 'nowrap',
-    borderBottom: "1px solid ".concat(theme.palette.divider),
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
-      outline: 'none'
-    }
+  cbIcon: {
+    borderRadius: 3,
+    width: 16,
+    height: 16,
+    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+    backgroundColor: '#f5f8fa',
+    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))'
   },
-  cell: {
-    padding: '8px',
-    '& span': {
-      whiteSpace: 'nowrap',
-      fontSize: '12px',
-      lineHeight: '16px',
-      userSelect: 'none'
-    },
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  icon: {
-    padding: theme.spacing(1)
-  },
-  S: {
-    background: theme.palette.selected.main,
-    color: theme.palette.selected.mainContrastText,
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px rgba(0, 0, 0, 0.3)",
-      outline: 'none'
+  cbIconChecked: {
+    borderRadius: 3,
+    backgroundColor: theme.palette.selected.main,
+    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+    '&:before': {
+      display: 'block',
+      width: 16,
+      height: 16,
+      backgroundImage: CheckboxChecked,
+      content: '""'
     }
   },
-  A: {
-    background: theme.palette.selected.alternative,
-    color: theme.palette.selected.alternativeContrastText
-  },
-  X: {
-    background: theme.palette.selected.excluded,
-    color: theme.palette.selected.excludedContrastText
+  checkbox: {
+    margin: 0,
+    '&:hover': {
+      backgroundColor: 'inherit !important'
+    }
   },
-  highlighted: {
-    backgroundColor: '#FFC72A'
+  dense: {
+    padding: '4px 8px'
   }
 }));
-function Row(_ref) {
+function ListboxCheckbox(_ref) {
   let {
-    index,
-    style,
-    data
+    checked,
+    label,
+    dense
   } = _ref;
-  const classes = useStyles$b();
-  const classArr = [classes.row];
-  let label = '';
-  const {
-    onMouseDown,
-    onMouseUp,
-    onMouseEnter,
-    pages
-  } = data;
-  let cell;
-
-  if (pages) {
-    const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
-
-    if (page) {
-      const area = page.qArea;
-
-      if (index >= area.qTop && index < area.qTop + area.qHeight) {
-        [cell] = page.qMatrix[index - area.qTop];
-      }
-    }
-  }
+  const styles = useStyles$b();
+  return /*#__PURE__*/React.createElement(Checkbox, {
+    edge: "start",
+    checked: checked,
+    tabIndex: -1,
+    disableRipple: true,
+    className: [styles.checkbox, dense && styles.dense].filter(Boolean).join(' '),
+    inputProps: {
+      'aria-labelledby': label
+    },
+    name: label,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: styles.cbIcon
+    }),
+    checkedIcon: /*#__PURE__*/React.createElement("span", {
+      className: styles.cbIconChecked
+    })
+  });
+}
 
-  let locked = false;
-  let selected = false;
+/**
+ * @typedef {object} Range
+ * @property {number} qCharPos The (absolute) index where the highlighted range starts.
+ * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
+ */
 
-  if (cell) {
-    label = cell.qText;
-    locked = cell.qState === 'L' || cell.qState === 'XL';
-    selected = cell.qState === 'S' || cell.qState === 'XS';
+/**
+ * @typedef {object} Segment
+ * @property {string} segment The sub-string/segment cut out from the original label.
+ * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
+ */
 
-    if (cell.qState === 'S' || cell.qState === 'L') {
-      classArr.push(classes.S);
-    } else if (cell.qState === 'A') {
-      classArr.push(classes.A);
-    } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-      classArr.push(classes.X);
-    }
-  } // Handle search highlights
+/**
+ * @param {string} label The label we want to create segments out of.
+ * @param {Range} range The indexes which define how to create the segments.
+ * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
+ *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
+ * @returns {Segment[]} An array of segments.
+ */
+function getSegmentsFromRange(label, range) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const {
+    qCharPos,
+    qCharCount
+  } = range;
+  const segments = [];
 
+  if (qCharPos > startIndex) {
+    // Create a non-highlighted section before the highighted section.
+    segments.push([label.slice(startIndex, qCharPos), false]);
+  } // Highlighted segment.
 
-  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-  const labels = ranges.reduce((acc, curr, ix) => {
-    // First non highlighted segment
-    if (curr.qCharPos > 0 && ix === 0) {
-      acc.push([label.slice(0, curr.qCharPos)]);
-    } // Previous non highlighted segment
 
+  segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
+  return segments;
+}
+/**
+ * @param {string} label The label we want to create segments out of.
+ * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
+ * @returns {Segment[]} An array of segments, covering the entire string label.
+ */
 
-    const prev = ranges[ix - 1];
 
-    if (prev) {
-      acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-    } // Highlighted segment
+function getSegmentsFromRanges(label, ranges) {
+  if (!ranges.length) {
+    return [];
+  }
 
+  const labels = ranges.reduce((acc, curr, ix) => {
+    const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
+    acc.push(...getSegmentsFromRange(label, curr, startIndex)); // Last non highlighted segment
 
-    acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+    const isLastRange = ix === ranges.length - 1;
+    const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;
 
-    if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-      acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
+    if (isLastRange && endIndex < label.length) {
+      acc.push([label.slice(endIndex), false]);
     }
 
     return acc;
   }, []);
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 0,
-    className: classArr.join(' ').trim(),
-    style: style,
-    onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp,
-    onMouseEnter: onMouseEnter,
-    role: "row",
-    tabIndex: 0,
-    "data-n": cell && cell.qElemNumber
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    style: {
-      minWidth: 0,
-      flexGrow: 1
-    },
-    className: classes.cell,
-    title: "".concat(label)
-  }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    noWrap: true,
-    color: "inherit"
-  }, "".concat(label)) : labels.map((_ref2, ix) => {
-    let [l, highlighted] = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement(Typography, {
-        component: "span",
-        key: ix,
-        className: highlighted,
-        noWrap: true
-      }, l)
-    );
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    className: classes.icon
-  }, locked && /*#__PURE__*/React.createElement(Lock, {
-    size: "small"
-  }), selected && /*#__PURE__*/React.createElement(Tick, {
-    size: "small"
-  })));
+  return labels;
 }
 
+const ellipsis = {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
 const useStyles$a = makeStyles(theme => ({
+  row: {
+    flexWrap: 'nowrap',
+    borderBottom: "1px solid ".concat(theme.palette.divider),
+    color: theme.palette.text.primary,
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
+      outline: 'none'
+    }
+  },
   column: {
     flexWrap: 'nowrap',
     borderRight: "1px solid ".concat(theme.palette.divider),
+    color: theme.palette.text.primary,
     '&:focus': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
       outline: 'none'
     }
   },
+  // The interior wrapper for all field content.
   cell: {
-    padding: '8px',
-    '& span': {
-      whiteSpace: 'nowrap',
-      fontSize: '12px',
-      lineHeight: '16px',
-      userSelect: 'none'
-    },
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    flexGrow: 1,
+    // Note that this padding is overridden when using checkboxes.
+    paddingLeft: '12px',
+    paddingRight: '12px'
+  },
+  // The leaf node, containing the label text.
+  labelText: _objectSpread2({
+    flexBasis: 'max-content',
+    lineHeight: '16px',
+    userSelect: 'none',
+    whiteSpace: 'pre'
+  }, ellipsis),
+  labelDense: {
+    fontSize: 12
   },
+  // Highlight is added to labelText spans, which are created as siblings to original labelText,
+  // when a search string is matched.
+  highlighted: {
+    overflow: 'visible',
+    width: '100%',
+    '& > span': {
+      width: '100%',
+      backgroundColor: '#FFC72A'
+    }
+  },
+  // Checkbox and label container.
+  checkboxLabel: {
+    margin: 0,
+    width: '100%',
+    // For checkboxes the first child is the checkbox container, second is the label container.
+    '& > span:nth-child(2)': _objectSpread2({}, ellipsis)
+  },
+  // The icons container holding tick and lock, shown inside fields.
   icon: {
+    display: 'flex',
     padding: theme.spacing(1)
   },
+  // Selection styles (S=Selected, A=Available, X=Excluded).
   S: {
     background: theme.palette.selected.main,
     color: theme.palette.selected.mainContrastText,
@@ -6892,128 +6923,206 @@ const useStyles$a = makeStyles(theme => ({
   X: {
     background: theme.palette.selected.excluded,
     color: theme.palette.selected.excludedContrastText
-  },
-  highlighted: {
-    backgroundColor: '#FFC72A'
   }
 }));
-function Column(_ref) {
+function RowColumn(_ref) {
   let {
     index,
     style,
-    data
+    data,
+    column = false
   } = _ref;
-  const classes = useStyles$a();
-  const classArr = [classes.column];
-  let label = '';
   const {
+    onClick,
     onMouseDown,
     onMouseUp,
     onMouseEnter,
-    pages
+    pages,
+    isLocked,
+    checkboxes = false,
+    dense = false
   } = data;
-  let cell;
+  const [isSelected, setSelected] = useState$1(false);
+  const [cell, setCell] = useState$1();
+  const classes = useStyles$a();
+  const [classArr, setClassArr] = useState$1([]);
+  useEffect$1(() => {
+    if (!pages) {
+      return;
+    }
 
-  if (pages) {
+    let c;
     const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
 
     if (page) {
       const area = page.qArea;
 
       if (index >= area.qTop && index < area.qTop + area.qHeight) {
-        [cell] = page.qMatrix[index - area.qTop];
+        [c] = page.qMatrix[index - area.qTop];
       }
     }
-  }
 
-  let locked = false;
-  let selected = false;
-
-  if (cell) {
-    label = cell.qText;
-    locked = cell.qState === 'L' || cell.qState === 'XL';
-    selected = cell.qState === 'S' || cell.qState === 'XS';
-
-    if (cell.qState === 'S' || cell.qState === 'L') {
-      classArr.push(classes.S);
-    } else if (cell.qState === 'A') {
-      classArr.push(classes.A);
-    } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-      classArr.push(classes.X);
+    setCell(c);
+  }, [pages]);
+  useEffect$1(() => {
+    if (!cell) {
+      return;
     }
-  } // Handle search highlights
 
+    const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
+    setSelected(selected);
+    const clazzArr = [column ? classes.column : classes.row];
 
-  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-  const labels = ranges.reduce((acc, curr, ix) => {
-    // First non highlighted segment
-    if (curr.qCharPos > 0 && ix === 0) {
-      acc.push([label.slice(0, curr.qCharPos)]);
-    } // Previous non highlighted segment
+    if (!checkboxes) {
+      if (cell.qState === 'S' || cell.qState === 'L') {
+        clazzArr.push(classes.S);
+      } else if (cell.qState === 'A') {
+        clazzArr.push(classes.A);
+      } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
+        clazzArr.push(classes.X);
+      }
+    }
 
+    setClassArr(clazzArr);
+  }, [cell && cell.qState]);
 
-    const prev = ranges[ix - 1];
+  const getValueField = _ref2 => {
+    let {
+      lbl,
+      ix,
+      color,
+      highlighted = false
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "body2",
+      key: ix,
+      className: [classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense].filter(c => !!c).join(' ').trim(),
+      color: color
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: 'pre'
+      }
+    }, lbl));
+  };
 
-    if (prev) {
-      acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-    } // Highlighted segment
+  const getCheckboxField = _ref3 => {
+    let {
+      lbl,
+      color,
+      qElemNumber
+    } = _ref3;
+    const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
+      label: lbl,
+      checked: isSelected,
+      dense: dense
+    });
+    const labelTag = typeof lbl === 'string' ? getValueField({
+      lbl,
+      color,
+      highlighted: false
+    }) : lbl;
+    return /*#__PURE__*/React.createElement(FormControlLabel, {
+      color: color,
+      control: cb,
+      className: classes.checkboxLabel,
+      label: labelTag,
+      key: qElemNumber
+    });
+  };
 
+  const label = cell ? cell.qText : ''; // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
-    acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
+  const labels = getSegmentsFromRanges(label, ranges);
+  const getField = checkboxes ? getCheckboxField : getValueField;
 
-    if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-      acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
-    }
+  const getFieldWithRanges = _ref4 => {
+    let {
+      lbls
+    } = _ref4;
+    const labelsWithRanges = lbls.map((_ref5, ix) => {
+      let [lbl, highlighted] = _ref5;
+      return getValueField({
+        ix,
+        highlighted,
+        lbl
+      });
+    });
+    return checkboxes ? getCheckboxField({
+      lbl: labelsWithRanges
+    }) : labelsWithRanges;
+  };
 
-    return acc;
-  }, []);
+  const iconStyles = {
+    alignItems: 'center',
+    display: 'flex'
+  };
+  const showLock = isSelected && isLocked;
+  const showTick = !checkboxes && isSelected && !isLocked;
+  const cellStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    flexGrow: 1,
+    padding: checkboxes ? 0 : undefined
+  };
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 0,
-    className: classArr.join(' ').trim(),
+    className: ['value', ...classArr].join(' ').trim(),
     style: style,
-    alignItems: "center",
+    onClick: onClick,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onMouseEnter: onMouseEnter,
-    role: "row",
+    role: column ? 'column' : 'row',
     tabIndex: 0,
     "data-n": cell && cell.qElemNumber
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    style: {
-      minWidth: 0,
-      flexGrow: 1
-    },
+    style: cellStyle,
     className: classes.cell,
     title: "".concat(label)
-  }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    noWrap: true,
-    color: "inherit"
-  }, "".concat(label)) : labels.map((_ref2, ix) => {
-    let [l, highlighted] = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement(Typography, {
-        component: "span",
-        key: ix,
-        className: highlighted,
-        noWrap: true
-      }, l)
-    );
-  })), /*#__PURE__*/React.createElement(Grid, {
+  }, ranges.length === 0 ? getField({
+    lbl: label,
+    color: 'inherit'
+  }) : getFieldWithRanges({
+    lbls: labels
+  })), (showLock || showTick) && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: classes.icon
-  }, locked && /*#__PURE__*/React.createElement(Lock, {
+  }, showLock && /*#__PURE__*/React.createElement(Lock, {
+    style: iconStyles,
     size: "small"
-  }), selected && /*#__PURE__*/React.createElement(Tick, {
+  }), showTick && /*#__PURE__*/React.createElement(Tick, {
+    style: iconStyles,
     size: "small"
   })));
 }
 
-function ListBox(_ref) {
+function getSizeInfo(_ref) {
+  let {
+    isVertical,
+    checkboxes,
+    dense,
+    height
+  } = _ref;
+  let sizeVertical = checkboxes ? 40 : 33;
+
+  if (dense) {
+    sizeVertical = 24;
+  }
+
+  const itemSize = isVertical ? sizeVertical : 200;
+  const listHeight = height || 8 * itemSize;
+  return {
+    itemSize,
+    listHeight
+  };
+}
+
+function ListBox(_ref2) {
   let {
     model,
     selections,
@@ -7022,8 +7131,10 @@ function ListBox(_ref) {
     width,
     listLayout = 'vertical',
     rangeSelect = true,
-    update = undefined
-  } = _ref;
+    checkboxes = false,
+    update = undefined,
+    dense = false
+  } = _ref2;
   const [layout] = useLayout$1(model);
   const [pages, setPages] = useState$1(null);
   const [isLoadingData, setIsLoadingData] = useState$1(false);
@@ -7035,6 +7146,7 @@ function ListBox(_ref) {
     selections,
     pages,
     rangeSelect,
+    checkboxes,
     doc: document
   });
   const loaderRef = useRef(null);
@@ -7126,8 +7238,16 @@ function ListBox(_ref) {
 
   const isVertical = listLayout !== 'horizontal';
   const count = layout.qListObject.qSize.qcy;
-  const ITEM_SIZE = isVertical ? 33 : 200;
-  const listHeight = height || 8 * ITEM_SIZE;
+  const {
+    itemSize,
+    listHeight
+  } = getSizeInfo({
+    isVertical,
+    checkboxes,
+    dense,
+    height
+  });
+  const isLocked = layout && layout.qListObject.qDimensionInfo.qLocked;
   return /*#__PURE__*/React.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
     itemCount: count,
@@ -7135,11 +7255,11 @@ function ListBox(_ref) {
     threshold: 0,
     minimumBatchSize: 100,
     ref: loaderRef
-  }, _ref2 => {
+  }, _ref3 => {
     let {
       onItemsRendered,
       ref
-    } = _ref2;
+    } = _ref3;
     local.current.listRef = ref;
     return /*#__PURE__*/React.createElement(FixedSizeList, {
       direction: direction,
@@ -7150,13 +7270,18 @@ function ListBox(_ref) {
       width: width,
       itemCount: count,
       layout: listLayout,
-      itemData: _objectSpread2(_objectSpread2({}, interactionEvents), {}, {
+      itemData: _objectSpread2(_objectSpread2({
+        isLocked,
+        column: !isVertical,
         pages
+      }, isLocked ? {} : interactionEvents), {}, {
+        checkboxes,
+        dense
       }),
-      itemSize: ITEM_SIZE,
+      itemSize: itemSize,
       onItemsRendered: onItemsRendered,
       ref: ref
-    }, isVertical ? Row : Column);
+    }, RowColumn);
   });
 }
 
@@ -7731,13 +7856,22 @@ const useStyles$7 = makeStyles(theme => ({
       borderRadius: 0,
       borderColor: "".concat(theme.palette.divider, " transparent")
     }
+  },
+  dense: {
+    fontSize: 12,
+    paddingLeft: theme.spacing(1),
+    '& input': {
+      paddingTop: '5px',
+      paddingBottom: '5px'
+    }
   }
 }));
 const TREE_PATH = '/qListObjectDef';
 function ListBoxSearch(_ref) {
   let {
     model,
-    autoFocus = true
+    autoFocus = true,
+    dense = false
   } = _ref;
   const {
     translator
@@ -7766,8 +7900,10 @@ function ListBoxSearch(_ref) {
   return /*#__PURE__*/React.createElement(OutlinedInput, {
     startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
       position: "start"
-    }, /*#__PURE__*/React.createElement(Search, null)),
-    className: [classes.root].join(' '),
+    }, /*#__PURE__*/React.createElement(Search, {
+      size: dense ? 'small' : 'normal'
+    })),
+    className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
     autoFocus: autoFocus,
     margin: "dense",
     fullWidth: true,
@@ -9380,10 +9516,12 @@ function ListBoxInline(_ref2) {
     search = true,
     toolbar = true,
     rangeSelect = true,
+    checkboxes = false,
     properties = {},
     sessionModel = undefined,
     selectionsApi = undefined,
-    update = undefined
+    update = undefined,
+    dense = false
   } = options;
 
   const listdef = _objectSpread2({
@@ -9534,7 +9672,8 @@ function ListBoxInline(_ref2) {
     item: true
   }, /*#__PURE__*/React.createElement(ListBoxSearch, {
     model: model,
-    autoFocus: false
+    autoFocus: false,
+    dense: dense
   })) : '', /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: true
@@ -9551,9 +9690,11 @@ function ListBoxInline(_ref2) {
       direction: direction,
       listLayout: listLayout,
       rangeSelect: rangeSelect,
+      checkboxes: checkboxes,
       height: height,
       width: width,
-      update: update
+      update: update,
+      dense: dense
     });
   })));
 }
@@ -13787,9 +13928,11 @@ function useAction(fn, deps) {
  * @example
  * // configure embed to disallow active interactions when rendering
  * embed(app, {
- *   constraints: {
- *     active: true, // do not allow interactions
- *   }
+ *  context: {
+ *    constraints: {
+ *      active: true, // do not allow interactions
+ *    }
+ *  }
  * }).render({ element, id: 'sdfsdf' });
  *
  * @example
@@ -16851,8 +16994,11 @@ function nuked() {
            * @param {string=} options.title Custom title, defaults to fieldname
            * @param {string=} [options.direction=ltr] Direction setting ltr|rtl.
            * @param {string=} [options.listLayout=vertical] Layout direction vertical|horizontal
-           * @param {boolean=} [options.search=true] To show the search bar
-           * @param {boolean=} [options.toolbar=true] To show the toolbar
+           * @param {boolean=} [options.search=true] Show the search bar
+           * @param {boolean=} [options.toolbar=true] Show the toolbar
+           * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields
+           * @param {boolean=} [options.rangeSelect=true] Enable range selection
+           * @param {boolean=} [options.dense=false] Reduces padding and text size
            * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
            * @param {object=} [options.properties={}] Properties object to extend default properties with
            * @param {object} [options.sessionModel] Use a custom sessionModel.
@@ -16946,7 +17092,9 @@ function nuked() {
    * // create an alternate config with dark theme
    * // and inherit the config from the previous
    * const d = m.createConfiguration({
-   *  theme: 'dark'
+   *  context: {
+   *    theme: 'dark'
+   *  }
    * });
    *
    * m(app).render({ type: 'mekko' }); // will render the object with default theme