@patternfly/react-core 4.202.22 → 4.202.25

package/dist/styles/base.css

@@ -683,6 +683,11 @@ th {
   text-align: left;
 }
 
+code,
+pre {
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
 *,
 *::before,
 *::after {

package/dist/umd/react-core.css

@@ -17797,13 +17797,13 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/dist/umd/react-core.js

@@ -4875,7 +4875,7 @@
     const Dropdown = (_a) => {
         var { onSelect, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref, // Types of Ref are different for React.FC vs React.Component
+        ref, // Types of Ref are different for React.FunctionComponent vs React.Component
         ouiaId, ouiaSafe, alignments, contextProps } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps"]);
         return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: styles$15.dropdownToggleText, toggleIconClass: styles$15.dropdownToggleImage, toggleIndicatorClass: styles$15.dropdownToggleIcon, menuClass: styles$15.dropdownMenu, itemClass: styles$15.dropdownMenuItem, toggleClass: styles$15.dropdownToggle, baseClass: styles$15.dropdown, baseComponent: 'div', sectionClass: styles$15.dropdownGroup, sectionTitleClass: styles$15.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles$15.modifiers.disabled, plainTextClass: styles$15.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
             React__namespace.createElement(DropdownWithContext, Object.assign({}, props))));
@@ -5034,7 +5034,7 @@
     const DropdownItem = (_a) => {
         var { children, className, component = 'a', isDisabled = false, isAriaDisabled = false, isPlainText = false, isHovered = false, href, tooltip, tooltipProps = {}, listItemClassName, onClick, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref, // Types of Ref are different for React.FC vs React.Component
+        ref, // Types of Ref are different for React.FunctionComponent vs React.Component
         additionalChild, customChild, tabIndex = -1, icon = null, autoFocus, description = null, styleChildren, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "component", "isDisabled", "isAriaDisabled", "isPlainText", "isHovered", "href", "tooltip", "tooltipProps", "listItemClassName", "onClick", "ref", "additionalChild", "customChild", "tabIndex", "icon", "autoFocus", "description", "styleChildren", "ouiaId", "ouiaSafe"]);
         const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
         return (React__namespace.createElement(DropdownArrowContext.Consumer, null, context => (React__namespace.createElement(InternalDropdownItem, Object.assign({ context: context, role: "menuitem", tabIndex: tabIndex, className: className, component: component, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, isPlainText: isPlainText, isHovered: isHovered, href: href, tooltip: tooltip, tooltipProps: tooltipProps, listItemClassName: listItemClassName, onClick: onClick, additionalChild: additionalChild, customChild: customChild, icon: icon, autoFocus: autoFocus, styleChildren: styleChildren, description: description }, ouiaProps, props), children))));
@@ -5124,7 +5124,7 @@
     const DropdownSeparator = (_a) => {
         var { className = '', 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref, // Types of Ref are different for React.FC vs React.Component
+        ref, // Types of Ref are different for React.FunctionComponent vs React.Component
         ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["className", "ref", "ouiaId", "ouiaSafe"]);
         const ouiaProps = useOUIAProps(DropdownSeparator.displayName, ouiaId, ouiaSafe);
         return (React__namespace.createElement(DropdownArrowContext.Consumer, null, context => (React__namespace.createElement(InternalDropdownItem, Object.assign({}, props, { context: context, component: React__namespace.createElement(Divider, { component: exports.DividerVariant.div }), className: className, role: "separator" }, ouiaProps)))));
@@ -5248,7 +5248,7 @@
     const BadgeToggle = (_a) => {
         var { id = '', children = null, badgeProps = { isRead: true }, className = '', isOpen = false, 'aria-label': ariaLabel = 'Actions', parentRef = null, getMenuRef = null, isActive = false, isPlain = null, isDisabled = false, bubbleEvent = false, onToggle = () => undefined, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref } = _a, // Types of Ref are different for React.FC vs React.Component
+        ref } = _a, // Types of Ref are different for React.FunctionComponent vs React.Component
         props = __rest$1(_a, ["id", "children", "badgeProps", "className", "isOpen", 'aria-label', "parentRef", "getMenuRef", "isActive", "isPlain", "isDisabled", "bubbleEvent", "onToggle", "ref"]);
         return (React__namespace.createElement(Toggle, Object.assign({ id: id, className: className, isOpen: isOpen, "aria-label": ariaLabel, parentRef: parentRef, getMenuRef: getMenuRef, isActive: isActive, isPlain: isPlain || true, isDisabled: isDisabled, onToggle: onToggle, bubbleEvent: bubbleEvent }, props),
             React__namespace.createElement(Badge, Object.assign({}, badgeProps),
@@ -5276,7 +5276,7 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         children = null, className = '', isOpen = false, 'aria-label': ariaLabel = 'Actions', parentRef = null, getMenuRef = null, isActive = false, isPlain = false, isDisabled = false, bubbleEvent = false, onToggle = () => undefined, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref } = _a, // Types of Ref are different for React.FC vs React.Component
+        ref } = _a, // Types of Ref are different for React.FunctionComponent vs React.Component
         props = __rest$1(_a, ["id", "children", "className", "isOpen", 'aria-label', "parentRef", "getMenuRef", "isActive", "isPlain", "isDisabled", "bubbleEvent", "onToggle", "ref"]);
         return (React__namespace.createElement(Toggle, Object.assign({ id: id, className: className, isOpen: isOpen, "aria-label": ariaLabel, parentRef: parentRef, getMenuRef: getMenuRef, isActive: isActive, isPlain: isPlain, isDisabled: isDisabled, onToggle: onToggle, bubbleEvent: bubbleEvent }, props),
             React__namespace.createElement(EllipsisVIcon$1, null)));
@@ -5290,7 +5290,7 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onToggle = (_isOpen) => undefined, icon = null, toggleIndicator: ToggleIndicator = CaretDownIcon$1, splitButtonItems, splitButtonVariant = 'checkbox', 'aria-haspopup': ariaHasPopup, ouiaId, ouiaSafe, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref } = _a, // Types of Ref are different for React.FC vs React.Component
+        ref } = _a, // Types of Ref are different for React.FunctionComponent vs React.Component
         props = __rest$1(_a, ["id", "children", "className", "isOpen", "parentRef", "getMenuRef", "isDisabled", "isPlain", "isText", "isPrimary", "toggleVariant", "isActive", "onToggle", "icon", "toggleIndicator", "splitButtonItems", "splitButtonVariant", 'aria-haspopup', "ouiaId", "ouiaSafe", "ref"]);
         const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe);
         const toggle = (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => (React__namespace.createElement(Toggle, Object.assign({}, props, { id: id, className: className, isOpen: isOpen, parentRef: parentRef, getMenuRef: getMenuRef, isActive: isActive, isDisabled: isDisabled, isPlain: isPlain, isText: isText, isPrimary: isPrimary, toggleVariant: toggleVariant, onToggle: onToggle, "aria-haspopup": ariaHasPopup }, ouiaProps, (splitButtonItems && { isSplitButton: true, 'aria-label': props['aria-label'] || 'Select' })),
@@ -6482,10 +6482,11 @@
         constructor(props) {
             super(props);
             this.onDocClick = (event) => {
-                const { parentRef, menuRef, isOpen, onToggle, onClose } = this.props;
+                const { parentRef, menuRef, footerRef, isOpen, onToggle, onClose } = this.props;
                 const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
                 const clickedWithinMenu = menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target);
-                if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+                const clickedWithinFooter = footerRef && footerRef.current && footerRef.current.contains && footerRef.current.contains(event.target);
+                if (isOpen && !(clickedOnToggle || clickedWithinMenu || clickedWithinFooter)) {
                     onToggle(false, event);
                     onClose();
                 }
@@ -6608,7 +6609,7 @@
         }
         render() {
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onClickTypeaheadToggleButton, handleTypeaheadKeys, moveFocusToLastMenuItem, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "moveFocusToLastMenuItem", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
+            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onBlur, onClickTypeaheadToggleButton, handleTypeaheadKeys, moveFocusToLastMenuItem, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onBlur", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "moveFocusToLastMenuItem", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
             const isTypeahead = variant === exports.SelectVariant.typeahead || variant === exports.SelectVariant.typeaheadMulti || hasClearButton;
             const toggleProps = {
@@ -6618,7 +6619,7 @@
                 'aria-haspopup': (variant !== exports.SelectVariant.checkbox && 'listbox') || null
             };
             return (React__namespace.createElement(React__namespace.Fragment, null,
-                !isTypeahead && (React__namespace.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(styles$_.selectToggle, hasPlaceholderStyle && styles$_.modifiers.placeholder, isDisabled && styles$_.modifiers.disabled, isPlain && styles$_.modifiers.plain, isActive && styles$_.modifiers.active, className), "aria-label": ariaLabel, 
+                !isTypeahead && (React__namespace.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(styles$_.selectToggle, hasPlaceholderStyle && styles$_.modifiers.placeholder, isDisabled && styles$_.modifiers.disabled, isPlain && styles$_.modifiers.plain, isActive && styles$_.modifiers.active, className), "aria-label": ariaLabel, onBlur: onBlur, 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     onClick: event => {
                         onToggle(!isOpen, event);
@@ -6629,7 +6630,7 @@
                     children,
                     React__namespace.createElement("span", { className: css(styles$_.selectToggleArrow) },
                         React__namespace.createElement(CaretDownIcon$1, null)))),
-                isTypeahead && (React__namespace.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(styles$_.selectToggle, hasPlaceholderStyle && styles$_.modifiers.placeholder, isDisabled && styles$_.modifiers.disabled, isPlain && styles$_.modifiers.plain, isTypeahead && styles$_.modifiers.typeahead, className), 
+                isTypeahead && (React__namespace.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(styles$_.selectToggle, hasPlaceholderStyle && styles$_.modifiers.placeholder, isDisabled && styles$_.modifiers.disabled, isPlain && styles$_.modifiers.plain, isTypeahead && styles$_.modifiers.typeahead, className), onBlur: onBlur, 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     onClick: event => {
                         if (!isDisabled) {
@@ -7429,7 +7430,7 @@
             });
         }
         render() {
-            const _a = this.props, { children, chipGroupProps, chipGroupComponent, className, customContent, variant, direction, onSelect, onClear, toggleId, isOpen, isGrouped, isPlain, isDisabled, hasPlaceholderStyle, validated, selections: selectionsProp, typeAheadAriaLabel, clearSelectionsAriaLabel, toggleAriaLabel, removeSelectionAriaLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, placeholderText, width, maxHeight, toggleIcon, ouiaId, ouiaSafe, hasInlineFilter, isCheckboxSelectionBadgeHidden, inlineFilterPlaceholderText, 
+            const _a = this.props, { children, chipGroupProps, chipGroupComponent, className, customContent, variant, direction, onSelect, onClear, onBlur, toggleId, isOpen, isGrouped, isPlain, isDisabled, hasPlaceholderStyle, validated, selections: selectionsProp, typeAheadAriaLabel, clearSelectionsAriaLabel, toggleAriaLabel, removeSelectionAriaLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, placeholderText, width, maxHeight, toggleIcon, ouiaId, ouiaSafe, hasInlineFilter, isCheckboxSelectionBadgeHidden, inlineFilterPlaceholderText, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
             onFilter, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -7439,7 +7440,7 @@
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "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"]);
+            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "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"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
             const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -7612,7 +7613,7 @@
                 " ") : innerMenu;
             const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className) }, (width && { style: { width } }), (validated !== exports.ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== exports.ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
             const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== exports.ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== exports.ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
-                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, moveFocusToLastMenuItem: this.moveFocusToLastMenuItem, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
+                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, onBlur: onBlur, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, moveFocusToLastMenuItem: this.moveFocusToLastMenuItem, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
                     customContent && (React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                         toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
                         React__namespace.createElement("span", { className: css(styles$_.selectToggleText) }, placeholderText))),
@@ -9405,7 +9406,7 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onChange = (checked, event) => { }, isValid = true, isDisabled = false, isChecked = null, checked = null, otherControls = false } = _a, props = __rest$1(_a, ["className", "onChange", "isValid", "isDisabled", "isChecked", "checked", "otherControls"]);
         const check = (React__namespace.createElement("div", { className: css(styles$O.dataListCheck) },
-            React__namespace.createElement("input", Object.assign({}, props, { type: "checkbox", onChange: event => onChange(event.currentTarget.checked, event), "aria-invalid": !isValid, disabled: isDisabled, checked: isChecked || checked }))));
+            React__namespace.createElement("input", Object.assign({}, props, { type: "checkbox", onChange: event => onChange(event.currentTarget.checked, event), "aria-invalid": !isValid, disabled: isDisabled }, (checked !== null && { defaultChecked: checked }), (isChecked !== null && { checked: isChecked })))));
         return (React__namespace.createElement(React__namespace.Fragment, null,
             !otherControls && React__namespace.createElement("div", { className: css(styles$O.dataListItemControl, className) }, check),
             otherControls && check));
@@ -10582,25 +10583,6 @@
             this.addSelectedButtonRef = React__namespace.createRef();
             this.removeSelectedButtonRef = React__namespace.createRef();
             this.removeAllButtonRef = React__namespace.createRef();
-            this.originalAvailableCopy = JSON.parse(JSON.stringify(this.props.availableOptions));
-            this.originalChosenCopy = JSON.parse(JSON.stringify(this.props.chosenOptions));
-            // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
-            this.mergedCopy = this.props.isTree
-                ? Object.values(this.originalAvailableCopy
-                    .concat(this.originalChosenCopy)
-                    .reduce((mapObj, item) => {
-                    const key = item.id;
-                    if (mapObj[key]) {
-                        // If map already has an item ID, add the dupe ID's children to the existing map
-                        mapObj[key].children.push(...item.children);
-                    }
-                    else {
-                        // Else clone the item data
-                        mapObj[key] = Object.assign({}, item);
-                    }
-                    return mapObj;
-                }, {}))
-                : null;
             this.onFilterUpdate = (newFilteredOptions, paneType, isSearchReset) => {
                 const { isTree } = this.props;
                 if (paneType === 'available') {
@@ -10675,7 +10657,7 @@
                         .filter(item => filterRestTreeItems(item, movedOptions));
                     const currChosen = flattenTree(prevState.chosenOptions);
                     const nextChosenOptions = currChosen.concat(movedOptions);
-                    const newChosen = this.mergedCopy
+                    const newChosen = this.createMergedCopy()
                         .map(opt => Object.assign({}, opt))
                         .filter(item => filterTreeItemsWithoutFolders(item, nextChosenOptions));
                     this.props.addAll && this.props.addAll(newAvailable, newChosen);
@@ -10722,7 +10704,7 @@
                     // Get next chosen options from current + new nodes and remap from base
                     const currChosen = flattenTree(prevState.chosenOptions);
                     const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
-                    const newChosen = this.mergedCopy
+                    const newChosen = this.createMergedCopy()
                         .map(opt => Object.assign({}, opt))
                         .filter(item => filterTreeItemsWithoutFolders(item, nextChosenOptions));
                     this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
@@ -10768,7 +10750,7 @@
                         .filter(item => filterRestTreeItems(item, movedOptions));
                     const currAvailable = flattenTree(prevState.availableOptions);
                     const nextAvailableOptions = currAvailable.concat(movedOptions);
-                    const newAvailable = this.mergedCopy
+                    const newAvailable = this.createMergedCopy()
                         .map(opt => Object.assign({}, opt))
                         .filter(item => filterTreeItemsWithoutFolders(item, nextAvailableOptions));
                     this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
@@ -10813,7 +10795,7 @@
                     // Get next chosen options from current and remap from base
                     const currAvailable = flattenTree(prevState.availableOptions);
                     const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
-                    const newAvailable = this.mergedCopy
+                    const newAvailable = this.createMergedCopy()
                         .map(opt => Object.assign({}, opt))
                         .filter(item => filterTreeItemsWithoutFolders(item, nextAvailableOptions));
                     this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
@@ -10928,6 +10910,27 @@
                 chosenTreeOptionsChecked: []
             };
         }
+        // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
+        createMergedCopy() {
+            const copyOfAvailable = JSON.parse(JSON.stringify(this.props.availableOptions));
+            const copyOfChosen = JSON.parse(JSON.stringify(this.props.chosenOptions));
+            return this.props.isTree
+                ? Object.values(copyOfAvailable
+                    .concat(copyOfChosen)
+                    .reduce((mapObj, item) => {
+                    const key = item.id;
+                    if (mapObj[key]) {
+                        // If map already has an item ID, add the dupe ID's children to the existing map
+                        mapObj[key].children.push(...item.children);
+                    }
+                    else {
+                        // Else clone the item data
+                        mapObj[key] = Object.assign({}, item);
+                    }
+                    return mapObj;
+                }, {}))
+                : null;
+        }
         componentDidUpdate() {
             if (JSON.stringify(this.props.availableOptions) !== JSON.stringify(this.state.availableOptions) ||
                 JSON.stringify(this.props.chosenOptions) !== JSON.stringify(this.state.chosenOptions)) {

package/dist/umd/react-core.min.css

@@ -17797,13 +17797,13 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
@@ -22287,6 +22287,75 @@ svg.pf-c-spinner.pf-m-xl {
     direction: ltr;
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -24363,75 +24432,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;