@ni/nimble-components 11.8.1 → 11.8.4

package/dist/esm/utilities/style/theme.js

@@ -1,27 +1,22 @@
-/* eslint-disable max-classes-per-file */
-import { ElementStyles } from '@microsoft/fast-element';
 import { theme as themeToken } from '../../theme-provider';
 /**
  * Subscription for {@link ThemeStyleSheetBehavior}
  */
 class ThemeStyleSheetBehaviorSubscription {
-    constructor(themeStyles, source) {
-        this.themeStyles = themeStyles;
+    constructor(value, styles, source) {
+        this.value = value;
+        this.styles = styles;
         this.source = source;
-        this.attached = null;
     }
-    handleChange({ target, token }) {
-        this.attach(token.getValueFor(target));
-    }
-    attach(theme) {
-        if (this.attached !== this.themeStyles[theme]) {
-            if (this.attached !== null) {
-                this.source.$fastController.removeStyles(this.attached);
-            }
-            this.attached = this.themeStyles[theme];
-            if (this.attached !== null) {
-                this.source.$fastController.addStyles(this.attached);
-            }
+    handleChange() {
+        const theme = themeToken.getValueFor(this.source);
+        if (Array.isArray(this.value)
+            ? this.value.includes(theme)
+            : this.value === theme) {
+            this.source.$fastController.addStyles(this.styles);
+        }
+        else {
+            this.source.$fastController.removeStyles(this.styles);
         }
     }
 }
@@ -29,47 +24,22 @@ class ThemeStyleSheetBehaviorSubscription {
  * Behavior to conditionally apply theme-based stylesheets.
  */
 class ThemeStyleSheetBehavior {
-    constructor(lightStyle, darkStyleOrAlias, colorStyleOrAlias) {
+    constructor(theme, styles) {
+        this.theme = theme;
+        this.styles = styles;
         this.cache = new WeakMap();
-        const light = lightStyle;
-        const dark = ThemeStyleSheetBehavior.resolveTheme(darkStyleOrAlias, {
-            light,
-            dark: null,
-            color: null
-        });
-        const color = ThemeStyleSheetBehavior.resolveTheme(colorStyleOrAlias, {
-            light,
-            dark,
-            color: null
-        });
-        this.themeStyles = {
-            light,
-            dark,
-            color
-        };
-    }
-    static resolveTheme(value, currentThemeStyles) {
-        if (value instanceof ElementStyles || value === null) {
-            return value;
-        }
-        const currentStyle = currentThemeStyles[value];
-        if (currentStyle === null) {
-            throw new Error(`Tried to alias to theme '${value}' but the theme value is not set to a style.`);
-        }
-        return currentStyle;
     }
     /**
      * @internal
      */
     bind(source) {
         const subscriber = this.cache.get(source)
-            || new ThemeStyleSheetBehaviorSubscription(this.themeStyles, source);
-        const value = themeToken.getValueFor(source);
+            || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
         // Currently subscriber from cache may have gone through unbind
         // but still be in cache so always resubscribe
         // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
         themeToken.subscribe(subscriber, source);
-        subscriber.attach(value);
+        subscriber.handleChange();
         this.cache.set(source, subscriber);
     }
     /**
@@ -87,20 +57,18 @@ class ThemeStyleSheetBehavior {
 /**
  * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
  * the behavior will use the nearest ThemeProvider's 'theme' design system value.
- * To re-use the same style for multiple themes you can specify the name of an already
- * defined theme to alias them together.
  *
  * @public
  * @example
  * ```ts
  * css`
- *  // ...
- * `.withBehaviors(new ThemeStyleSheetBehavior(
- *   css`:host { ... Theme.light style... }`),
- *   null, // No style needed for Theme.dark style
- *   Theme.light // For the Theme.color style, re-use the previously set Theme.light style
+ *     // ...
+ * `.withBehaviors(
+ *     themeBehavior(Theme.light, css` ... `),
+ *     // Apply style for both dark and color theme
+ *     themeBehavior([Theme.dark, Theme.color], css` ... `)
  * )
  * ```
  */
-export const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
+export const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 //# sourceMappingURL=theme.js.map

package/dist/esm/utilities/style/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/utilities/style/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/utilities/style/theme.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;GAEG;AACH,MAAM,mCAAmC;IACrC,YACqB,KAAsB,EACtB,MAAqB,EACrB,MAAiC;QAFjC,UAAK,GAAL,KAAK,CAAiB;QACtB,WAAM,GAAN,MAAM,CAAe;QACrB,WAAM,GAAN,MAAM,CAA2B;IACnD,CAAC;IAEG,YAAY;QACf,MAAM,KAAK,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClD,IACI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YACrB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,EAC5B;YACE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtD;aAAM;YACH,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACzD;IACL,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,uBAAuB;IAMzB,YACqB,KAAsB,EACtB,MAAqB;QADrB,UAAK,GAAL,KAAK,CAAiB;QACtB,WAAM,GAAN,MAAM,CAAe;QAPzB,UAAK,GAGlB,IAAI,OAAO,EAAE,CAAC;IAKf,CAAC;IAEJ;;OAEG;IACI,IAAI,CAAC,MAAiC;QACzC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;eAClC,IAAI,mCAAmC,CACtC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,MAAM,CACT,CAAC;QAEN,+DAA+D;QAC/D,8CAA8C;QAC9C,6EAA6E;QAC7E,UAAU,CAAC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QACzC,UAAU,CAAC,YAAY,EAAE,CAAC;QAE1B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,MAAiC;QAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE1C,IAAI,UAAU,EAAE;YACZ,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;SACtC;QAED,iDAAiD;QACjD,6EAA6E;IACjF,CAAC;CACJ;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,KAAsB,EACtB,MAAqB,EACE,EAAE,CAAC,IAAI,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.8.1",
+  "version": "11.8.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",