@nebula.js/stardust 4.6.2 → 4.7.0

package/core/esm/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.
 */
@@ -5670,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @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
@@ -8551,7 +8551,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8812,7 +8812,7 @@ function boot(_ref2) {
   const appRef = React__default.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) {
@@ -10315,7 +10315,6 @@ const StyledCheckbox = styled$1(Checkbox, {
   shouldForwardProp: p => p !== 'styles'
 })(_ref => {
   let {
-    theme,
     styles
   } = _ref;
   return {
@@ -10346,13 +10345,13 @@ const StyledCheckbox = styled$1(Checkbox, {
       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,
@@ -14911,7 +14910,7 @@ const StyledInputAdornment = styled$1(InputAdornment, {
     styles
   } = _ref;
   return {
-    color: styles.content.color
+    color: styles.search.color
   };
 });
 const StyledOutlinedInput = styled$1(OutlinedInput, {
@@ -14921,8 +14920,10 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     styles
   } = _ref2;
   return {
-    color: styles.content.color,
-    display: 'flex'
+    display: 'flex',
+    '& .MuiInputBase-root': {
+      color: styles.search.color
+    }
   };
 });
 function ListBoxSearch(_ref3) {
@@ -17165,11 +17166,17 @@ function getOverridesAsObject() {
   });
   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) || {};
@@ -17206,17 +17213,22 @@ function getSelectionColors(theme, getListboxStyle, overrides) {
     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,
@@ -17232,6 +17244,9 @@ function getStyles(_ref) {
       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
   };
 }
@@ -21777,6 +21792,85 @@ function Supernova(_ref) {
   }));
 }
 
+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',
@@ -21854,21 +21948,29 @@ function resolveBgImage(bgComp, app) {
   }
   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)) {
@@ -21889,6 +21991,34 @@ function resolveTextStyle(textComp, target, theme, objectType) {
   };
 }
 
+const useStyling = (layout, theme, app, themeName) => {
+  const styling = useMemo$1(() => {
+    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
@@ -22218,9 +22348,14 @@ const Cell = forwardRef((_ref6, ref) => {
     enter: null,
     leave: null
   });
-  const [bgColor, setBgColor] = useState$1(undefined);
-  const [bgImage, setBgImage] = useState$1(undefined); // {url: "", size: "", pos: ""}
-  const [titleStyles, setTitleStyles] = useState$1(undefined);
+  const {
+    titleStyles,
+    bgColor,
+    bgImage,
+    border,
+    borderRadius,
+    boxShadow
+  } = useStyling(layout, halo.public.theme, halo.app, themeName);
   const focusHandler = useRef({
     focusToolbarButton(last) {
       // eslint-disable-next-line react/no-this-in-sfc
@@ -22230,18 +22365,6 @@ const Cell = forwardRef((_ref6, ref) => {
   useEffect$1(() => {
     eventmixin(focusHandler.current);
   }, []);
-  useEffect$1(() => {
-    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) {
@@ -22432,7 +22555,11 @@ const Cell = forwardRef((_ref6, ref) => {
       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,