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

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>
+
+    </>
+);

package/src/datetime-selector/tests/datetime-selector.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';
 import { Calendar } from '../../calendar';
+import { TimeSelector, TimeSelectorHeader } from '../../time-selector';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -68,156 +69,11 @@ root.render(
                                 <div className="k-datetime-calendar-wrap">
                                 </div>
                                 <div className="k-datetime-time-wrap">
-                                    <div className="k-timeselector k-reset">
-                                        <div className="k-time-part">
-                                            <div className="k-time-header">
-                                                <span className="k-title">10:00:00 AM</span>
-                                                <Button fillMode="flat" className="k-time-now">Now</Button>
-                                            </div>
-                                            <div className="k-time-list-container">
-                                                <span className="k-time-highlight"></span>
-                                                <div className="k-time-list-wrapper">
-                                                    <span className="k-title">Hour</span>
-                                                    <div className="k-time-list">
-                                                        <div className="k-content k-scrollable k-time-container">
-                                                            <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                                                <li className="k-item">
-                                                                    <span>0</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>1</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>2</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>3</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>4</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>5</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>6</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>7</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>8</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>9</span>
-                                                                </li>
-                                                            </ul>
-                                                            <div className="k-scrollable-placeholder"></div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="k-time-separator">:</div>
-                                                <div className="k-time-list-wrapper k-focus">
-                                                    <span className="k-title">Minute</span>
-                                                    <div className="k-time-list">
-                                                        <div className="k-content k-scrollable k-time-container">
-                                                            <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                                                <li className="k-item">
-                                                                    <span>0</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>1</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>2</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>3</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>4</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>5</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>6</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>7</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>8</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>9</span>
-                                                                </li>
-                                                            </ul>
-                                                            <div className="k-scrollable-placeholder"></div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="k-time-separator">:</div>
-                                                <div className="k-time-list-wrapper">
-                                                    <span className="k-title">Second</span>
-                                                    <div className="k-time-list">
-                                                        <div className="k-content k-scrollable k-time-container">
-                                                            <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                                                <li className="k-item">
-                                                                    <span>0</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>1</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>2</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>3</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>4</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>5</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>6</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>7</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>8</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>9</span>
-                                                                </li>
-                                                            </ul>
-                                                            <div className="k-scrollable-placeholder"></div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="k-time-separator">:</div>
-                                                <div className="k-time-list-wrapper">
-                                                    <span className="k-title">AM/PM</span>
-                                                    <div className="k-time-list">
-                                                        <div className="k-content k-scrollable k-time-container">
-                                                            <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                                                <li className="k-item">
-                                                                    <span>AM</span>
-                                                                </li>
-                                                                <li className="k-item">
-                                                                    <span>PM</span>
-                                                                </li>
-                                                            </ul>
-                                                            <div className="k-scrollable-placeholder"></div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <TimeSelector columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="mm" header={(
+                                        <TimeSelectorHeader title="10:00:00 AM">
+                                            <Button fillMode="flat" className="k-time-now">Now</Button>
+                                        </TimeSelectorHeader>
+                                    )}/>
                                 </div>
                             </div>
                             <ActionButtons className="k-datetime-footer" alignment="stretched">

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
 import { List, ListItem } from '../../list';
 
 const root = ReactDOM.createRoot(
@@ -8,9 +8,13 @@ const root = ReactDOM.createRoot(
 );
 
 const styles = `
-    .k-actionsheet-container {
-        width: 100%;
+    #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
         height: 600px;
+        overflow: hidden;
         position: relative;
         transform: translateZ(0);
     }
@@ -25,70 +29,45 @@ 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>Dropdownlist label</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <List size="large">
-                                <ListItem>List item</ListItem>
-                                <ListItem hover>Hover</ListItem>
-                                <ListItem focus>Focus</ListItem>
-                                <ListItem selected>Selected</ListItem>
-                                <ListItem hover selected>Hover selected</ListItem>
-                                <ListItem disabled>Disabled</ListItem>
-                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
-                                <ListItem showCheckbox>Checkbox</ListItem>
-                                <ListItem showIcon iconName="cog">Icon</ListItem>
-                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
-                            </List>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader title="Dropdownlist label" className="k-text-center" actions={[ "x" ]} filter={true} />
+                    <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>
-                </div>
+                    <ActionSheetFooter actions={[ "Cancel", "!Select" ]} />
+                </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>Dropdownlist label</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <List size="large">
-                                <ListItem>List item</ListItem>
-                                <ListItem hover>Hover</ListItem>
-                                <ListItem focus>Focus</ListItem>
-                                <ListItem selected>Selected</ListItem>
-                                <ListItem hover selected>Hover selected</ListItem>
-                                <ListItem disabled>Disabled</ListItem>
-                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
-                                <ListItem showCheckbox>Checkbox</ListItem>
-                                <ListItem showIcon iconName="cog">Icon</ListItem>
-                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
-                            </List>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader title="Dropdownlist label" className="k-text-center" actions={[ "x" ]} filter={true} />
+                    <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>
-                </div>
+                    <ActionSheetFooter actions={[ "Cancel", "!Select" ]} />
+                </ActionSheet>
             </section>
         </div>
 

package/src/icon/tests/icons.tsx

@@ -153,6 +153,7 @@ const icons = [
     "stick",
     "unstick",
     "set-column-position",
+    "clock-arrow-rotate",
     "play",
     "pause",
     "stop",

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './typography/index';
 export * from './icon/index';
 
 // Primitive components
+export * from './action-buttons/index';
 export * from './input/index';
 // export * from './picker/index';
 export * from './popup/index';
@@ -20,7 +21,6 @@ export * from './color-preview/index';
 // export * from './skeleton/index';
 
 // Native forms
-export * from './action-buttons/index';
 export * from './button/index';
 export * from './button-group/index';
 export * from './menu-button/index';
@@ -45,6 +45,7 @@ export * from './datepicker/index';
 export * from './timepicker/index';
 export * from './datetimepicker/index';
 export * from './daterangepicker/index';
+export * from './timedurationpicker/index';
 export * from './dropdowngrid/index';
 export * from './dropdownlist/index';
 // export * from './dropdowntree/index';
@@ -58,13 +59,12 @@ export * from './switch/index';
 // export * from './dropzone/index';
 
 // Command interfaces
-// export * from './action-buttons/index';
 export * from './fab/index';
 export * from './menu/index';
 // export * from './toolbar/index';
 
 // Popups and modals
-// export * from './action-sheet/index';
+export * from './action-sheet/index';
 // export * from './dialog/index';
 // export * from './drawer/index';
 // export * from './notification/index';

package/src/list/list-item.tsx

@@ -6,6 +6,7 @@ import { Icon } from '../icon';
 export interface ListItemProps {
     children?: React.ReactNode;
     className?: string;
+    text?: string;
     groupLabel?: string;
     showIcon?: boolean;
     iconName?: string;
@@ -24,6 +25,7 @@ export class ListItem extends React.Component<ListItemProps> {
         const {
             children,
             className,
+            text,
             groupLabel,
             showIcon,
             iconName,
@@ -35,6 +37,9 @@ export class ListItem extends React.Component<ListItemProps> {
             disabled,
         } = this.props;
 
+        const textOrChildren = text
+            ? text
+            : children;
 
         return (
             <li
@@ -50,7 +55,7 @@ export class ListItem extends React.Component<ListItemProps> {
                 )}>
                 {showCheckbox && <Checkbox checked={checked} />}
                 {showIcon && <Icon name={iconName} />}
-                <span className="k-list-item-text">{children}</span>
+                <span className="k-list-item-text">{textOrChildren}</span>
                 {groupLabel && groupLabel !== '' && <div className="k-list-item-group-label">{groupLabel}</div>}
             </li>
         );

package/src/multiviewcalendar/multiviewcalendar.tsx

@@ -6,6 +6,7 @@ export interface MultiViewCalendarProps {
     className?: string;
     calendarHeaderText?: string;
     calendarView?: 'month' | 'year' | 'decade' | 'century';
+    size?: null | 'small' | 'medium' | 'large';
     viewsCount?: string;
     orientation?: 'horizontal' | 'vertical';
     showCalendarFooter?: boolean;
@@ -21,6 +22,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
         viewsCount: '2',
         orientation: 'horizontal',
         calendarView: 'month',
+        size: 'medium'
     };
 
     render() {
@@ -34,6 +36,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
             showWeek,
             showOtherMonth,
             showCalendarCaption,
+            size,
             ...htmlAttributes
         } = this.props;
 
@@ -44,7 +47,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
                     className,
                     'k-calendar-range',
                 )}
-
+                size={size}
                 calendarHeaderText={calendarHeaderText}
                 calendarView={calendarView}
                 viewsCount={viewsCount}

package/src/signature/signature.tsx

@@ -55,6 +55,7 @@ export class Signature extends React.Component<SignatureProps> {
                         'k-signature-maximized': maximized
                     }
                 )}>
+                <canvas className="k-signature-canvas"></canvas>
                 <div
                     className={classNames(
                         className,
@@ -66,8 +67,9 @@ export class Signature extends React.Component<SignatureProps> {
                             className,
                             'k-signature-action',
                             'k-signature-maximize',
+                            maximized ? 'k-hidden' : ''
                         )}
-                        icon="window-maximize"
+                        icon="hyperlink-open"
                         rounded={this.props.rounded}
                         size={this.props.size}
                         fillMode="flat"
@@ -77,15 +79,14 @@ export class Signature extends React.Component<SignatureProps> {
                             className,
                             'k-signature-action',
                             'k-signature-minimize',
-                            'k-hidden'
+                            maximized ? '' : 'k-hidden'
                         )}
-                        icon="window-minimize"
+                        icon="hyperlink-open"
                         rounded={this.props.rounded}
                         size={this.props.size}
                         fillMode="flat"
                     />
                 </div>
-                <canvas className="k-signature-canvas"></canvas>
                 <div className="k-signature-line"></div>
                 <div
                     className={classNames(

package/src/signature/tests/signature-flat.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/signature/tests/signature-outline.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/signature/tests/signature.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/time-selector/index.ts

@@ -1 +1,4 @@
 export * from './time-selector';
+export * from './time-selector-column';
+export * from './time-selector-header';
+export * from './time-selector-fast-selection';