@patternfly/react-core 6.3.1 → 6.4.0-prerelease.1

package/src/components/Truncate/Truncate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, forwardRef } from 'react';
+import { Fragment, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
@@ -75,6 +75,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   maxCharsDisplayed,
   omissionContent = '\u2026',
   content,
+  innerRef,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -83,6 +84,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
+  useImperativeHandle(innerRef, () => textRef.current!);
   const defaultSubParentRef = useRef<any>(null);
   const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
   const observer = useRef(null);

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v6-global--spacer--md);
-  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/src/components/Wizard/WizardNavItem.tsx

@@ -116,7 +116,7 @@ export const WizardNavItem = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -28,7 +29,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const DataListBasic: React.FunctionComponent = () => {
   const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
@@ -98,13 +99,22 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 10
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              10 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 4
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 5
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -140,23 +150,41 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 5
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 9
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              9 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 2
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              2 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem>
-                              <CheckCircleIcon />
+                              <Icon status="success">
+                                <CheckCircleIcon />
+                              </Icon>
                               11
+                              <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
-                              <ExclamationTriangleIcon /> 4
+                              <Icon status="warning">
+                                <ExclamationTriangleIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
-                              <TimesCircleIcon /> 1
+                              <Icon status="danger">
+                                <ExclamationCircleIcon />
+                              </Icon>
+                              1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -220,14 +248,23 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon />
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
                               10
+                              <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 4
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 5
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -263,22 +300,40 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 5
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 9
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              9 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 2
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              2 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem>
-                              <CheckCircleIcon /> 11
+                              <Icon status="success">
+                                <CheckCircleIcon />
+                              </Icon>
+                              11 <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
-                              <ExclamationTriangleIcon /> 4
+                              <Icon status="warning">
+                                <ExclamationTriangleIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
-                              <TimesCircleIcon /> 1
+                              <Icon status="danger">
+                                <ExclamationCircleIcon />
+                              </Icon>
+                              1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>

package/src/demos/DataList/examples/DataListStaticBottomPagination.tsx

@@ -10,6 +10,7 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -151,17 +152,29 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
                           <Flex flexWrap={{ default: 'wrap' }}>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CodeBranchIcon /> {threads}
+                                <Icon>
+                                  <CodeBranchIcon />
+                                </Icon>{' '}
+                                {threads}
+                                <span className="pf-v6-screen-reader">Branches</span>
                               </FlexItem>
                             </Flex>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CodeIcon /> {applications}
+                                <Icon>
+                                  <CodeIcon />
+                                </Icon>{' '}
+                                {applications}
+                                <span className="pf-v6-screen-reader">Code blocks</span>
                               </FlexItem>
                             </Flex>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CubeIcon /> {workspaces}
+                                <Icon>
+                                  <CubeIcon />
+                                </Icon>{' '}
+                                {workspaces}
+                                <span className="pf-v6-screen-reader">Workspaces</span>
                               </FlexItem>
                             </Flex>
                             <FlexItem> Updated {lastModified}</FlexItem>

package/src/demos/DataListDemo.md

@@ -15,7 +15,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
@@ -30,14 +30,17 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 ### Expandable control in toolbar
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+
 ```
 
 ### Actionable
 
 ```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+
 ```
 
 ### Static bottom pagination
 
 ```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
-```
+
+```

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -618,7 +618,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card filtering toolbar">
+      <PageSection isFilled padding={{ md: 'padding' }} aria-label="Card filtering toolbar">
         <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -92,7 +92,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon />

package/src/helpers/AnimationsProvider/AnimationsProvider.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, FunctionComponent, ReactNode } from 'react';
+
+/** Configuration for animations throughout PatternFly components */
+export interface AnimationsConfig {
+  /** Whether animations are enabled globally */
+  hasAnimations?: boolean;
+}
+
+/** Props for the AnimationsProvider component */
+export interface AnimationsProviderProps {
+  /** Animation configuration settings */
+  config: AnimationsConfig;
+  /** Child components that will have access to the animations context */
+  children: ReactNode;
+}
+
+/** Context to provide animations configuration to child components */
+const AnimationsContext = createContext<AnimationsConfig>({
+  hasAnimations: false
+});
+
+/**
+ * AnimationsProvider is an application-level provider that provides uniform
+ * animation configuration for all PatternFly React components via the React context API.
+ *
+ * **Usage**: Place this provider at the root of your application to enable global
+ * animation control without requiring manual prop drilling throughout your component tree.
+ *
+ * **Benefits**:
+ * - Centralized animation control for the entire application
+ * - Respects user accessibility preferences (reduced motion)
+ * - Components can still override the global setting when needed
+ * - Works with all PatternFly components that support animations
+ *
+ * @example
+ * ```tsx
+ * // App.tsx - Place at your application root
+ * import { AnimationsProvider } from '@patternfly/react-core';
+ *
+ * const App = () => (
+ *   <AnimationsProvider config={{ hasAnimations: true }}>
+ *     <MyApplication />
+ *   </AnimationsProvider>
+ * );
+ * ```
+ */
+export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({ config, children }) => (
+  <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>
+);
+
+/**
+ * Hook to access the animations configuration from the nearest AnimationsProvider.
+ *
+ * This hook allows components to check if animations are enabled and override
+ * their local hasAnimations prop accordingly.
+ *
+ * @returns The animations configuration object
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+ *   const hasAnimations = hasAnimationsProp ?? contextHasAnimations;
+ *
+ *   return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
+ * };
+ * ```
+ */
+export const useAnimationsConfig = (): AnimationsConfig => {
+  const context = useContext(AnimationsContext);
+
+  if (context === undefined) {
+    // Return default config if no provider is found
+    return { hasAnimations: false };
+  }
+
+  return context;
+};
+
+/**
+ * Utility hook that combines local hasAnimations prop with context configuration.
+ * The local prop takes precedence when explicitly set, otherwise falls back to context.
+ *
+ * @param hasAnimationsProp - The hasAnimations prop passed directly to the component
+ * @returns The resolved hasAnimations value
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const hasAnimations = useHasAnimations(hasAnimationsProp);
+ *
+ *   return <div className={hasAnimations ? 'animated' : 'static'} {...props} />;
+ * };
+ * ```
+ */
+export const useHasAnimations = (hasAnimationsProp?: boolean): boolean => {
+  const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+
+  // Local prop takes precedence when explicitly set (including false)
+  // If local prop is undefined, fall back to context
+  return hasAnimationsProp ?? contextHasAnimations ?? false;
+};
+
+AnimationsProvider.displayName = 'AnimationsProvider';

package/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AnimationsProvider, useAnimationsConfig, useHasAnimations } from '../AnimationsProvider';
+
+// Test component that uses the useAnimationsConfig hook
+const TestConfigComponent = () => {
+  const { hasAnimations } = useAnimationsConfig();
+  return <div data-testid="config">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+// Test component that uses the useHasAnimations hook with a local prop
+const TestHasAnimationsComponent = ({ hasAnimations: hasAnimationsProp }: { hasAnimations?: boolean }) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+  return <div data-testid="has-animations">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+test('renders children correctly', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <div data-testid="child">Test Child</div>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('child')).toBeInTheDocument();
+  expect(screen.getByTestId('child')).toHaveTextContent('Test Child');
+});
+
+test('provides explicit config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('provides animations enabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+});
+
+test('provides animations disabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('useAnimationsConfig returns default config when no provider', () => {
+  render(<TestConfigComponent />);
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations uses context when no local prop provided', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (true)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestHasAnimationsComponent hasAnimations={true} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (false)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations works without provider', () => {
+  render(<TestHasAnimationsComponent />);
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations with local prop and no provider', () => {
+  render(<TestHasAnimationsComponent hasAnimations={true} />);
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('works in app-level scenario with multiple components', () => {
+  // Simulate realistic app-level usage
+  const MockApp = () => (
+    <div>
+      <header>
+        <TestConfigComponent />
+      </header>
+      <main>
+        <TestHasAnimationsComponent />
+        <TestHasAnimationsComponent hasAnimations={false} /> {/* Component override */}
+      </main>
+    </div>
+  );
+
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <MockApp />
+    </AnimationsProvider>
+  );
+
+  const configs = screen.getAllByTestId('config');
+  const hasAnimationsComponents = screen.getAllByTestId('has-animations');
+
+  expect(configs[0]).toHaveTextContent('animations-enabled'); // Header uses provider
+  expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
+  expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
+});
+
+test('handles dynamic context changes', () => {
+  const TestComponent = ({ hasAnimations }: { hasAnimations: boolean }) => (
+    <AnimationsProvider config={{ hasAnimations }}>
+      <TestConfigComponent />
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  const { rerender } = render(<TestComponent hasAnimations={true} />);
+
+  // Initially animations enabled
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+
+  // Change to disabled
+  rerender(<TestComponent hasAnimations={false} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+
+  // Change back to enabled
+  rerender(<TestComponent hasAnimations={true} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});

package/src/helpers/AnimationsProvider/index.ts

@@ -0,0 +1 @@
+export * from './AnimationsProvider';

package/src/helpers/Popper/Popper.tsx

@@ -1,6 +1,7 @@
 import { cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { usePopper } from './thirdparty/react-popper/usePopper';
+import { Options as OffsetOptions } from './thirdparty/popper-core/modifiers/offset';
 import { Placement, Modifier } from './thirdparty/popper-core';
 import { clearTimeouts } from '../util';
 import { css } from '@patternfly/react-styles';
@@ -46,27 +47,11 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
-export interface PopperProps {
-  /**
-   * Trigger reference element to which the popper is relatively placed to.
-   */
-  trigger?: React.ReactNode;
-  /**
-   * A reference to the trigger reference element that can be passed instead of or along
-   * with the trigger prop. When passed along with the trigger prop, the div element that
-   * wraps the trigger will be removed.
-   */
-  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement<any>;
-  /**
-   * Reference to the popper (menu/tooltip/popover) element.
-   * Passing this prop will remove the wrapper div element from the popper.
-   */
-  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+/** Properties of Popper that can be used to customize its behavior. */
+export interface PopperOptions {
   /** popper direction */
   direction?: 'up' | 'down';
-  /** popper position */
+  /** Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
@@ -80,8 +65,6 @@ export interface PopperProps {
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** z-index of the popper element */
   zIndex?: number;
-  /** True to make the popper visible */
-  isVisible?: boolean;
   /**
    * Map class names to positions, for example:
    * {
@@ -107,6 +90,8 @@ export interface PopperProps {
   };
   /** Distance of the popper to the trigger */
   distance?: number;
+  /** Override for the popper's offset */
+  offset?: OffsetOptions['offset'];
   /** Callback function when mouse enters trigger */
   onMouseEnter?: (event?: MouseEvent) => void;
   /** Callback function when mouse leaves trigger */
@@ -176,6 +161,29 @@ export interface PopperProps {
   preventOverflow?: boolean;
 }
 
+/** Extends PopperOptions */
+export interface PopperProps extends PopperOptions {
+  /**
+   * Trigger reference element to which the popper is relatively placed to.
+   */
+  trigger?: React.ReactNode;
+  /**
+   * A reference to the trigger reference element that can be passed instead of or along
+   * with the trigger prop. When passed along with the trigger prop, the div element that
+   * wraps the trigger will be removed.
+   */
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** The popper (menu/tooltip/popover) element */
+  popper: React.ReactElement<any>;
+  /**
+   * Reference to the popper (menu/tooltip/popover) element.
+   * Passing this prop will remove the wrapper div element from the popper.
+   */
+  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** True to make the popper visible */
+  isVisible?: boolean;
+}
+
 export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
@@ -190,6 +198,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   isVisible = true,
   positionModifiers,
   distance = 0,
+  offset,
   onMouseEnter,
   onMouseLeave,
   onFocus,
@@ -420,7 +429,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       {
         name: 'offset',
         options: {
-          offset: [0, distance]
+          offset: offset || [0, distance]
         }
       },
       {