@patternfly/react-core 4.212.0 → 4.213.2

package/dist/umd/react-core.js

@@ -4892,9 +4892,9 @@
         var { onSelect, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-        ouiaId, ouiaSafe, alignments, contextProps, menuAppendTo = 'inline' } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps", "menuAppendTo"]);
+        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$16.dropdownToggleText, toggleIconClass: styles$16.dropdownToggleImage, toggleIndicatorClass: styles$16.dropdownToggleIcon, menuClass: styles$16.dropdownMenu, itemClass: styles$16.dropdownMenuItem, toggleClass: styles$16.dropdownToggle, baseClass: styles$16.dropdown, baseComponent: 'div', sectionClass: styles$16.dropdownGroup, sectionTitleClass: styles$16.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles$16.modifiers.disabled, plainTextClass: styles$16.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
-            React__namespace.createElement(DropdownWithContext, Object.assign({ menuAppendTo: menuAppendTo }, props))));
+            React__namespace.createElement(DropdownWithContext, Object.assign({}, props))));
     };
     Dropdown.displayName = 'Dropdown';
 
@@ -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();

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

@@ -17578,20 +17578,6 @@ label.pf-c-radio, .pf-c-radio__label,
     transform: translateX(100%);
   }
 }
-.pf-c-skip-to-content {
-  --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
-  --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
-  --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
-  position: absolute;
-  top: var(--pf-c-skip-to-content--Top);
-  left: -300%;
-  z-index: var(--pf-c-skip-to-content--ZIndex);
-}
-
-.pf-c-skip-to-content:focus {
-  left: var(--pf-c-skip-to-content--focus--Left);
-}
-
 .pf-c-slider {
   --pf-c-slider--value: 0;
   --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
@@ -17811,6 +17797,20 @@ label.pf-c-radio, .pf-c-radio__label,
   margin-left: var(--pf-c-slider__main--actions--MarginLeft);
 }
 
+.pf-c-skip-to-content {
+  --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
+  --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
+  --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
+  position: absolute;
+  top: var(--pf-c-skip-to-content--Top);
+  left: -300%;
+  z-index: var(--pf-c-skip-to-content--ZIndex);
+}
+
+.pf-c-skip-to-content:focus {
+  left: var(--pf-c-skip-to-content--focus--Left);
+}
+
 .pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -21150,99 +21150,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-toolbar--spacer: 0;
 }
 
-.pf-c-tooltip {
-  --pf-c-tooltip--MaxWidth: 18.75rem;
-  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
-  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
-  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: 0.5rem;
-  --pf-c-tooltip__arrow--Height: 0.5rem;
-  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
-  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
-  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
-  --pf-c-tooltip__arrow--m-right--TranslateX: -50%;
-  --pf-c-tooltip__arrow--m-right--TranslateY: -50%;
-  --pf-c-tooltip__arrow--m-right--Rotate: 45deg;
-  --pf-c-tooltip__arrow--m-bottom--TranslateX: -50%;
-  --pf-c-tooltip__arrow--m-bottom--TranslateY: -50%;
-  --pf-c-tooltip__arrow--m-bottom--Rotate: 45deg;
-  --pf-c-tooltip__arrow--m-left--TranslateX: 50%;
-  --pf-c-tooltip__arrow--m-left--TranslateY: -50%;
-  --pf-c-tooltip__arrow--m-left--Rotate: 45deg;
-  position: relative;
-  max-width: var(--pf-c-tooltip--MaxWidth);
-  box-shadow: var(--pf-c-tooltip--BoxShadow);
-}
-
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
-}
-
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
-  top: 0;
-  left: 50%;
-  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
-}
-
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
-  top: 50%;
-  right: 0;
-  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
-}
-
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
-  top: 50%;
-  left: 0;
-  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
-}
-
-.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
-  top: var(--pf-c-tooltip__arrow--Height);
-}
-
-.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
-  top: auto;
-  bottom: 0;
-}
-
-.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
-  left: var(--pf-c-tooltip__arrow--Width);
-}
-
-.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
-  right: 0;
-  left: auto;
-}
-
-.pf-c-tooltip__content {
-  position: relative;
-  padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
-  font-size: var(--pf-c-tooltip__content--FontSize);
-  color: var(--pf-c-tooltip__content--Color);
-  text-align: center;
-  word-break: break-word;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
-}
-
-.pf-c-tooltip__content.pf-m-text-align-left {
-  text-align: left;
-}
-
-.pf-c-tooltip__arrow {
-  position: absolute;
-  width: var(--pf-c-tooltip__arrow--Width);
-  height: var(--pf-c-tooltip__arrow--Height);
-  pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
-}
-
 .pf-c-number-input .pf-c-form-control {
   appearance: textfield;
 }
@@ -26047,6 +25954,99 @@ svg.pf-c-spinner.pf-m-xl {
   margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
 }
 
+.pf-c-tooltip {
+  --pf-c-tooltip--MaxWidth: 18.75rem;
+  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
+  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tooltip__arrow--Width: 0.5rem;
+  --pf-c-tooltip__arrow--Height: 0.5rem;
+  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
+  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
+  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
+  --pf-c-tooltip__arrow--m-right--TranslateX: -50%;
+  --pf-c-tooltip__arrow--m-right--TranslateY: -50%;
+  --pf-c-tooltip__arrow--m-right--Rotate: 45deg;
+  --pf-c-tooltip__arrow--m-bottom--TranslateX: -50%;
+  --pf-c-tooltip__arrow--m-bottom--TranslateY: -50%;
+  --pf-c-tooltip__arrow--m-bottom--Rotate: 45deg;
+  --pf-c-tooltip__arrow--m-left--TranslateX: 50%;
+  --pf-c-tooltip__arrow--m-left--TranslateY: -50%;
+  --pf-c-tooltip__arrow--m-left--Rotate: 45deg;
+  position: relative;
+  max-width: var(--pf-c-tooltip--MaxWidth);
+  box-shadow: var(--pf-c-tooltip--BoxShadow);
+}
+
+.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
+}
+
+.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  top: 0;
+  left: 50%;
+  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
+}
+
+.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
+  top: 50%;
+  right: 0;
+  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
+}
+
+.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: 50%;
+  left: 0;
+  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
+}
+
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
+
+.pf-c-tooltip__content {
+  position: relative;
+  padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
+  font-size: var(--pf-c-tooltip__content--FontSize);
+  color: var(--pf-c-tooltip__content--Color);
+  text-align: center;
+  word-break: break-word;
+  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+}
+
+.pf-c-tooltip__content.pf-m-text-align-left {
+  text-align: left;
+}
+
+.pf-c-tooltip__arrow {
+  position: absolute;
+  width: var(--pf-c-tooltip__arrow--Width);
+  height: var(--pf-c-tooltip__arrow--Height);
+  pointer-events: none;
+  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+}
+
 .pf-c-alert-group {
   --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);