@momentum-design/components 0.127.4 → 0.127.6

package/dist/react/banner/index.d.ts

@@ -31,6 +31,7 @@ import Component from '../../components/banner';
  *
  * @cssproperty --mdc-banner-background-color - Background color of the banner.
  * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-border-width - Border width of the banner.
  * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
  * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
  * @cssproperty --mdc-banner-padding - Padding inside the banner.

package/dist/react/banner/index.js

@@ -34,6 +34,7 @@ import { TAG_NAME } from '../../components/banner/banner.constants';
  *
  * @cssproperty --mdc-banner-background-color - Background color of the banner.
  * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-border-width - Border width of the banner.
  * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
  * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
  * @cssproperty --mdc-banner-padding - Padding inside the banner.

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
@@ -14,9 +14,9 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Buttonsimple } from './buttonsimple';
-export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
+export { default as Card } from './card';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
@@ -81,8 +81,8 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
-export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
+export { default as Toast } from './toast';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
@@ -14,9 +14,9 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Buttonsimple } from './buttonsimple';
-export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
+export { default as Card } from './card';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
@@ -81,8 +81,8 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
-export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
+export { default as Toast } from './toast';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';

package/dist/utils/provider/index.d.ts

@@ -1,9 +1,20 @@
-import { Context, ContextConsumer } from '@lit/context';
-import { ReactiveElement } from 'lit';
-type ConsumeOptions<C> = {
+import type { ReactiveElement } from 'lit';
+import { type Context, ContextConsumer } from '@lit/context';
+import type { Options } from '@lit/context/lib/controllers/context-consumer';
+type ConsumeOptions<C extends Context<unknown, unknown>> = Options<C> & {
     host: ReactiveElement;
-    context: C;
-    subscribe?: boolean;
+    /**
+     * List of properties which need update when context changes
+     *
+     * For example a property getter depends on the context value and the property must be reflected to attribute.
+     *
+     * Background: Lit does not track dependencies between context consumers and properties, so
+     * we need to manually request an update for those properties.
+     *
+     * You can do it in the `updated` lifecycle method as well, but it will trigger an extra update cycle.
+     * While this approach will batch the updates with the context update cycle (which happens anyway).
+     */
+    syncProperties?: string[];
 };
 declare const providerUtils: {
     consume: <C extends Context<unknown, unknown>>(options: ConsumeOptions<C>) => ContextConsumer<C, ReactiveElement>;

package/dist/utils/provider/index.js

@@ -1,8 +1,18 @@
 import { ContextConsumer } from '@lit/context';
 const consume = (options) => {
-    const { host, context, subscribe } = options;
+    const { host, context, subscribe, callback, syncProperties } = options;
+    const contextCallback = (callback || syncProperties) &&
+        ((value) => {
+            if (syncProperties) {
+                syncProperties.forEach(prop => {
+                    host.requestUpdate(prop);
+                });
+            }
+            callback === null || callback === void 0 ? void 0 : callback(value);
+        });
     return new ContextConsumer(host, {
         context,
+        callback: contextCallback,
         subscribe: subscribe !== null && subscribe !== void 0 ? subscribe : true,
     });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.127.4",
+  "version": "0.127.6",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"