@momentum-design/components 0.129.18 → 0.129.19

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

@@ -16,10 +16,10 @@ declare const VirtualizedList_base: import("../../utils/mixins/index.types").Con
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -48,6 +48,19 @@ declare const VirtualizedList_base: import("../../utils/mixins/index.types").Con
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

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

@@ -30,10 +30,10 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -62,6 +62,19 @@ import { DEFAULTS } from './virtualizedlist.constants';
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/dist/custom-elements.json

@@ -53850,7 +53850,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n`count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\nsize (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\nkeys for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.",
+          "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least three properties to be set:\n- `count` is the total number of items in the list\n- `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n- `getItemKey` is a function that returns a unique key for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.\n\n### Top/Bottom Padding\n\nIf padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\nwill break the virtualization calculations and can cause scrollbars when they are not necessary.\nInstead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n\n### Gaps between items\n\nIf you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\nto the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\nIf you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\nIf you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.",
           "name": "VirtualizedList",
           "cssParts": [
             {
@@ -54391,7 +54391,7 @@
             "module": "/src/components/list/list.component"
           },
           "tagName": "mdc-virtualizedlist",
-          "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\n * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\n * keys for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
+          "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least three properties to be set:\n * - `count` is the total number of items in the list\n * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n * - `getItemKey` is a function that returns a unique key for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * ### Top/Bottom Padding\n *\n * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\n * will break the virtualization calculations and can cause scrollbars when they are not necessary.\n * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n *\n * ### Gaps between items\n *\n * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\n * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\n * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\n * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
           "customElement": true
         }
       ],

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

@@ -12,10 +12,10 @@ import type { Events } from '../../components/virtualizedlist/virtualizedlist.ty
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -44,6 +44,19 @@ import type { Events } from '../../components/virtualizedlist/virtualizedlist.ty
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/dist/react/virtualizedlist/index.js

@@ -13,10 +13,10 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -45,6 +45,19 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/package.json

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