@patternfly/react-core 6.3.0-prerelease.13 → 6.3.0-prerelease.15

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -4,11 +4,12 @@ exports[`should render accessible tabs 1`] = `
 <DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-12"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -120,11 +121,12 @@ exports[`should render accessible tabs 1`] = `
 exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -278,11 +280,12 @@ exports[`should render box tabs 1`] = `
 exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box pf-m-secondary"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -394,11 +397,12 @@ exports[`should render box tabs of secondary variant 1`] = `
 exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <div
       class="pf-v6-c-tabs__toggle"
@@ -600,11 +604,12 @@ exports[`should render expandable vertical tabs 1`] = `
 exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-fill"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -716,11 +721,12 @@ exports[`should render filled tabs 1`] = `
 exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-1"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-4"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -874,11 +880,12 @@ exports[`should render simple tabs 1`] = `
 exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -959,11 +966,12 @@ exports[`should render subtabs 1`] = `
     tabindex="0"
   >
     <div
-      class="pf-v6-c-tabs pf-m-subtab"
-      data-ouia-component-id="OUIA-Generated-Tabs-12"
+      class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
+      data-ouia-component-id="OUIA-Generated-Tabs-15"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
+      style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
     >
       <ul
         class="pf-v6-c-tabs__list"
@@ -1101,11 +1109,12 @@ exports[`should render subtabs 1`] = `
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1218,11 +1227,12 @@ exports[`should render tabs with eventKey Strings 1`] = `
 exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-no-border-bottom"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1334,11 +1344,12 @@ exports[`should render tabs with no bottom border 1`] = `
 exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-17"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1460,10 +1471,11 @@ exports[`should render tabs with separate content 1`] = `
 exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-7"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1617,11 +1629,12 @@ exports[`should render uncontrolled tabs 1`] = `
 exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical"
-    data-ouia-component-id="OUIA-Generated-Tabs-5"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-8"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction']
 ouia: true
 ---
 

package/src/helpers/KeyboardHandler.tsx

@@ -116,12 +116,12 @@ export const handleArrows = (
                   : nextSiblingMainElement.nextElementSibling;
 
               if (nextSibling) {
-                if (validSiblingTags.includes(nextSibling.tagName)) {
+                if (validSiblingTags.includes(nextSibling?.tagName)) {
                   moveTarget = nextSibling;
                   break;
                 }
                 // For cases where the validSiblingTag is inside a div wrapper
-                if (validSiblingTags.includes(nextSibling.children[0].tagName)) {
+                if (validSiblingTags.includes(nextSibling.children[0]?.tagName)) {
                   moveTarget = nextSibling.children[0];
                   break;
                 }

package/src/helpers/util.ts

@@ -562,3 +562,31 @@ export const getReferenceElement = (refProp: HTMLElement | (() => HTMLElement) |
 
   return refProp?.current;
 };
+
+/**
+ * Gets the [client|offset|scroll]Left property of an element, and determines whether it needs to be
+ * adjusted for an RTL direction.
+ *
+ * @param {HTMLElement} targetElement  - Element to get the inline-start property of.
+ * @param {HTMLElement} ancestorElement - Ancestor element to base the inline-start calculation off of when the direction is RTL.
+ * @param {'client' | 'offset' | 'scroll'} inlineType - The inline-start property type to base calculations on.
+ * @returns {number} - The value of the inline-start property.
+ */
+export const getInlineStartProperty = (
+  targetElement: HTMLElement,
+  ancestorElement: HTMLElement,
+  inlineType: 'client' | 'offset' | 'scroll' = 'offset'
+) => {
+  if (!targetElement) {
+    return;
+  }
+
+  const inlineProperty: 'offsetLeft' | 'clientLeft' | 'scrollLeft' = `${inlineType}Left`;
+  const isRTL = getLanguageDirection(targetElement) === 'rtl';
+  if (!isRTL) {
+    return targetElement[inlineProperty];
+  }
+
+  const widthProperty: 'offsetWidth' | 'clientWidth' | 'scrollWidth' = `${inlineType}Width`;
+  return ancestorElement[widthProperty] - (targetElement[inlineProperty] + targetElement[widthProperty]);
+};