@patternfly/react-core 4.211.6 → 4.213.1

package/dist/js/components/Tabs/TabsContext.d.ts

@@ -6,6 +6,7 @@ export interface TabsContextProps {
     localActiveKey: string | number;
     uniqueId: string;
     handleTabClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string, tabContentRef: React.RefObject<any>) => void;
+    handleTabClose: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string, tabContentRef?: React.RefObject<any>) => void;
 }
 export declare const TabsContext: React.Context<TabsContextProps>;
 export declare const TabsContextProvider: React.Provider<TabsContextProps>;

package/dist/js/components/Tabs/TabsContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAChD,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAChC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,WAAW,iCAOtB,CAAC;AAEH,eAAO,MAAM,mBAAmB,kCAAuB,CAAC;AACxD,eAAO,MAAM,mBAAmB,kCAAuB,CAAC"}
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAChD,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAChC,IAAI,CAAC;IACV,cAAc,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAChD,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KACjC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,WAAW,iCAQtB,CAAC;AAEH,eAAO,MAAM,mBAAmB,kCAAuB,CAAC;AACxD,eAAO,MAAM,mBAAmB,kCAAuB,CAAC"}

package/dist/js/components/Tabs/TabsContext.js

@@ -9,7 +9,8 @@ exports.TabsContext = React.createContext({
     unmountOnExit: false,
     localActiveKey: '',
     uniqueId: '',
-    handleTabClick: () => null
+    handleTabClick: () => null,
+    handleTabClose: undefined
 });
 exports.TabsContextProvider = exports.TabsContext.Provider;
 exports.TabsContextConsumer = exports.TabsContext.Consumer;

package/dist/js/components/Tabs/TabsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAelB,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,EAAE;IAClB,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI;CAC3B,CAAC,CAAC;AAEU,QAAA,mBAAmB,GAAG,mBAAW,CAAC,QAAQ,CAAC;AAC3C,QAAA,mBAAmB,GAAG,mBAAW,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAoBlB,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,EAAE;IAClB,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI;IAC1B,cAAc,EAAE,SAAS;CAC1B,CAAC,CAAC;AAEU,QAAA,mBAAmB,GAAG,mBAAW,CAAC,QAAQ,CAAC;AAC3C,QAAA,mBAAmB,GAAG,mBAAW,CAAC,QAAQ,CAAC"}

package/dist/umd/react-core.css

@@ -24718,75 +24718,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;
@@ -26001,6 +25932,75 @@ svg.pf-c-spinner.pf-m-xl {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.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-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/dist/umd/react-core.js

@@ -18271,17 +18271,18 @@
         unmountOnExit: false,
         localActiveKey: '',
         uniqueId: '',
-        handleTabClick: () => null
+        handleTabClick: () => null,
+        handleTabClose: undefined
     });
     const TabsContextProvider = TabsContext.Provider;
     const TabsContextConsumer = TabsContext.Consumer;
 
     const TabBase = (_a) => {
-        var { title, eventKey, tabContentRef, id: childId, tabContentId, className: childClassName = '', ouiaId: childOuiaId, isDisabled, isAriaDisabled, inoperableEvents = ['onClick', 'onKeyPress'], href, innerRef, tooltip } = _a, props = __rest$1(_a, ["title", "eventKey", "tabContentRef", "id", "tabContentId", "className", "ouiaId", "isDisabled", "isAriaDisabled", "inoperableEvents", "href", "innerRef", "tooltip"]);
+        var { title, eventKey, tabContentRef, id: childId, tabContentId, className: childClassName = '', ouiaId: childOuiaId, isDisabled, isAriaDisabled, inoperableEvents = ['onClick', 'onKeyPress'], href, innerRef, tooltip, closeButtonAriaLabel, isCloseDisabled = false } = _a, props = __rest$1(_a, ["title", "eventKey", "tabContentRef", "id", "tabContentId", "className", "ouiaId", "isDisabled", "isAriaDisabled", "inoperableEvents", "href", "innerRef", "tooltip", "closeButtonAriaLabel", "isCloseDisabled"]);
         const preventedEvents = inoperableEvents.reduce((handlers, eventToPrevent) => (Object.assign(Object.assign({}, handlers), { [eventToPrevent]: (event) => {
                 event.preventDefault();
             } })), {});
-        const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick } = React__namespace.useContext(TabsContext);
+        const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } = React__namespace.useContext(TabsContext);
         let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
         if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
             ariaControls = undefined;
@@ -18296,11 +18297,29 @@
             }
         };
         const tabButton = (React__namespace.createElement(TabButton, Object.assign({ parentInnerRef: innerRef, className: css(styles$h.tabsLink, isDisabled && href && styles$h.modifiers.disabled, isAriaDisabled && styles$h.modifiers.ariaDisabled), disabled: isButtonElement ? isDisabled : null, "aria-disabled": isDisabled || isAriaDisabled, tabIndex: getDefaultTabIdx(), onClick: (event) => handleTabClick(event, eventKey, tabContentRef) }, (isAriaDisabled ? preventedEvents : null), { id: `pf-tab-${eventKey}-${childId || uniqueId}`, "aria-controls": ariaControls, tabContentRef: tabContentRef, ouiaId: childOuiaId, href: href, role: "tab", "aria-selected": eventKey === localActiveKey }, props), title));
-        return (React__namespace.createElement("li", { className: css(styles$h.tabsItem, eventKey === localActiveKey && styles$h.modifiers.current, childClassName), role: "presentation" }, tooltip ? React__namespace.createElement(Tooltip, Object.assign({}, tooltip.props), tabButton) : tabButton));
+        return (React__namespace.createElement("li", { className: css(styles$h.tabsItem, eventKey === localActiveKey && styles$h.modifiers.current, handleTabClose && styles$h.modifiers.action, handleTabClose && (isDisabled || isAriaDisabled) && styles$h.modifiers.disabled, childClassName), role: "presentation" },
+            tooltip ? React__namespace.createElement(Tooltip, Object.assign({}, tooltip.props), tabButton) : tabButton,
+            handleTabClose !== undefined && (React__namespace.createElement("span", { className: css(styles$h.tabsItemClose) },
+                React__namespace.createElement(Button, { variant: "plain", "aria-label": closeButtonAriaLabel || 'Close tab', onClick: (event) => handleTabClose(event, eventKey, tabContentRef), isDisabled: isCloseDisabled },
+                    React__namespace.createElement("span", { className: css(styles$h.tabsItemCloseIcon) },
+                        React__namespace.createElement(TimesIcon$1, null)))))));
     };
     const Tab = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TabBase, Object.assign({ innerRef: ref }, props)));
     Tab.displayName = 'Tab';
 
+    const PlusIconConfig = {
+      name: 'PlusIcon',
+      height: 512,
+      width: 448,
+      svgPath: 'M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z',
+      yOffset: 0,
+      xOffset: 0,
+    };
+
+    const PlusIcon = createIcon(PlusIconConfig);
+
+    var PlusIcon$1 = PlusIcon;
+
     Promise.resolve().then(function () { return tabContent; });
     var styles$g = {
       "modifiers": {
@@ -18471,16 +18490,21 @@
             clearTimeout(this.scrollTimeout);
         }
         componentDidUpdate(prevProps) {
-            const { activeKey, mountOnEnter } = this.props;
+            const { activeKey, mountOnEnter, children } = this.props;
             const { shownKeys } = this.state;
             if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
                 this.setState({
                     shownKeys: shownKeys.concat(activeKey)
                 });
             }
+            if (prevProps.children &&
+                children &&
+                React__namespace.Children.toArray(prevProps.children).length !== React__namespace.Children.toArray(children).length) {
+                this.handleScrollButtons();
+            }
         }
         render() {
-            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, onToggle } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "onToggle"]);
+            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, addButtonAriaLabel, onToggle, onClose, onAdd } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "addButtonAriaLabel", "onToggle", "onClose", "onAdd"]);
             const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal } = this.state;
             const filteredChildren = React__namespace.Children.toArray(children)
                 .filter(Boolean)
@@ -18504,7 +18528,8 @@
                     unmountOnExit,
                     localActiveKey,
                     uniqueId,
-                    handleTabClick: (...args) => this.handleTabClick(...args)
+                    handleTabClick: (...args) => this.handleTabClick(...args),
+                    handleTabClose: onClose
                 } },
                 React__namespace.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles$h.tabs, isFilled && styles$h.modifiers.fill, isSecondary && styles$h.modifiers.secondary, isVertical && styles$h.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles$h), isVertical && expandable && isExpandedLocal && styles$h.modifiers.expanded, isBox && styles$h.modifiers.box, showScrollButtons && !isVertical && styles$h.modifiers.scrollable, usePageInsets && styles$h.modifiers.pageInsets, !hasBorderBottom && styles$h.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles$h.modifiers.borderBottom, formatBreakpointMods(inset, styles$h), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
                     expandable && isVertical && (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", { className: css(styles$h.tabsToggle) },
@@ -18517,7 +18542,10 @@
                         React__namespace.createElement(AngleLeftIcon$1, null)),
                     React__namespace.createElement("ul", { className: css(styles$h.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" }, filteredChildren),
                     React__namespace.createElement("button", { className: css(styles$h.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
-                        React__namespace.createElement(AngleRightIcon$1, null))),
+                        React__namespace.createElement(AngleRightIcon$1, null)),
+                    onAdd !== undefined && (React__namespace.createElement("span", { className: css(styles$h.tabsAdd) },
+                        React__namespace.createElement(Button, { variant: "plain", "aria-label": addButtonAriaLabel || 'Add tab', onClick: onAdd },
+                            React__namespace.createElement(PlusIcon$1, null))))),
                 filteredChildren
                     .filter(child => child.props.children &&
                     !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
@@ -19607,19 +19635,6 @@
       "numberInputUnit": "pf-c-number-input__unit"
     };
 
-    const PlusIconConfig = {
-      name: 'PlusIcon',
-      height: 512,
-      width: 448,
-      svgPath: 'M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z',
-      yOffset: 0,
-      xOffset: 0,
-    };
-
-    const PlusIcon = createIcon(PlusIconConfig);
-
-    var PlusIcon$1 = PlusIcon;
-
     const defaultKeyDownHandler = (args) => (event) => {
         if (KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
             event.preventDefault();