@patternfly/react-core 6.3.0-prerelease.9 → 6.3.0

package/src/demos/sampleDataRTL.tsx

@@ -0,0 +1,133 @@
+export interface SampleRowData {
+  status: string;
+  location: string;
+  lastModified: string;
+}
+
+export const rows: SampleRowData[] = [
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'oneHr'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'threeHrs'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'fiveHrs'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'sevenMins'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'fortyTwoMins'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'twoDays'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'oneMonth'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'oneHr'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'threeHrs'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'fiveHrs'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'sevenMins'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'fortyTwoMins'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'twoDays'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'oneMonth'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'oneHr'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'threeHrs'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'fiveHrs'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'sevenMins'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'fortyTwoMins'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'twoDays'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'oneMonth'
+  },
+  {
+    status: 'stopped',
+    location: 'boston',
+    lastModified: 'oneHr'
+  },
+  {
+    status: 'down',
+    location: 'atlanta',
+    lastModified: 'threeHrs'
+  },
+  {
+    status: 'needsMaintenance',
+    location: 'sanFrancisco',
+    lastModified: 'fiveHrs'
+  },
+  {
+    status: 'running',
+    location: 'raleigh',
+    lastModified: 'sevenMins'
+  }
+];

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/Popper/Popper.tsx

@@ -486,6 +486,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       setOpacity(0);
       transitionTimerRef.current = setTimeout(() => {
         setInternalIsVisible(false);
+        setPopperElement(null);
         onHidden();
       }, animationDuration);
     }, exitDelay);

package/src/helpers/util.ts

@@ -545,3 +545,48 @@ export const getLanguageDirection = (targetElement: HTMLElement, defaultDirectio
 
   return defaultDirection;
 };
+
+/**
+ * Gets a reference element based on a ref property, which can typically be 1 of several types.
+ *
+ * @param {HTMLElement | (() => HTMLElement) | React.RefObject<any>} refProp The ref property to get a reference element from.
+ * @returns The reference element if one is found.
+ */
+export const getReferenceElement = (refProp: HTMLElement | (() => HTMLElement) | React.RefObject<any>) => {
+  if (refProp instanceof HTMLElement) {
+    return refProp;
+  }
+  if (typeof refProp === 'function') {
+    return refProp();
+  }
+
+  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]);
+};