@patternfly/react-core 4.276.0 → 4.276.2
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/CHANGELOG.md +20 -0
- package/components/ExpandableSection/ExpandableSection.d.ts +7 -0
- package/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
- package/components/ExpandableSection/ExpandableSection.js +39 -4
- package/components/ExpandableSection/ExpandableSection.js.map +1 -1
- package/components/Menu/Menu.d.ts +3 -0
- package/components/Menu/Menu.d.ts.map +1 -1
- package/components/Menu/Menu.js +6 -4
- package/components/Menu/Menu.js.map +1 -1
- package/components/Menu/MenuContext.d.ts +1 -0
- package/components/Menu/MenuContext.d.ts.map +1 -1
- package/components/Menu/MenuContext.js +2 -1
- package/components/Menu/MenuContext.js.map +1 -1
- package/components/Menu/MenuItem.d.ts.map +1 -1
- package/components/Menu/MenuItem.js +3 -2
- package/components/Menu/MenuItem.js.map +1 -1
- package/components/Menu/MenuList.d.ts +4 -0
- package/components/Menu/MenuList.d.ts.map +1 -1
- package/components/Menu/MenuList.js +4 -2
- package/components/Menu/MenuList.js.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts +7 -0
- package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSection.js +39 -4
- package/dist/esm/components/ExpandableSection/ExpandableSection.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts +3 -0
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +6 -4
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/MenuContext.d.ts +1 -0
- package/dist/esm/components/Menu/MenuContext.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuContext.js +2 -1
- package/dist/esm/components/Menu/MenuContext.js.map +1 -1
- package/dist/esm/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuItem.js +3 -2
- package/dist/esm/components/Menu/MenuItem.js.map +1 -1
- package/dist/esm/components/Menu/MenuList.d.ts +4 -0
- package/dist/esm/components/Menu/MenuList.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuList.js +4 -2
- package/dist/esm/components/Menu/MenuList.js.map +1 -1
- package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/next/components/Dropdown/Dropdown.js +19 -20
- package/dist/esm/next/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/next/components/Select/Select.d.ts +2 -0
- package/dist/esm/next/components/Select/Select.d.ts.map +1 -1
- package/dist/esm/next/components/Select/Select.js +21 -23
- package/dist/esm/next/components/Select/Select.js.map +1 -1
- package/dist/esm/next/components/Select/SelectList.d.ts +4 -0
- package/dist/esm/next/components/Select/SelectList.d.ts.map +1 -1
- package/dist/esm/next/components/Select/SelectList.js +2 -2
- package/dist/esm/next/components/Select/SelectList.js.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSection.d.ts +7 -0
- package/dist/js/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSection.js +39 -4
- package/dist/js/components/ExpandableSection/ExpandableSection.js.map +1 -1
- package/dist/js/components/Menu/Menu.d.ts +3 -0
- package/dist/js/components/Menu/Menu.d.ts.map +1 -1
- package/dist/js/components/Menu/Menu.js +6 -4
- package/dist/js/components/Menu/Menu.js.map +1 -1
- package/dist/js/components/Menu/MenuContext.d.ts +1 -0
- package/dist/js/components/Menu/MenuContext.d.ts.map +1 -1
- package/dist/js/components/Menu/MenuContext.js +2 -1
- package/dist/js/components/Menu/MenuContext.js.map +1 -1
- package/dist/js/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/js/components/Menu/MenuItem.js +3 -2
- package/dist/js/components/Menu/MenuItem.js.map +1 -1
- package/dist/js/components/Menu/MenuList.d.ts +4 -0
- package/dist/js/components/Menu/MenuList.d.ts.map +1 -1
- package/dist/js/components/Menu/MenuList.js +4 -2
- package/dist/js/components/Menu/MenuList.js.map +1 -1
- package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/js/next/components/Dropdown/Dropdown.js +19 -20
- package/dist/js/next/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/js/next/components/Select/Select.d.ts +2 -0
- package/dist/js/next/components/Select/Select.d.ts.map +1 -1
- package/dist/js/next/components/Select/Select.js +21 -23
- package/dist/js/next/components/Select/Select.js.map +1 -1
- package/dist/js/next/components/Select/SelectList.d.ts +4 -0
- package/dist/js/next/components/Select/SelectList.d.ts.map +1 -1
- package/dist/js/next/components/Select/SelectList.js +2 -2
- package/dist/js/next/components/Select/SelectList.js.map +1 -1
- package/dist/umd/react-core.min.js +2 -2
- package/next/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/next/components/Dropdown/Dropdown.js +19 -20
- package/next/components/Dropdown/Dropdown.js.map +1 -1
- package/next/components/Select/Select.d.ts +2 -0
- package/next/components/Select/Select.d.ts.map +1 -1
- package/next/components/Select/Select.js +21 -23
- package/next/components/Select/Select.js.map +1 -1
- package/next/components/Select/SelectList.d.ts +4 -0
- package/next/components/Select/SelectList.d.ts.map +1 -1
- package/next/components/Select/SelectList.js +2 -2
- package/next/components/Select/SelectList.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ExpandableSection/ExpandableSection.tsx +48 -4
- package/src/components/Menu/Menu.tsx +8 -2
- package/src/components/Menu/MenuContext.ts +3 -1
- package/src/components/Menu/MenuItem.tsx +5 -2
- package/src/components/Menu/MenuList.tsx +20 -5
- package/src/components/Menu/examples/Menu.md +99 -36
- package/src/components/Menu/examples/MenuOptionMultiSelect.tsx +2 -2
- package/src/components/Menu/examples/MenuOptionSingleSelect.tsx +2 -2
- package/src/next/components/Dropdown/Dropdown.tsx +12 -13
- package/src/next/components/Select/Select.tsx +16 -13
- package/src/next/components/Select/SelectList.tsx +6 -1
- package/src/next/components/Select/examples/SelectCheckbox.tsx +1 -0
- package/src/next/components/Select/examples/SelectMultiTypeahead.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAgB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,SAAS;IACzD,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7F;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAgB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,SAAS;IACzD,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7F;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA+FD,eAAO,MAAM,QAAQ,2EAEnB,CAAC"}
|
|
@@ -13,39 +13,38 @@ const DropdownBase = (_a) => {
|
|
|
13
13
|
const menuRef = innerRef || localMenuRef;
|
|
14
14
|
React.useEffect(() => {
|
|
15
15
|
const handleMenuKeys = (event) => {
|
|
16
|
-
var _a, _b, _c
|
|
17
|
-
if (!isOpen && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
18
|
-
// toggle was clicked open, focus on first menu item
|
|
19
|
-
if (event.key === 'Enter') {
|
|
20
|
-
setTimeout(() => {
|
|
21
|
-
const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
|
|
22
|
-
firstElement && firstElement.focus();
|
|
23
|
-
}, 0);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
16
|
+
var _a, _b, _c;
|
|
26
17
|
// Close the menu on tab or escape if onOpenChange is provided
|
|
27
|
-
if ((isOpen && onOpenChange && ((
|
|
28
|
-
((
|
|
18
|
+
if ((isOpen && onOpenChange && ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) ||
|
|
19
|
+
((_b = toggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
|
|
29
20
|
if (event.key === 'Escape' || event.key === 'Tab') {
|
|
30
|
-
onOpenChange(
|
|
31
|
-
(
|
|
21
|
+
onOpenChange(false);
|
|
22
|
+
(_c = toggleRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
32
23
|
}
|
|
33
24
|
}
|
|
34
25
|
};
|
|
35
|
-
const
|
|
36
|
-
var _a, _b;
|
|
26
|
+
const handleClick = (event) => {
|
|
27
|
+
var _a, _b, _c;
|
|
28
|
+
// toggle was clicked open via keyboard, focus on first menu item
|
|
29
|
+
if (isOpen && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) && event.detail === 0) {
|
|
30
|
+
setTimeout(() => {
|
|
31
|
+
var _a;
|
|
32
|
+
const firstElement = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li button:not(:disabled),li input:not(:disabled)');
|
|
33
|
+
firstElement && firstElement.focus();
|
|
34
|
+
}, 0);
|
|
35
|
+
}
|
|
37
36
|
// If the event is not on the toggle and onOpenChange callback is provided, close the menu
|
|
38
|
-
if (isOpen && onOpenChange && !((
|
|
39
|
-
if (isOpen && !((
|
|
37
|
+
if (isOpen && onOpenChange && !((_b = toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
|
|
38
|
+
if (isOpen && !((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.contains(event.target))) {
|
|
40
39
|
onOpenChange(false);
|
|
41
40
|
}
|
|
42
41
|
}
|
|
43
42
|
};
|
|
44
43
|
window.addEventListener('keydown', handleMenuKeys);
|
|
45
|
-
window.addEventListener('click',
|
|
44
|
+
window.addEventListener('click', handleClick);
|
|
46
45
|
return () => {
|
|
47
46
|
window.removeEventListener('keydown', handleMenuKeys);
|
|
48
|
-
window.removeEventListener('click',
|
|
47
|
+
window.removeEventListener('click', handleClick);
|
|
49
48
|
};
|
|
50
49
|
}, [isOpen, menuRef, onOpenChange]);
|
|
51
50
|
const menu = (React.createElement(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, itemId) => onSelect(event, itemId), isPlain: isPlain, isScrollable: isScrollable }, (minWidth && {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../src/next/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAa,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAa,MAAM,kBAAkB,CAAC;AAgC3D,MAAM,YAAY,GAA2C,CAAC,EAe9C,EAAE,EAAE;QAf0C,EAC5D,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,MAAM,GAAG,IAAI,OAEC,EADX,KAAK,cAdoD,4JAe7D,CADS;IAER,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACpD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAAqB,CAAC;IACpD,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACpD,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEvE,MAAM,OAAO,GAAI,QAA4C,IAAI,YAAY,CAAC;IAC9E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;;YAC9C,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../src/next/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
|
|
|
25
25
|
innerRef?: React.Ref<HTMLDivElement>;
|
|
26
26
|
/** z-index of the select menu */
|
|
27
27
|
zIndex?: number;
|
|
28
|
+
/** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
|
|
29
|
+
role?: string;
|
|
28
30
|
}
|
|
29
31
|
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<any>>;
|
|
30
32
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAgB,SAAS,EAAoB,MAAM,kBAAkB,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wIAAwI;IACxI,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IACvB,yEAAyE;IACzE,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7F;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAgB,SAAS,EAAoB,MAAM,kBAAkB,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wIAAwI;IACxI,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IACvB,yEAAyE;IACzE,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7F;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gGAAgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAmGD,eAAO,MAAM,MAAM,yEAEjB,CAAC"}
|
|
@@ -5,50 +5,48 @@ import { Menu, MenuContent } from '../../../components/Menu';
|
|
|
5
5
|
import { Popper } from '../../../helpers/Popper/Popper';
|
|
6
6
|
import { getOUIAProps, getDefaultOUIAId } from '../../../helpers';
|
|
7
7
|
const SelectBase = (_a) => {
|
|
8
|
-
var { children, className, onSelect, isOpen, selected, toggle, onOpenChange, isPlain, minWidth, innerRef, zIndex = 9999 } = _a, props = __rest(_a, ["children", "className", "onSelect", "isOpen", "selected", "toggle", "onOpenChange", "isPlain", "minWidth", "innerRef", "zIndex"]);
|
|
8
|
+
var { children, className, onSelect, isOpen, selected, toggle, onOpenChange, isPlain, minWidth, innerRef, zIndex = 9999, role = 'listbox' } = _a, props = __rest(_a, ["children", "className", "onSelect", "isOpen", "selected", "toggle", "onOpenChange", "isPlain", "minWidth", "innerRef", "zIndex", "role"]);
|
|
9
9
|
const localMenuRef = React.useRef();
|
|
10
10
|
const toggleRef = React.useRef();
|
|
11
11
|
const containerRef = React.useRef();
|
|
12
12
|
const menuRef = innerRef || localMenuRef;
|
|
13
13
|
React.useEffect(() => {
|
|
14
14
|
const handleMenuKeys = (event) => {
|
|
15
|
-
var _a, _b, _c
|
|
16
|
-
if (!isOpen && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
17
|
-
// toggle was clicked open, focus on first menu item
|
|
18
|
-
if (event.key === 'Enter' || event.key === 'Space') {
|
|
19
|
-
setTimeout(() => {
|
|
20
|
-
var _a;
|
|
21
|
-
const firstElement = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li button:not(:disabled),li input:not(:disabled)');
|
|
22
|
-
firstElement && firstElement.focus();
|
|
23
|
-
}, 0);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
15
|
+
var _a, _b, _c;
|
|
26
16
|
// Close the menu on tab or escape if onOpenChange is provided
|
|
27
|
-
if ((isOpen && onOpenChange && ((
|
|
28
|
-
((
|
|
17
|
+
if ((isOpen && onOpenChange && ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) ||
|
|
18
|
+
((_b = toggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
|
|
29
19
|
if (event.key === 'Escape' || event.key === 'Tab') {
|
|
30
|
-
onOpenChange(
|
|
31
|
-
(
|
|
20
|
+
onOpenChange(false);
|
|
21
|
+
(_c = toggleRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
32
22
|
}
|
|
33
23
|
}
|
|
34
24
|
};
|
|
35
|
-
const
|
|
36
|
-
var _a, _b;
|
|
25
|
+
const handleClick = (event) => {
|
|
26
|
+
var _a, _b, _c;
|
|
27
|
+
// toggle was clicked open via keyboard, focus on first menu item
|
|
28
|
+
if (isOpen && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) && event.detail === 0) {
|
|
29
|
+
setTimeout(() => {
|
|
30
|
+
var _a;
|
|
31
|
+
const firstElement = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li button:not(:disabled),li input:not(:disabled)');
|
|
32
|
+
firstElement && firstElement.focus();
|
|
33
|
+
}, 0);
|
|
34
|
+
}
|
|
37
35
|
// If the event is not on the toggle and onOpenChange callback is provided, close the menu
|
|
38
|
-
if (isOpen && onOpenChange && !((
|
|
39
|
-
if (isOpen && !((
|
|
36
|
+
if (isOpen && onOpenChange && !((_b = toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
|
|
37
|
+
if (isOpen && !((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.contains(event.target))) {
|
|
40
38
|
onOpenChange(false);
|
|
41
39
|
}
|
|
42
40
|
}
|
|
43
41
|
};
|
|
44
42
|
window.addEventListener('keydown', handleMenuKeys);
|
|
45
|
-
window.addEventListener('click',
|
|
43
|
+
window.addEventListener('click', handleClick);
|
|
46
44
|
return () => {
|
|
47
45
|
window.removeEventListener('keydown', handleMenuKeys);
|
|
48
|
-
window.removeEventListener('click',
|
|
46
|
+
window.removeEventListener('click', handleClick);
|
|
49
47
|
};
|
|
50
48
|
}, [isOpen, menuRef, onOpenChange]);
|
|
51
|
-
const menu = (React.createElement(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, itemId) => onSelect(event, itemId), isPlain: isPlain, selected: selected }, (minWidth && {
|
|
49
|
+
const menu = (React.createElement(Menu, Object.assign({ role: role, className: css(className), ref: menuRef, onSelect: (event, itemId) => onSelect(event, itemId), isPlain: isPlain, selected: selected }, (minWidth && {
|
|
52
50
|
style: {
|
|
53
51
|
'--pf-c-menu--MinWidth': minWidth
|
|
54
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/next/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAa,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAa,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/next/components/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,10 @@ export interface SelectListProps extends MenuListProps {
|
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
/** Classes applied to root element of select list */
|
|
7
7
|
className?: string;
|
|
8
|
+
/** @beta Indicates to assistive technologies whether more than one item can be selected
|
|
9
|
+
* for a non-checkbox select.
|
|
10
|
+
*/
|
|
11
|
+
isAriaMultiselectable?: boolean;
|
|
8
12
|
}
|
|
9
13
|
export declare const SelectList: React.FunctionComponent<MenuListProps>;
|
|
10
14
|
//# sourceMappingURL=SelectList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Select/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAY,MAAM,0BAA0B,CAAC;AAEnE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Select/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAY,MAAM,0BAA0B,CAAC;AAEnE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAS7D,CAAC"}
|
|
@@ -3,8 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import { css } from '@patternfly/react-styles';
|
|
4
4
|
import { MenuList } from '../../../components/Menu';
|
|
5
5
|
export const SelectList = (_a) => {
|
|
6
|
-
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
7
|
-
return (React.createElement(MenuList, Object.assign({ className: css(className) }, props), children));
|
|
6
|
+
var { children, className, isAriaMultiselectable = false } = _a, props = __rest(_a, ["children", "className", "isAriaMultiselectable"]);
|
|
7
|
+
return (React.createElement(MenuList, Object.assign({ isAriaMultiselectable: isAriaMultiselectable, className: css(className) }, props), children));
|
|
8
8
|
};
|
|
9
9
|
SelectList.displayName = 'SelectList';
|
|
10
10
|
//# sourceMappingURL=SelectList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../../../../../src/next/components/Select/SelectList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAiB,QAAQ,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../../../../../src/next/components/Select/SelectList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAiB,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAanE,MAAM,CAAC,MAAM,UAAU,GAA2C,CAAC,EAKjD,EAAE,EAAE;QAL6C,EACjE,QAAQ,EACR,SAAS,EACT,qBAAqB,GAAG,KAAK,OAEb,EADb,KAAK,cAJyD,kDAKlE,CADS;IACa,OAAA,CACrB,oBAAC,QAAQ,kBAAC,qBAAqB,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,IAAM,KAAK,GACzF,QAAQ,CACA,CACZ,CAAA;CAAA,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.276.
|
|
3
|
+
"version": "4.276.2",
|
|
4
4
|
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"react": "^16.8 || ^17 || ^18",
|
|
72
72
|
"react-dom": "^16.8 || ^17 || ^18"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "728c3936597ba5c2758c86e970877c208dad1444"
|
|
75
75
|
}
|
|
@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
|
|
|
4
4
|
import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
|
|
5
5
|
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
6
6
|
import { PickOptional } from '../../helpers/typeUtils';
|
|
7
|
+
import { debounce } from '../../helpers/util';
|
|
8
|
+
import { getResizeObserver } from '../../helpers/resizeObserver';
|
|
7
9
|
|
|
8
10
|
export enum ExpandableSectionVariant {
|
|
9
11
|
default = 'default',
|
|
@@ -61,6 +63,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
|
|
|
61
63
|
|
|
62
64
|
interface ExpandableSectionState {
|
|
63
65
|
isExpanded: boolean;
|
|
66
|
+
hasToggle: boolean;
|
|
67
|
+
previousWidth: number;
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
const setLineClamp = (lines: number, element: HTMLDivElement) => {
|
|
@@ -77,11 +81,15 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
|
|
|
77
81
|
super(props);
|
|
78
82
|
|
|
79
83
|
this.state = {
|
|
80
|
-
isExpanded: props.isExpanded
|
|
84
|
+
isExpanded: props.isExpanded,
|
|
85
|
+
hasToggle: true,
|
|
86
|
+
previousWidth: undefined
|
|
81
87
|
};
|
|
82
88
|
}
|
|
83
89
|
|
|
84
90
|
expandableContentRef = React.createRef<HTMLDivElement>();
|
|
91
|
+
observer: any = () => {};
|
|
92
|
+
|
|
85
93
|
static defaultProps: PickOptional<ExpandableSectionProps> = {
|
|
86
94
|
className: '',
|
|
87
95
|
toggleText: '',
|
|
@@ -114,9 +122,16 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
|
|
|
114
122
|
}
|
|
115
123
|
|
|
116
124
|
componentDidMount() {
|
|
117
|
-
if (this.props.variant === ExpandableSectionVariant.truncate
|
|
125
|
+
if (this.props.variant === ExpandableSectionVariant.truncate) {
|
|
118
126
|
const expandableContent = this.expandableContentRef.current;
|
|
119
|
-
|
|
127
|
+
this.setState({ previousWidth: expandableContent.offsetWidth });
|
|
128
|
+
this.observer = getResizeObserver(expandableContent, this.handleResize, false);
|
|
129
|
+
|
|
130
|
+
if (this.props.truncateMaxLines) {
|
|
131
|
+
setLineClamp(this.props.truncateMaxLines, expandableContent);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
this.checkToggleVisibility();
|
|
120
135
|
}
|
|
121
136
|
}
|
|
122
137
|
|
|
@@ -127,9 +142,38 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
|
|
|
127
142
|
) {
|
|
128
143
|
const expandableContent = this.expandableContentRef.current;
|
|
129
144
|
setLineClamp(this.props.truncateMaxLines, expandableContent);
|
|
145
|
+
this.checkToggleVisibility();
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
componentWillUnmount() {
|
|
150
|
+
if (this.props.variant === ExpandableSectionVariant.truncate) {
|
|
151
|
+
this.observer();
|
|
130
152
|
}
|
|
131
153
|
}
|
|
132
154
|
|
|
155
|
+
checkToggleVisibility = () => {
|
|
156
|
+
if (this.expandableContentRef?.current) {
|
|
157
|
+
const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
|
|
158
|
+
const totalLines =
|
|
159
|
+
this.expandableContentRef.current.scrollHeight /
|
|
160
|
+
parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
|
|
161
|
+
|
|
162
|
+
this.setState({
|
|
163
|
+
hasToggle: totalLines > maxLines
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
resize = () => {
|
|
169
|
+
const { offsetWidth } = this.expandableContentRef.current;
|
|
170
|
+
if (this.state.previousWidth !== offsetWidth) {
|
|
171
|
+
this.setState({ previousWidth: offsetWidth });
|
|
172
|
+
this.checkToggleVisibility();
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
handleResize = debounce(this.resize, 250);
|
|
176
|
+
|
|
133
177
|
render() {
|
|
134
178
|
const {
|
|
135
179
|
onToggle: onToggleProp,
|
|
@@ -210,7 +254,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
|
|
|
210
254
|
>
|
|
211
255
|
{children}
|
|
212
256
|
</div>
|
|
213
|
-
{variant === ExpandableSectionVariant.truncate && expandableToggle}
|
|
257
|
+
{variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
|
|
214
258
|
</div>
|
|
215
259
|
);
|
|
216
260
|
}
|
|
@@ -68,6 +68,9 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
|
|
|
68
68
|
ouiaId?: number | string;
|
|
69
69
|
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
|
|
70
70
|
ouiaSafe?: boolean;
|
|
71
|
+
/** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
|
|
72
|
+
* one or more items selected, pass in "listbox". */
|
|
73
|
+
role?: string;
|
|
71
74
|
}
|
|
72
75
|
|
|
73
76
|
export interface MenuState {
|
|
@@ -89,7 +92,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
|
|
|
89
92
|
ouiaSafe: true,
|
|
90
93
|
isRootMenu: true,
|
|
91
94
|
isPlain: false,
|
|
92
|
-
isScrollable: false
|
|
95
|
+
isScrollable: false,
|
|
96
|
+
role: 'menu'
|
|
93
97
|
};
|
|
94
98
|
|
|
95
99
|
constructor(props: MenuProps) {
|
|
@@ -272,6 +276,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
|
|
|
272
276
|
innerRef,
|
|
273
277
|
isRootMenu,
|
|
274
278
|
activeMenu,
|
|
279
|
+
role,
|
|
275
280
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
276
281
|
...props
|
|
277
282
|
} = this.props;
|
|
@@ -292,7 +297,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
|
|
|
292
297
|
onGetMenuHeight,
|
|
293
298
|
flyoutRef: this.state.flyoutRef,
|
|
294
299
|
setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
|
|
295
|
-
disableHover: this.state.disableHover
|
|
300
|
+
disableHover: this.state.disableHover,
|
|
301
|
+
role
|
|
296
302
|
}}
|
|
297
303
|
>
|
|
298
304
|
{isRootMenu && (
|
|
@@ -20,6 +20,7 @@ export const MenuContext = React.createContext<{
|
|
|
20
20
|
flyoutRef?: React.Ref<HTMLLIElement>;
|
|
21
21
|
setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
|
|
22
22
|
disableHover?: boolean;
|
|
23
|
+
role?: string;
|
|
23
24
|
}>({
|
|
24
25
|
menuId: null,
|
|
25
26
|
parentMenu: null,
|
|
@@ -34,7 +35,8 @@ export const MenuContext = React.createContext<{
|
|
|
34
35
|
onGetMenuHeight: () => null,
|
|
35
36
|
flyoutRef: null,
|
|
36
37
|
setFlyoutRef: () => null,
|
|
37
|
-
disableHover: false
|
|
38
|
+
disableHover: false,
|
|
39
|
+
role: 'menu'
|
|
38
40
|
});
|
|
39
41
|
|
|
40
42
|
export const MenuItemContext = React.createContext<{
|
|
@@ -114,7 +114,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
|
|
|
114
114
|
onDrillOut,
|
|
115
115
|
flyoutRef,
|
|
116
116
|
setFlyoutRef,
|
|
117
|
-
disableHover
|
|
117
|
+
disableHover,
|
|
118
|
+
role: menuRole
|
|
118
119
|
} = React.useContext(MenuContext);
|
|
119
120
|
let Component = (to ? 'a' : component) as any;
|
|
120
121
|
if (hasCheck && !to) {
|
|
@@ -290,6 +291,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
|
|
|
290
291
|
setFlyoutRef(null);
|
|
291
292
|
}
|
|
292
293
|
};
|
|
294
|
+
const isSelectMenu = menuRole === 'listbox';
|
|
293
295
|
|
|
294
296
|
return (
|
|
295
297
|
<li
|
|
@@ -316,7 +318,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
|
|
|
316
318
|
className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
|
|
317
319
|
aria-current={getAriaCurrent()}
|
|
318
320
|
{...(!hasCheck && { disabled: isDisabled })}
|
|
319
|
-
{...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
|
|
321
|
+
{...(!hasCheck && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
|
|
322
|
+
{...(!hasCheck && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
|
|
320
323
|
ref={innerRef}
|
|
321
324
|
{...(!hasCheck && {
|
|
322
325
|
onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
|
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styles from '@patternfly/react-styles/css/components/Menu/menu';
|
|
3
3
|
import { css } from '@patternfly/react-styles';
|
|
4
|
+
import { MenuContext } from './MenuContext';
|
|
4
5
|
|
|
5
6
|
export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
|
|
6
7
|
/** Anything that can be rendered inside of menu list */
|
|
7
8
|
children: React.ReactNode;
|
|
8
9
|
/** Additional classes added to the menu list */
|
|
9
10
|
className?: string;
|
|
11
|
+
/** @beta Indicates to assistive technologies whether more than one item can be selected
|
|
12
|
+
* for a non-checkbox menu. Only applies when the menu's role is "listbox".
|
|
13
|
+
*/
|
|
14
|
+
isAriaMultiselectable?: boolean;
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
export const MenuList: React.FunctionComponent<MenuListProps> = ({
|
|
13
18
|
children = null,
|
|
14
19
|
className,
|
|
20
|
+
isAriaMultiselectable = false,
|
|
15
21
|
...props
|
|
16
|
-
}: MenuListProps) =>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
}: MenuListProps) => {
|
|
23
|
+
const { role } = React.useContext(MenuContext);
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<ul
|
|
27
|
+
role={role}
|
|
28
|
+
{...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
|
|
29
|
+
className={css(styles.menuList, className)}
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
32
|
+
{children}
|
|
33
|
+
</ul>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
21
36
|
MenuList.displayName = 'MenuList';
|