@momentum-design/components 0.127.5 → 0.127.7

package/dist/react/index.d.ts

@@ -9,8 +9,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
-export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Brandvisual } from './brandvisual';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
@@ -41,9 +41,9 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListBox } from './listbox';
 export { default as Listheader } from './listheader';
+export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as ListItem } from './listitem';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';

package/dist/react/index.js

@@ -9,8 +9,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
-export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Brandvisual } from './brandvisual';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
@@ -41,9 +41,9 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListBox } from './listbox';
 export { default as Listheader } from './listheader';
+export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as ListItem } from './listitem';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';

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.5",
+  "version": "0.127.7",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"