@momentum-design/components 0.94.0 → 0.95.1

package/dist/react/index.d.ts

@@ -16,8 +16,8 @@ export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Dialog } from './dialog';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';

package/dist/react/index.js

@@ -16,8 +16,8 @@ export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Dialog } from './dialog';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';

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

@@ -1,9 +1,17 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/option';
 /**
- * option component, which is used as a list item in a select component.<br/>
- * We can pass an icon which will be displayed in leading position of the option label text.
- * We can pass a tooltip which will be displayed on hover of the option label text.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -12,8 +20,6 @@ import Component from '../../components/option';
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.

package/dist/react/option/index.js

@@ -3,9 +3,17 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/option';
 import { TAG_NAME } from '../../components/option/option.constants';
 /**
- * option component, which is used as a list item in a select component.<br/>
- * We can pass an icon which will be displayed in leading position of the option label text.
- * We can pass a tooltip which will be displayed on hover of the option label text.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -14,8 +22,6 @@ import { TAG_NAME } from '../../components/option/option.constants';
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.

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

@@ -6,6 +6,8 @@ import Component from '../../components/select';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -18,7 +20,7 @@ import Component from '../../components/select';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @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.
@@ -27,8 +29,12 @@ import Component from '../../components/select';
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<Event>;
-    onInput: EventName<Event>;
+    onChange: EventName<import("../../utils/types").TypedEvent<Component, {
+        value: string;
+    }>>;
+    onInput: EventName<import("../../utils/types").TypedEvent<Component, {
+        value: string;
+    }>>;
     onClick: EventName<MouseEvent>;
     onKeyDown: EventName<KeyboardEvent>;
     onFocus: EventName<FocusEvent>;

package/dist/react/select/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -20,7 +22,7 @@ import { TAG_NAME } from '../../components/select/select.constants';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @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.

package/package.json

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