@patternfly/react-core 5.1.1-prerelease.2 → 5.1.1-prerelease.20

package/src/demos/PrimaryDetail.md

@@ -23,15 +23,14 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
-import DashboardWrapper from './examples/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 ## Demos
 
 ### Primary-detail full page
 
 ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
-
 ```
 
 ### Primary-detail content padding
@@ -91,7 +90,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -554,7 +553,7 @@ class PrimaryDetailCardView extends React.Component {
               }}
               selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }}
             >
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
+              <img src={require(icons[product.icon])} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
             <CardTitle>
               <Button variant="link" isInline onClick={() => this.onCardClick(product.id)} aria-expanded={activeCard === product.id}>

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -128,7 +128,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
               </div>
             </div>
             <div
-              class="pf-v5-c-input-group__item pf-m-plain"
+              class="pf-v5-c-input-group__item"
             >
               <button
                 aria-disabled="false"
@@ -139,19 +139,27 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
                 data-ouia-safe="true"
                 type="submit"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  width="1em"
+                <span
+                  class="pf-v5-c-icon"
                 >
-                  <path
-                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                  />
-                </svg>
+                  <span
+                    class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
           </div>
@@ -305,7 +313,7 @@ exports[`ContextSelector Renders in strict mode 1`] = `
               </div>
             </div>
             <div
-              class="pf-v5-c-input-group__item pf-m-plain"
+              class="pf-v5-c-input-group__item"
             >
               <button
                 aria-disabled="false"
@@ -316,19 +324,27 @@ exports[`ContextSelector Renders in strict mode 1`] = `
                 data-ouia-safe="true"
                 type="submit"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  width="1em"
+                <span
+                  class="pf-v5-c-icon"
                 >
-                  <path
-                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                  />
-                </svg>
+                  <span
+                    class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
           </div>

package/src/helpers/Popper/Popper.tsx

@@ -45,6 +45,21 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
+export const getLanguageDirection = (targetElement: HTMLElement) => {
+  const defaultDirection = 'ltr';
+  let direction = defaultDirection;
+
+  if (targetElement) {
+    direction = getComputedStyle(targetElement).getPropertyValue('direction');
+  }
+
+  if (['ltr', 'rtl'].includes(direction)) {
+    return direction as 'ltr' | 'rtl';
+  }
+
+  return defaultDirection;
+};
+
 export interface PopperProps {
   /**
    * Trigger reference element to which the popper is relatively placed to.
@@ -66,7 +81,7 @@ export interface PopperProps {
   /** popper direction */
   direction?: 'up' | 'down';
   /** popper position */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
   /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
@@ -177,7 +192,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
   direction = 'down',
-  position = 'left',
+  position = 'start',
   placement,
   width,
   minWidth = 'trigger',
@@ -226,6 +241,28 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
 
+  const triggerParent = ((triggerRef as React.RefObject<any>)?.current || triggerElement)?.parentElement;
+  const languageDirection = getLanguageDirection(triggerParent);
+
+  const internalPosition = React.useMemo<'left' | 'right' | 'center'>(() => {
+    const fixedPositions = { left: 'left', right: 'right', center: 'center' };
+
+    const positionMap = {
+      ltr: {
+        start: 'left',
+        end: 'right',
+        ...fixedPositions
+      },
+      rtl: {
+        start: 'right',
+        end: 'left',
+        ...fixedPositions
+      }
+    };
+
+    return positionMap[languageDirection][position] as 'left' | 'right' | 'center';
+  }, [position, languageDirection]);
+
   const onDocumentClickCallback = React.useCallback(
     (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement),
     [showPopper, triggerElement, refElement, popperElement, onDocumentClick]
@@ -333,15 +370,15 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       return placement;
     }
     let convertedPlacement = direction === 'up' ? 'top' : 'bottom';
-    if (position !== 'center') {
-      convertedPlacement = `${convertedPlacement}-${position === 'right' ? 'end' : 'start'}`;
+    if (internalPosition !== 'center') {
+      convertedPlacement = `${convertedPlacement}-${internalPosition === 'right' ? 'end' : 'start'}`;
     }
     return convertedPlacement as Placement;
   };
-  const getPlacementMemo = React.useMemo(getPlacement, [direction, position, placement]);
+  const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
   const getOppositePlacementMemo = React.useMemo(
     () => getOppositePlacement(getPlacement()),
-    [direction, position, placement]
+    [direction, internalPosition, placement]
   );
 
   const widthMods: Modifier<'widthMods', {}> = React.useMemo(

package/src/components/Alert/__tests__/__snapshots__/AlertGroup.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AlertGroup Alert Group renders without children 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v5-c-alert-group"
-    role="list"
-  />
-</DocumentFragment>
-`;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Brand simple brand 1`] = `
-<DocumentFragment>
-  <img
-    alt="brand"
-    class="pf-v5-c-brand"
-    src=""
-  />
-</DocumentFragment>
-`;

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +0,0 @@
-.ws-react-c-checkbox .pf-v5-c-check.nested {
-  padding-left: var(--pf-v5-global--spacer--md);
-}