@descope/web-components-ui 3.1.13 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.1.13",
+  "version": "3.2.1",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -51,10 +51,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.1.13",
-    "test-drivers": "3.1.13",
-    "webpack-extract-font-loader": "3.1.13",
-    "webpack-replace-plugin": "3.1.13"
+    "rollup-replace-plugin": "3.2.1",
+    "test-drivers": "3.2.1",
+    "webpack-extract-font-loader": "3.2.1",
+    "webpack-replace-plugin": "3.2.1"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -78,32 +78,33 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.1.13",
-    "@descope-ui/descope-address-field": "3.1.13",
-    "@descope-ui/descope-country-subdivision-city-field": "3.1.13",
-    "@descope-ui/descope-apps-list": "3.1.13",
-    "@descope-ui/descope-autocomplete-field": "3.1.13",
-    "@descope-ui/descope-avatar": "3.1.13",
-    "@descope-ui/descope-badge": "3.1.13",
-    "@descope-ui/descope-button": "3.1.13",
-    "@descope-ui/descope-collapsible-container": "3.1.13",
-    "@descope-ui/descope-combo-box": "3.1.13",
-    "@descope-ui/descope-enriched-text": "3.1.13",
-    "@descope-ui/descope-icon": "3.1.13",
-    "@descope-ui/descope-image": "3.1.13",
-    "@descope-ui/descope-link": "3.1.13",
-    "@descope-ui/descope-list-item": "3.1.13",
-    "@descope-ui/descope-outbound-app-button": "3.1.13",
-    "@descope-ui/descope-outbound-apps": "3.1.13",
-    "@descope-ui/descope-list": "3.1.13",
-    "@descope-ui/descope-password-strength": "3.1.13",
-    "@descope-ui/descope-text": "3.1.13",
-    "@descope-ui/descope-ponyhot": "3.1.13",
-    "@descope-ui/descope-timer": "3.1.13",
-    "@descope-ui/descope-timer-button": "3.1.13",
-    "@descope-ui/descope-trusted-devices": "3.1.13",
-    "@descope-ui/descope-tooltip": "3.1.13",
-    "@descope-ui/descope-recovery-codes": "3.1.13"
+    "@descope-ui/common": "3.2.1",
+    "@descope-ui/descope-address-field": "3.2.1",
+    "@descope-ui/descope-country-subdivision-city-field": "3.2.1",
+    "@descope-ui/descope-apps-list": "3.2.1",
+    "@descope-ui/descope-autocomplete-field": "3.2.1",
+    "@descope-ui/descope-avatar": "3.2.1",
+    "@descope-ui/descope-badge": "3.2.1",
+    "@descope-ui/descope-button": "3.2.1",
+    "@descope-ui/descope-collapsible-container": "3.2.1",
+    "@descope-ui/descope-combo-box": "3.2.1",
+    "@descope-ui/descope-enriched-text": "3.2.1",
+    "@descope-ui/descope-icon": "3.2.1",
+    "@descope-ui/descope-image": "3.2.1",
+    "@descope-ui/descope-link": "3.2.1",
+    "@descope-ui/descope-list": "3.2.1",
+    "@descope-ui/descope-list-item": "3.2.1",
+    "@descope-ui/descope-outbound-app-button": "3.2.1",
+    "@descope-ui/descope-outbound-apps": "3.2.1",
+    "@descope-ui/descope-password-strength": "3.2.1",
+    "@descope-ui/descope-ponyhot": "3.2.1",
+    "@descope-ui/descope-recovery-codes": "3.2.1",
+    "@descope-ui/descope-timer-button": "3.2.1",
+    "@descope-ui/descope-tooltip": "3.2.1",
+    "@descope-ui/descope-trusted-devices": "3.2.1",
+    "@descope-ui/descope-attachment": "3.2.1",
+    "@descope-ui/descope-timer": "3.2.1",
+    "@descope-ui/descope-text": "3.2.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",
@@ -156,7 +157,7 @@
     "start": "webpack serve -c webpack.dev.js --port=8888",
     "format": "prettier --ignore-path .gitignore --write .",
     "format:all": "npm run format .",
-    "storybook": "storybook dev -p 6006 --quiet",
+    "storybook": "storybook dev -p 6007 --quiet",
     "storybook:noCsp": "STORYBOOK_NO_CSP=true npm run storybook",
     "build-storybook": "storybook build",
     "lint-staged": "lint-staged"

package/src/constants.js

@@ -1,4 +1,3 @@
 export const DESCOPE_PREFIX = 'descope';
 export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 export const BASE_THEME_SECTION = 'host';
-export const PORTAL_THEME_PREFIX = '@';

package/src/helpers/themeHelpers/index.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge';
-import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';
+import { BASE_THEME_SECTION, DESCOPE_PREFIX } from '../../constants';
 import { isUrl, kebabCase } from '..';
 import { getComponentName, getCssVarName } from '../componentHelpers';
 
@@ -69,6 +69,13 @@ function splitAmpersands(str) {
   return [match[1] || '', match[2] || ''];
 }
 
+const CONTAINER_QUERY_PREFIX = '@container';
+const isContainerQuery = (key) => key.startsWith(CONTAINER_QUERY_PREFIX);
+
+const BREAKPOINTS_KEY = '$breakpoints';
+const BREAKPOINTS_REF_PREFIX = '$breakpoints.';
+const isBreakpointRef = (key) => key.startsWith(BREAKPOINTS_REF_PREFIX);
+
 // st attributes are also using selector multiplication
 // so we need to limit the multiplication
 const MAX_SELECTOR_MULTIPLY = 3;
@@ -76,6 +83,10 @@ const MAX_SELECTOR_MULTIPLY = 3;
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
+
+    // skip $breakpoints definitions — they are metadata, not CSS output
+    if (restPath[0] === BREAKPOINTS_KEY) return {};
+
     const property = restPath.pop();
     const componentName = getComponentName(component);
 
@@ -84,15 +95,27 @@ const componentsThemeToStyleObj = (componentsTheme) =>
       console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
     }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
-    let themeName = BASE_THEME_SECTION;
-
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    const themeName = BASE_THEME_SECTION;
+
+    // extract @container queries from restPath at any position,
+    // resolving breakpoints.X references via the component's $breakpoints map
+    const componentBreakpoints = componentsTheme[component]?.[BREAKPOINTS_KEY] || {};
+    const resolveKey = (key) =>
+      isBreakpointRef(key)
+        ? `${CONTAINER_QUERY_PREFIX} ${componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]}`
+        : key;
+    const breakpointRefs = restPath.filter(isBreakpointRef);
+    const missingRef = breakpointRefs.find(
+      (key) => !componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]
+    );
+    if (missingRef) {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme references undefined breakpoint "${missingRef}"`);
+      return {};
     }
+    const containerQueries = breakpointRefs.map(resolveKey);
+    // remove breakpoint refs from restPath so the remaining parts are processed as attribute selectors
+    restPath.splice(0, restPath.length, ...restPath.filter((s) => !isBreakpointRef(s)));
 
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
@@ -131,25 +154,29 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
+    // wrap the selector rule in container queries from innermost to outermost
+    // e.g. ['@container (max-width: 80px)'] + { ':host': { prop: val } }
+    //   => { '@container (max-width: 80px)': { ':host': { prop: val } } }
+    const leaf = containerQueries.reduceRight((acc, query) => ({ [query]: acc }), {
+      [selector]: { [property]: getCssVarValue(val) },
+    });
+
     return {
       [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
-          },
-        },
+        [themeName]: leaf,
       },
     };
   });
 
 const componentsThemeToStyle = (componentsTheme) =>
-  Object.entries(componentsTheme).reduce(
-    (acc, [selector, vars]) =>
-      `${acc}${selector} { \n${Object.entries(vars)
-        .map(([key, val]) => `${key}: ${val}`)
-        .join(';\n')} \n}\n\n`,
-    ''
-  );
+  Object.entries(componentsTheme).reduce((acc, [key, value]) => {
+    if (isContainerQuery(key)) {
+      return `${acc}${key} {\n${componentsThemeToStyle(value)}}\n\n`;
+    }
+    return `${acc}${key} { \n${Object.entries(value)
+      .map(([prop, val]) => `${prop}: ${val}`)
+      .join(';\n')} \n}\n\n`;
+  }, '');
 
 export const createComponentsTheme = (componentsTheme) => {
   const styleObj = componentsThemeToStyleObj(componentsTheme);

package/src/theme/components/index.js

@@ -22,6 +22,7 @@ import * as outboundAppButton from '@descope-ui/descope-outbound-app-button/them
 import * as trustedDevices from '@descope-ui/descope-trusted-devices/theme';
 import * as tooltip from '@descope-ui/descope-tooltip/theme';
 import * as countrySubdivisionCityField from '@descope-ui/descope-country-subdivision-city-field/theme';
+import * as attachment from '@descope-ui/descope-attachment/theme';
 import * as textField from './textField';
 import * as password from './password';
 import * as numberField from './numberField';
@@ -135,6 +136,7 @@ const components = {
   outboundAppButton,
   trustedDevices,
   tooltip,
+  attachment,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/phoneField.js

@@ -35,10 +35,6 @@ const phoneField = {
   [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars.errorMessageFontSize]: refs.errorMessageFontSize,
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
 };
 
 export default phoneField;