chore: merge master into main (#1441)

* fix: bgColor with useColorExpression property (#1426)

* chore(deps): bump @adobe/css-tools from 4.3.1 to 4.3.2 (#1421)

Bumps [@adobe/css-tools](https://github.com/adobe/css-tools) from 4.3.1 to 4.3.2.
- [Changelog](https://github.com/adobe/css-tools/blob/main/History.md)
- [Commits](https://github.com/adobe/css-tools/commits)

---
updated-dependencies:
- dependency-name: "@adobe/css-tools"
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1429)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency ws to v8.15.0 (#1430)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1431)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(listbox): let color resolver pick up the index instead of hex (#1428)

* fix: enable picking up the index instead of hex

* fix: resolve color picker color in other cases too

* fix: apply backdrop filter

* fix: limit backdrop to when we have a bg image

* test: update bg image

* test: update unit test

* chore(deps): update dependency lerna to v8 (#1416)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1433)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency rollup to v4.9.1 (#1435)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: use 12px as default font size in theme (#1427)

* chore(deps): update github/codeql-action action to v3 (#1434)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(listbox): make search focus border color blue (#1432)

* fix: search focus border color

* test: update tests and snapshots

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Christofer Splittorff <cbt@qlik.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Johan Lahti <johanlahti@users.noreply.github.com>
Co-authored-by: Max Gefvert <max.gefvert@qlik.com>

.circleci/config.yml

@@ -82,7 +82,7 @@ commands:
 jobs:
   validate:
     docker:
-      - image: cimg/node:21.2.0
+      - image: cimg/node:21.4.0
     working_directory: ~/project
     steps:
       - attach_workspace:
@@ -106,7 +106,7 @@ jobs:
 
   build:
     docker:
-      - image: cimg/node:21.2.0
+      - image: cimg/node:21.4.0
 
     working_directory: ~/project
     resource_class: large
@@ -130,7 +130,7 @@ jobs:
 
   test-integration:
     docker:
-      - image: cimg/node:21.2.0
+      - image: cimg/node:21.4.0
       - image: browserless/chrome:1-puppeteer-7.1.0
 
     working_directory: ~/project
@@ -161,7 +161,7 @@ jobs:
 
   test-create:
     docker:
-      - image: cimg/node:21.2.0
+      - image: cimg/node:21.4.0
       - image: browserless/chrome:1-puppeteer-7.1.0
 
     working_directory: ~/project

.codesandbox/mekko/package.json

@@ -13,7 +13,7 @@
     "enigma.js": "2.12.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "parcel": "^2.10.3"
   }
 }

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

apis/nucleus/package.json

@@ -6,8 +6,8 @@
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
     "@nebula.js/conversion": "^5.0.0-alpha.0",
     "@nebula.js/locale": "^5.0.0-alpha.0",
     "@nebula.js/supernova": "^5.0.0-alpha.0",

apis/nucleus/src/components/listbox/assets/__tests__/styling.test.js

@@ -40,6 +40,10 @@ describe('styling', () => {
         },
       },
       palette: {
+        divider: '#ccc',
+        custom: {
+          focusBorder: 'blue',
+        },
         text: {
           primary: 'primary',
         },
@@ -146,6 +150,7 @@ describe('styling', () => {
           content: {
             fontSize: 'size-from-component',
             fontColor: {
+              index: -1,
               color: undefined, // <- should not trigger a contrast color
             },
             useContrastColor: true,
@@ -168,6 +173,7 @@ describe('styling', () => {
           content: {
             fontSize: 'size-from-component',
             fontColor: {
+              index: -1,
               color: 'color-from-component',
             },
             useContrastColor: false,

apis/nucleus/src/components/listbox/assets/list-sizes/container-padding.js

@@ -12,7 +12,7 @@ export default function getContainerPadding({ isGridMode, dense, height, layoutO
     }
     containerPadding = layoutOrder === 'row' ? `${paddingY} 4px` : `${paddingY} 6px ${paddingY} 4px`;
   } else {
-    containerPadding = undefined; // to prevent overriding any default padding
+    containerPadding = undefined;
   }
   return containerPadding;
 }

apis/nucleus/src/components/listbox/assets/styling.js

@@ -62,23 +62,26 @@ export function getOverridesAsObject(components = []) {
   return overrides;
 }
 
-function getSelectionColors({ theme, getListboxStyle, overrides, checkboxes }) {
+function getSelectionColors({ getColorPickerColor, theme, getListboxStyle, overrides, checkboxes }) {
-  const componentContentTextColor = overrides.theme?.content?.fontColor?.color;
+  const componentContentTextColor = overrides.theme?.content?.fontColor;
   const desiredTextColor =
-    componentContentTextColor || getListboxStyle('content', 'color') || theme.palette?.text.primary;
+    getColorPickerColor(componentContentTextColor) ||
+    getListboxStyle('content', 'color') ||
+    theme.palette?.text.primary;
 
   const useContrastTextColor = !checkboxes && (overrides.theme?.content?.useContrastColor ?? true);
 
   // Background colors
   const selectionColors = overrides.selections?.colors || {};
 
-  const selected = selectionColors.selected?.color || theme.palette?.selected.main || '#009845';
+  const selected = getColorPickerColor(selectionColors.selected) || theme.palette?.selected.main || '#009845';
-  const alternative = selectionColors.alternative?.color || theme.palette?.selected.alternative || '#E4E4E4';
+  const alternative =
-  const excluded = selectionColors.excluded?.color || theme.palette?.selected.excluded || '#A9A9A9';
+    getColorPickerColor(selectionColors.alternative) || theme.palette?.selected.alternative || '#E4E4E4';
+  const excluded = getColorPickerColor(selectionColors.excluded) || theme.palette?.selected.excluded || '#A9A9A9';
   const selectedExcluded =
-    selectionColors.selectedExcluded?.color || theme.palette?.selected.selectedExcluded || '#A9A9A9';
+    getColorPickerColor(selectionColors.selectedExcluded) || theme.palette?.selected.selectedExcluded || '#A9A9A9';
   const possible =
-    selectionColors.possible?.color ||
+    getColorPickerColor(selectionColors.possible) ||
     getListboxStyle('', 'backgroundColor') ||
     theme.palette?.selected.possible ||
     '#FFFFFF';
@@ -123,7 +126,7 @@ function getBackgroundColor({ themeApi, themeOverrides }) {
   if (bgColor?.useExpression) {
     color = resolveBgColor({ bgColor }, themeApi, 'listBox');
   } else {
-    color = themeApi.getColorPickerColor(bgColor, true)?.color;
+    color = themeApi.getColorPickerColor(bgColor?.color, false);
   }
   return color;
 }
@@ -137,11 +140,12 @@ function getSearchColor(getListboxStyle) {
 export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
+  const getColorPickerColor = (c) => (c?.index > 0 || c?.color ? themeApi.getColorPickerColor(c, false) : undefined);
 
-  const selections = getSelectionColors({ theme, getListboxStyle, overrides, checkboxes });
+  const selections = getSelectionColors({ getColorPickerColor, theme, getListboxStyle, overrides, checkboxes });
   const themeOverrides = overrides.theme || {};
 
-  const headerColor = themeOverrides.header?.fontColor?.color || getListboxStyle('title.main', 'color');
+  const headerColor = getColorPickerColor(themeOverrides.header?.fontColor) || getListboxStyle('title.main', 'color');
 
   const bgComponentColor = getBackgroundColor({ themeApi, themeOverrides });
 
@@ -199,8 +203,9 @@ export default function getStyles({ app, themeApi, theme, components = [], check
     search: {
       color: searchColor,
       borderColor: theme.palette.divider,
-      highlightBorderColor: theme.palette.primary.main,
+      highlightBorderColor: theme.palette.custom.focusBorder,
       backgroundColor: searchBgColor,
+      backdropFilter: 'blur(8px)',
     },
     selections,
   };

apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx

@@ -29,6 +29,7 @@ const StyledOutlinedInput = styled(OutlinedInput, {
     fontSize: 14,
     borderRadius: 0,
     backgroundColor: styles.search.backgroundColor,
+    backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
     paddingLeft: `${CELL_PADDING_LEFT}px`,
     flexDirection: isRtl ? 'row-reverse' : 'row',
 
@@ -37,6 +38,9 @@ const StyledOutlinedInput = styled(OutlinedInput, {
       borderWidth: '1px 0 1px 0',
       borderRadius: 0,
     },
+    '&.Mui-focused fieldset': {
+      borderColor: `${styles.search.highlightBorderColor} !important`,
+    },
     '& .MuiInputBase-root': {
       ...styles.search,
     },
@@ -47,9 +51,6 @@ const StyledOutlinedInput = styled(OutlinedInput, {
       color: styles.search.color,
       textAlign: isRtl ? 'right' : 'left',
     },
-    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
-      borderColor: `${styles.search.highlightBorderColor} !important`,
-    },
     ...denseProps,
   };
 });

apis/nucleus/src/components/listbox/components/__tests__/list-box-search.test.jsx

@@ -15,7 +15,7 @@ const theme = createTheme('dark');
 const create = (comp) => renderer.create(<ThemeProvider theme={theme}>{comp}</ThemeProvider>);
 
 let selections = {};
-const styles = { content: {}, header: {}, selections: {}, search: {} };
+const styles = { content: {}, header: {}, selections: {}, search: {}, background: {} };
 
 const keyboard = {};
 

apis/nucleus/src/utils/style/__tests__/styling-props.test.js

@@ -80,6 +80,16 @@ describe('Styling property resolver', () => {
       expect(color).toBe('resolvedColor');
     });
 
+    test('should resolve background color by expression using useColorExpression property', () => {
+      jest.spyOn(resolveColor, 'default').mockReturnValue('resolvedColor');
+      bgCompLayout.bgColor.useColorExpression = true;
+      bgCompLayout.bgColor.useExpression = false;
+
+      const color = resolveBgColor(bgCompLayout, t);
+      expect(resolveColor.default).toHaveBeenCalledTimes(0);
+      expect(color).toBe('rgb(255, 0, 0)');
+    });
+
     test('should resolve background color by theme', () => {
       jest.spyOn(resolveColor, 'default').mockReturnValue('resolvedColor');
       const color = resolveBgColor({}, t, 'peoplechart');

apis/nucleus/src/utils/style/styling-props.js

@@ -87,7 +87,7 @@ export function resolveBgImage(bgComp, app) {
 export function resolveBgColor(comp, theme, objectType) {
   const bgColor = comp?.bgColor;
   if (bgColor && theme) {
-    if (bgColor.useExpression) {
+    if (bgColor.useExpression || bgColor.useColorExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
   }

apis/stardust/core/package.json

@@ -1,8 +1,8 @@
 {
   "module": "esm/index.js",
   "peerDependencies": {
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "react": "^17.0.2 || ^18.1.0",

apis/stardust/package.json

@@ -46,8 +46,8 @@
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
     "@nebula.js/conversion": "^5.0.0-alpha.0",
     "@nebula.js/enigma-mocker": "^5.0.0-alpha.0",
     "@nebula.js/locale": "^5.0.0-alpha.0",
@@ -66,7 +66,7 @@
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "1.8.10",
     "react-window-infinite-loader": "1.0.9",
-    "regenerator-runtime": "0.14.0",
+    "regenerator-runtime": "0.14.1",
     "semver": "7.5.4"
   }
 }

apis/theme/src/themes/base.json

@@ -1,5 +1,5 @@
 {
-  "fontSize": "13px",
+  "fontSize": "12px",
   "fontFamily": "'Source Sans Pro', 'Arial', 'sans-serif'",
   "backgroundColor": "transparent",
   "dataColors": {

commands/build/package.json

@@ -22,19 +22,19 @@
   },
   "dependencies": {
     "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "@babel/plugin-transform-react-jsx": "7.23.4",
-    "@babel/preset-env": "7.23.5",
+    "@babel/preset-env": "7.23.6",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
-    "@rollup/plugin-json": "6.0.1",
+    "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-terser": "0.4.4",
     "chalk": "4.1.2",
     "extend": "3.0.2",
     "postcss": "^8.4.32",
-    "rollup": "4.6.1",
+    "rollup": "4.9.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-sourcemaps": "0.6.3",
     "yargs": "17.7.2"
@@ -42,6 +42,6 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "11.1.5",
     "tslib": "*",
-    "typescript": ">=5.3.2"
+    "typescript": ">=5.3.3"
   }
 }

commands/sense/package.json

@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
-    "@babel/preset-env": "7.23.5",
+    "@babel/preset-env": "7.23.6",
     "@nebula.js/stardust": "^5.0.0-alpha.0",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
@@ -39,7 +39,7 @@
     "extend": "3.0.2",
     "fs-extra": "11.2.0",
     "node-event-emitter": "0.0.1",
-    "rollup": "4.6.1",
+    "rollup": "4.9.1",
     "yargs": "17.7.2"
   }
 }

commands/serve/package.json

@@ -38,23 +38,23 @@
     "cross-env": "7.0.3",
     "express": "4.18.2",
     "extend": "3.0.2",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "5.5.4",
     "portfinder": "1.0.32",
     "puppeteer": "14.4.1",
-    "regenerator-runtime": "0.14.0",
+    "regenerator-runtime": "0.14.1",
     "source-map-loader": "4.0.1",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "ws": "8.14.2",
+    "ws": "8.15.1",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
-    "@babel/preset-env": "7.23.5",
+    "@babel/preset-env": "7.23.6",
     "@babel/preset-react": "7.23.3",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
-    "@mui/system": "^5.14.19",
+    "@mui/system": "^5.15.0",
     "@nebula.js/enigma-mocker": "^5.0.0-alpha.0",
     "@nebula.js/nucleus": "^5.0.0-alpha.0",
     "@nebula.js/snapshooter": "^5.0.0-alpha.0",
@@ -67,10 +67,10 @@
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-webpack": "0.13.8",
     "file-loader": "^6.2.0",
-    "monaco-editor": "0.44.0",
+    "monaco-editor": "0.45.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.20.1"
+    "react-router-dom": "6.21.0"
   }
 }

package.json

@@ -38,18 +38,18 @@
   "devDependencies": {
     "@after-work.js/aw": "6.0.14",
     "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "@babel/helper-plugin-utils": "7.22.5",
     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/plugin-transform-react-jsx": "7.23.4",
-    "@babel/preset-env": "7.23.5",
+    "@babel/preset-env": "7.23.6",
     "@babel/preset-react": "7.23.3",
     "@commitlint/cli": "18.4.3",
     "@commitlint/config-conventional": "18.4.3",
     "@playwright/test": "1.40.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
-    "@rollup/plugin-json": "6.0.1",
+    "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-terser": "0.4.4",
@@ -62,10 +62,10 @@
     "cross-env": "7.0.3",
     "css-loader": "6.8.1",
     "enigma.js": "2.12.0",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-mocha": "10.2.0",
@@ -78,23 +78,23 @@
     "jest-junit": "^16.0.0",
     "jest-location-mock": "^2.0.0",
     "jimp": "0.22.10",
-    "lerna": "7.4.2",
+    "lerna": "8.0.1",
     "lint-staged": "^15.2.0",
     "mocha-junit-reporter": "2.2.1",
     "picasso-plugin-q": "2.2.5",
     "picasso.js": "2.2.5",
-    "prettier": "3.1.0",
+    "prettier": "3.1.1",
     "puppeteer": "19.11.1",
     "qix-faker": "0.3.0",
-    "rollup": "4.6.1",
+    "rollup": "4.9.1",
     "rollup-plugin-dependency-flow": "0.3.0",
     "rollup-plugin-sass": "1.12.21",
     "style-loader": "3.3.3",
-    "whatwg-fetch": "^3.6.19",
+    "whatwg-fetch": "^3.6.20",
     "yargs": "17.7.2"
   },
   "resolutions": {
-    "**/caniuse-lite": "1.0.30001565",
+    "**/caniuse-lite": "1.0.30001570",
     "**/react": "18.2.0",
     "**/react-dom": "18.2.0",
     "**/react-is": "18.2.0",

packages/ui/package.json

@@ -10,16 +10,16 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.15.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }