@momentum-design/components 0.36.1 → 0.36.3

package/dist/index.d.ts

@@ -1,15 +1,19 @@
+import AlertChip from './components/alertchip';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import Divider from './components/divider';
+import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Input from './components/input';
+import InputChip from './components/inputchip';
 import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -26,9 +30,11 @@ import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
+import Option from './components/option';
+import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, Tooltip, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
 export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -1,15 +1,19 @@
+import AlertChip from './components/alertchip';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import Divider from './components/divider';
+import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Input from './components/input';
+import InputChip from './components/inputchip';
 import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -26,6 +30,8 @@ import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
+import Option from './components/option';
+import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, Tooltip, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
 export { inMemoryCache, webAPIIconsCache };

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

@@ -0,0 +1,27 @@
+import Component from '../../components/alertchip';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/alertchip/index.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/alertchip';
+import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'AlertChip',
+});
+export default reactWrapper;

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

@@ -0,0 +1,28 @@
+import Component from '../../components/chip';
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+ * including empty spaces to split words.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/chip/index.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/chip';
+import { TAG_NAME } from '../../components/chip/chip.constants';
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+ * including empty spaces to split words.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'Chip',
+});
+export default reactWrapper;

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

@@ -0,0 +1,17 @@
+import Component from '../../components/filterchip';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/filterchip/index.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/filterchip';
+import { TAG_NAME } from '../../components/filterchip/filterchip.constants';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'FilterChip',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,21 +1,27 @@
-export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
+export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as OptGroup } from './optgroup';
+export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';

package/dist/react/index.js

@@ -1,21 +1,27 @@
-export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
+export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as OptGroup } from './optgroup';
+export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';

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

@@ -0,0 +1,32 @@
+import Component from '../../components/inputchip';
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/inputchip/index.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/inputchip';
+import { TAG_NAME } from '../../components/inputchip/inputchip.constants';
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        undefined: 'undefined',
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'InputChip',
+});
+export default reactWrapper;

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

@@ -0,0 +1,14 @@
+import Component from '../../components/optgroup';
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/optgroup/index.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/optgroup';
+import { TAG_NAME } from '../../components/optgroup/optgroup.constants';
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'OptGroup',
+});
+export default reactWrapper;

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

@@ -0,0 +1,21 @@
+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.
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/option/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+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.
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'Option',
+});
+export default reactWrapper;

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.36.1"
+  "version": "0.36.3"
 }