@momentum-design/components 0.129.18 → 0.129.20

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

@@ -58,6 +58,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
     required: boolean;
     /**
      * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+     * @default 'default'
      */
     helpTextType: ValidationType;
     /**
@@ -74,6 +75,10 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @default 'top'
      */
     toggletipPlacement: PopoverPlacement;
+    /**
+     * The strategy of the toggletip that is displayed when the info icon is hovered.
+     * @default 'absolute'
+     */
     toggletipStrategy: PopoverStrategy;
     /**
      * Aria label for the info icon that is displayed next to the label when `toggletipText` is set.

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -70,6 +70,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         this.required = false;
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+         * @default 'default'
          */
         this.helpTextType = DEFAULTS.VALIDATION;
         /**
@@ -77,6 +78,10 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * @default 'top'
          */
         this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
+        /**
+         * The strategy of the toggletip that is displayed when the info icon is hovered.
+         * @default 'absolute'
+         */
         this.toggletipStrategy = DEFAULTS.TOGGLETIP_STRATEGY;
         /**
          * Determines whether the form field is read-only.

package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts

@@ -1,4 +1,4 @@
-import { IconNames } from '../icon/icon.types';
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
     readonly DEFAULT: "default";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT, STRATEGY } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
 const VALIDATION = {
@@ -14,8 +15,8 @@ const DEFAULTS = {
     HEADING_ID: 'heading-id',
     ICON_SIZE: 20,
     INFO_ICON: 'info-badge-filled',
-    TOGGLETIP_PLACEMENT: 'top',
-    TOGGLETIP_STRATEGY: 'absolute',
+    TOGGLETIP_PLACEMENT: POPOVER_PLACEMENT.TOP,
+    TOGGLETIP_STRATEGY: STRATEGY.ABSOLUTE,
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

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

@@ -9,6 +9,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
  *
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
@@ -27,14 +28,13 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
- *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.

package/dist/components/select/select.component.js

@@ -30,6 +30,7 @@ import styles from './select.styles';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
  *
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
@@ -48,14 +49,13 @@ import styles from './select.styles';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
- *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.

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.