@progress/kendo-themes-html 5.8.2-dev.4 → 5.8.2-dev.6

package/src/action-sheet/tests/action-sheet-time-selector.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
+import { TimeSelector } from '../../time-selector';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
+        height: 600px;
+        outline: 1px dotted;
+        overflow: hidden;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader actions={[ 'x' ]}>
+                        <div className="k-text-center">Select time</div>
+                    </ActionSheetHeader>
+                    <TimeSelector size="large" />
+                    <ActionSheetFooter actions={[ 'Cancel', '!Set' ]} />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader actions={[ 'x' ]}>
+                        <div className="k-text-center">Select time</div>
+                    </ActionSheetHeader>
+                    <TimeSelector size="large" />
+                    <ActionSheetFooter actions={[ 'Cancel', '!Set' ]} />
+                </ActionSheet>
+            </section>
+        </div>
+    </>
+);

package/src/action-sheet/tests/action-sheet-treeview.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetHeader } from '../../action-sheet';
+import { Treeview, TreeviewItem } from '../../treeview';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
+        height: 600px;
+        outline: 1px dotted;
+        overflow: hidden;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader actions={[ 'x' ]}>
+                        <div className="k-text-center">Select value</div>
+                    </ActionSheetHeader>
+                    <Treeview size="large">
+                        <TreeviewItem text="Normal" />
+                        <TreeviewItem text="Hover" hover />
+                        <TreeviewItem text="Focus" focus/>
+                        <TreeviewItem text="Selected" selected/>
+                        <TreeviewItem text="Selected focus" selected focus/>
+                        <TreeviewItem text="Disabled" disabled/>
+                        <TreeviewItem text="Disabled focus" disabled focus/>
+                        <TreeviewItem leafClassName="k-treeview-load-more-button" text="Load more..."/>
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                    </Treeview>
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader actions={[ 'x' ]}>
+                        <div className="k-text-center">Select time</div>
+                    </ActionSheetHeader>
+                    <Treeview size="large">
+                        <TreeviewItem text="Normal" />
+                        <TreeviewItem text="Hover" hover />
+                        <TreeviewItem text="Focus" focus/>
+                        <TreeviewItem text="Selected" selected/>
+                        <TreeviewItem text="Selected focus" selected focus/>
+                        <TreeviewItem text="Disabled" disabled/>
+                        <TreeviewItem text="Disabled focus" disabled focus/>
+                        <TreeviewItem leafClassName="k-treeview-load-more-button" text="Load more..."/>
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                        <TreeviewItem text="Normal Content" />
+                    </Treeview>
+                </ActionSheet>
+            </section>
+        </div>
+    </>
+);

package/src/action-sheet/tests/action-sheet.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { ActionSheet, ActionSheetItems, ActionSheetItem } from '../../action-sheet';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -8,158 +8,57 @@ const root = ReactDOM.createRoot(
 
 const styles = `
     #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
         height: 600px;
-        transform: scale(1);
+        outline: 1px dotted;
         overflow: hidden;
-    }
-    .k-actionsheet:not(.k-rtl) {
-        left: 200px;
-    }
-    .k-actionsheet.k-rtl {
-        left: 600px;
+        position: relative;
+        transform: translateZ(0);
     }
 `;
 
 root.render(
     <>
         <style>{styles}</style>
-        <div id="test-area">
-            <div className="k-actionsheet-container">
-                <div className="k-overlay"></div>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-                <div className="k-actionsheet k-actionsheet-bottom">
+            <span>LTR</span>
+            <span>RTL</span>
 
-                    <div className="k-actionsheet-header">
-                        Header
-                    </div>
-
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-hover">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Hover action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-focus">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Focus action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-disabled">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Disabled action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Some longer subtitle to break on multiple rows, for testing purposes</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
+            <section>
+                <ActionSheet title="Header">
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Action" description="Action description" iconName="cog" />
+                        <ActionSheetItem text="Hover action" description="Action description" iconName="cog" hover />
+                        <ActionSheetItem text="Focus action" description="Action description" iconName="cog" focus />
+                        <ActionSheetItem text="Disabled action" description="Action description" iconName="cog" disabled />
+                        <ActionSheetItem text="Action" description="Some longer subtitle to break on multiple rows, for testing purposes" iconName="cog" />
+                    </ActionSheetItems>
                     <hr className="k-hr" />
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Cancel</span>
-                                    <span className="k-actionsheet-item-description">Action in second group</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-
-                <div className="k-actionsheet k-actionsheet-bottom k-rtl">
-                    <div className="k-actionsheet-header">
-                        Header
-                    </div>
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Cancel" description="Action in a second group" iconName="cog" />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
 
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-hover">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Hover action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-focus">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Focus action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-disabled">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Disabled action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Some longer subtitle to break on multiple rows, for testing purposes</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
+            <section>
+                <ActionSheet title="Header" className="k-rtl">
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Action" description="Action description" iconName="cog" />
+                        <ActionSheetItem text="Hover action" description="Action description" iconName="cog" hover />
+                        <ActionSheetItem text="Focus action" description="Action description" iconName="cog" focus />
+                        <ActionSheetItem text="Disabled action" description="Action description" iconName="cog" disabled />
+                        <ActionSheetItem text="Action" description="Some longer subtitle to break on multiple rows, for testing purposes" iconName="cog" />
+                    </ActionSheetItems>
                     <hr className="k-hr" />
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Cancel</span>
-                                    <span className="k-actionsheet-item-description">Action in second group</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Cancel" description="Action in a second group" iconName="cog" />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
         </div>
     </>
 );

package/src/calendar/calendar-header.tsx

@@ -6,6 +6,7 @@ export interface CalendarHeaderProps {
     className?: string;
     calendarHeaderText?: string;
     showToday?: boolean;
+    size?: null | 'small' | 'medium' | 'large';
     orientation?: 'vertical' | 'horizontal';
 }
 
@@ -15,6 +16,7 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
         calendarHeaderText: 'October 2021',
         showToday: true,
         orientation: 'horizontal',
+        size: 'medium'
     };
 
     render() {
@@ -23,6 +25,7 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
             calendarHeaderText,
             showToday,
             orientation,
+            size,
             ...htmlAttributes
         } = this.props;
 
@@ -36,12 +39,12 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
                         'k-vstack': orientation === 'vertical',
                     }
                 )}>
-                <Button className="k-calendar-title" text={calendarHeaderText} fillMode="flat"></Button>
+                <Button className="k-calendar-title" text={calendarHeaderText} size={size} fillMode="flat"></Button>
                 <span className="k-spacer"></span>
                 <span className="k-calendar-nav">
-                    <Button className="k-calendar-nav-prev" icon="arrow-chevron-left" fillMode="flat"></Button>
+                    <Button className="k-calendar-nav-prev" icon="arrow-chevron-left" size={size} fillMode="flat"></Button>
                     {showToday && <span className="k-calendar-nav-today">Today</span>}
-                    <Button className="k-calendar-nav-next" icon="arrow-chevron-right" fillMode="flat"></Button>
+                    <Button className="k-calendar-nav-next" icon="arrow-chevron-right" size={size} fillMode="flat"></Button>
                 </span>
             </div>
         );

package/src/calendar/calendar.tsx

@@ -57,6 +57,7 @@ export class Calendar extends React.Component<CalendarProps> {
                     showToday={showCalendarFooter ? false : true }
                     calendarHeaderText={calendarHeaderText}
                     orientation={orientation}
+                    size={size}
                 />
 
                 <CalendarView

package/src/datepicker/tests/datepicker-adaptive.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { ActionSheet, ActionSheetHeader, ActionSheetFooter } from '../../action-sheet';
 import { Calendar } from '../../calendar';
 
 const root = ReactDOM.createRoot(
@@ -8,9 +8,9 @@ const root = ReactDOM.createRoot(
 );
 
 const styles = `
-    .k-actionsheet-container {
-        width: 100%;
+    #test-area > section {
         height: 600px;
+        overflow: hidden;
         position: relative;
         transform: translateZ(0);
     }
@@ -25,52 +25,20 @@ root.render(
             <span>full screen</span>
 
             <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
-
-                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Select dates</div>
-                                <div className="k-text-muted">DD / MM / YY</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <Calendar size="large"></Calendar>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
-                    </div>
-                </div>
+                <ActionSheet className="k-adaptive-actionsheet">
+                    <ActionSheetHeader className="k-text-center" title="Select dates" subTitle="DD / MM / YY" actions={[ 'x' ]} />
+                    <Calendar size="large"></Calendar>
+                    <ActionSheetFooter actions={[ 'Cancel', '!Select Date' ]} />
+                </ActionSheet>
             </section>
-            <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
 
-                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Select dates</div>
-                                <div className="k-text-muted">DD / MM / YY</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <Calendar size="large"></Calendar>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
-                    </div>
-                </div>
+            <section>
+                <ActionSheet fullscreen={true} className="k-adaptive-actionsheet">
+                    <ActionSheetHeader className="k-text-center" title="Select dates" subTitle="DD / MM / YY" actions={[ 'x' ]} />
+                    <Calendar size="large"></Calendar>
+                    <ActionSheetFooter actions={[ 'Cancel', '!Select Date' ]} />
+                </ActionSheet>
             </section>
         </div>
-
     </>
 );

package/src/daterangepicker/tests/daterangepicker-adaptive.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetHeader } from '../../action-sheet';
+import { MultiViewCalendar } from '../../multiviewcalendar';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
+        height: 600px;
+        overflow: hidden;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader title="DateRangePicker label" className="k-text-center" actions={[ "x" ]} />
+
+                    <div className="k-scrollable-wrap">
+                        <MultiViewCalendar size="large" calendarView="month" orientation="vertical" showCalendarCaption />
+                    </div>
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader title="Dropdownlist label" className="k-text-center" actions={[ "x" ]} />
+
+                    <div className="k-scrollable-wrap">
+                        <MultiViewCalendar size="large" calendarView="month" orientation="vertical" showCalendarCaption />
+                    </div>
+                </ActionSheet>
+            </section>
+        </div>
+
+    </>
+);