@patternfly/chatbot 2.2.0-prerelease.7 → 2.2.0-prerelease.8

package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const OrderedListMessage: ({ children }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
+declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
 export default OrderedListMessage;

package/dist/cjs/Message/ListMessage/OrderedListMessage.js

@@ -8,6 +8,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const OrderedListMessage = ({ children }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    react_1.default.createElement(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number }, children)));
+const OrderedListMessage = ({ children, start }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-ordered-list" },
+    react_1.default.createElement(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start }, children)));
 exports.default = OrderedListMessage;

package/dist/cjs/Message/Message.js

@@ -56,7 +56,7 @@ const Message = (_a) => {
                             p: TextMessage_1.default,
                             code: ({ children }) => react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, codeBlockProps), children),
                             ul: UnorderedListMessage_1.default,
-                            ol: OrderedListMessage_1.default,
+                            ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
                             li: ListItemMessage_1.default
                         }, remarkPlugins: [remark_gfm_1.default] }, content)),
                     !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),

package/dist/cjs/Message/Message.test.js

@@ -60,6 +60,21 @@ spec:
   url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
 `;
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -280,6 +295,12 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
+    it('should render ordered lists correctly if there is interstitial content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        checkListItemsRendered();
+        const list = react_2.screen.getAllByRole('list')[1];
+        expect(list).toHaveAttribute('start', '3');
+    });
     it('should render inline code', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(react_2.screen.getByText(/() => void/i)).toBeTruthy();

package/dist/esm/Message/ListMessage/OrderedListMessage.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const OrderedListMessage: ({ children }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
+declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
 export default OrderedListMessage;

package/dist/esm/Message/ListMessage/OrderedListMessage.js

@@ -3,6 +3,6 @@
 // ============================================================================
 import React from 'react';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-const OrderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    React.createElement(List, { component: ListComponent.ol, type: OrderType.number }, children)));
+const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
+    React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
 export default OrderedListMessage;

package/dist/esm/Message/Message.js

@@ -50,7 +50,7 @@ export const Message = (_a) => {
                             p: TextMessage,
                             code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
                             ul: UnorderedListMessage,
-                            ol: OrderedListMessage,
+                            ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
                             li: ListItemMessage
                         }, remarkPlugins: [remarkGfm] }, content)),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),

package/dist/esm/Message/Message.test.js

@@ -55,6 +55,21 @@ spec:
   url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
 `;
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -275,6 +290,12 @@ describe('Message', () => {
         expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
+    it('should render ordered lists correctly if there is interstitial content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        checkListItemsRendered();
+        const list = screen.getAllByRole('list')[1];
+        expect(list).toHaveAttribute('start', '3');
+    });
     it('should render inline code', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(screen.getByText(/() => void/i)).toBeTruthy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.7",
+  "version": "2.2.0-prerelease.8",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 
-const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
   <div className="pf-chatbot__message-ordered-list">
-    <List component={ListComponent.ol} type={OrderType.number}>
+    <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>
   </div>

package/src/Message/Message.test.tsx

@@ -53,6 +53,22 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -344,6 +360,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();

package/src/Message/Message.tsx

@@ -156,7 +156,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
                   p: TextMessage,
                   code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
+                  ol: (props) => <OrderedListMessage {...props} />,
                   li: ListItemMessage
                 }}
                 remarkPlugins={[remarkGfm]}