@progress/kendo-themes-html 5.6.1-dev.3 → 5.6.1-dev.6

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

@@ -0,0 +1,238 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-sprite {
+        background-color: gray;
+    }
+    .k-image {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background-color: gold;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <Icon className="k-panelbar-item-icon" name="cog" />
+                            <span className="k-panelbar-item-text">Root</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-hover">
+                            <span className="k-panelbar-item-icon k-image"></span>
+                            <span className="k-panelbar-item-text">Root hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus k-hover">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-disabled">
+                            <span className="k-panelbar-item-text">Root disabled</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected">
+                            <span className="k-panelbar-item-text">Root selected</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus">
+                            <span className="k-panelbar-item-text">Root selected focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <ul className="k-panelbar-group k-panel k-group">
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-hover">
+                                    <span className="k-panelbar-item-text">Child hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus">
+                                    <span className="k-panelbar-item-text">Child focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected">
+                                    <span className="k-panelbar-item-text">Child selected</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-hover">
+                                    <span className="k-panelbar-item-text">Child selected hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus">
+                                    <span className="k-panelbar-item-text">Child selected focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child selected focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child expanded</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                                </span>
+                                <ul className="k-panelbar-group k-panel k-group">
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-disabled">
+                                    <span className="k-panelbar-item-text">Child disabled</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child last</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+
+        </div>
+    </>
+);

package/src/panelbar/tests/panelbar.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-sprite {
+        background-color: gray;
+    }
+    .k-image {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background-color: gold;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <Icon className="k-panelbar-item-icon" name="cog" />
+                            <span className="k-panelbar-item-text">Root</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-hover">
+                            <span className="k-panelbar-item-icon k-image"></span>
+                            <span className="k-panelbar-item-text">Root hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus k-hover">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-disabled">
+                            <span className="k-panelbar-item-text">Root disabled</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected">
+                            <span className="k-panelbar-item-text">Root selected</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus">
+                            <span className="k-panelbar-item-text">Root selected focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <ul className="k-panelbar-group k-panel k-group">
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <Icon className="k-panelbar-item-icon" name="cog" />
+                                    <span className="k-panelbar-item-text">Child</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-hover">
+                                    <span className="k-panelbar-item-text">Child hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus">
+                                    <span className="k-panelbar-item-text">Child focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected">
+                                    <span className="k-panelbar-item-text">Child selected</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-hover">
+                                    <span className="k-panelbar-item-text">Child selected hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus">
+                                    <span className="k-panelbar-item-text">Child selected focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child selected focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child expanded</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                                </span>
+                                <ul className="k-panelbar-group k-panel k-group">
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-disabled">
+                                    <span className="k-panelbar-item-text">Child disabled</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child last</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+        </div>
+    </>
+);

package/src/popover/popover.tsx

@@ -31,9 +31,11 @@ export class Popover extends React.Component<PopoverProps & React.HTMLProps<HTML
                         }
                     )}></div>
                 }
-                {title && <div className="k-popover-header">{title}</div>}
-                {body && <div className="k-popover-body">{body}</div>}
-                <>{children}</>
+                <div className="k-popover-inner">
+                    {title && <div className="k-popover-header">{title}</div>}
+                    {body && <div className="k-popover-body">{body}</div>}
+                    <>{children}</>
+                </div>
             </div>
         );
     }

package/src/scheduler/tests/scheduler-angular-day-rtl.tsx

@@ -60,7 +60,7 @@ root.render(
                                                 <tr><td style={{ height: "46px" }}></td></tr>
                                             </tbody>
                                         </table>
-                                        <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
+                                        <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
                                             <span className="k-event-actions"><Icon name="arrow-e"></Icon></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
@@ -149,7 +149,7 @@ root.render(
                                     </tbody>
                                 </table>
 
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "56px", right: "3px", top: "37px", height: "443px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "56px", right: "3px", top: "37px", height: "443px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">8:30 AM - 2:30 PM</div>
@@ -159,7 +159,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "61px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "61px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -169,7 +169,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "117px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "117px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -179,7 +179,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "173px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "173px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -189,7 +189,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "229px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "229px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -199,7 +199,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "285px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "285px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -209,7 +209,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "341px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "341px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -219,7 +219,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "393px", right: "61px", top: "370px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "393px", right: "61px", top: "370px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">1:00 PM - 2:00 PM</div>
@@ -229,7 +229,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "54px", right: "397px", top: "259px", height: "36px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "54px", right: "397px", top: "259px", height: "36px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:00 PM</div>
@@ -239,7 +239,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "393px", right: "61px", top: "333px", height: "36px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "393px", right: "61px", top: "333px", height: "36px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">12:30 PM - 1:00 PM</div>

package/src/scheduler/tests/scheduler-angular-rtl.tsx

@@ -83,7 +83,7 @@ root.render(
                                                 </tr>
                                             </tbody>
                                         </table>
-                                        <div className="k-event" style={{ display: "block", width: "300px", right: "304px", top: '0px', height: "25px" }} >
+                                        <div className="k-event" style={{ width: "300px", right: "304px", top: '0px', height: "25px" }} >
                                             <span className="k-event-actions"></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
@@ -364,7 +364,7 @@ root.render(
                                         </tr>
                                     </tbody>
                                 </table>
-                                <div className="k-event" style={{ display: "block", width: "150px", right: "306px", top: '0px', height: "73px" }} >
+                                <div className="k-event" style={{ width: "150px", right: "306px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
@@ -373,7 +373,7 @@ root.render(
                                     <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                 </div>
 
-                                <div className="k-event k-event-drag-hint" style={{ display: "block", width: "150px", right: "631px", top: '0px', height: "73px" }} >
+                                <div className="k-event k-event-drag-hint" style={{ width: "150px", right: "631px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>