@patternfly/react-core 4.224.9 → 4.224.10

package/dist/umd/react-core.js

@@ -1441,11 +1441,11 @@
      *  </GenerateId>
      *  );
      */
-    let currentId$3 = 0;
+    let currentId$2 = 0;
     class GenerateId extends React__namespace.Component {
         constructor() {
             super(...arguments);
-            this.id = `${this.props.prefix}${currentId$3++}`;
+            this.id = `${this.props.prefix}${currentId$2++}`;
         }
         render() {
             return this.props.children(this.id);
@@ -4363,7 +4363,7 @@
                 return '1em';
         }
     };
-    let currentId$2 = 0;
+    let currentId$1 = 0;
     /**
      * Factory to create Icon class components for consumers
      */
@@ -4372,7 +4372,7 @@
         return _a = class SVGIcon extends React__namespace.Component {
                 constructor() {
                     super(...arguments);
-                    this.id = `icon-title-${currentId$2++}`;
+                    this.id = `icon-title-${currentId$1++}`;
                 }
                 render() {
                     const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
@@ -7480,7 +7480,7 @@
     };
 
     // seed for the aria-labelledby ID
-    let currentId$1 = 0;
+    let currentId = 0;
     class Select extends React__namespace.Component {
         constructor() {
             super(...arguments);
@@ -8106,7 +8106,7 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "typeAheadAriaDescribedby", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect", "isFlipEnabled"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
-            const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
+            const selectToggleId = toggleId || `pf-select-toggle-id-${currentId++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
             // Find out if the selected option is a placeholder
             const selectedOption = React__namespace.Children.toArray(children).find((option) => option.props.value === selections[0]);
@@ -9643,7 +9643,8 @@
         extendChildren() {
             return React__namespace.Children.map(this.props.children, (child, index) => React__namespace.cloneElement(child, {
                 sendRef: this.sendRef,
-                index
+                index,
+                role: 'menuitem'
             }));
         }
     }
@@ -9659,9 +9660,6 @@
         onSelect: (event, value) => undefined
     });
 
-    // seed for the aria-labelledby ID
-    let currentId = 0;
-    const newId = currentId++;
     class ContextSelector extends React__namespace.Component {
         constructor(props) {
             super(props);
@@ -9677,15 +9675,15 @@
             };
         }
         render() {
-            const toggleId = `pf-context-selector-toggle-id-${newId}`;
-            const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
-            const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
-            const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled"]);
-            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } })), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
+            const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled, id } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled", "id"]);
+            const uniqueId = id || getUniqueId();
+            const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
+            const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } }), { id: uniqueId }), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
                 React__namespace.createElement("div", { className: css(styles$P.contextSelectorMenuSearch) },
                     React__namespace.createElement(InputGroup, null,
-                        React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-labelledby": searchButtonId }),
-                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.control, "aria-label": searchButtonAriaLabel, id: searchButtonId, onClick: onSearchButtonClick },
+                        React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-label": searchButtonAriaLabel }),
+                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.control, "aria-label": searchButtonAriaLabel, onClick: onSearchButtonClick },
                             React__namespace.createElement(SearchIcon$1, { "aria-hidden": "true" })))),
                 React__namespace.createElement(ContextSelectorContext.Provider, { value: { onSelect } },
                     React__namespace.createElement(ContextSelectorMenuList, { isOpen: isOpen }, children)),
@@ -11123,7 +11121,13 @@
             setFocusedOption(id);
             onOptionSelect(e, index, id);
         };
-        return (React__namespace.createElement("ul", Object.assign({ className: css(styles$L.dualListSelectorList), role: isTree ? 'tree' : 'listbox', "aria-multiselectable": "true", "aria-labelledby": ariaLabelledBy, "aria-activedescendant": focusedOption, "aria-disabled": isDisabled ? 'true' : undefined }, props), options.length === 0
+        const hasOptions = () => options.length !== 0 || (children !== undefined && children.length !== 0);
+        return (React__namespace.createElement("ul", Object.assign({ className: css(styles$L.dualListSelectorList) }, (hasOptions() && {
+            role: isTree ? 'tree' : 'listbox',
+            'aria-multiselectable': true,
+            'aria-labelledby': ariaLabelledBy,
+            'aria-activedescendant': focusedOption
+        }), { "aria-disabled": isDisabled ? 'true' : undefined }, props), options.length === 0
             ? children
             : options.map((option, index) => {
                 if (displayOption(option)) {
@@ -11284,7 +11288,7 @@
         return (React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelectorControls, className), tabIndex: 0, ref: wrapperRef, "aria-label": ariaLabel }, props), children));
     };
     DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
-    const DualListSelectorControlsWrapper = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(DualListSelectorControlsWrapperBase, Object.assign({ innerRef: ref }, props))));
+    const DualListSelectorControlsWrapper = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(DualListSelectorControlsWrapperBase, Object.assign({ innerRef: ref, role: "group" }, props))));
     DualListSelectorControlsWrapper.displayName = 'DualListSelectorControlsWrapper';
 
     const DualListSelectorControlBase = (_a) => {
@@ -11694,8 +11698,8 @@
                 ? chosenOptions.map(item => this.mapChecked(item, true))
                 : chosenOptions);
             return (React__namespace.createElement(DualListSelectorContext.Provider, { value: { isTree } },
-                React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement(DualListSelectorPane, { isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: availableOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onAvailableOptionsSearchInputChanged, status: availableOptionsStatusToDisplay, title: availableOptionsTitle, options: available, selectedOptions: isTree ? availableTreeOptionsChecked : availableOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false), actions: availableOptionsActions, id: `${id}-available-pane`, isDisabled: isDisabled }),
+                React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id || randomId }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
+                    React__namespace.createElement(DualListSelectorPane, { isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: availableOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onAvailableOptionsSearchInputChanged, status: availableOptionsStatusToDisplay, title: availableOptionsTitle, options: available, selectedOptions: isTree ? availableTreeOptionsChecked : availableOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false), actions: availableOptionsActions, id: `${id || randomId}-available-pane`, isDisabled: isDisabled }),
                     React__namespace.createElement(DualListSelectorControlsWrapper, { "aria-label": controlsAriaLabel },
                         React__namespace.createElement(DualListSelectorControl, { isDisabled: (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
                                 isDisabled, onClick: isTree ? this.addTreeSelected : this.addSelected, ref: this.addSelectedButtonRef, "aria-label": addSelectedAriaLabel, tooltipContent: addSelectedTooltip, tooltipProps: addSelectedTooltipProps },
@@ -11704,9 +11708,10 @@
                             React__namespace.createElement(AngleDoubleRightIcon$1, null)),
                         React__namespace.createElement(DualListSelectorControl, { isDisabled: chosenOptions.length === 0 || isDisabled, onClick: isTree ? this.removeAllTreeVisible : this.removeAllVisible, "aria-label": removeAllAriaLabel, ref: this.removeAllButtonRef, tooltipContent: removeAllTooltip, tooltipProps: removeAllTooltipProps },
                             React__namespace.createElement(AngleDoubleLeftIcon$1, null)),
-                        React__namespace.createElement(DualListSelectorControl, { onClick: isTree ? this.removeTreeSelected : this.removeSelected, isDisabled: (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) || isDisabled, ref: this.removeSelectedButtonRef, "aria-label": removeSelectedAriaLabel, tooltipContent: removeSelectedTooltip, tooltipProps: removeSelectedTooltipProps },
+                        React__namespace.createElement(DualListSelectorControl, { onClick: isTree ? this.removeTreeSelected : this.removeSelected, isDisabled: (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) ||
+                                isDisabled, ref: this.removeSelectedButtonRef, "aria-label": removeSelectedAriaLabel, tooltipContent: removeSelectedTooltip, tooltipProps: removeSelectedTooltipProps },
                             React__namespace.createElement(AngleLeftIcon$1, null))),
-                    React__namespace.createElement(DualListSelectorPane, { isChosen: true, isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: chosenOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onChosenOptionsSearchInputChanged, title: chosenOptionsTitle, status: chosenOptionsStatusToDisplay, options: chosen, selectedOptions: isTree ? chosenTreeOptionsChecked : chosenOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true), actions: chosenOptionsActions, id: `${id}-chosen-pane`, isDisabled: isDisabled }))) : (children))));
+                    React__namespace.createElement(DualListSelectorPane, { isChosen: true, isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: chosenOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onChosenOptionsSearchInputChanged, title: chosenOptionsTitle, status: chosenOptionsStatusToDisplay, options: chosen, selectedOptions: isTree ? chosenTreeOptionsChecked : chosenOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true), actions: chosenOptionsActions, id: `${id || randomId}-chosen-pane`, isDisabled: isDisabled }))) : (children))))));
         }
     }
     DualListSelector.displayName = 'DualListSelector';
@@ -11718,7 +11723,6 @@
         chosenOptions: [],
         chosenOptionsTitle: 'Chosen options',
         chosenOptionsSearchAriaLabel: 'Chosen search input',
-        id: getUniqueId('dual-list-selector'),
         controlsAriaLabel: 'Selector controls',
         addAllAriaLabel: 'Add all',
         addSelectedAriaLabel: 'Add selected',
@@ -20578,6 +20582,7 @@
         "noBackground": "pf-m-no-background",
         "current": "pf-m-current",
         "read": "pf-m-read",
+        "selectable": "pf-m-selectable",
         "truncate": "pf-m-truncate"
       },
       "themeDark": "pf-theme-dark",