@momentum-design/components 0.112.6 → 0.113.0

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

@@ -1,12 +1,79 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/combobox';
 /**
- * combobox component, which ...
+ * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
+ * Users can type text to filter the options and select their desired choice.
+ *
+ * When the user starts typing, the filter uses a "starts with" search and displays options based on the text entered by the user.
+ * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.
+ *
+ * If there is no text in the `no-result-text` attribute then nothing will be shown.
+ *
+ * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * 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-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
+ *
+ * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
+ *
+ * @dependency mdc-buttonsimple
+ * @dependency mdc-icon
+ * @dependency mdc-input
+ * @dependency mdc-listitem
+ * @dependency mdc-popover
  *
  * @tagname mdc-combobox
  *
- * @slot default - This is a default/unnamed slot
+ * @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 combobox is clicked.
+ * @event change - (React: onChange) This event is dispatched when the combobox is changed.
+ * @event input - (React: onInput) This event is dispatched when the combobox is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.
+ * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.
+ *
+ * @cssproperty --mdc-combobox-border-color - The border color of the combobox
+ * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox
+ * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-width - The width of the combobox
+ * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
+ * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
+ * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
+ * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
+ * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
+ * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
+ * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
+ * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart internal-native-input - The internal native input element of the combobox.
+ * @csspart mdc-input - The input element of the combobox.
+ * @csspart no-result-text - The no result text element of the combobox.
+ * @csspart combobox__base - The base container element of the combobox.
+ * @csspart combobox__button - The button element of the combobox.
+ * @csspart combobox__button-icon - The icon element of the button of the combobox.
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
+    onChange: EventName<CustomEvent<{
+        value: string;
+        label?: string | undefined;
+    }> & {
+        target: Component;
+    }>;
+    onInput: EventName<CustomEvent<{
+        value: string;
+        label?: string | undefined;
+    }> & {
+        target: Component;
+    }>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+}>;
 export default reactWrapper;

package/dist/react/combobox/index.js

@@ -3,19 +3,75 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/combobox';
 import { TAG_NAME } from '../../components/combobox/combobox.constants';
 /**
- * combobox component, which ...
+ * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
+ * Users can type text to filter the options and select their desired choice.
+ *
+ * When the user starts typing, the filter uses a "starts with" search and displays options based on the text entered by the user.
+ * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.
+ *
+ * If there is no text in the `no-result-text` attribute then nothing will be shown.
+ *
+ * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * 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-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
+ *
+ * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
+ *
+ * @dependency mdc-buttonsimple
+ * @dependency mdc-icon
+ * @dependency mdc-input
+ * @dependency mdc-listitem
+ * @dependency mdc-popover
  *
  * @tagname mdc-combobox
  *
- * @slot default - This is a default/unnamed slot
+ * @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 combobox is clicked.
+ * @event change - (React: onChange) This event is dispatched when the combobox is changed.
+ * @event input - (React: onInput) This event is dispatched when the combobox is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.
+ * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.
+ *
+ * @cssproperty --mdc-combobox-border-color - The border color of the combobox
+ * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox
+ * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-width - The width of the combobox
+ * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
+ * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
+ * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
+ * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
+ * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
+ * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
+ * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
+ * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart internal-native-input - The internal native input element of the combobox.
+ * @csspart mdc-input - The input element of the combobox.
+ * @csspart no-result-text - The no result text element of the combobox.
+ * @csspart combobox__base - The base container element of the combobox.
+ * @csspart combobox__button - The button element of the combobox.
+ * @csspart combobox__button-icon - The icon element of the button of the combobox.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onChange: 'change',
+        onInput: 'input',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+    },
     displayName: 'Combobox',
 });
 export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,18 +1,18 @@
-export { default as AccordionButton } from './accordionbutton';
 export { default as Accordion } from './accordion';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
-export { default as Avatar } from './avatar';
 export { default as Bullet } from './bullet';
-export { default as Button } from './button';
-export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as ButtonGroup } from './buttongroup';
+export { default as Button } from './button';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -41,15 +41,15 @@ export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
-export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
-export { default as Password } from './password';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
+export { default as Password } from './password';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
@@ -71,10 +71,10 @@ export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
-export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toast } from './toast';
+export { default as Text } from './text';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';

package/dist/react/index.js

@@ -1,18 +1,18 @@
-export { default as AccordionButton } from './accordionbutton';
 export { default as Accordion } from './accordion';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
-export { default as Avatar } from './avatar';
 export { default as Bullet } from './bullet';
-export { default as Button } from './button';
-export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as ButtonGroup } from './buttongroup';
+export { default as Button } from './button';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -41,15 +41,15 @@ export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
-export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
-export { default as Password } from './password';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
+export { default as Password } from './password';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
@@ -71,10 +71,10 @@ export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
-export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toast } from './toast';
+export { default as Text } from './text';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';

package/package.json

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