@progress/kendo-themes-html 5.8.2-dev.5 → 5.9.0

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-data-table.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
+
+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">
+                        <div className="k-data-table k-table-lg">
+                            <div className="k-table-header">
+                                <div className="k-table-header-wrap">
+                                    <table className="k-table">
+                                        <colgroup>
+                                            <col style={{ width: '50px' }} />
+                                            <col style={{ width: "160px" }} />
+                                            <col />
+                                        </colgroup>
+                                        <thead className="k-table-thead">
+                                            <tr className="k-table-row">
+                                                <th className="k-table-th">ID</th>
+                                                <th className="k-table-th">Name</th>
+                                                <th className="k-table-th">Job Title</th>
+                                            </tr>
+                                        </thead>
+                                    </table>
+                                </div>
+                            </div>
+                            <div className="k-table-group-sticky-header">
+                                <span className="k-table-th">Initial group</span>
+                            </div>
+                            <div className="k-table-scroller">
+                                <ul className="k-table k-table-list">
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">1</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
+                                        <span className="k-table-td">Data 1.3</span>
+                                    </li>
+                                    <li className="k-table-row k-table-alt-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">2</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
+                                        <span className="k-table-td">Data 2.3</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">3</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
+                                        <span className="k-table-td">Data 3.3</span>
+                                    </li>
+                                    <li className="k-table-group-row">
+                                        <span className="k-table-th">Group</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">4</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
+                                        <span className="k-table-td">Data 4.3</span>
+                                    </li>
+                                    <li className="k-table-row k-table-alt-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">5</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
+                                        <span className="k-table-td">Data 5.3</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">6</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
+                                        <span className="k-table-td">Data 6.3</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-table-footer">
+                                <span className="k-table-td">30 records in total</span>
+                            </div>
+                        </div>
+                    </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">
+                        <div className="k-data-table k-table-lg">
+                            <div className="k-table-header">
+                                <div className="k-table-header-wrap">
+                                    <table className="k-table">
+                                        <colgroup>
+                                            <col style={{ width: '50px' }} />
+                                            <col style={{ width: "160px" }} />
+                                            <col />
+                                        </colgroup>
+                                        <thead className="k-table-thead">
+                                            <tr className="k-table-row">
+                                                <th className="k-table-th">ID</th>
+                                                <th className="k-table-th">Name</th>
+                                                <th className="k-table-th">Job Title</th>
+                                            </tr>
+                                        </thead>
+                                    </table>
+                                </div>
+                            </div>
+                            <div className="k-table-group-sticky-header">
+                                <span className="k-table-th">Initial group</span>
+                            </div>
+                            <div className="k-table-scroller">
+                                <ul className="k-table k-table-list">
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">1</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
+                                        <span className="k-table-td">Data 1.3</span>
+                                    </li>
+                                    <li className="k-table-row k-table-alt-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">2</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
+                                        <span className="k-table-td">Data 2.3</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">3</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
+                                        <span className="k-table-td">Data 3.3</span>
+                                    </li>
+                                    <li className="k-table-group-row">
+                                        <span className="k-table-th">Group</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">4</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
+                                        <span className="k-table-td">Data 4.3</span>
+                                    </li>
+                                    <li className="k-table-row k-table-alt-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">5</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
+                                        <span className="k-table-td">Data 5.3</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">6</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
+                                        <span className="k-table-td">Data 6.3</span>
+                                    </li>
+                                    <li className="k-table-group-row">
+                                        <span className="k-table-th">Group</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">4</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
+                                        <span className="k-table-td">Data 4.3</span>
+                                    </li>
+                                    <li className="k-table-row k-table-alt-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">5</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
+                                        <span className="k-table-td">Data 5.3</span>
+                                    </li>
+                                    <li className="k-table-row">
+                                        <span style={{ width: '50px' }} className="k-table-td">6</span>
+                                        <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
+                                        <span className="k-table-td">Data 6.3</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-table-footer">
+                                <span className="k-table-td">30 records in total</span>
+                            </div>
+                        </div>
+                    </div>
+                    <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
+                </ActionSheet>
+            </section>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,97 @@
+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, TimeSelectorHeader } 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" columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="HH" header={(
+                                    <TimeSelectorHeader title="10:00:00 АМ">
+                                        <Button fillMode="flat" className="k-time-now">Now</Button>
+                                    </TimeSelectorHeader>
+                                )}/>
+                            </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>
+    </>
+);