@momentum-design/components 0.28.4 → 0.28.6

package/dist/custom-elements.json

@@ -9518,6 +9518,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/themeprovider/themeprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
+          "name": "ThemeProvider",
+          "cssProperties": [
+            {
+              "description": "Option to override the default color, default: color-theme-text-primary-normal",
+              "name": "--mdc-themeprovider-color-default"
+            },
+            {
+              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
+              "name": "--mdc-themeprovider-font-family"
+            },
+            {
+              "description": "Option to override the font weight, default: `400`",
+              "name": "--mdc-themeprovider-font-weight"
+            },
+            {
+              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
+              "name": "--mdc-themeprovider-letter-spacing-adjustment"
+            },
+            {
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
+              "name": "--mdc-themeprovider-font-feature-settings"
+            },
+            {
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the ThemeProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "attribute": "themeclass"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "method",
+              "name": "setThemeInClassList",
+              "privacy": "private",
+              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "fieldName": "themeclass"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-themeprovider",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toggle/toggle.component.js",
@@ -10201,124 +10319,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/themeprovider/themeprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
-          "name": "ThemeProvider",
-          "cssProperties": [
-            {
-              "description": "Option to override the default color, default: color-theme-text-primary-normal",
-              "name": "--mdc-themeprovider-color-default"
-            },
-            {
-              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
-              "name": "--mdc-themeprovider-font-family"
-            },
-            {
-              "description": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
-            },
-            {
-              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
-              "name": "--mdc-themeprovider-letter-spacing-adjustment"
-            },
-            {
-              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
-            },
-            {
-              "description": "Option to override the color of the scrollbar track.",
-              "name": "--mdc-themeprovider-scrollbar-track-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the ThemeProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "attribute": "themeclass"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "method",
-              "name": "setThemeInClassList",
-              "privacy": "private",
-              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "fieldName": "themeclass"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/virtualizedlist/virtualizedlist.component.js",
@@ -10338,7 +10338,7 @@
               "kind": "field",
               "name": "onscroll",
               "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
               },
               "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
               "default": "null",
@@ -10346,7 +10346,7 @@
             },
             {
               "kind": "field",
-              "name": "virtualizerprops",
+              "name": "virtualizerProps",
               "type": {
                 "text": "VirtualizerProps"
               },
@@ -10380,6 +10380,15 @@
               "privacy": "public",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "virtualItems",
+              "type": {
+                "text": "Array<VirtualItem>"
+              },
+              "privacy": "public",
+              "default": "[]"
+            },
             {
               "kind": "field",
               "name": "virtualizerController",
@@ -10401,7 +10410,7 @@
             {
               "name": "onscroll",
               "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
               },
               "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
               "default": "null",
@@ -10413,7 +10422,7 @@
                 "text": "VirtualizerProps"
               },
               "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
-              "fieldName": "virtualizerprops"
+              "fieldName": "virtualizerProps"
             },
             {
               "name": "setlistdata",
@@ -10445,99 +10454,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/virtualizedlist/virtualizedlist.test.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "VirtualizedWrapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "onscroll",
-              "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
-              },
-              "default": "null",
-              "attribute": "onscroll"
-            },
-            {
-              "kind": "field",
-              "name": "virtualizerprops",
-              "type": {
-                "text": "VirtualizerProps"
-              },
-              "default": "{ count: 100, estimateSize: () => 100 }",
-              "attribute": "virtualizerprops"
-            },
-            {
-              "kind": "field",
-              "name": "list",
-              "type": {
-                "text": "TemplateResult<1>"
-              },
-              "default": "html``"
-            },
-            {
-              "kind": "field",
-              "name": "listItemTexts"
-            },
-            {
-              "kind": "method",
-              "name": "updateListItemTextArray",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setListData",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "{ virtualItems, measureElement, listStyle }",
-                  "type": {
-                    "text": "SetListDataProps"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "onscroll",
-              "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
-              },
-              "default": "null",
-              "fieldName": "onscroll"
-            },
-            {
-              "name": "virtualizerprops",
-              "type": {
-                "text": "VirtualizerProps"
-              },
-              "default": "{ count: 100, estimateSize: () => 100 }",
-              "fieldName": "virtualizerprops"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "VirtualizedWrapper",
-            "module": "components/virtualizedlist/virtualizedlist.test.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/AvatarComponentMixin.js",

package/dist/react/index.d.ts

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as Toggle } from './toggle';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toggle } from './toggle';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as Toggle } from './toggle';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toggle } from './toggle';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/utils/styles/index.js

@@ -37,10 +37,17 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
         :host([disabled]) .mdc-focus-ring:focus {
           box-shadow: none;
         }
+        /* Add focus ring to parent when child is focused. The parent element must have class name mdc-focus-ring */
         .mdc-focus-ring:focus-within {
           position: relative;
           box-shadow: ${boxShadow};
         }
+        /* Remove focus ring from parent when children has its own focus ring.
+            The child element must have class name own-focus-ring */
+        .mdc-focus-ring:has(.own-focus-ring:focus-visible){
+          box-shadow: none;
+        }
+
         /* High Contrast Mode */
         @media (forced-colors: active) {
           .mdc-focus-ring:focus-within {
@@ -59,13 +66,13 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
       :host([disabled]:focus) {
         box-shadow: none;
       }
-      :host(:focus), :host(:focus-within) {
+      :host(:focus) {
         position: relative;
         box-shadow: ${boxShadow};
       }
       /* High Contrast Mode */
       @media (forced-colors: active) {
-        :host(:focus), :host(:focus-within) {
+        :host(:focus) {
           outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
         }
       }

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.4"
+  "version": "0.28.6"
 }

package/dist/components/virtualizedlist/virtualizedlist.test.component.d.ts

@@ -1,17 +0,0 @@
-import { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { VirtualizerProps } from './virtualizedlist.types';
-import { Component } from '../../models';
-declare class VirtualizedWrapper extends Component {
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    virtualizerprops: VirtualizerProps;
-    list: TemplateResult<1>;
-    listItemTexts: string[];
-    constructor();
-    update(changedProperties: PropertyValues): void;
-    connectedCallback(): void;
-    private updateListItemTextArray;
-    private setListData;
-    render(): TemplateResult<1>;
-    static styles: Array<CSSResult>;
-}
-export default VirtualizedWrapper;

package/dist/components/virtualizedlist/virtualizedlist.test.component.js

@@ -1,79 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { Component } from '../../models';
-class VirtualizedWrapper extends Component {
-    constructor() {
-        super();
-        this.virtualizerprops = { count: 100, estimateSize: () => 100 };
-        this.list = html ``;
-        this.listItemTexts = new Array(this.virtualizerprops.count)
-            .fill(true)
-            .map((_, index) => `list item number ${index}`);
-        this.onscroll = null;
-        this.setListData = this.setListData.bind(this);
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.get('virtualizerprops')) {
-            this.updateListItemTextArray();
-        }
-    }
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        if ((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count) {
-            this.updateListItemTextArray();
-        }
-    }
-    updateListItemTextArray() {
-        var _a;
-        this.listItemTexts = new Array((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count)
-            .fill(true)
-            .map((_, index) => `list item number ${index}`);
-    }
-    setListData({ virtualItems, measureElement, listStyle }) {
-        if (virtualItems) {
-            this.list = html `<ul style="margin: 0;${styleMap(listStyle)}">${virtualItems.map((virtualItem) => html `<li role="listitem" key=${virtualItem.key} data-index=${virtualItem.index} ref=${ref(measureElement)}>
-          ${this.listItemTexts[virtualItem.index]}</li>`)}</ul>`;
-        }
-    }
-    render() {
-        return html `
-    <div style="height: 500px; width: 500px;">
-      <mdc-virtualizedlist
-        .onscroll=${this.onscroll}
-        .virtualizerprops=${this.virtualizerprops}
-        .setlistdata=${this.setListData}
-      >${this.list}</mdc-virtualizedlist></div>
-    `;
-    }
-}
-VirtualizedWrapper.styles = Component.styles;
-__decorate([
-    property({ type: Function, attribute: 'onscroll' }),
-    __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "onscroll", void 0);
-__decorate([
-    property({ type: Object, attribute: 'virtualizerprops' }),
-    __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "virtualizerprops", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "list", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "listItemTexts", void 0);
-export default VirtualizedWrapper;