@patternfly/react-core 4.221.1 → 4.221.4

package/dist/umd/react-core.css

@@ -23107,89 +23107,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
 }
 
-.pf-c-panel {
-  --pf-c-panel--Width: auto;
-  --pf-c-panel--MinWidth: auto;
-  --pf-c-panel--MaxWidth: none;
-  --pf-c-panel--ZIndex: auto;
-  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-panel--BoxShadow: none;
-  --pf-c-panel--before--BorderWidth: 0;
-  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__main--MaxHeight: none;
-  --pf-c-panel__main--Overflow: visible;
-  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--BoxShadow: none;
-  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
-  --pf-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
-  position: relative;
-  z-index: var(--pf-c-panel--ZIndex);
-  width: var(--pf-c-panel--Width);
-  min-width: var(--pf-c-panel--MinWidth);
-  max-width: var(--pf-c-panel--MaxWidth);
-  background-color: var(--pf-c-panel--BackgroundColor);
-  box-shadow: var(--pf-c-panel--BoxShadow);
-}
-
-.pf-c-panel::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  content: "";
-  border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
-}
-
-.pf-c-panel.pf-m-bordered {
-  --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
-}
-
-.pf-c-panel.pf-m-raised {
-  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
-  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
-}
-
-.pf-c-panel.pf-m-scrollable {
-  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
-  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
-  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
-}
-
-.pf-c-panel__header {
-  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
-}
-
-.pf-c-panel__main {
-  max-height: var(--pf-c-panel__main--MaxHeight);
-  overflow: var(--pf-c-panel__main--Overflow);
-}
-
-.pf-c-panel__main-body {
-  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
-}
-
-.pf-c-panel__footer {
-  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
-  box-shadow: var(--pf-c-panel__footer--BoxShadow);
-}
-
 .pf-c-text-input-group {
   --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -23362,6 +23279,89 @@ svg.pf-c-spinner.pf-m-xl {
   display: flex;
 }
 
+.pf-c-panel {
+  --pf-c-panel--Width: auto;
+  --pf-c-panel--MinWidth: auto;
+  --pf-c-panel--MaxWidth: none;
+  --pf-c-panel--ZIndex: auto;
+  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-panel--BoxShadow: none;
+  --pf-c-panel--before--BorderWidth: 0;
+  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__main--MaxHeight: none;
+  --pf-c-panel__main--Overflow: visible;
+  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--BoxShadow: none;
+  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  --pf-c-panel--m-scrollable__main--Overflow: auto;
+  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  position: relative;
+  z-index: var(--pf-c-panel--ZIndex);
+  width: var(--pf-c-panel--Width);
+  min-width: var(--pf-c-panel--MinWidth);
+  max-width: var(--pf-c-panel--MaxWidth);
+  background-color: var(--pf-c-panel--BackgroundColor);
+  box-shadow: var(--pf-c-panel--BoxShadow);
+}
+
+.pf-c-panel::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
+}
+
+.pf-c-panel.pf-m-bordered {
+  --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
+}
+
+.pf-c-panel.pf-m-raised {
+  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
+  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
+}
+
+.pf-c-panel.pf-m-scrollable {
+  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
+  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
+  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
+}
+
+.pf-c-panel__header {
+  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
+}
+
+.pf-c-panel__main {
+  max-height: var(--pf-c-panel__main--MaxHeight);
+  overflow: var(--pf-c-panel__main--Overflow);
+}
+
+.pf-c-panel__main-body {
+  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
+}
+
+.pf-c-panel__footer {
+  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
+  box-shadow: var(--pf-c-panel__footer--BoxShadow);
+}
+
 .pf-c-truncate {
   --pf-c-truncate--MinWidth: 12ch;
   --pf-c-truncate__start--MinWidth: 6ch;

package/dist/umd/react-core.js

@@ -8083,7 +8083,7 @@
             });
         }
         render() {
-            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, 
+            const _a = this.props, { children, chipGroupProps, chipGroupComponent, className, customContent, variant, direction, onSelect, onClear, onBlur, toggleId, isOpen, isGrouped, isPlain, isDisabled, hasPlaceholderStyle, validated, selections: selectionsProp, typeAheadAriaLabel, typeAheadAriaDescribedby, 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 */
@@ -8093,7 +8093,7 @@
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* 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", "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"]);
+            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 selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -8267,8 +8267,8 @@
                 " ",
                 innerMenu,
                 " ") : 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 })),
+            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 } }), (ariaDescribedby && { '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 } }), (ariaDescribedby && { '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, 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),
@@ -8288,15 +8288,15 @@
                     variant === exports.SelectVariant.typeahead && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
-                            React__namespace.createElement("input", { className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
+                            React__namespace.createElement("input", Object.assign({ className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel }, (typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby }), { placeholder: placeholderText, value: typeaheadInputValue !== null
                                     ? typeaheadInputValue
-                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
+                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef }))),
                         hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                     variant === exports.SelectVariant.typeaheadMulti && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
                             selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                            React__namespace.createElement("input", { className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === exports.ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
+                            React__namespace.createElement("input", Object.assign({ className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === exports.ValidatedOptions.error }, (typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby }), { placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef }))),
                         hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
                     validated === exports.ValidatedOptions.success && (React__namespace.createElement("span", { className: css(styles$_.selectToggleStatusIcon) },
                         React__namespace.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
@@ -8340,6 +8340,7 @@
         'aria-describedby': '',
         'aria-invalid': false,
         typeAheadAriaLabel: '',
+        typeAheadAriaDescribedby: '',
         clearSelectionsAriaLabel: 'Clear all',
         toggleAriaLabel: 'Options menu',
         removeSelectionAriaLabel: 'Remove',
@@ -10046,9 +10047,9 @@
         render() {
             const _a = this.props, { className, children, onSelectDataListItem, selectedDataListItemId, isCompact, wrapModifier, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            onDragStart, onDragMove, onDragCancel, onDragFinish, gridBreakpoint, itemOrder } = _a, 
+            onDragStart, onDragMove, onDragCancel, onDragFinish, gridBreakpoint, itemOrder, selectableRow } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            props = __rest$1(_a, ["className", "children", "onSelectDataListItem", "selectedDataListItemId", "isCompact", "wrapModifier", "onDragStart", "onDragMove", "onDragCancel", "onDragFinish", "gridBreakpoint", "itemOrder"]);
+            props = __rest$1(_a, ["className", "children", "onSelectDataListItem", "selectedDataListItemId", "isCompact", "wrapModifier", "onDragStart", "onDragMove", "onDragCancel", "onDragFinish", "gridBreakpoint", "itemOrder", "selectableRow"]);
             const { dragging } = this.state;
             const isSelectable = onSelectDataListItem !== undefined;
             const updateSelectedDataListItem = (id) => {
@@ -10063,6 +10064,7 @@
                     isSelectable,
                     selectedDataListItemId,
                     updateSelectedDataListItem,
+                    selectableRow,
                     isDraggable: this.html5DragDrop,
                     dragStart: this.dragStart,
                     dragEnd: this.dragEnd,
@@ -10156,8 +10158,8 @@
     }
     class DataListItem extends React__namespace.Component {
         render() {
-            const _a = this.props, { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy } = _a, props = __rest$1(_a, ["children", "isExpanded", "className", "id", 'aria-labelledby']);
-            return (React__namespace.createElement(DataListContext.Consumer, null, ({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, isDraggable, dragStart, dragEnd, drop }) => {
+            const _a = this.props, { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy, selectableInputAriaLabel } = _a, props = __rest$1(_a, ["children", "isExpanded", "className", "id", 'aria-labelledby', "selectableInputAriaLabel"]);
+            return (React__namespace.createElement(DataListContext.Consumer, null, ({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow, isDraggable, dragStart, dragEnd, drop }) => {
                 const selectDataListItem = (event) => {
                     let target = event.target;
                     while (event.currentTarget !== target) {
@@ -10188,10 +10190,17 @@
                     onDragEnd: dragEnd,
                     onDragStart: dragStart
                 };
-                return (React__namespace.createElement("li", Object.assign({ id: id, className: css(styles$O.dataListItem, isExpanded && styles$O.modifiers.expanded, isSelectable && styles$O.modifiers.selectable, selectedDataListItemId && selectedDataListItemId === id && styles$O.modifiers.selected, className), "aria-labelledby": ariaLabelledBy }, (isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown }), (isSelectable && selectedDataListItemId === id && { 'aria-selected': true }), props, dragProps), React__namespace.Children.map(children, child => React__namespace.isValidElement(child) &&
-                    React__namespace.cloneElement(child, {
-                        rowid: ariaLabelledBy
-                    }))));
+                const isSelected = selectedDataListItemId === id;
+                const selectableInputAriaProps = selectableInputAriaLabel
+                    ? { 'aria-label': selectableInputAriaLabel }
+                    : { 'aria-labelledby': ariaLabelledBy };
+                const selectableInputType = (selectableRow === null || selectableRow === void 0 ? void 0 : selectableRow.type) === 'multiple' ? 'checkbox' : 'radio';
+                return (React__namespace.createElement("li", Object.assign({ id: id, className: css(styles$O.dataListItem, isExpanded && styles$O.modifiers.expanded, isSelectable && styles$O.modifiers.selectable, selectedDataListItemId && isSelected && styles$O.modifiers.selected, className), "aria-labelledby": ariaLabelledBy }, (isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown }), (isSelectable && isSelected && { 'aria-selected': true }), props, dragProps),
+                    selectableRow && (React__namespace.createElement("input", Object.assign({ className: "pf-screen-reader", type: selectableInputType, checked: isSelected, onChange: event => selectableRow.onChange(id, event), tabIndex: -1 }, selectableInputAriaProps))),
+                    React__namespace.Children.map(children, child => React__namespace.isValidElement(child) &&
+                        React__namespace.cloneElement(child, {
+                            rowid: ariaLabelledBy
+                        }))));
             }));
         }
     }