@momentum-design/components 0.83.5 → 0.83.7
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.
- package/dist/browser/index.js +207 -207
- package/dist/browser/index.js.map +4 -4
- package/dist/components/listitem/listitem.component.d.ts +4 -3
- package/dist/components/listitem/listitem.component.js +2 -1
- package/dist/components/menuitem/menuitem.component.d.ts +16 -0
- package/dist/components/menuitem/menuitem.component.js +30 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +26 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +32 -1
- package/dist/components/menuitemradio/menuitemradio.component.d.ts +11 -0
- package/dist/components/menuitemradio/menuitemradio.component.js +33 -2
- package/dist/components/menupopover/menupopover.component.d.ts +66 -2
- package/dist/components/menupopover/menupopover.component.js +202 -10
- package/dist/components/menupopover/menupopover.utils.d.ts +9 -0
- package/dist/components/menupopover/menupopover.utils.js +21 -0
- package/dist/components/menusection/menusection.component.d.ts +0 -27
- package/dist/components/menusection/menusection.component.js +0 -66
- package/dist/components/popover/popover.component.d.ts +3 -3
- package/dist/custom-elements.json +643 -848
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/utils/mixins/FocusTrapMixin.js +10 -1
- package/dist/utils/mixins/MenuMixin.js +4 -1
- package/package.json +1 -1
@@ -1,5 +1,4 @@
|
|
1
1
|
import { CSSResult } from 'lit';
|
2
|
-
import type MenuItemRadio from '../menuitemradio/menuitemradio.component';
|
3
2
|
import { Component } from '../../models';
|
4
3
|
/**
|
5
4
|
* `mdc-menusection` is a container element used to group a set of menu items.
|
@@ -15,34 +14,8 @@ import { Component } from '../../models';
|
|
15
14
|
* @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
|
16
15
|
*/
|
17
16
|
declare class MenuSection extends Component {
|
18
|
-
/**
|
19
|
-
* Query assigned `menuitemradio` elements from the default slot.
|
20
|
-
* These elements are used to enforce single-selection behavior.
|
21
|
-
*
|
22
|
-
* @internal
|
23
|
-
*/
|
24
|
-
radios: MenuItemRadio[];
|
25
17
|
connectedCallback(): void;
|
26
18
|
disconnectedCallback(): void;
|
27
|
-
/**
|
28
|
-
* Handles `click` events within the component.
|
29
|
-
* Delegates logic to `toggleCheckedState()` based on the clicked element.
|
30
|
-
*
|
31
|
-
* @param event - The click event from a child menu item
|
32
|
-
*
|
33
|
-
* @internal
|
34
|
-
*/
|
35
|
-
private handleClick;
|
36
|
-
/**
|
37
|
-
* Toggles the `aria-checked` state on a target menu item based on its tag name.
|
38
|
-
* - For checkboxes, toggles the checked state.
|
39
|
-
* - For radios, ensures only one item is selected in the group.
|
40
|
-
*
|
41
|
-
* @param target - The event target element to update
|
42
|
-
*
|
43
|
-
* @internal
|
44
|
-
*/
|
45
|
-
private toggleCheckedState;
|
46
19
|
render(): import("lit-html").TemplateResult<1>;
|
47
20
|
static styles: CSSResult[];
|
48
21
|
}
|
@@ -1,17 +1,4 @@
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
-
};
|
7
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
|
-
};
|
10
1
|
import { html } from 'lit';
|
11
|
-
import { queryAssignedElements } from 'lit/decorators.js';
|
12
|
-
import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
|
13
|
-
import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
|
14
|
-
import { ARIA_CHECKED_STATES } from './menusection.constants';
|
15
2
|
import { Component } from '../../models';
|
16
3
|
import { ROLE } from '../../utils/roles';
|
17
4
|
/**
|
@@ -28,69 +15,16 @@ import { ROLE } from '../../utils/roles';
|
|
28
15
|
* @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
|
29
16
|
*/
|
30
17
|
class MenuSection extends Component {
|
31
|
-
constructor() {
|
32
|
-
super(...arguments);
|
33
|
-
/**
|
34
|
-
* Handles `click` events within the component.
|
35
|
-
* Delegates logic to `toggleCheckedState()` based on the clicked element.
|
36
|
-
*
|
37
|
-
* @param event - The click event from a child menu item
|
38
|
-
*
|
39
|
-
* @internal
|
40
|
-
*/
|
41
|
-
this.handleClick = (event) => {
|
42
|
-
this.toggleCheckedState(event.target);
|
43
|
-
};
|
44
|
-
}
|
45
18
|
connectedCallback() {
|
46
19
|
super.connectedCallback();
|
47
20
|
this.setAttribute('role', ROLE.GROUP);
|
48
|
-
this.addEventListener('click', this.handleClick);
|
49
21
|
}
|
50
22
|
disconnectedCallback() {
|
51
23
|
super.disconnectedCallback();
|
52
|
-
this.removeEventListener('click', this.handleClick);
|
53
|
-
}
|
54
|
-
/**
|
55
|
-
* Toggles the `aria-checked` state on a target menu item based on its tag name.
|
56
|
-
* - For checkboxes, toggles the checked state.
|
57
|
-
* - For radios, ensures only one item is selected in the group.
|
58
|
-
*
|
59
|
-
* @param target - The event target element to update
|
60
|
-
*
|
61
|
-
* @internal
|
62
|
-
*/
|
63
|
-
toggleCheckedState(target) {
|
64
|
-
if (!(target instanceof HTMLElement))
|
65
|
-
return;
|
66
|
-
// Do not toggle state for disabled elements
|
67
|
-
if (target.hasAttribute('disabled'))
|
68
|
-
return;
|
69
|
-
const tagName = target.tagName.toLowerCase();
|
70
|
-
const currentChecked = target.getAttribute('aria-checked') === ARIA_CHECKED_STATES.TRUE;
|
71
|
-
switch (tagName) {
|
72
|
-
case MENUITEMCHECKBOX_TAGNAME:
|
73
|
-
target.setAttribute('aria-checked', String(!currentChecked));
|
74
|
-
break;
|
75
|
-
case MENUITEMRADIO_TAGNAME:
|
76
|
-
if (currentChecked)
|
77
|
-
return;
|
78
|
-
this.radios.forEach((radio) => {
|
79
|
-
const newCheckedState = radio === target ? ARIA_CHECKED_STATES.TRUE : ARIA_CHECKED_STATES.FALSE;
|
80
|
-
radio.setAttribute('aria-checked', newCheckedState);
|
81
|
-
});
|
82
|
-
break;
|
83
|
-
default:
|
84
|
-
break;
|
85
|
-
}
|
86
24
|
}
|
87
25
|
render() {
|
88
26
|
return html `<slot></slot>`;
|
89
27
|
}
|
90
28
|
}
|
91
29
|
MenuSection.styles = [...Component.styles];
|
92
|
-
__decorate([
|
93
|
-
queryAssignedElements({ selector: `${MENUITEMRADIO_TAGNAME}:not([disabled])` }),
|
94
|
-
__metadata("design:type", Array)
|
95
|
-
], MenuSection.prototype, "radios", void 0);
|
96
30
|
export default MenuSection;
|
@@ -215,11 +215,11 @@ declare class Popover extends Popover_base {
|
|
215
215
|
/** @internal */
|
216
216
|
private hoverTimer;
|
217
217
|
/** @internal */
|
218
|
-
|
218
|
+
protected isTriggerClicked: boolean;
|
219
219
|
/** @internal */
|
220
220
|
private openDelay;
|
221
221
|
/** @internal */
|
222
|
-
|
222
|
+
protected closeDelay: number;
|
223
223
|
/** @internal */
|
224
224
|
private utils;
|
225
225
|
/** @internal */
|
@@ -241,7 +241,7 @@ declare class Popover extends Popover_base {
|
|
241
241
|
*
|
242
242
|
* @param event - The mouse event.
|
243
243
|
*/
|
244
|
-
|
244
|
+
protected onOutsidePopoverClick: (event: MouseEvent) => void;
|
245
245
|
/**
|
246
246
|
* Handles the escape keydown event to close the popover.
|
247
247
|
*
|