@nebula.js/stardust 4.0.3 → 4.2.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.3
+* @nebula.js/stardust v4.2.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -750,8 +750,8 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -762,7 +762,7 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
@@ -3790,21 +3790,6 @@ var m$1 = ReactDOM;
   client.hydrateRoot = m$1.hydrateRoot;
 }
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
 function isPlainObject(item) {
   return item !== null && typeof item === 'object' && item.constructor === Object;
 }
@@ -3821,7 +3806,9 @@ function deepClone(source) {
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends$4({}, target) : target;
+  const output = options.clone ? {
+    ...target
+  } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
       // Avoid prototype pollution
@@ -3973,8 +3960,8 @@ function useGlobalId(idOverride) {
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = React['useId' + ''];
+// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId'.toString()];
 /**
  *
  * @example <div id={useId()} />
@@ -4211,10 +4198,15 @@ function useIsFocusVisible() {
  * @returns {object} resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends$4({}, props);
+  const output = {
+    ...props
+  };
   Object.keys(defaultProps).forEach(propName => {
     if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
+      output[propName] = {
+        ...defaultProps[propName],
+        ...output[propName]
+      };
     } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
       const defaultSlotProps = defaultProps[propName] || {};
       const slotProps = props[propName];
@@ -4226,7 +4218,9 @@ function resolveProps(defaultProps, props) {
         // Reduce the iteration if the default slot props is empty
         output[propName] = slotProps;
       } else {
-        output[propName] = _extends$4({}, slotProps);
+        output[propName] = {
+          ...slotProps
+        };
         Object.keys(defaultSlotProps).forEach(slotPropName => {
           output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
         });
@@ -4306,8 +4300,8 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 var THEME_ID = '$$material';
 
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4318,7 +4312,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -4477,6 +4471,7 @@ var RULESET = 'rule';
 var DECLARATION = 'decl';
 var IMPORT = '@import';
 var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
 
 /**
  * @param {number}
@@ -4906,8 +4901,8 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 								parse(characters, root, reference, reference, props, rulesets, length, points, children);
 							else
 								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-									// d m s
-									case 100: case 109: case 115:
+									// d l m s
+									case 100: case 108: case 109: case 115:
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
 										break
 									default:
@@ -5026,6 +5021,7 @@ function serialize (children, callback) {
  */
 function stringify (element, index, children, callback) {
 	switch (element.type) {
+		case LAYER: if (element.children.length) break
 		case IMPORT: case DECLARATION: return element.return = element.return || element.value
 		case COMMENT: return ''
 		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
@@ -5618,7 +5614,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.12.3
+ * @mui/styled-engine v5.13.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5639,8 +5635,8 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5651,7 +5647,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -5676,7 +5672,7 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$2({}, acc, {
+    return _extends$1({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -5734,7 +5730,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends$2({
+  return _extends$1({
     keys,
     values: sortedValues,
     up,
@@ -6704,14 +6700,14 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$2({
+    palette: _extends$1({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends$2({}, shape$1, shapeInput)
+    shape: _extends$1({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$1({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -6734,6 +6730,8 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 const _excluded$d = ["variant"];
 function isEmpty$2(string) {
   return string.length === 0;
@@ -6834,8 +6832,8 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends$2({}, props, {
-      theme: resolveTheme(_extends$2({}, props, {
+    return styleFunctionSx$1(_extends$1({}, props, {
+      theme: resolveTheme(_extends$1({}, props, {
         defaultTheme,
         themeId
       }))
@@ -6868,7 +6866,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, _extends$2({
+    const defaultStyledResolver = styled$2(tag, _extends$1({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -6878,8 +6876,8 @@ function createStyled(input = {}) {
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-          return stylesArg(_extends$2({}, props, {
-            theme: resolveTheme(_extends$2({}, props, {
+          return stylesArg(_extends$1({}, props, {
+            theme: resolveTheme(_extends$1({}, props, {
               defaultTheme,
               themeId
             }))
@@ -6889,7 +6887,7 @@ function createStyled(input = {}) {
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }));
@@ -6897,7 +6895,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$2({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -6908,7 +6906,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }));
@@ -6930,8 +6928,8 @@ function createStyled(input = {}) {
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => styleArg(_extends$2({}, props, {
-          theme: resolveTheme(_extends$2({}, props, {
+        transformedStyleArg = props => styleArg(_extends$1({}, props, {
+          theme: resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }))
@@ -7186,21 +7184,6 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
 const ThemeContext = /*#__PURE__*/React.createContext(null);
 var ThemeContext$1 = ThemeContext;
 
@@ -7217,7 +7200,10 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
     const mergedTheme = localTheme(outerTheme);
     return mergedTheme;
   }
-  return _extends$1({}, outerTheme, localTheme);
+  return {
+    ...outerTheme,
+    ...localTheme
+  };
 }
 
 /**
@@ -7250,7 +7236,7 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends$2({}, upperTheme, {
+      const result = themeId ? _extends$1({}, upperTheme, {
         [themeId]: mergedTheme
       }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
@@ -7260,9 +7246,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends$2({}, upperTheme, {
+    return themeId ? _extends$1({}, upperTheme, {
       [themeId]: localTheme
-    }) : _extends$2({}, upperTheme, localTheme);
+    }) : _extends$1({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7304,7 +7290,7 @@ function adaptV4Theme(inputTheme) {
       styleOverrides = {}
     } = inputTheme,
     other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$b);
-  const theme = _extends$3({}, other, {
+  const theme = _extends$2({}, other, {
     components: {}
   });
 
@@ -7338,13 +7324,13 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends$3({
+  theme.mixins = _extends$2({
     gutters: (styles = {}) => {
-      return _extends$3({
+      return _extends$2({
         paddingLeft: spacing(2),
         paddingRight: spacing(2)
       }, styles, {
-        [breakpoints.up('sm')]: _extends$3({
+        [breakpoints.up('sm')]: _extends$2({
           paddingLeft: spacing(3),
           paddingRight: spacing(3)
         }, styles[breakpoints.up('sm')])
@@ -7357,7 +7343,7 @@ function adaptV4Theme(inputTheme) {
     } = palette,
     paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends$3({
+  theme.palette = _extends$2({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
@@ -7369,7 +7355,7 @@ function adaptV4Theme(inputTheme) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$3({
+  return _extends$2({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7707,7 +7693,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$3({}, color);
+    color = _extends$2({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -7728,9 +7714,9 @@ function createPalette(palette) {
     dark: dark$1,
     light: light$1
   };
-  const paletteOutput = deepmerge(_extends$3({
+  const paletteOutput = deepmerge(_extends$2({
     // A collection of common colors.
-    common: _extends$3({}, common$1),
+    common: _extends$2({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -7818,7 +7804,7 @@ function createTypography(palette, typography) {
     other = _objectWithoutPropertiesLoose$1(_ref, _excluded$9);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$2({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -7849,7 +7835,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge(_extends$2({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -7917,8 +7903,8 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
+  const mergedEasing = _extends$2({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends$2({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
         duration: durationOption = mergedDuration.standard,
@@ -7928,7 +7914,7 @@ function createTransitions(inputTransitions) {
       _objectWithoutPropertiesLoose$1(options, _excluded$8);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return _extends$3({
+  return _extends$2({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -7972,11 +7958,11 @@ function createTheme(options = {}, ...args) {
     shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$3({}, zIndex$1)
+    zIndex: _extends$2({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -8021,14 +8007,12 @@ function ThemeProvider(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose$1(_ref, _excluded$6);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$3({}, props, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$2({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
   }));
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -8389,7 +8373,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "f855" ;
+const NEBULA_VERSION_HASH = "28e4" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8636,7 +8620,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.3" );
+  element.setAttribute('data-nebulajs-version', "4.2.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9041,7 +9025,7 @@ function SvgIcon$2(_ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$5({
+      React__default.createElement(Type, _extends$3({
         key: ix
       }, attrs))
     );
@@ -9822,6 +9806,7 @@ const getValueStateClasses = _ref2 => {
 };
 
 const CELL_PADDING_LEFT = 9;
+const HEADER_PADDING_RIGHT = 4;
 const ICON_WIDTH = 12;
 const ICON_PADDING = 7;
 const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
@@ -10425,7 +10410,8 @@ function Frequency(_ref) {
       alignItems: 'center'
     },
     className: rowColClasses.frequencyCount,
-    "aria-label": frequencyText
+    "aria-label": frequencyText,
+    title: frequencyText
   }, /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true,
     color: "inherit",
@@ -12737,7 +12723,7 @@ function getListBoxComponents(_ref) {
     local.current.listRef = ref;
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeList
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$5({}, commonComponentOptions, {
+    , _extends$3({}, commonComponentOptions, {
       dataTestid: "fixed-size-list",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: listHeight,
@@ -12814,7 +12800,7 @@ function getListBoxComponents(_ref) {
     };
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeGrid
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$5({}, commonComponentOptions, {
+    , _extends$3({}, commonComponentOptions, {
       dataTestid: "fixed-size-grid",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: gridHeight,
@@ -13296,7 +13282,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       viewBox = '0 0 24 24'
     } = props,
     other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
-  const ownerState = _extends$3({}, props, {
+  const ownerState = _extends$2({}, props, {
     color,
     component,
     fontSize,
@@ -13309,7 +13295,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$3({
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$2({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
@@ -13329,7 +13315,7 @@ var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$3({
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$2({
       "data-testid": `${displayName}Icon`,
       ref: ref
     }, props, {
@@ -14211,7 +14197,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   const autoFocusIndex = actions.findIndex(action => !action.disabled);
   return showActions && /*#__PURE__*/React__default.createElement(StyledPopover$1
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends$5({}, popoverProps, {
+  , _extends$3({}, popoverProps, {
     onClose: onCloseOrActionClick,
     ref: ref,
     open: show,
@@ -14329,9 +14315,7 @@ function getActionsKeyDownHandler(_ref) {
 const PREFIX$7 = 'ActionsToolbar';
 const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
-  itemSpacing: "".concat(PREFIX$7, "-itemSpacing"),
-  firstItemSpacing: "".concat(PREFIX$7, "-firstItemSpacing"),
-  lastItemSpacing: "".concat(PREFIX$7, "-lastItemSpacing")
+  itemSpacing: "".concat(PREFIX$7, "-itemSpacing")
 };
 const StyledPopover = styled$1(Popover)(_ref => {
   let {
@@ -14339,13 +14323,7 @@ const StyledPopover = styled$1(Popover)(_ref => {
   } = _ref;
   return {
     ["& .".concat(classes$7.itemSpacing)]: {
-      padding: theme.spacing(0, 0.5)
-    },
-    ["& .".concat(classes$7.firstItemSpacing)]: {
-      padding: theme.spacing(0, 0.5, 0, 0)
-    },
-    ["& .".concat(classes$7.lastItemSpacing)]: {
-      padding: theme.spacing(0, 0, 0, 0.5)
+      padding: theme.spacing(0, 0.25)
     }
   };
 });
@@ -14364,8 +14342,6 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     className,
     ariaExpanded = false,
     actions = [],
-    first = false,
-    last = false,
     addAnchor = false,
     isRtl = false
   } = _ref2;
@@ -14376,31 +14352,17 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     flexDirection: isRtl ? 'row-reverse' : 'row',
     wrap: "nowrap",
     className: className
-  }, actions.map((e, ix) => {
-    let cls = [];
-    const isFirstItem = first && ix === 0;
-    const isLastItem = last && actions.length - 1 === ix;
-    if (isFirstItem && !isLastItem) {
-      cls = [classes$7.firstItemSpacing, classes$7.item];
-    }
-    if (isLastItem && !isFirstItem) {
-      cls = [...cls, classes$7.lastItemSpacing, classes$7.item];
-    }
-    if (!isFirstItem && !isLastItem && cls.length === 0) {
-      cls = [classes$7.itemSpacing, classes$7.item];
-    }
-    return /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      key: e.key,
-      className: cls.join(' ').trim()
-    }, /*#__PURE__*/React__default.createElement(Item, {
-      ariaExpanded: ariaExpanded,
-      key: e.key,
-      item: e,
-      ref: ix === 0 ? ref : null,
-      addAnchor: addAnchor
-    }));
-  })) : null;
+  }, actions.map((e, ix) => /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    key: e.key,
+    className: "".concat(classes$7.itemSpacing, " ").concat(classes$7.item)
+  }, /*#__PURE__*/React__default.createElement(Item, {
+    ariaExpanded: ariaExpanded,
+    key: e.key,
+    item: e,
+    ref: ix === 0 ? ref : null,
+    addAnchor: addAnchor
+  })))) : null;
 });
 const popoverStyle = {
   pointerEvents: 'none'
@@ -14444,7 +14406,7 @@ function ActionsToolbar(_ref3) {
   } = useContext(InstanceContext);
   const [showMoreItems, setShowMoreItems] = useState$1(false);
   const popoverAnchorOrigin = {
-    vertical: 7,
+    vertical: 12,
     horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
   };
   const actionsRef = useRef();
@@ -14520,17 +14482,13 @@ function ActionsToolbar(_ref3) {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
   }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
-    actions: newActions,
-    first: true,
-    last: !showMore && !selections.show
+    actions: newActions
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     id: "actions-toolbar-show-more",
     "data-testid": "actions-toolbar-show-more",
     ref: moreRef,
     ariaExpanded: showMoreItems,
     actions: [moreItem],
-    first: !showActions,
-    last: !selections.show,
     addAnchor: true
   }), showDivider && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -14541,8 +14499,6 @@ function ActionsToolbar(_ref3) {
   })), selections.show && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     className: "actions-toolbar-default-actions",
     actions: defaultSelectionActions,
-    first: !showActions && !showMore,
-    last: true,
     isRtl: isRtl
   }), showMoreItems && /*#__PURE__*/React__default.createElement(More$1, {
     show: showMoreItems,
@@ -14568,7 +14524,7 @@ function ActionsToolbar(_ref3) {
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
-        padding: theme.spacing(0.8)
+        padding: theme.spacing(0.5, 0.25)
       }
     }
   }, Actions) : show && Actions;
@@ -16167,6 +16123,9 @@ typeof globalThis !== 'undefined'
   : typeof global !== 'undefined'
   ? global
   : {};
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 
 var $3e40d2fd7fdb47d2$exports = {};
 /**
@@ -16400,10 +16359,10 @@ class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (Component) {
                 // This can result in invalid style values which can result in NaN values if we don't handle them.
                 // See issue #150 for more context.
                 const style = window.getComputedStyle(this._parentNode) || {};
-                const paddingLeft = parseInt((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0", 10);
-                const paddingRight = parseInt((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0", 10);
-                const paddingTop = parseInt((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0", 10);
-                const paddingBottom = parseInt((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0", 10);
+                const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
+                const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
+                const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
+                const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
                 const rect = this._parentNode.getBoundingClientRect();
                 const scaledHeight = rect.height - paddingTop - paddingBottom;
                 const scaledWidth = rect.width - paddingLeft - paddingRight;
@@ -16465,7 +16424,7 @@ class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (Component) {
         }
     }
     render() {
-        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , tagName: tagName = "div" , ...rest } = this.props;
+        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight = false , disableWidth: disableWidth = false , nonce: nonce , onResize: onResize , style: style = {} , tagName: tagName = "div" , ...rest } = this.props;
         const { height: height , scaledHeight: scaledHeight , scaledWidth: scaledWidth , width: width  } = this.state;
         // Outer div should not force width/height since that may prevent containers from shrinking.
         // Inner component should overflow and use calculated width/height.
@@ -16499,12 +16458,22 @@ class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (Component) {
         }, !bailoutOnChildren && children(childParams));
     }
 }
-$6e2bb92d9db3b0c8$var$_defineProperty($6e2bb92d9db3b0c8$export$9d94f4ee1d930ff, "defaultProps", {
-    onResize: ()=>{},
-    disableHeight: false,
-    disableWidth: false,
-    style: {}
-});
+
+
+var $81c1b644006d48ec$exports = {};
+
+$parcel$export($81c1b644006d48ec$exports, "isHeightAndWidthProps", () => $81c1b644006d48ec$export$6a9e233b3261c1f);
+$parcel$export($81c1b644006d48ec$exports, "isHeightOnlyProps", () => $81c1b644006d48ec$export$232069b3e05ce32a);
+$parcel$export($81c1b644006d48ec$exports, "isWidthOnlyProps", () => $81c1b644006d48ec$export$10ec32941a097f36);
+function $81c1b644006d48ec$export$6a9e233b3261c1f(props) {
+    return props && props.disableHeight !== true && props.disableWidth !== true;
+}
+function $81c1b644006d48ec$export$232069b3e05ce32a(props) {
+    return props && props.disableHeight !== true && props.disableWidth === true;
+}
+function $81c1b644006d48ec$export$10ec32941a097f36(props) {
+    return props && props.disableHeight === true && props.disableWidth !== true;
+}
 
 
 var $149c1bd638913645$export$2e2bcd8739ae039 = ($6e2bb92d9db3b0c8$export$9d94f4ee1d930ff);
@@ -16761,11 +16730,14 @@ function showToolbarDetached(_ref) {
   let {
     containerRect,
     titleRef,
-    iconsWidth
+    iconsWidth,
+    headerPaddingLeft,
+    headerPaddingRight
   } = _ref;
   const containerWidth = containerRect.width;
-  const padding = 16;
-  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding;
+  const preventTruncation = 2;
+  const padding = headerPaddingLeft + headerPaddingRight;
+  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding + preventTruncation;
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
   const isTruncated = (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth) > (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current3 = titleRef.current) === null || _titleRef$current3 === void 0 ? void 0 : _titleRef$current3.offsetWidth);
@@ -17059,7 +17031,9 @@ function ListBoxInline(_ref4) {
   const isDrillDown = (layout === null || layout === void 0 ? void 0 : (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 ? void 0 : (_layout$qListObject2$ = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2$ === void 0 ? void 0 : _layout$qListObject2$.qGrouping) === 'H';
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
-
+  const isRtl = direction === 'rtl';
+  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
+  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
   useEffect$1(() => {
     if (!titleRef.current || !containerRect) {
       return;
@@ -17067,14 +17041,15 @@ function ListBoxInline(_ref4) {
     const isDetached = showToolbarDetached({
       containerRect,
       titleRef,
-      iconsWidth
+      iconsWidth,
+      headerPaddingLeft,
+      headerPaddingRight
     });
     setIsToolbarDetached(isDetached);
   }, [titleRef.current, containerRect]);
   if (!model || !layout || !translator) {
     return null;
   }
-  const isRtl = direction === 'rtl';
   const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
     model,
@@ -17112,8 +17087,6 @@ function ListBoxInline(_ref4) {
     keyboard
   });
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
-  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : 0;
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
@@ -17160,7 +17133,7 @@ function ListBoxInline(_ref4) {
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$3({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
@@ -17217,7 +17190,7 @@ function ListBoxInline(_ref4) {
     title: layout.title
   }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$3({
     direction: direction
   }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -19210,13 +19183,13 @@ function Progress(_ref2) {
   const s = SIZES[size];
   return /*#__PURE__*/React__default.createElement(Root, {
     className: classes$3.root
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$5({
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$3({
     variant: "determinate",
     value: 100,
     className: classes$3.back,
     size: s,
     thickness: 3
-  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$5({
+  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$3({
     variant: "indeterminate",
     disableShrink: true,
     className: classes$3.front,
@@ -19266,7 +19239,7 @@ function Cancel(_ref) {
     variant: "h6",
     align: "center",
     "data-tid": "update-active"
-  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$5({
+  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$3({
     item: true
   }, props), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
@@ -19293,7 +19266,7 @@ function Retry(_ref2) {
     "data-tid": "update-cancelled"
   }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Button, _extends$5({
+  }, /*#__PURE__*/React__default.createElement(Button, _extends$3({
     variant: "contained",
     onClick: retry
   }, props), translator.get('Retry'))));
@@ -20271,6 +20244,13 @@ const Cell = forwardRef((_ref6, ref) => {
     },
     setSnOptions,
     setSnPlugins,
+    getImperativeHandle() {
+      var _state$sn;
+      if ((_state$sn = state.sn) !== null && _state$sn !== void 0 && _state$sn.component && typeof state.sn.component.getImperativeHandle === 'function') {
+        return state.sn.component.getImperativeHandle();
+      }
+      return {};
+    },
     async takeSnapshot() {
       const {
         width,
@@ -20502,21 +20482,34 @@ function viz() {
   let cellRef = null;
   let mountedReference = null;
   let onMount = null;
+  let onRender = null;
   const mounted = new Promise(resolve => {
     onMount = resolve;
   });
+  const rendered = new Promise(resolve => {
+    onRender = resolve;
+  });
+  const createOnInitialRender = override => () => {
+    override && override();
+    onRender();
+  };
   let initialSnOptions = {};
   let initialSnPlugins = [];
   const emitter = new EventEmitter$1();
   const setSnOptions = async opts => {
+    const override = opts.onInitialRender;
     if (mountedReference) {
       (async () => {
         await mounted;
-        cellRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+        cellRef.current.setSnOptions(_objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+          onInitialRender: createOnInitialRender(override)
+        }));
       })();
     } else {
       // Handle setting options before mount
-      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+      initialSnOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+        onInitialRender: createOnInitialRender(override)
+      });
     }
   };
   const setSnPlugins = async plugins => {
@@ -20616,6 +20609,14 @@ function viz() {
     removeListener(eventName, listener) {
       emitter.removeListener(eventName, listener);
     },
+    /**
+     * Gets the specific api that a Viz exposes.
+     * @returns {Promise<object>} object that contains the internal Viz api.
+     */
+    async getImperativeHandle() {
+      await rendered;
+      return cellRef.current.getImperativeHandle();
+    },
     // ===== unexposed experimental API - use at own risk ======
     __DO_NOT_USE__: {
       mount(element) {
@@ -22625,15 +22626,11 @@ function useOptions() {
 }
 
 /**
- * TODO before making public - expose getImperativeHandle on Viz
- * Exposes an API to the external environment.
- *
  * This is an empty object by default, but enables you to provide a custom API of your visualization to
  * make it possible to control after it has been rendered.
  *
  * You can only use this hook once, calling it more than once is considered an error.
  * @entry
- * @private
  * @template T
  * @param {function():T} factory
  * @param {Array<any>=} deps