@nebula.js/stardust 4.6.2 → 4.7.0

package/core/package.json

@@ -1,7 +1,7 @@
 {
   "module": "esm/index.js",
   "peerDependencies": {
-    "@mui/material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@mui/icons-material": "^5.14.16",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.6.2
+* @nebula.js/stardust v4.7.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -6952,7 +6952,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.14.16
+	 * @mui/styled-engine v5.14.17
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -11820,7 +11820,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "ca95" ;
+	const NEBULA_VERSION_HASH = "d794" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12081,7 +12081,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.6.2" );
+	  element.setAttribute('data-nebulajs-version', "4.7.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -15575,7 +15575,9 @@
 	    // clicking a checkbox to check it, hitting a button to submit a form,
 	    // and hitting left arrow to move the cursor in a text input etc.
 	    // Only special HTML elements have these default behaviors.
-	    if (event.key !== 'Escape' || !isTopModal()) {
+	    if (event.key !== 'Escape' || event.which === 229 ||
+	    // Wait until IME is settled.
+	    !isTopModal()) {
 	      return;
 	    }
 	    if (!disableEscapeKeyDown) {
@@ -22283,7 +22285,6 @@
 	  shouldForwardProp: p => p !== 'styles'
 	})(_ref => {
 	  let {
-	    theme,
 	    styles
 	  } = _ref;
 	  return {
@@ -22314,13 +22315,13 @@
 	      borderRadius: borderRadius - 1,
 	      width: 12,
 	      height: 12,
-	      backgroundColor: theme.palette.selected.excluded
+	      backgroundColor: styles.selections.excluded
 	    },
 	    ["& .".concat(classes$b.cbIconAlternative)]: {
 	      borderRadius: borderRadius - 1,
 	      width: 12,
 	      height: 12,
-	      backgroundColor: theme.palette.selected.alternative
+	      backgroundColor: styles.selections.alternative
 	    },
 	    ["&.".concat(classes$b.checkbox)]: {
 	      margin: 0,
@@ -26729,7 +26730,7 @@
 	    styles
 	  } = _ref;
 	  return {
-	    color: styles.content.color
+	    color: styles.search.color
 	  };
 	});
 	const StyledOutlinedInput = styled$1(OutlinedInput$1, {
@@ -26739,8 +26740,10 @@
 	    styles
 	  } = _ref2;
 	  return {
-	    color: styles.content.color,
-	    display: 'flex'
+	    display: 'flex',
+	    '& .MuiInputBase-root': {
+	      color: styles.search.color
+	    }
 	  };
 	});
 	function ListBoxSearch(_ref3) {
@@ -28983,11 +28986,17 @@
 	  });
 	  return overrides;
 	}
-	function getSelectionColors(theme, getListboxStyle, overrides) {
+	function getSelectionColors(_ref) {
 	  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _selectionColors$sele, _theme$palette2, _selectionColors$alte, _theme$palette3, _selectionColors$excl, _theme$palette4, _selectionColors$sele2, _theme$palette5, _selectionColors$poss, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+	  let {
+	    theme,
+	    getListboxStyle,
+	    overrides,
+	    checkboxes
+	  } = _ref;
 	  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color;
 	  const desiredTextColor = componentContentTextColor || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
-	  const useContrastTextColor = (_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true;
+	  const useContrastTextColor = !checkboxes && ((_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true);
 
 	  // Background colors
 	  const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
@@ -29024,17 +29033,22 @@
 	    possibleContrast
 	  };
 	}
-	function getStyles(_ref) {
+	function getStyles(_ref2) {
 	  var _themeOverrides$heade, _themeOverrides$heade2, _themeOverrides$conte;
 	  let {
 	    themeApi,
 	    theme,
 	    components = [],
 	    checkboxes = false
-	  } = _ref;
+	  } = _ref2;
 	  const overrides = getOverridesAsObject(components);
 	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
-	  const selections = getSelectionColors(theme, getListboxStyle, overrides);
+	  const selections = getSelectionColors({
+	    theme,
+	    getListboxStyle,
+	    overrides,
+	    checkboxes
+	  });
 	  const themeOverrides = overrides.theme || {};
 	  return {
 	    backgroundColor: getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
@@ -29050,6 +29064,9 @@
 	      fontSize: ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontSize) || getListboxStyle('content', 'fontSize'),
 	      fontFamily: getListboxStyle('content', 'fontFamily')
 	    },
+	    search: {
+	      color: getListboxStyle('content', 'color')
+	    },
 	    selections
 	  };
 	}
@@ -33595,6 +33612,85 @@
 	  }));
 	}
 
+	const MULTI_REG = /,(?![^(]*\))/;
+	const SINGLE_REG = /\s(?![^(]*\))/;
+	const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+	const PREDEFINED_STRINGS = ['none', 'inset', 'initial', 'inherit'];
+	const isLength = v => v === '0' || LENGTH_REG.test(v);
+	const getColor = singleShadowString => {
+	  if (!singleShadowString) return undefined;
+	  const parts = singleShadowString.split(SINGLE_REG).filter(part => !PREDEFINED_STRINGS.includes(part.toLowerCase()));
+	  const last = parts.at(-1);
+	  const color = last && !isLength(last) && !PREDEFINED_STRINGS.includes(last.toLowerCase()) ? last : undefined;
+	  return color;
+	};
+	const getShadows = shadowString => {
+	  if (!shadowString) return [];
+	  return shadowString.split(MULTI_REG).map(s => s.trim());
+	};
+
+	/**
+	 * Combine box shadow with box shadow color.
+	 * @param {string} boxShadow - Box shadow which may include color
+	 * @param {string} themeBoxShadow - Box shadow from theme which may include color
+	 * @param {string | undefined} boxShadowColor - Box shadow color
+	 * @returns {string} Returns the combined box shadow and box shadow color
+	 *
+	 * If boxShadow is a single shadow and has a color then this color will be replaced by boxShadowColor and then
+	 * returned as the result,otherwise boxShadowColor will be added to boxShadow and then returned as the result.
+	 * If boxShadow is multiple shadows or an empty string then it will be returned as the result.
+	 *
+	 * @example getFullBoxShadow('none', '', 'red') returns 'none'
+	 *
+	 * @example getFullBoxShadow('initial', '', 'red') returns 'initial'
+	 *
+	 * @example getFullBoxShadow('inherit', '', 'red') returns 'inherit'
+	 *
+	 * @example getFullBoxShadow('', '', 'red') returns ''
+	 *
+	 * @example getFullBoxShadow('1px 2px blue, 3px 6px green', '', 'red') returns '1px 2px blue, 3px 6px green'
+	 *
+	 * @example getFullBoxShadow('1px 2px blue', '', 'red') returns '1px 2px red'
+	 *
+	 * @example getFullBoxShadow('1px 2px', '', 'red') returns '1px 2px red'
+	 *
+	 * @example getFullBoxShadow('1px 2px', '2px 5px green', undefined) returns '1px 2px green'
+	 *
+	 * @example getFullBoxShadow('1px 2px', '2px 5px', undefined) returns '1px 2px'
+	 */
+	const getFullBoxShadow = (boxShadow, themeBoxShadow, boxShadowColor) => {
+	  if (boxShadow && PREDEFINED_STRINGS.includes(boxShadow.toLowerCase())) return boxShadow.toLowerCase();
+	  const shadowArray = getShadows(boxShadow);
+	  if (shadowArray.length !== 1) return boxShadow;
+	  let shadowColor = boxShadowColor;
+	  if (!shadowColor) {
+	    const themeShadowArray = getShadows(themeBoxShadow);
+	    if (themeShadowArray.length !== 1) return boxShadow;
+	    shadowColor = getColor(themeShadowArray[0]);
+	  }
+	  if (!shadowColor) return boxShadow;
+	  const color = getColor(shadowArray[0]);
+	  if (color) return boxShadow.replace(color, shadowColor);
+	  return "".concat(boxShadow, " ").concat(shadowColor);
+	};
+
+	function resolveProperty(path, attribute, theme, objectType) {
+	  if (theme && objectType) {
+	    return theme.getStyle("object.".concat(objectType), path, attribute);
+	  }
+	  if (theme) {
+	    return theme.getStyle('', path, attribute);
+	  }
+	  return undefined;
+	}
+
+	function resolveColor(colorObj, path, attribute, theme, objectType) {
+	  if (colorObj && theme) {
+	    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, true) : undefined;
+	  }
+	  return resolveProperty(path, attribute, theme, objectType);
+	}
+
 	const imageSizingToCssProperty = {
 	  originalSize: 'auto auto',
 	  alwaysFit: 'contain',
@@ -33672,21 +33768,29 @@
 	  }
 	  return undefined;
 	}
-	function resolveBgColor(bgComp, theme, objectType) {
-	  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
+	function resolveBgColor(comp, theme, objectType) {
+	  const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
 	  if (bgColor && theme) {
 	    if (bgColor.useExpression) {
 	      return theme.validateColor(bgColor.colorExpression);
 	    }
-	    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
 	  }
-	  if (theme && objectType) {
-	    return theme.getStyle("object.".concat(objectType), '', 'backgroundColor');
-	  }
-	  if (theme) {
-	    return theme.getStyle('', '', 'backgroundColor');
-	  }
-	  return undefined;
+	  return resolveColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, '', 'backgroundColor', theme, objectType);
+	}
+	function resolveBorder(comp, theme, objectType) {
+	  const borderColor = resolveColor(comp === null || comp === void 0 ? void 0 : comp.borderColor, '', 'borderColor', theme, objectType);
+	  const borderWidth = (comp === null || comp === void 0 ? void 0 : comp.borderWidth) || resolveProperty('', 'borderWidth', theme, objectType);
+	  return borderWidth && borderColor ? "".concat(borderWidth, " solid ").concat(borderColor) : undefined;
+	}
+	function resolveBorderRadius(comp, theme, objectType) {
+	  return (comp === null || comp === void 0 ? void 0 : comp.borderRadius) || resolveProperty('', 'borderRadius', theme, objectType);
+	}
+	function resolveBoxShadow(comp, theme, objectType) {
+	  var _comp$shadow, _comp$shadow2;
+	  const themeBoxShadow = resolveProperty('shadow', 'boxShadow', theme, objectType);
+	  const boxShadow = (comp === null || comp === void 0 || (_comp$shadow = comp.shadow) === null || _comp$shadow === void 0 ? void 0 : _comp$shadow.boxShadow) || themeBoxShadow;
+	  const boxShadowColor = resolveColor(comp === null || comp === void 0 || (_comp$shadow2 = comp.shadow) === null || _comp$shadow2 === void 0 ? void 0 : _comp$shadow2.boxShadowColor, 'shadow', 'boxShadowColor', theme, objectType);
+	  return getFullBoxShadow(boxShadow, themeBoxShadow, boxShadowColor);
 	}
 	function unfurlFontStyle(fontStyle, target) {
 	  if (fontStyle && Array.isArray(fontStyle)) {
@@ -33707,6 +33811,34 @@
 	  };
 	}
 
+	const useStyling = (layout, theme, app, themeName) => {
+	  const styling = reactExports.useMemo(() => {
+	    if (layout && theme) {
+	      const generalComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+	      const titleStyles = {
+	        main: resolveTextStyle(generalComp, 'main', theme, layout.visualization),
+	        footer: resolveTextStyle(generalComp, 'footer', theme, layout.visualization),
+	        subTitle: resolveTextStyle(generalComp, 'subTitle', theme, layout.visualization)
+	      };
+	      const bgColor = resolveBgColor(generalComp, theme, layout.visualization);
+	      const bgImage = resolveBgImage(generalComp, app);
+	      const border = resolveBorder(generalComp, theme, layout.visualization);
+	      const borderRadius = resolveBorderRadius(generalComp, theme, layout.visualization);
+	      const boxShadow = resolveBoxShadow(generalComp, theme, layout.visualization);
+	      return {
+	        titleStyles,
+	        bgColor,
+	        bgImage,
+	        border,
+	        borderRadius,
+	        boxShadow
+	      };
+	    }
+	    return {};
+	  }, [layout, theme, app, themeName]);
+	  return styling;
+	};
+
 	/**
 	 * @interface
 	 * @extends HTMLElement
@@ -34036,9 +34168,14 @@
 	    enter: null,
 	    leave: null
 	  });
-	  const [bgColor, setBgColor] = reactExports.useState(undefined);
-	  const [bgImage, setBgImage] = reactExports.useState(undefined); // {url: "", size: "", pos: ""}
-	  const [titleStyles, setTitleStyles] = reactExports.useState(undefined);
+	  const {
+	    titleStyles,
+	    bgColor,
+	    bgImage,
+	    border,
+	    borderRadius,
+	    boxShadow
+	  } = useStyling(layout, halo.public.theme, halo.app, themeName);
 	  const focusHandler = reactExports.useRef({
 	    focusToolbarButton(last) {
 	      // eslint-disable-next-line react/no-this-in-sfc
@@ -34048,18 +34185,6 @@
 	  reactExports.useEffect(() => {
 	    eventmixin(focusHandler.current);
 	  }, []);
-	  reactExports.useEffect(() => {
-	    if (layout && halo.public.theme) {
-	      const bgComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
-	      setTitleStyles({
-	        main: resolveTextStyle(bgComp, 'main', halo.public.theme, layout.visualization),
-	        footer: resolveTextStyle(bgComp, 'footer', halo.public.theme, layout.visualization),
-	        subTitle: resolveTextStyle(bgComp, 'subTitle', halo.public.theme, layout.visualization)
-	      });
-	      setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
-	      setBgImage(resolveBgImage(bgComp, halo.app));
-	    }
-	  }, [layout, halo.public.theme, halo.app, themeName]);
 	  focusHandler.current.blurCallback = resetFocus => {
 	    halo.root.toggleFocusOfCells();
 	    if (resetFocus && contentNode) {
@@ -34250,7 +34375,11 @@
 	      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
 	      backgroundRepeat: 'no-repeat',
 	      backgroundSize: bgImage && bgImage.size,
-	      backgroundPosition: bgImage && bgImage.pos
+	      backgroundPosition: bgImage && bgImage.pos,
+	      border,
+	      borderRadius,
+	      boxShadow,
+	      boxSizing: 'border-box'
 	    },
 	    elevation: 0,
 	    square: true,