@progress/kendo-themes-html 6.3.0 → 6.4.0-dev.0

package/src/multiselecttree/tests/multiselecttree.tsx

@@ -0,0 +1,179 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);

package/src/pivotgrid/tests/pivotgrid-column-menus.tsx

@@ -44,7 +44,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="grid-layout" />Include Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-down" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
@@ -53,7 +55,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="filter" />Filter Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-down" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
@@ -79,7 +83,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="grid-layout" />Include Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-up" />
+                                        </span>
                                     </div>
                                 </div>
                                 <div className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
@@ -146,7 +152,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="filter" />Filter Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-down" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
@@ -172,7 +180,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="grid-layout" />Include Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-up" />
+                                        </span>
                                     </div>
                                 </div>
                                 <div className="k-columnmenu-item-content" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
@@ -210,7 +220,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="filter" />Filter Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-down" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
@@ -236,7 +248,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="grid-layout" />Include Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-down" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
@@ -245,7 +259,9 @@ root.render(
                                     <div className="k-columnmenu-item">
                                         <Icon name="filter" />Filter Fields
                                         <span className="k-spacer"></span>
-                                        <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                                        <span className="k-expander-indicator">
+                                            <Icon name="arrow-chevron-up" />
+                                        </span>
                                     </div>
                                 </div>
                                 <div className="k-columnmenu-item-content">

package/src/scheduler/tests/scheduler-adaptive-agenda.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -17,26 +18,24 @@ root.render(
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-widget k-scheduler k-scheduler-mobile">
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-tools k-button-group">
+                                    <ButtonGroup className="k-scheduler-tools">
                                         <Button className="k-pdf" icon="file-pdf"></Button>
                                         <Button className="k-nav-calendar" icon="calendar"></Button>
                                         <Button className="k-create-event" icon="add"></Button>
-                                    </span>
+                                    </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <span className="k-scheduler-views-wrapper">
-                                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                                            <option>Agenda</option>
-                                        </select>
-                                    </span>
+                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
+                                        <option>Agenda</option>
+                                    </select>
                                 </Toolbar>
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-navigation">
-                                        <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <Button className="k-nav-current" fillMode="flat" >
-                                            Jun 13 - 20, 2013
-                                        </Button>
-                                        <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
-                                    </span>
+                                    <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-current" fillMode="flat" >
+                                        Jun 13 - 20, 2013
+                                    </Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda k-scrollbar-v">
                                     <tbody>

package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -17,26 +18,24 @@ root.render(
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-widget k-scheduler k-scheduler-mobile">
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-tools k-button-group">
+                                    <ButtonGroup className="k-scheduler-tools">
                                         <Button className="k-pdf" icon="file-pdf"></Button>
                                         <Button className="k-nav-calendar" icon="calendar"></Button>
                                         <Button className="k-create-event" icon="add"></Button>
-                                    </span>
+                                    </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <span className="k-scheduler-views-wrapper">
-                                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                                            <option>Day</option>
-                                        </select>
-                                    </span>
+                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
+                                        <option>Day</option>
+                                    </select>
                                 </Toolbar>
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-navigation">
-                                        <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <Button className="k-nav-current" fillMode="flat" >
-                                            Jun 13, 2013
-                                        </Button>
-                                        <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
-                                    </span>
+                                    <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-current" fillMode="flat" >
+                                        Jun 13, 2013
+                                    </Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-dayview k-scrollbar-v">
                                     <tbody>

package/src/scheduler/tests/scheduler-adaptive-day.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -17,26 +18,24 @@ root.render(
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-widget k-scheduler k-scheduler-mobile">
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-tools k-button-group">
+                                    <ButtonGroup className="k-scheduler-tools">
                                         <Button className="k-pdf" icon="file-pdf"></Button>
                                         <Button className="k-nav-calendar" icon="calendar"></Button>
                                         <Button className="k-create-event" icon="add"></Button>
-                                    </span>
+                                    </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <span className="k-scheduler-views-wrapper">
-                                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                                            <option>Day</option>
-                                        </select>
-                                    </span>
+                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
+                                        <option>Day</option>
+                                    </select>
                                 </Toolbar>
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-navigation">
-                                        <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <Button className="k-nav-current" fillMode="flat" >
-                                            Jun 13, 2013
-                                        </Button>
-                                        <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
-                                    </span>
+                                    <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-current" fillMode="flat" >
+                                        Jun 13, 2013
+                                    </Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-dayview k-scrollbar-v">
                                     <tbody>

package/src/scheduler/tests/scheduler-adaptive-month.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -17,26 +18,24 @@ root.render(
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-widget k-scheduler k-scheduler-mobile">
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-tools k-button-group">
+                                    <ButtonGroup className="k-scheduler-tools">
                                         <Button className="k-pdf" icon="file-pdf"></Button>
                                         <Button className="k-nav-calendar" icon="calendar"></Button>
                                         <Button className="k-create-event" icon="add"></Button>
-                                    </span>
+                                    </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <span className="k-scheduler-views-wrapper">
-                                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                                            <option>Month</option>
-                                        </select>
-                                    </span>
+                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
+                                        <option>Month</option>
+                                    </select>
                                 </Toolbar>
                                 <Toolbar className="k-scheduler-toolbar">
-                                    <span className="k-scheduler-navigation">
-                                        <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <Button className="k-nav-current" fillMode="flat" >
-                                            June, 2013
-                                        </Button>
-                                        <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
-                                    </span>
+                                    <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-current" fillMode="flat" >
+                                        June, 2013
+                                    </Button>
+                                    <span className="k-spacer"></span>
+                                    <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-monthview">
                                     <tbody>

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler k-rtl" dir="rtl">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             Sunday, June 23, 2019 - Saturday, June 29, 2019
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button selected>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button selected>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div>
                     <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda">

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             Sunday, June 23, 2019 - Saturday, June 29, 2019
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button selected>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button selected>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div>
                     <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda">

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -13,28 +14,23 @@ root.render(
             <div className="k-widget k-scheduler k-rtl" dir="rtl">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             Monday, June 24, 2013
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button selected>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button selected>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div style={{ display: "block" }}>
                     <div className="k-scheduler-layout k-scheduler-flex-layout k-scheduler-dayview">