@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.2

package/src/breadcrumb/tests/breadcrumb.tsx

@@ -1,14 +1,44 @@
+import { BreadcrumbAdaptive, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbNormal, BreadcrumbRoot, BreadcrumbRootAdaptive, BreadcrumbRootItemContainer } from '..';
 import { Icon } from '../../icon';
-import { Textbox } from '../../textbox';
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbInputContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from '../../breadcrumb';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(2, 1fr);
+    }
+`;
 
 
 export default () =>(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-            <span className="k-colspan-all k-col-span-full">Wrapping</span>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span></span>
+            <span>Collapsing with root item</span>
+            <span>Collapsing without root item</span>
+
+            <span>none</span>
+            <div>
+                <BreadcrumbRoot collapsing="none" size="large" />
+            </div>
+
             <div>
-                <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
+                <BreadcrumbNormal collapsing="none" size="large" />
+            </div>
+
+
+            <span>auto</span>
+            <div>
+                <BreadcrumbRootAdaptive size="large" />
+            </div>
+
+            <div>
+                <BreadcrumbAdaptive size="large" />
+            </div>
+
+            <span>wrap</span>
+            <div>
+                <BreadcrumbRoot collapsing="wrap" size="large">
                     <BreadcrumbRootItemContainer>
                         <BreadcrumbItem root>
                             <BreadcrumbLink root icontext>
@@ -17,330 +47,106 @@ export default () =>(
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                     </BreadcrumbRootItemContainer>
-
                     <BreadcrumbContainer collapsing="wrap">
-                        <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled icontext>
-                                <Icon icon="clock" />
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink icon>
-                                <Icon icon="clock" />
+                                <BreadcrumbItemText text="Item 02"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <div>
-                <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
-                    <BreadcrumbRootItemContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root>
-                                <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbRootItemContainer>
-
-                    <BreadcrumbContainer collapsing="wrap">
-                        <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled icontext>
-                                <Icon icon="clock" />
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
+                            <BreadcrumbLink>
+                                <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
-                        <BreadcrumbItem>
+                        <BreadcrumbItem last>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink icon>
-                                <Icon icon="clock" />
+                            <BreadcrumbLink>
+                                <BreadcrumbItemText text="Item 06"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
+                            <BreadcrumbLink>
+                                <BreadcrumbItemText text="Item 07"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                     </BreadcrumbContainer>
-                </Breadcrumb>
+                </BreadcrumbRoot>
             </div>
-
             <div>
-                <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
-                    <BreadcrumbRootItemContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbRootItemContainer>
-
+                <BreadcrumbNormal collapsing="wrap" size="large">
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled icontext>
-                                <Icon icon="clock" />
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink icon>
-                                <Icon icon="clock" />
+                                <BreadcrumbItemText text="Item 02"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
-                        <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <span className="k-colspan-all k-col-span-full">Navigation Mode</span>
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <BreadcrumbLink>
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon focus>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <BreadcrumbLink focus>
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon hover>
-                                <Icon icon="home" />
+                                <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <BreadcrumbLink hover>
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon hover>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            <BreadcrumbLink icontext>
-                                <Icon icon="cloud" />
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <BreadcrumbLink icon>
-                                <Icon icon="camera" />
-                            </BreadcrumbLink>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <span className="k-colspan-all k-col-span-full">Edit Mode</span>
-            <div>
-                <Breadcrumb focus>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 06"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 07"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbContainer>
-                </Breadcrumb>
-            </div>
-
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbInputContainer>
-                        <Textbox showClearButton={false} value="First item/Second item/Breadcrumb Pattern/Third item" />
-                    </BreadcrumbInputContainer>
-                </Breadcrumb>
-            </div>
-
-            <span className="k-colspan-all k-col-span-full">Overflow</span>
-            <div>
-                <Breadcrumb>
-                    <BreadcrumbContainer>
-                        <BreadcrumbItem root>
-                            <BreadcrumbLink root icon>
-                                <Icon icon="home" />
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" size="xsmall" />
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem hidden>
-                            <BreadcrumbLink>
-                                <BreadcrumbItemText text="First item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem hidden>
                             <BreadcrumbLink>
-                                <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
-                            </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
-                        </BreadcrumbItem>
-                        <BreadcrumbItem last>
-                            <BreadcrumbLink disabled>
-                                <BreadcrumbItemText text="Breadcrumb item "></BreadcrumbItemText>
+                                <BreadcrumbItemText text="Item 08"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                     </BreadcrumbContainer>
-                </Breadcrumb>
+                </BreadcrumbNormal>
             </div>
+
         </div>
     </>
 );

package/src/captcha/captcha.spec.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../button';
 import { Textbox } from '../textbox';
-import { Skeleton } from '../skeleton';
+import { SkeletonRectangle } from '../skeleton';
 import { classNames, stateClassNames, States } from '../misc';
 
 export const CAPTCHA_CLASSNAME = `k-captcha`;
@@ -55,7 +55,7 @@ export const Captcha = (
                         src="/packages/html/assets/captcha.jpg"
                     />
                     {loading && (
-                        <Skeleton shape={'rect'} style={{ width: '100%', height: '100%' }} />
+                        <SkeletonRectangle style={{ width: '100%', height: '100%' }} />
                     )}
                 </div>
                 <div className="k-captcha-image-controls k-vstack">

package/src/captcha/index.ts

@@ -1 +1,2 @@
 export * from './captcha.spec';
+export * from './templates/captcha-normal';

package/src/captcha/templates/captcha-normal.tsx

@@ -0,0 +1,5 @@
+import { Captcha } from '..';
+
+export const CaptchaNormal = (props) => (
+    <Captcha value="YR890" { ...props }/>
+);

package/src/captcha/tests/captcha-rtl.tsx

@@ -0,0 +1,16 @@
+import { Captcha, CaptchaNormal } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2 k-rtl">
+
+            {[ "normal", ...Captcha.states ].map((state) => (
+                <section>
+                    <span>Captcha {state}</span>
+                    <CaptchaNormal { ...{ [state]: true }} />
+                </section>
+            ))}
+        </div>
+    </>
+);

package/src/captcha/tests/captcha.tsx

@@ -1,13 +1,16 @@
-import { Captcha } from '../../captcha';
+import { Captcha, CaptchaNormal } from '../../captcha';
 
 
 export default () =>(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
-            <span>Captcha</span>
-            <section>
-                <Captcha value="YR890" valid />
-            </section>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            {[ "normal", ...Captcha.states ].map((state) => (
+                <section>
+                    <span>Captcha {state}</span>
+                    <CaptchaNormal { ...{ [state]: true }} />
+                </section>
+            ))}
         </div>
     </>
 );

package/src/chat/chat.spec.tsx

@@ -27,9 +27,9 @@ export const Chat = (
 ) => {
     const {
         dir,
-        showToolbar = defaultOptions.showToolbar,
+        showToolbar,
         showMessageBox = defaultOptions.showMessageBox,
-        showMoreButton = defaultOptions.showMoreButton,
+        showMoreButton,
         ...other
     } = props;
 
@@ -59,7 +59,7 @@ export const Chat = (
             }
             { showToolbar &&
                 <div className="k-chat-toolbar k-toolbar">
-                    <Button className="k-scroll-button k-scroll-button-left k-hidden" icon="chevron-left" />
+                    <Button className={classNames("k-scroll-button", "k-scroll-button-left", dir === 'rtl' ? "" : "k-hidden")} icon="chevron-left" />
                     <div className="k-toolbar-group k-button-list">
                         <Button icon="arrow-rotate-cw"></Button>
                         <Button icon="gear"></Button>
@@ -71,7 +71,7 @@ export const Chat = (
                         <Button icon="question-circle"></Button>
                         <Button icon="trash"></Button>
                     </div>
-                    <Button className="k-scroll-button k-scroll-button-right" icon="chevron-right" />
+                    <Button className={classNames("k-scroll-button", "k-scroll-button-right", dir === 'rtl' && "k-hidden")} icon="chevron-right" />
                 </div>
             }
         </div>

package/src/chat/index.ts

@@ -2,3 +2,6 @@ export * from './chat.spec';
 export * from './chat-message';
 export * from './chat-message-group';
 export * from './chat-quick-replies';
+export * from './templates/chat-normal';
+export * from './templates/chat-with-toolbar';
+export * from './templates/chat-with-options';

package/src/chat/templates/chat-normal.tsx

@@ -0,0 +1,23 @@
+import { Chat, ChatMessage, ChatMessageGroup } from "..";
+
+export const ChatNormal = (props) => (
+    <Chat children={
+        <>
+            <div className="k-timestamp">Day, Month 7, 2023</div>
+            <ChatMessageGroup>
+                <ChatMessage className="k-only" />
+            </ChatMessageGroup>
+            <ChatMessageGroup alt>
+                <ChatMessage className="k-only" />
+            </ChatMessageGroup>
+            <ChatMessageGroup>
+                <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+            </ChatMessageGroup>
+            <ChatMessageGroup alt>
+                <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+            </ChatMessageGroup>
+        </>
+    }
+    {...props}
+    />
+);

package/src/chat/templates/chat-with-options.tsx

@@ -0,0 +1,25 @@
+import { Chat, ChatMessage, ChatMessageGroup } from "..";
+
+export const ChatWithOptions = (props) => (
+    <Chat
+        showMoreButton
+        children={
+            <>
+                <div className="k-timestamp">Day, Month 7, 2023</div>
+                <ChatMessageGroup>
+                    <ChatMessage className="k-only" />
+                </ChatMessageGroup>
+                <ChatMessageGroup alt>
+                    <ChatMessage className="k-only" />
+                </ChatMessageGroup>
+                <ChatMessageGroup>
+                    <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+                </ChatMessageGroup>
+                <ChatMessageGroup alt>
+                    <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+                </ChatMessageGroup>
+            </>
+        }
+        {...props}
+    />
+);

package/src/chat/templates/chat-with-toolbar.tsx

@@ -0,0 +1,26 @@
+import { Chat, ChatMessage, ChatMessageGroup } from "..";
+
+export const ChatWithToolbar = (props) => (
+    <Chat
+        showMoreButton
+        showToolbar
+        children={
+            <>
+                <div className="k-timestamp">Day, Month 7, 2023</div>
+                <ChatMessageGroup>
+                    <ChatMessage className="k-only" />
+                </ChatMessageGroup>
+                <ChatMessageGroup alt>
+                    <ChatMessage className="k-only" />
+                </ChatMessageGroup>
+                <ChatMessageGroup>
+                    <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+                </ChatMessageGroup>
+                <ChatMessageGroup alt>
+                    <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+                </ChatMessageGroup>
+            </>
+        }
+        {...props}
+    />
+);