@patternfly/chatbot 6.8.0-prerelease.2 → 6.8.0-prerelease.4

package/src/MessageBox/MessageBox.tsx

@@ -7,7 +7,7 @@ import {
   useState,
   useRef,
   useCallback,
-  useEffect,
+  useLayoutEffect,
   forwardRef,
   ForwardedRef,
   useImperativeHandle,
@@ -18,7 +18,7 @@ import {
   WheelEventHandler
 } from 'react';
 import JumpButton from './JumpButton';
-import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { ButtonProps, getResizeObserver, TooltipProps } from '@patternfly/react-core';
 
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -58,6 +58,48 @@ export interface MessageBoxHandle extends HTMLDivElement {
   isSmartScrollActive: () => boolean;
 }
 
+const SCROLL_EDGE_DELTA = 100;
+
+const getScrollMetrics = (element: HTMLDivElement) => {
+  const { scrollTop, scrollHeight, clientHeight } = element;
+  const roundedScrollTop = Math.round(scrollTop);
+  const roundedClientHeight = Math.round(clientHeight);
+  const roundedScrollHeight = Math.round(scrollHeight);
+  const distanceFromBottom = roundedScrollHeight - roundedScrollTop - roundedClientHeight;
+
+  return {
+    roundedScrollTop,
+    roundedClientHeight,
+    roundedScrollHeight,
+    distanceFromBottom,
+    atTop: roundedScrollTop === 0,
+    nearBottom: distanceFromBottom <= SCROLL_EDGE_DELTA,
+    isOverflowing: roundedScrollHeight >= roundedClientHeight
+  };
+};
+
+const isAtBottomEdge = (
+  metrics: ReturnType<typeof getScrollMetrics>,
+  enableSmartScroll: boolean,
+  autoScroll: boolean,
+  pauseAutoScroll: boolean,
+  programmaticScroll = false
+) =>
+  metrics.nearBottom ||
+  programmaticScroll ||
+  (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
+
+const shouldFollowContentGrowth = (
+  metrics: ReturnType<typeof getScrollMetrics>,
+  enableSmartScroll: boolean,
+  autoScroll: boolean,
+  pauseAutoScroll: boolean,
+  programmaticScroll: boolean
+) =>
+  programmaticScroll ||
+  metrics.nearBottom ||
+  (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
+
 export const MessageBox = forwardRef(
   (
     {
@@ -77,18 +119,23 @@ export const MessageBox = forwardRef(
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
   ) => {
-    const [atTop, setAtTop] = useState(false);
-    const [atBottom, setAtBottom] = useState(true);
+    const [atTop, setAtTop] = useState(true);
+    const [atBottom, setAtBottom] = useState(false);
     const [isOverflowing, setIsOverflowing] = useState(false);
+    const [hasMeasuredScroll, setHasMeasuredScroll] = useState(false);
     const [autoScroll, setAutoScroll] = useState(true);
+    const autoScrollRef = useRef(autoScroll);
     const lastScrollTop = useRef(0);
     const animationFrame = useRef<any>(null);
     const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
     const pauseAutoScrollRef = useRef(false);
+    const programmaticScrollRef = useRef(false);
     const messageBoxRef = useRef<HTMLDivElement>(null);
     const scrollQueued = useRef(false);
     const resetUserScrollIntentTimeout = useRef<NodeJS.Timeout>();
 
+    autoScrollRef.current = autoScroll;
+
     // Configure handlers
     const handleScroll = useCallback(() => {
       const element = messageBoxRef.current;
@@ -96,13 +143,8 @@ export const MessageBox = forwardRef(
         return;
       }
 
-      const { scrollTop, scrollHeight, clientHeight } = element;
-
-      const roundedScrollTop = Math.round(scrollTop);
-      const roundedClientHeight = Math.round(clientHeight);
-      const roundedScrollHeight = Math.round(scrollHeight);
-
-      const distanceFromBottom = roundedScrollHeight - roundedScrollTop - roundedClientHeight;
+      const metrics = getScrollMetrics(element);
+      const { roundedScrollTop, distanceFromBottom } = metrics;
       const isScrollingDown = roundedScrollTop > lastScrollTop.current;
 
       const DELTA_UP = 10;
@@ -112,14 +154,27 @@ export const MessageBox = forwardRef(
       const delta = isScrollingDown ? DELTA_DOWN : DELTA_UP;
       const isAtBottom = distanceFromBottom <= delta;
 
-      setAtTop(roundedScrollTop === 0);
-      setAtBottom(roundedScrollTop + roundedClientHeight >= roundedScrollHeight - 1); // rounding means it could be within a pixel of the bottom
+      setAtTop(metrics.atTop);
+      setAtBottom(
+        isAtBottomEdge(
+          metrics,
+          enableSmartScroll,
+          autoScrollRef.current,
+          pauseAutoScrollRef.current,
+          programmaticScrollRef.current
+        )
+      );
+      setIsOverflowing(metrics.isOverflowing);
+
+      if (isAtBottom) {
+        programmaticScrollRef.current = false;
+      }
 
       if (!enableSmartScroll || scrollQueued.current) {
         return;
       }
 
-      if (roundedScrollTop === 0) {
+      if (metrics.roundedScrollTop === 0) {
         pauseAutoScrollRef.current = false;
       }
 
@@ -127,7 +182,7 @@ export const MessageBox = forwardRef(
         clearTimeout(debounceTimeout.current);
       }
 
-      if (!isAtBottom && !pauseAutoScrollRef.current) {
+      if (!isAtBottom && !metrics.nearBottom && !pauseAutoScrollRef.current && !programmaticScrollRef.current) {
         setAutoScroll(false);
       }
 
@@ -139,15 +194,7 @@ export const MessageBox = forwardRef(
       }
 
       lastScrollTop.current = roundedScrollTop;
-    }, [messageBoxRef]);
-
-    const checkOverflow = useCallback(() => {
-      const element = messageBoxRef.current;
-      if (element) {
-        const { scrollHeight, clientHeight } = element;
-        setIsOverflowing(scrollHeight >= clientHeight);
-      }
-    }, [messageBoxRef]);
+    }, [enableSmartScroll]);
 
     const resumeAutoScroll = useCallback(() => {
       if (!enableSmartScroll) {
@@ -213,6 +260,7 @@ export const MessageBox = forwardRef(
         }
 
         scrollQueued.current = true;
+        programmaticScrollRef.current = true;
 
         if (animationFrame.current) {
           cancelAnimationFrame(animationFrame.current);
@@ -222,30 +270,78 @@ export const MessageBox = forwardRef(
           element.scrollTo({ top: element.scrollHeight, behavior });
           resumeAutoScroll();
           scrollQueued.current = false;
+          if (behavior === 'auto') {
+            programmaticScrollRef.current = false;
+            lastScrollTop.current = element.scrollTop;
+          }
         });
         onScrollToBottomClick && onScrollToBottomClick();
       },
       [messageBoxRef, enableSmartScroll]
     );
 
-    // Detect scroll position
-    useEffect(() => {
+    const measureJumpButtonState = useCallback(() => {
+      const element = messageBoxRef.current;
+      if (!element) {
+        return;
+      }
+
+      const metrics = getScrollMetrics(element);
+
+      setAtTop(metrics.atTop);
+      setAtBottom(
+        isAtBottomEdge(
+          metrics,
+          enableSmartScroll,
+          autoScrollRef.current,
+          pauseAutoScrollRef.current,
+          programmaticScrollRef.current
+        )
+      );
+      setIsOverflowing(metrics.isOverflowing);
+      setHasMeasuredScroll(true);
+    }, [enableSmartScroll]);
+
+    const handleContentResize = useCallback(() => {
+      const element = messageBoxRef.current;
+      if (element) {
+        const metrics = getScrollMetrics(element);
+        const shouldFollow = shouldFollowContentGrowth(
+          metrics,
+          enableSmartScroll,
+          autoScrollRef.current,
+          pauseAutoScrollRef.current,
+          programmaticScrollRef.current
+        );
+
+        if (shouldFollow && !scrollQueued.current) {
+          programmaticScrollRef.current = true;
+          element.scrollTop = element.scrollHeight - element.clientHeight;
+          lastScrollTop.current = element.scrollTop;
+        }
+      }
+
+      measureJumpButtonState();
+    }, [enableSmartScroll, measureJumpButtonState]);
+
+    // Detect scroll position before paint to avoid jump button flash on mount
+    useLayoutEffect(() => {
       const element = messageBoxRef.current;
       if (!element) {
         return;
       }
 
-      // Listen for scroll events
+      measureJumpButtonState();
+
       element.addEventListener('scroll', handleScroll);
 
-      // Check initial position and overflow
-      handleScroll();
-      checkOverflow();
+      const resizeObserver = getResizeObserver(element, handleContentResize);
 
       return () => {
         element.removeEventListener('scroll', handleScroll);
+        resizeObserver();
       };
-    }, [checkOverflow, handleScroll, messageBoxRef]);
+    }, [handleContentResize, handleScroll, measureJumpButtonState]);
 
     useImperativeHandle(ref, (): MessageBoxHandle => {
       const node = messageBoxRef.current! as MessageBoxHandle;
@@ -273,6 +369,7 @@ export const MessageBox = forwardRef(
 
       if (!isScrollingDown) {
         pauseAutoScrollRef.current = true;
+        programmaticScrollRef.current = false;
         clearTimeout(resetUserScrollIntentTimeout.current);
         return;
       }
@@ -280,7 +377,7 @@ export const MessageBox = forwardRef(
       const { scrollTop, scrollHeight, clientHeight } = container;
       const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
 
-      if (distanceFromBottom < 100) {
+      if (distanceFromBottom < SCROLL_EDGE_DELTA) {
         pauseAutoScrollRef.current = false;
         setAutoScroll(true);
       }
@@ -320,11 +417,18 @@ export const MessageBox = forwardRef(
       <>
         <JumpButton
           position="top"
-          isHidden={isOverflowing && atTop}
+          isHidden={!hasMeasuredScroll || (isOverflowing && atTop)}
           onClick={scrollToTop}
           jumpButtonProps={jumpButtonTopProps}
           jumpButtonTooltipProps={jumpButtonTopTooltipProps}
         />
+        <JumpButton
+          position="bottom"
+          isHidden={!hasMeasuredScroll || (isOverflowing && atBottom)}
+          onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+          jumpButtonProps={jumpButtonBottomProps}
+          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
+        />
         <div
           role="region"
           tabIndex={0}
@@ -339,13 +443,6 @@ export const MessageBox = forwardRef(
             {announcement}
           </div>
         </div>
-        <JumpButton
-          position="bottom"
-          isHidden={isOverflowing && atBottom}
-          onClick={() => scrollToBottom({ resumeSmartScroll: true })}
-          jumpButtonProps={jumpButtonBottomProps}
-          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
-        />
       </>
     );
   }

package/src/ResponseActions/ResponseActionButton.test.tsx

@@ -1,23 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { DownloadIcon } from '@patternfly/react-icons';
+import { RhUiExportIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 
 describe('ResponseActionButton', () => {
   it('renders aria-label correctly if not clicked', () => {
-    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" />);
+    render(<ResponseActionButton icon={<RhUiExportIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" />);
     expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
   });
   it('renders aria-label correctly if clicked', () => {
     render(
-      <ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked />
+      <ResponseActionButton icon={<RhUiExportIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked />
     );
     expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
   });
   it('renders tooltip correctly if not clicked', async () => {
     render(
-      <ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" clickedTooltipContent="Downloaded" />
+      <ResponseActionButton icon={<RhUiExportIcon />} tooltipContent="Download" clickedTooltipContent="Downloaded" />
     );
     expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
@@ -27,7 +27,7 @@ describe('ResponseActionButton', () => {
   it('renders tooltip correctly if clicked', async () => {
     render(
       <ResponseActionButton
-        icon={<DownloadIcon />}
+        icon={<RhUiExportIcon />}
         tooltipContent="Download"
         clickedTooltipContent="Downloaded"
         isClicked
@@ -39,13 +39,13 @@ describe('ResponseActionButton', () => {
     expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
   });
   it('if clicked variant for tooltip is not supplied, it uses the default', async () => {
-    render(<ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" isClicked />);
+    render(<ResponseActionButton icon={<RhUiExportIcon />} tooltipContent="Download" isClicked />);
     // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
     await userEvent.click(screen.getByRole('button', { name: 'Download' }));
     expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
   });
   it('if clicked variant for aria label is not supplied, it uses the default', async () => {
-    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" isClicked />);
+    render(<ResponseActionButton icon={<RhUiExportIcon />} ariaLabel="Download" isClicked />);
     expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
   });
 });

package/src/ResponseActions/ResponseActions.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ResponseActions, { ActionProps } from './ResponseActions';
 import userEvent from '@testing-library/user-event';
-import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
+import { RhUiExportIcon, RhMicronsInformationFillIcon, RhUiRedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
 
 // Mock the icon components
@@ -19,9 +19,8 @@ jest.mock('@patternfly/react-icons', () => ({
   RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
   RhUiExportIcon: () => <div>RhUiExportIcon</div>,
   RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
-  DownloadIcon: () => <div>DownloadIcon</div>,
-  InfoCircleIcon: () => <div>InfoCircleIcon</div>,
-  RedoIcon: () => <div>RedoIcon</div>
+  RhMicronsInformationFillIcon: () => <div>RhMicronsInformationFillIcon</div>,
+  RhUiRedoIcon: () => <div>RhUiRedoIcon</div>
 }));
 
 const ALL_ACTIONS = [
@@ -41,7 +40,7 @@ const CUSTOM_ACTIONS = [
       onClick: jest.fn(),
       tooltipContent: 'Regenerate',
       clickedTooltipContent: 'Regenerated',
-      icon: <RedoIcon />
+      icon: <RhUiRedoIcon />
     },
     download: {
       ariaLabel: 'Download',
@@ -49,13 +48,13 @@ const CUSTOM_ACTIONS = [
       onClick: jest.fn(),
       tooltipContent: 'Download',
       clickedTooltipContent: 'Downloaded',
-      icon: <DownloadIcon />
+      icon: <RhUiExportIcon />
     },
     info: {
       ariaLabel: 'Info',
       onClick: jest.fn(),
       tooltipContent: 'Info',
-      icon: <InfoCircleIcon />
+      icon: <RhMicronsInformationFillIcon />
     }
   }
 ];
@@ -428,7 +427,7 @@ describe('ResponseActions', () => {
         onClick: jest.fn(),
         ariaLabel: 'Custom',
         tooltipContent: 'Custom action',
-        icon: <DownloadIcon />
+        icon: <RhUiExportIcon />
       }
     };
     render(<ResponseActions actions={actions} persistActionSelection />);

package/dist/cjs/LoadingMessage/LoadingMessage.d.ts

@@ -1,6 +0,0 @@
-import type { FunctionComponent } from 'react';
-export interface LoadingMessageProps {
-    icon?: React.ComponentType;
-}
-export declare const LoadingMessage: FunctionComponent<LoadingMessageProps>;
-export default LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_core_1 = require("@patternfly/react-core");
-const robot_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/robot-icon"));
-const LoadingMessage = ({ icon: IconComponent = robot_icon_1.default }) => ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) }) }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { className: "pf-u-background-color-200", children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-v6-u-display-flex pf-u-align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." })] }) })] }));
-exports.LoadingMessage = LoadingMessage;
-exports.default = exports.LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/cjs/LoadingMessage/LoadingMessage.test.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-const LoadingMessage_1 = __importDefault(require("./LoadingMessage"));
-describe('LoadingMessage', () => {
-    it('should render loading message', () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
-        expect(container).toMatchSnapshot();
-    });
-    it('should render loading message correctly', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
-        expect(react_1.screen.getAllByText('.')).toBeTruthy();
-        expect(react_1.screen.getAllByText('.')).toHaveLength(3);
-    });
-});

package/dist/cjs/LoadingMessage/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './LoadingMessage';
-export * from './LoadingMessage';

package/dist/cjs/LoadingMessage/index.js

@@ -1,23 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var LoadingMessage_1 = require("./LoadingMessage");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LoadingMessage_1).default; } });
-__exportStar(require("./LoadingMessage"), exports);

package/dist/dynamic/LoadingMessage/package.json

@@ -1 +0,0 @@
-{"main":"../../cjs/LoadingMessage/index.js","module":"../../esm/LoadingMessage/index.js","typings":"../../esm/LoadingMessage/index.d.ts"}

package/dist/esm/LoadingMessage/LoadingMessage.d.ts

@@ -1,6 +0,0 @@
-import type { FunctionComponent } from 'react';
-export interface LoadingMessageProps {
-    icon?: React.ComponentType;
-}
-export declare const LoadingMessage: FunctionComponent<LoadingMessageProps>;
-export default LoadingMessage;

package/dist/esm/LoadingMessage/LoadingMessage.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Split, SplitItem } from '@patternfly/react-core';
-import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
-export const LoadingMessage = ({ icon: IconComponent = RobotIcon }) => (_jsxs(Split, { children: [_jsx(SplitItem, { children: _jsx(Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md", children: _jsx(IconComponent, {}) }) }), _jsx(SplitItem, { className: "pf-u-background-color-200", children: _jsxs("div", { className: "pf-v6-u-display-flex pf-u-align-items-center", children: [_jsx("div", { children: "." }), _jsx("div", { children: "." }), _jsx("div", { children: "." })] }) })] }));
-export default LoadingMessage;

package/dist/esm/LoadingMessage/LoadingMessage.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/esm/LoadingMessage/LoadingMessage.test.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import LoadingMessage from './LoadingMessage';
-describe('LoadingMessage', () => {
-    it('should render loading message', () => {
-        const { container } = render(_jsx(LoadingMessage, {}));
-        expect(container).toMatchSnapshot();
-    });
-    it('should render loading message correctly', () => {
-        render(_jsx(LoadingMessage, {}));
-        expect(screen.getAllByText('.')).toBeTruthy();
-        expect(screen.getAllByText('.')).toHaveLength(3);
-    });
-});

package/dist/esm/LoadingMessage/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './LoadingMessage';
-export * from './LoadingMessage';

package/dist/esm/LoadingMessage/index.js

@@ -1,2 +0,0 @@
-export { default } from './LoadingMessage';
-export * from './LoadingMessage';

package/src/LoadingMessage/LoadingMessage.test.tsx

@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import LoadingMessage from './LoadingMessage';
-
-describe('LoadingMessage', () => {
-  it('should render loading message', () => {
-    const { container } = render(<LoadingMessage />);
-    expect(container).toMatchSnapshot();
-  });
-  it('should render loading message correctly', () => {
-    render(<LoadingMessage />);
-    expect(screen.getAllByText('.')).toBeTruthy();
-    expect(screen.getAllByText('.')).toHaveLength(3);
-  });
-});

package/src/LoadingMessage/LoadingMessage.tsx

@@ -1,27 +0,0 @@
-import type { FunctionComponent } from 'react';
-import { Icon, Split, SplitItem } from '@patternfly/react-core';
-
-import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
-
-export interface LoadingMessageProps {
-  icon?: React.ComponentType;
-}
-
-export const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
-  <Split>
-    <SplitItem>
-      <Icon size="lg" className="pf-v6-u-mr-sm pf-v6-u-pt-md">
-        <IconComponent />
-      </Icon>
-    </SplitItem>
-    <SplitItem className="pf-u-background-color-200">
-      <div className="pf-v6-u-display-flex pf-u-align-items-center">
-        <div>.</div>
-        <div>.</div>
-        <div>.</div>
-      </div>
-    </SplitItem>
-  </Split>
-);
-
-export default LoadingMessage;

package/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingMessage should render loading message 1`] = `
-<div>
-  <div
-    class="pf-v6-l-split"
-  >
-    <div
-      class="pf-v6-l-split__item"
-    >
-      <span
-        class="pf-v6-c-icon pf-m-lg pf-v6-u-mr-sm pf-v6-u-pt-md"
-      >
-        <span
-          class="pf-v6-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            width="1em"
-          >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 640 512"
-            >
-              <path
-                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M29 22.5V29a1 1 0 1 1-2 0v-6H5v6a1 1 0 1 1-2 0v-6.5c0-.827.673-1.5 1.5-1.5h23c.827 0 1.5.673 1.5 1.5ZM3 11a1 1 0 0 1 1-1h2V5.5C6 4.673 6.673 4 7.5 4H12V2a1 1 0 1 1 2 0v2h4V2a1 1 0 1 1 2 0v2h4.5c.827 0 1.5.673 1.5 1.5V10h2a1 1 0 1 1 0 2h-2v4.5c0 .827-.673 1.5-1.5 1.5h-17c-.827 0-1.5-.673-1.5-1.5V12H4a1 1 0 0 1-1-1Zm5 5h16V6H8v10Zm5-6.612a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 13 9.388Zm6-.01a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 19 9.378Z"
-              />
-            </svg>
-          </svg>
-        </span>
-      </span>
-    </div>
-    <div
-      class="pf-v6-l-split__item pf-u-background-color-200"
-    >
-      <div
-        class="pf-v6-u-display-flex pf-u-align-items-center"
-      >
-        <div>
-          .
-        </div>
-        <div>
-          .
-        </div>
-        <div>
-          .
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/LoadingMessage/index.ts

@@ -1,3 +0,0 @@
-export { default } from './LoadingMessage';
-
-export * from './LoadingMessage';