@patternfly/react-core 4.232.11 → 4.233.0

package/dist/umd/react-core.js

@@ -8576,9 +8576,11 @@
         const idItem = React__namespace.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
         const inputGroupRef = innerRef || React__namespace.useRef(null);
         return (React__namespace.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$U.inputGroup, className) }, props), idItem
-            ? React__namespace.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
-                ? React__namespace.cloneElement(child, { 'aria-describedby': idItem.props.id })
-                : child)
+            ? React__namespace.Children.map(children, (child) => !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
+                ? child
+                : React__namespace.cloneElement(child, {
+                    'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
+                }))
             : children));
     };
     InputGroup.displayName = 'InputGroup';
@@ -11869,9 +11871,27 @@
       }
     };
 
+    const c_expandable_section_m_truncate__content_LineClamp = {
+      "name": "--pf-c-expandable-section--m-truncate__content--LineClamp",
+      "value": "3",
+      "var": "var(--pf-c-expandable-section--m-truncate__content--LineClamp)"
+    };
+
+    exports.ExpandableSectionVariant = void 0;
+    (function (ExpandableSectionVariant) {
+        ExpandableSectionVariant["default"] = "default";
+        ExpandableSectionVariant["truncate"] = "truncate";
+    })(exports.ExpandableSectionVariant || (exports.ExpandableSectionVariant = {}));
+    const setLineClamp = (lines, element) => {
+        if (!element || lines < 1) {
+            return;
+        }
+        element.style.setProperty(c_expandable_section_m_truncate__content_LineClamp.name, lines.toString());
+    };
     class ExpandableSection extends React__namespace.Component {
         constructor(props) {
             super(props);
+            this.expandableContentRef = React__namespace.createRef();
             this.state = {
                 isExpanded: props.isExpanded
             };
@@ -11885,10 +11905,25 @@
             }
             return toggleText;
         }
+        componentDidMount() {
+            if (this.props.variant === exports.ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+                const expandableContent = this.expandableContentRef.current;
+                setLineClamp(this.props.truncateMaxLines, expandableContent);
+            }
+        }
+        componentDidUpdate(prevProps) {
+            if (this.props.variant === exports.ExpandableSectionVariant.truncate &&
+                prevProps.truncateMaxLines !== this.props.truncateMaxLines) {
+                const expandableContent = this.expandableContentRef.current;
+                setLineClamp(this.props.truncateMaxLines, expandableContent);
+            }
+        }
         render() {
             const _a = this.props, { onToggle: onToggleProp, 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            isActive, className, toggleText, toggleTextExpanded, toggleTextCollapsed, toggleContent, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId } = _a, props = __rest$1(_a, ["onToggle", "isActive", "className", "toggleText", "toggleTextExpanded", "toggleTextCollapsed", "toggleContent", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId"]);
+            isActive, className, toggleText, toggleTextExpanded, toggleTextCollapsed, toggleContent, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, variant, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            truncateMaxLines } = _a, props = __rest$1(_a, ["onToggle", "isActive", "className", "toggleText", "toggleTextExpanded", "toggleTextCollapsed", "toggleContent", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "variant", "truncateMaxLines"]);
             let onToggle = onToggleProp;
             let propOrStateIsExpanded = isExpanded;
             // uncontrolled
@@ -11899,12 +11934,14 @@
                 };
             }
             const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
-            return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$I.expandableSection, propOrStateIsExpanded && styles$I.modifiers.expanded, isActive && styles$I.modifiers.active, isDetached && styles$I.modifiers.detached, displaySize === 'large' && styles$I.modifiers.displayLg, isWidthLimited && styles$I.modifiers.limitWidth, isIndented && styles$I.modifiers.indented, className) }),
-                !isDetached && (React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
-                    React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon) },
-                        React__namespace.createElement(AngleRightIcon, { "aria-hidden": true })),
-                    React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, toggleContent || computedToggleText))),
-                React__namespace.createElement("div", { className: css(styles$I.expandableSectionContent), hidden: !propOrStateIsExpanded, id: contentId }, children)));
+            const expandableToggle = !isDetached && (React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
+                variant !== exports.ExpandableSectionVariant.truncate && (React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon) },
+                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true }))),
+                React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, toggleContent || computedToggleText)));
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$I.expandableSection, propOrStateIsExpanded && styles$I.modifiers.expanded, isActive && styles$I.modifiers.active, isDetached && styles$I.modifiers.detached, displaySize === 'large' && styles$I.modifiers.displayLg, isWidthLimited && styles$I.modifiers.limitWidth, isIndented && styles$I.modifiers.indented, variant === exports.ExpandableSectionVariant.truncate && styles$I.modifiers.truncate, className) }, props),
+                variant === exports.ExpandableSectionVariant.default && expandableToggle,
+                React__namespace.createElement("div", { ref: this.expandableContentRef, className: css(styles$I.expandableSectionContent), hidden: variant !== exports.ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: contentId }, children),
+                variant === exports.ExpandableSectionVariant.truncate && expandableToggle));
         }
     }
     ExpandableSection.displayName = 'ExpandableSection';
@@ -11920,15 +11957,16 @@
         displaySize: 'default',
         isWidthLimited: false,
         isIndented: false,
-        contentId: ''
+        contentId: '',
+        variant: 'default'
     };
 
     const ExpandableSectionToggle = (_a) => {
-        var { children, className = '', isExpanded = false, onToggle, contentId, direction = 'down' } = _a, props = __rest$1(_a, ["children", "className", "isExpanded", "onToggle", "contentId", "direction"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$I.expandableSection, isExpanded && styles$I.modifiers.expanded, styles$I.modifiers.detached, className) }),
+        var { children, className = '', isExpanded = false, onToggle, contentId, direction = 'down', hasTruncatedContent = false } = _a, props = __rest$1(_a, ["children", "className", "isExpanded", "onToggle", "contentId", "direction", "hasTruncatedContent"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$I.expandableSection, isExpanded && styles$I.modifiers.expanded, styles$I.modifiers.detached, hasTruncatedContent && styles$I.modifiers.truncate, className) }, props),
             React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": isExpanded, "aria-controls": contentId, onClick: () => onToggle(!isExpanded) },
-                React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon, isExpanded && direction === 'up' && styles$I.modifiers.expandTop) },
-                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true })),
+                !hasTruncatedContent && (React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon, isExpanded && direction === 'up' && styles$I.modifiers.expandTop) },
+                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true }))),
                 React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, children))));
     };
     ExpandableSectionToggle.displayName = 'ExpandableSectionToggle';
@@ -14664,6 +14702,7 @@
             }
         };
         const onKeyDown = (event) => {
+            var _a, _b;
             const key = event.key;
             if ((!isEditableActive &&
                 (!editableButtonRef ||
@@ -14680,6 +14719,7 @@
                     onEditComplete && onEditComplete(editableInputRef.current.value);
                 }
                 setIsEditableActive(false);
+                (_a = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
             if (isEditableActive && key === 'Escape') {
                 event.preventDefault();
@@ -14690,6 +14730,7 @@
                     onEditCancel && onEditCancel(children);
                 }
                 setIsEditableActive(false);
+                (_b = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
             if (!isEditableActive && key === 'Enter') {
                 event.preventDefault();
@@ -20707,7 +20748,7 @@
         }
     };
     const NumberInput = (_a) => {
-        var { value = 0, className, widthChars, isDisabled = false, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = __rest$1(_a, ["value", "className", "widthChars", "isDisabled", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
+        var { value = 0, className, widthChars, isDisabled = false, validated = exports.ValidatedOptions.default, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = __rest$1(_a, ["value", "className", "widthChars", "isDisabled", "validated", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
         const numberInputUnit = React__namespace.createElement("div", { className: css(styles$a.numberInputUnit) }, unit);
         const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
         const handleBlur = (event) => {
@@ -20719,7 +20760,7 @@
                 onBlur(event);
             }
         };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$a.numberInput, className) }, (widthChars && {
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$a.numberInput, validated !== 'default' && styles$a.modifiers.status, className) }, (widthChars && {
             style: Object.assign({ '--pf-c-number-input--c-form-control--width-chars': widthChars }, props.style)
         }), props),
             unit && unitPosition === 'before' && numberInputUnit,
@@ -20727,7 +20768,7 @@
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": minusBtnAriaLabel, isDisabled: isDisabled || value <= min, onClick: evt => onMinus(evt, inputName) }, minusBtnProps),
                     React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(MinusIcon, { "aria-hidden": "true" }))),
-                React__namespace.createElement("input", Object.assign({ className: css(styles$a.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), { onBlur: handleBlur }, (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
+                React__namespace.createElement(TextInput, Object.assign({ type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { isDisabled }), (onChange && { onChange: (value, event) => onChange(event) }), { onBlur: handleBlur }, (!onChange && { isReadOnly: true }), { onKeyDown: keyDownHandler, validated: validated }, inputProps)),
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": plusBtnAriaLabel, isDisabled: isDisabled || value >= max, onClick: evt => onPlus(evt, inputName) }, plusBtnProps),
                     React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(PlusIcon, { "aria-hidden": "true" })))),