@momentum-design/components 0.49.2 → 0.49.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/browser/index.js +893 -695
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +1 -1
  4. package/dist/components/list/list.component.js +2 -1
  5. package/dist/components/list/list.constants.d.ts +1 -7
  6. package/dist/components/list/list.constants.js +1 -7
  7. package/dist/components/listitem/listitem.component.d.ts +2 -1
  8. package/dist/components/listitem/listitem.component.js +2 -1
  9. package/dist/components/listitem/listitem.styles.js +4 -3
  10. package/dist/components/option/index.d.ts +2 -0
  11. package/dist/components/option/index.js +2 -0
  12. package/dist/components/option/option.component.d.ts +17 -0
  13. package/dist/components/option/option.component.js +64 -9
  14. package/dist/components/option/option.constants.d.ts +2 -1
  15. package/dist/components/option/option.constants.js +2 -1
  16. package/dist/components/option/option.styles.js +22 -0
  17. package/dist/components/option/option.types.d.ts +7 -0
  18. package/dist/components/option/option.types.js +1 -0
  19. package/dist/components/popover/popover.component.d.ts +2 -0
  20. package/dist/components/popover/popover.component.js +2 -0
  21. package/dist/components/popover/popover.styles.js +4 -0
  22. package/dist/components/select/index.d.ts +10 -0
  23. package/dist/components/select/index.js +7 -0
  24. package/dist/components/select/select.component.d.ts +191 -0
  25. package/dist/components/select/select.component.js +544 -0
  26. package/dist/components/select/select.constants.d.ts +6 -0
  27. package/dist/components/select/select.constants.js +7 -0
  28. package/dist/components/select/select.styles.d.ts +2 -0
  29. package/dist/components/select/select.styles.js +103 -0
  30. package/dist/components/select/select.types.d.ts +7 -0
  31. package/dist/components/select/select.types.js +1 -0
  32. package/dist/custom-elements.json +6423 -5451
  33. package/dist/index.d.ts +14 -13
  34. package/dist/index.js +11 -10
  35. package/dist/react/index.d.ts +8 -7
  36. package/dist/react/index.js +8 -7
  37. package/dist/react/listitem/index.d.ts +2 -1
  38. package/dist/react/listitem/index.js +2 -1
  39. package/dist/react/option/index.d.ts +4 -0
  40. package/dist/react/option/index.js +4 -0
  41. package/dist/react/popover/index.d.ts +2 -0
  42. package/dist/react/popover/index.js +2 -0
  43. package/dist/react/select/index.d.ts +28 -0
  44. package/dist/react/select/index.js +36 -0
  45. package/dist/utils/keys.d.ts +12 -0
  46. package/dist/utils/keys.js +12 -0
  47. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import AlertChip from './components/alertchip';
2
+ import Appheader from './components/appheader';
2
3
  import Avatar from './components/avatar';
3
4
  import AvatarButton from './components/avatarbutton';
4
5
  import Badge from './components/badge';
6
+ import Brandvisual from './components/brandvisual';
5
7
  import Bullet from './components/bullet';
6
8
  import Button from './components/button';
7
9
  import Checkbox from './components/checkbox';
@@ -18,32 +20,31 @@ import Link from './components/link';
18
20
  import List from './components/list';
19
21
  import ListItem from './components/listitem';
20
22
  import Marker from './components/marker';
23
+ import OptGroup from './components/optgroup';
24
+ import Option from './components/option';
21
25
  import Popover from './components/popover';
22
26
  import Presence from './components/presence';
27
+ import Progressbar from './components/progressbar';
23
28
  import Radio from './components/radio';
24
29
  import RadioGroup from './components/radiogroup';
30
+ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
31
+ import Searchfield from './components/searchfield';
32
+ import Select from './components/select';
25
33
  import Spinner from './components/spinner';
26
34
  import Tab from './components/tab';
27
35
  import Text from './components/text';
36
+ import Textarea from './components/textarea';
28
37
  import ThemeProvider from './components/themeprovider';
29
38
  import Toggle from './components/toggle';
30
39
  import Tooltip from './components/tooltip';
31
40
  import VirtualizedList from './components/virtualizedlist';
32
- import Progressbar from './components/progressbar';
33
- import Option from './components/option';
34
- import OptGroup from './components/optgroup';
35
- import Textarea from './components/textarea';
36
- import Searchfield from './components/searchfield';
37
- import Brandvisual from './components/brandvisual';
38
- import Appheader from './components/appheader';
39
- import ScreenreaderAnnouncer from './components/screenreaderannouncer';
41
+ import type { BadgeType } from './components/badge/badge.types';
42
+ import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
43
+ import type { PopoverPlacement } from './components/popover/popover.types';
40
44
  import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
41
45
  import type { TextType } from './components/text/text.types';
42
- import type { PopoverPlacement } from './components/popover/popover.types';
43
- import type { BadgeType } from './components/badge/badge.types';
44
- import type { IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor } from './components/button/button.types';
45
- import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
46
46
  import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
47
- 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, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
47
+ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
48
+ 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, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, };
48
49
  export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
49
50
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
package/dist/index.js CHANGED
@@ -1,8 +1,10 @@
1
1
  // Components Imports
2
2
  import AlertChip from './components/alertchip';
3
+ import Appheader from './components/appheader';
3
4
  import Avatar from './components/avatar';
4
5
  import AvatarButton from './components/avatarbutton';
5
6
  import Badge from './components/badge';
7
+ import Brandvisual from './components/brandvisual';
6
8
  import Bullet from './components/bullet';
7
9
  import Button from './components/button';
8
10
  import Checkbox from './components/checkbox';
@@ -19,29 +21,28 @@ import Link from './components/link';
19
21
  import List from './components/list';
20
22
  import ListItem from './components/listitem';
21
23
  import Marker from './components/marker';
24
+ import OptGroup from './components/optgroup';
25
+ import Option from './components/option';
22
26
  import Popover from './components/popover';
23
27
  import Presence from './components/presence';
28
+ import Progressbar from './components/progressbar';
24
29
  import Radio from './components/radio';
25
30
  import RadioGroup from './components/radiogroup';
31
+ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
32
+ import Searchfield from './components/searchfield';
33
+ import Select from './components/select';
26
34
  import Spinner from './components/spinner';
27
35
  import Tab from './components/tab';
28
36
  import Text from './components/text';
37
+ import Textarea from './components/textarea';
29
38
  import ThemeProvider from './components/themeprovider';
30
39
  import Toggle from './components/toggle';
31
40
  import Tooltip from './components/tooltip';
32
41
  import VirtualizedList from './components/virtualizedlist';
33
- import Progressbar from './components/progressbar';
34
- import Option from './components/option';
35
- import OptGroup from './components/optgroup';
36
- import Textarea from './components/textarea';
37
- import Searchfield from './components/searchfield';
38
- import Brandvisual from './components/brandvisual';
39
- import Appheader from './components/appheader';
40
- import ScreenreaderAnnouncer from './components/screenreaderannouncer';
42
+ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
41
43
  // Constants / Utils Imports
42
44
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
43
- import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
44
45
  // Components Exports
45
- 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, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
46
+ 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, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, };
46
47
  // Constants / Utils Exports
47
48
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
@@ -4,12 +4,12 @@ export { default as Avatar } from './avatar';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
7
- export { default as Buttonsimple } from './buttonsimple';
8
- export { default as Button } from './button';
9
7
  export { default as Bullet } from './bullet';
10
- export { default as Checkbox } from './checkbox';
8
+ export { default as Button } from './button';
11
9
  export { default as Chip } from './chip';
12
10
  export { default as Coachmark } from './coachmark';
11
+ export { default as Checkbox } from './checkbox';
12
+ export { default as Buttonsimple } from './buttonsimple';
13
13
  export { default as Divider } from './divider';
14
14
  export { default as FilterChip } from './filterchip';
15
15
  export { default as FormfieldGroup } from './formfieldgroup';
@@ -30,12 +30,13 @@ export { default as Progressbar } from './progressbar';
30
30
  export { default as Radio } from './radio';
31
31
  export { default as RadioGroup } from './radiogroup';
32
32
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
33
- export { default as Tab } from './tab';
34
- export { default as Spinner } from './spinner';
35
33
  export { default as Searchfield } from './searchfield';
36
- export { default as Textarea } from './textarea';
34
+ export { default as Select } from './select';
35
+ export { default as Spinner } from './spinner';
36
+ export { default as Tab } from './tab';
37
37
  export { default as Text } from './text';
38
+ export { default as Textarea } from './textarea';
38
39
  export { default as ThemeProvider } from './themeprovider';
39
- export { default as Tooltip } from './tooltip';
40
40
  export { default as Toggle } from './toggle';
41
+ export { default as Tooltip } from './tooltip';
41
42
  export { default as VirtualizedList } from './virtualizedlist';
@@ -4,12 +4,12 @@ export { default as Avatar } from './avatar';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
7
- export { default as Buttonsimple } from './buttonsimple';
8
- export { default as Button } from './button';
9
7
  export { default as Bullet } from './bullet';
10
- export { default as Checkbox } from './checkbox';
8
+ export { default as Button } from './button';
11
9
  export { default as Chip } from './chip';
12
10
  export { default as Coachmark } from './coachmark';
11
+ export { default as Checkbox } from './checkbox';
12
+ export { default as Buttonsimple } from './buttonsimple';
13
13
  export { default as Divider } from './divider';
14
14
  export { default as FilterChip } from './filterchip';
15
15
  export { default as FormfieldGroup } from './formfieldgroup';
@@ -30,12 +30,13 @@ export { default as Progressbar } from './progressbar';
30
30
  export { default as Radio } from './radio';
31
31
  export { default as RadioGroup } from './radiogroup';
32
32
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
33
- export { default as Tab } from './tab';
34
- export { default as Spinner } from './spinner';
35
33
  export { default as Searchfield } from './searchfield';
36
- export { default as Textarea } from './textarea';
34
+ export { default as Select } from './select';
35
+ export { default as Spinner } from './spinner';
36
+ export { default as Tab } from './tab';
37
37
  export { default as Text } from './text';
38
+ export { default as Textarea } from './textarea';
38
39
  export { default as ThemeProvider } from './themeprovider';
39
- export { default as Tooltip } from './tooltip';
40
40
  export { default as Toggle } from './toggle';
41
+ export { default as Tooltip } from './tooltip';
41
42
  export { default as VirtualizedList } from './virtualizedlist';
@@ -29,8 +29,9 @@ import Component from '../../components/listitem';
29
29
  * @cssproperty --mdc-listitem-primary-label-color
30
30
  * - Allows customization of the primary label, side header and subline text slot color.
31
31
  * @cssproperty --mdc-listitem-secondary-label-color
32
- * - Allows customization of the secondary and teritary label text slot color.
32
+ * - Allows customization of the secondary and tertiary label text slot color.
33
33
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
34
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
34
35
  *
35
36
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
36
37
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -31,8 +31,9 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
31
31
  * @cssproperty --mdc-listitem-primary-label-color
32
32
  * - Allows customization of the primary label, side header and subline text slot color.
33
33
  * @cssproperty --mdc-listitem-secondary-label-color
34
- * - Allows customization of the secondary and teritary label text slot color.
34
+ * - Allows customization of the secondary and tertiary label text slot color.
35
35
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
36
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
36
37
  *
37
38
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
38
39
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -4,6 +4,10 @@ import Component from '../../components/option';
4
4
  * option component, which is used as a list item in a select component.<br/>
5
5
  * We can pass an icon which will be displayed in leading position of the option label text.
6
6
  *
7
+ * @dependency mdc-icon
8
+ * @dependency mdc-text
9
+ * @dependency mdc-tooltip
10
+ *
7
11
  * @tagname mdc-option
8
12
  *
9
13
  * @slot default - This is a default/unnamed slot
@@ -6,6 +6,10 @@ import { TAG_NAME } from '../../components/option/option.constants';
6
6
  * option component, which is used as a list item in a select component.<br/>
7
7
  * We can pass an icon which will be displayed in leading position of the option label text.
8
8
  *
9
+ * @dependency mdc-icon
10
+ * @dependency mdc-text
11
+ * @dependency mdc-tooltip
12
+ *
9
13
  * @tagname mdc-option
10
14
  *
11
15
  * @slot default - This is a default/unnamed slot
@@ -24,6 +24,8 @@ import Component from '../../components/popover';
24
24
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
25
25
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
26
26
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
27
+ * @cssproperty --mdc-popover-max-width - max width of the popover
28
+ * @cssproperty --mdc-popover-max-height - max height of the popover
27
29
  *
28
30
  * @slot - Default slot for the popover content
29
31
  *
@@ -26,6 +26,8 @@ import { TAG_NAME } from '../../components/popover/popover.constants';
26
26
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
27
27
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
28
28
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
29
+ * @cssproperty --mdc-popover-max-width - max width of the popover
30
+ * @cssproperty --mdc-popover-max-height - max height of the popover
29
31
  *
30
32
  * @slot - Default slot for the popover content
31
33
  *
@@ -0,0 +1,28 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/select';
3
+ /**
4
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
5
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
6
+ * The component ensures accessibility and usability while handling various use cases,
7
+ * including long text truncation with tooltip support.
8
+ *
9
+ * @dependency mdc-icon
10
+ * @dependency mdc-popover
11
+ * @dependency mdc-text
12
+ *
13
+ * @tagname mdc-select
14
+ *
15
+ * @slot default - This is a default/unnamed slot for options and/or option group.
16
+ *
17
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
18
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
19
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
20
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
21
+ */
22
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
23
+ onChange: EventName<Event>;
24
+ onClick: EventName<MouseEvent>;
25
+ onKeyDown: EventName<KeyboardEvent>;
26
+ onFocus: EventName<FocusEvent>;
27
+ }>;
28
+ export default reactWrapper;
@@ -0,0 +1,36 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/select';
4
+ import { TAG_NAME } from '../../components/select/select.constants';
5
+ /**
6
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
7
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
8
+ * The component ensures accessibility and usability while handling various use cases,
9
+ * including long text truncation with tooltip support.
10
+ *
11
+ * @dependency mdc-icon
12
+ * @dependency mdc-popover
13
+ * @dependency mdc-text
14
+ *
15
+ * @tagname mdc-select
16
+ *
17
+ * @slot default - This is a default/unnamed slot for options and/or option group.
18
+ *
19
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
20
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
21
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
22
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
23
+ */
24
+ const reactWrapper = createComponent({
25
+ tagName: TAG_NAME,
26
+ elementClass: Component,
27
+ react: React,
28
+ events: {
29
+ onChange: 'change',
30
+ onClick: 'click',
31
+ onKeyDown: 'keydown',
32
+ onFocus: 'focus',
33
+ },
34
+ displayName: 'Select',
35
+ });
36
+ export default reactWrapper;
@@ -0,0 +1,12 @@
1
+ declare const KEYS: {
2
+ readonly ARROW_DOWN: "ArrowDown";
3
+ readonly ARROW_UP: "ArrowUp";
4
+ readonly END: "End";
5
+ readonly ENTER: "Enter";
6
+ readonly ESCAPE: "Escape";
7
+ readonly HOME: "Home";
8
+ readonly PAGE_DOWN: "PageDown";
9
+ readonly PAGE_UP: "PageUp";
10
+ readonly SPACE: " ";
11
+ };
12
+ export { KEYS };
@@ -0,0 +1,12 @@
1
+ const KEYS = {
2
+ ARROW_DOWN: 'ArrowDown',
3
+ ARROW_UP: 'ArrowUp',
4
+ END: 'End',
5
+ ENTER: 'Enter',
6
+ ESCAPE: 'Escape',
7
+ HOME: 'Home',
8
+ PAGE_DOWN: 'PageDown',
9
+ PAGE_UP: 'PageUp',
10
+ SPACE: ' ',
11
+ };
12
+ export { KEYS };
package/package.json CHANGED
@@ -39,5 +39,5 @@
39
39
  "lit": "^3.2.0",
40
40
  "uuid": "^11.0.5"
41
41
  },
42
- "version": "0.49.2"
42
+ "version": "0.49.3"
43
43
  }