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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetHeader } from '../../action-sheet';
+import { Calendar } from '../../calendar';
+
+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 date</div>
+                    </ActionSheetHeader>
+                    <Calendar size="large" />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader actions={[ 'x' ]}>
+                        <div className="k-text-center">Select date</div>
+                    </ActionSheetHeader>
+                    <Calendar size="large" />
+                </ActionSheet>
+            </section>
+        </div>
+    </>
+);

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
+import { Button } from '../../button';
+import { Calendar } from '../../calendar';
+import { TimeSelector } from '../../time-selector';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        --kendo-actionsheet-height: 521px;
+        --kendo-actionsheet-max-height: 521px;
+    }
+    #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' ]}
+                        title="Select Date & Time"
+                        subTitle="DD / MM / YY">
+                    </ActionSheetHeader>
+
+                    <div className="k-datetime-wrap k-date-tab">
+                        <div className="k-datetime-buttongroup">
+                            <div className="k-button-group k-button-group-stretched">
+                                <Button className="k-group-start" size="large" selected>Date</Button>
+                                <Button className="k-group-end" size="large">Time</Button>
+                            </div>
+                        </div>
+                        <div className="k-datetime-selector">
+                            <div className="k-datetime-calendar-wrap">
+
+                                <Calendar calendarView="month" size="large" showOtherMonth></Calendar>
+
+                            </div>
+                            <div className="k-datetime-time-wrap">
+                            </div>
+                        </div>
+                    </div>
+
+                    <ActionSheetFooter actions={[ 'Cancel', '!Set' ]} />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        title="Select Date & Time"
+                        subTitle="DD / MM / YY">
+                    </ActionSheetHeader>
+
+                    <div className="k-datetime-wrap k-time-tab">
+                        <div className="k-datetime-buttongroup">
+                            <div className="k-button-group k-button-group-stretched">
+                                <Button className="k-group-start" size="large">Date</Button>
+                                <Button className="k-group-end"size="large" selected>Time</Button>
+                            </div>
+                        </div>
+                        <div className="k-datetime-selector">
+                            <div className="k-datetime-calendar-wrap">
+                            </div>
+                            <div className="k-datetime-time-wrap">
+                                <TimeSelector size="large" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ActionSheetFooter actions={[ 'Cancel', '!Set' ]} />
+                </ActionSheet>
+            </section>
+        </div>
+    </>
+);

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
+import { List, ListGroup, ListItem } from '../../list';
+
+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' ]}
+                        filter={true}
+                        title="Select Item">
+                    </ActionSheetHeader>
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListItem text="List item" />
+                            <ListItem text="Hover" hover />
+                            <ListItem text="Focus" focus />
+                            <ListItem text="Selected" selected />
+                            <ListItem text="Hover selected" hover selected />
+                            <ListItem text="Disabled" disabled />
+                            <ListItem text="List item with very long text, that spans on multiple lines" />
+                            <ListItem text="Checkbox" showCheckbox />
+                            <ListItem text="Icon" showIcon iconName="cog" />
+                            <ListItem text="Checkbox icon" showCheckbox showIcon iconName="cog" />
+                        </List>
+                    </div>
+                    <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        filter={true}
+                        title="Select Item">
+                    </ActionSheetHeader>
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListItem text="List item" />
+                            <ListItem text="Hover" hover />
+                            <ListItem text="Focus" focus />
+                            <ListItem text="Selected" selected />
+                            <ListItem text="Hover selected" hover selected />
+                            <ListItem text="Disabled" disabled />
+                            <ListItem text="List item with very long text, that spans on multiple lines" />
+                            <ListItem text="Checkbox" showCheckbox />
+                            <ListItem text="Icon" showIcon iconName="cog" />
+                            <ListItem text="Checkbox icon" showCheckbox showIcon iconName="cog" />
+                        </List>
+                    </div>
+                    <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        filter={true}
+                        title="Select Item">
+                    </ActionSheetHeader>
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListGroup label="Group 1" root>
+                                <ListItem text="List item 1.1" />
+                                <ListItem text="List item 1.2" />
+                                <ListItem text="List item 1.3" />
+                            </ListGroup>
+                            <ListGroup label="Group 2">
+                                <ListItem text="List item 2.1" />
+                                <ListItem text="List item 2.2" />
+                                <ListItem text="List item 2.3" />
+                            </ListGroup>
+                            <ListGroup label="Group 3">
+                                <ListItem text="List item 3.1" />
+                                <ListItem text="List item 3.2" />
+                                <ListItem text="List item 3.3" />
+                            </ListGroup>
+                        </List>
+                    </div>
+                    <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
+                </ActionSheet>
+            </section>
+
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        filter={true}
+                        title="Select Item">
+                    </ActionSheetHeader>
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListGroup label="Group 1" root>
+                                <ListItem text="List item 1.1" />
+                                <ListItem text="List item 1.2" />
+                                <ListItem text="List item 1.3" />
+                            </ListGroup>
+                            <ListGroup label="Group 2">
+                                <ListItem text="List item 2.1" />
+                                <ListItem text="List item 2.2" />
+                                <ListItem text="List item 2.3" />
+                            </ListGroup>
+                            <ListGroup label="Group 3">
+                                <ListItem text="List item 3.1" />
+                                <ListItem text="List item 3.2" />
+                                <ListItem text="List item 3.3" />
+                            </ListGroup>
+                        </List>
+                    </div>
+                    <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
+                </ActionSheet>
+            </section>
+        </div>
+    </>
+);

package/src/action-sheet/tests/action-sheet-position.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,289 +8,62 @@ const root = ReactDOM.createRoot(
 
 const styles = `
     #test-area {
-        height: 600px;
-        transform: scale(1);
-        overflow: hidden;
+        --kendo-actionsheet-height: 300px;
+        --kendo-actionsheet-max-height: 300px;
     }
-    .k-actionsheet {
-        max-width: 200px;
-        max-height: 280px;
+    #test-area > section {
+        height: 400px;
+        outline: 1px dotted;
+        overflow: hidden;
+        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 className="k-actionsheet k-actionsheet-top">
-                    <div className="k-actionsheet-header">
-                        Top action sheet
-                    </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>
-                    <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-left">
-
-                    <div className="k-actionsheet-header">
-                        Left action sheet
-                    </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>
-                    <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-right">
-
-                    <div className="k-actionsheet-header">
-                        Right action sheet
-                    </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>
-                    <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">
-
-                    <div className="k-actionsheet-header">
-                        Bottom action sheet
-                    </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>
-                    <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>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <section>
+                <ActionSheet side="left" title="Left action sheet">
+                    <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 />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
+            <section>
+                <ActionSheet side="right" title="Right action sheet">
+                    <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 />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
+            <section>
+                <ActionSheet side="top" title="Top action sheet">
+                    <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 />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
+            <section>
+                <ActionSheet side="bottom" title="Bottom action sheet">
+                    <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 />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
         </div>
     </>
 );