@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/src/gantt/tests/gantt-editing-popup-resources.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { NumericTextbox } from '../../numerictextbox';
 import { DropdownList } from '../../dropdownlist';
 import { Toolbar } from '../../toolbar';
@@ -20,7 +20,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtons={
+                <WindowNormal title="Edit task" actionButtons={
                     <>
                         <Button icon="save" themeColor="primary">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -168,7 +168,7 @@ export default () =>(
                             </div>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/gantt/tests/gantt-editing-popup-successors.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { DropdownList } from '../../dropdownlist';
 import { Toolbar } from '../../toolbar';
 import { Button } from '../../button';
@@ -19,7 +19,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtons={
+                <WindowNormal title="Edit task" actionButtons={
                     <>
                         <Button icon="save" themeColor="primary">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -101,7 +101,7 @@ export default () =>(
                             </div>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/grid/tests/grid-column-resizing-actions.tsx

@@ -4,7 +4,7 @@ import { Pager } from '../../pager';
 import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table';
 import { Toolbar } from '../../toolbar';
 import { Popup } from '../../popup';
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Checkbox } from '../../checkbox';
@@ -220,7 +220,7 @@ export default () =>(
             </Popup>
 
             <section>
-                <Window title="Column Width" actions={[ 'x' ]} className="k-grid-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Column Width" actions={[ 'x' ]} className="k-grid-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Apply</Button>
                         <Button>Cancel</Button>
@@ -242,7 +242,7 @@ export default () =>(
                         >
                         </FormField>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
         </div>
     </>

package/src/grid/tests/grid-editing-popup.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Checkbox } from '../../checkbox';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
@@ -24,7 +24,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Edit task" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary" icon="save">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -42,7 +42,7 @@ export default () =>(
                         } />
                         <FormField label="Boolean data field label" editor={ <DropdownList value="True" /> } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/multiselecttree/index.ts

@@ -1 +1,7 @@
 export * from './multiselecttree.spec';
+export * from './templates/multiselecttree-normal';
+export * from './templates/multiselecttree-arrow-button';
+export * from './templates/multiselecttree-value';
+export * from './templates/multiselecttree-adaptive';
+export * from './templates/multiselecttree-popup';
+export * from './templates/multiselecttree-filtering';

package/src/multiselecttree/multiselecttree.spec.tsx

@@ -10,6 +10,8 @@ import {
 import { Button } from '../button';
 import { ChipList } from '../chip';
 import { Popup } from '../popup';
+import { ActionSheet, ActionSheetHeader, KendoActionSheetProps } from '../action-sheet';
+import { TreeviewGroup, TreeviewItem, Treeview } from '../treeview';
 
 export const MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
 
@@ -52,6 +54,8 @@ export type KendoMultiSelectTreeProps = KendoMultiSelectTreeOptions & {
     showArrowButton?: boolean;
     opened?: boolean;
     dir?: 'ltr' | 'rtl';
+    adaptive?: boolean;
+    adaptiveSettings?: KendoActionSheetProps;
 };
 
 export type KendoMultiSelectTreeState = { [K in (typeof states)[number]]?: boolean };
@@ -81,6 +85,8 @@ export const MultiSelectTree = (
         readonly,
         opened,
         dir,
+        adaptive,
+        adaptiveSettings,
         ...other
     } = props;
 
@@ -141,6 +147,37 @@ export const MultiSelectTree = (
                     {popup}
                 </Popup>
             }
+            { adaptive &&
+                <ActionSheet adaptive={true} {...adaptiveSettings} >
+                    <ActionSheetHeader
+                        filter
+                        actions={[ 'x' ]}
+                        title="Select value">
+                    </ActionSheetHeader>
+                    <Treeview size="large">
+                        <TreeviewItem text="Root 1" />
+                        <TreeviewItem text="Root 2" expanded>
+                            <TreeviewGroup>
+                                <TreeviewItem text="Child 2.1" />
+                                <TreeviewItem text="Child 2.2">
+                                    <TreeviewGroup>
+                                        <TreeviewItem text="Child 2.2.1" />
+                                    </TreeviewGroup>
+                                </TreeviewItem>
+                                <TreeviewItem text="Child 2.3" />
+                                <TreeviewItem leafClassName="k-treeview-load-more-button" text="Load more ..." />
+                            </TreeviewGroup>
+                        </TreeviewItem>
+                        <TreeviewItem text="Root 3">
+                            <TreeviewGroup>
+                                <TreeviewItem text="Child 3.1" />
+                                <TreeviewItem text="Child 3.2" />
+                                <TreeviewItem text="Child 3.3" />
+                            </TreeviewGroup>
+                        </TreeviewItem>
+                    </Treeview>
+                </ActionSheet>
+            }
         </>
     );
 };

package/src/multiselecttree/templates/multiselecttree-adaptive.tsx

@@ -0,0 +1,8 @@
+import MultiSelectTree from "../multiselecttree.spec";
+
+export const MultiSelectTreeAdaptive = (props) => (
+    <MultiSelectTree
+        adaptive={true}
+        {...props}
+    />
+);

package/src/multiselecttree/templates/multiselecttree-arrow-button.tsx

@@ -0,0 +1,8 @@
+import MultiSelectTree from "../multiselecttree.spec";
+
+export const MultiSelectTreeArrowButton = (props) => (
+    <MultiSelectTree
+        showArrowButton
+        {...props}
+    />
+);

package/src/multiselecttree/templates/multiselecttree-filtering.tsx

@@ -0,0 +1,47 @@
+
+import { Checkbox } from "../../checkbox";
+import { Icon } from "../../icon";
+import { Textbox } from "../../textbox";
+import { TreeviewGroup, TreeviewItem, Treeview } from "../../treeview";
+import MultiSelectTree from "../multiselecttree.spec";
+
+export const MultiSelectTreeFiltering = (props) => (
+    <MultiSelectTree opened
+        popup={(
+            <>
+                <div className="k-list-filter">
+                    <Textbox
+                        prefix={
+                            <>
+                                <Icon icon="search" />
+                            </>
+                        }
+                    />
+                </div>
+                <div className="k-check-all">
+                    <Checkbox />
+                    <span className="k-checkbox-label">
+                        Check all
+                    </span>
+                </div>
+                <Treeview dir={props.dir}>
+                    <TreeviewItem text="Furniture" showCheckbox checked>
+                        <TreeviewGroup>
+                            <TreeviewItem text="Child 1" showCheckbox />
+                            <TreeviewItem text="Child 2" showCheckbox />
+                            <TreeviewItem text="Child 3" showCheckbox />
+                        </TreeviewGroup>
+                    </TreeviewItem>
+                    <TreeviewItem text="Decor" showCheckbox>
+                        <TreeviewGroup>
+                            <TreeviewItem text="Child 1" showCheckbox />
+                            <TreeviewItem text="Child 2" showCheckbox />
+                            <TreeviewItem text="Child 3" showCheckbox />
+                        </TreeviewGroup>
+                    </TreeviewItem>
+                </Treeview>
+            </>
+        )}
+        {...props}
+    />
+);

package/src/multiselecttree/templates/multiselecttree-normal.tsx

@@ -0,0 +1,3 @@
+import MultiSelectTree from "../multiselecttree.spec";
+
+export const MultiSelectTreeNormal = (props) => <MultiSelectTree {...props} />;

package/src/multiselecttree/templates/multiselecttree-popup.tsx

@@ -0,0 +1,36 @@
+
+import { Checkbox } from "../../checkbox";
+import { TreeviewGroup, TreeviewItem, Treeview } from "../../treeview";
+import MultiSelectTree from "../multiselecttree.spec";
+
+export const MultiSelectTreePopup = (props) => (
+    <MultiSelectTree opened
+        popup={(
+            <>
+                <div className="k-check-all">
+                    <Checkbox />
+                    <span className="k-checkbox-label">
+                        Check all
+                    </span>
+                </div>
+                <Treeview dir={props.dir}>
+                    <TreeviewItem text="Furniture" showCheckbox checked>
+                        <TreeviewGroup>
+                            <TreeviewItem text="Child 1" showCheckbox />
+                            <TreeviewItem text="Child 2" showCheckbox />
+                            <TreeviewItem text="Child 3" showCheckbox />
+                        </TreeviewGroup>
+                    </TreeviewItem>
+                    <TreeviewItem text="Decor" showCheckbox>
+                        <TreeviewGroup>
+                            <TreeviewItem text="Child 1" showCheckbox />
+                            <TreeviewItem text="Child 2" showCheckbox />
+                            <TreeviewItem text="Child 3" showCheckbox />
+                        </TreeviewGroup>
+                    </TreeviewItem>
+                </Treeview>
+            </>
+        )}
+        {...props}
+    />
+);

package/src/multiselecttree/templates/multiselecttree-value.tsx

@@ -0,0 +1,12 @@
+import MultiSelectTree from "../multiselecttree.spec";
+import { Chip, ChipAction } from '../../chip';
+
+export const MultiSelectTreeValue = ({ size, rounded, children, ...other }: any) => (
+    <>
+        <MultiSelectTree size={size} rounded={rounded} tags={(
+            <Chip text={children} actions={ <ChipAction type="remove"/>} size={size} rounded={rounded} />
+        )}
+        {...other}
+        />
+    </>
+);

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

@@ -0,0 +1,33 @@
+import { MultiSelectTreeAdaptive } from '../../multiselecttree';
+
+const styles = `
+    #test-area {
+        --kendo-actionsheet-height: 500px;
+        --kendo-actionsheet-max-height: 500px;
+    }
+    #test-area > section {
+        height: 600px;
+        outline: 1px dotted;
+        overflow: hidden;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <MultiSelectTreeAdaptive />
+            </section>
+            <section>
+                <MultiSelectTreeAdaptive adaptiveSettings={{ fullscreen: true }} />
+            </section>
+        </div>
+    </>
+);

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

@@ -1,5 +1,5 @@
 import { Chip, ChipAction } from '../../chip';
-import { MultiSelectTree } from '../../multiselecttree';
+import { MultiSelectTree, MultiSelectTreeNormal, MultiSelectTreeArrowButton, MultiSelectTreeValue } from '..';
 
 
 const styles = `
@@ -14,158 +14,64 @@ export default () =>(
         <div id="test-area" className="k-d-grid">
 
             <span></span>
-            <span>MultiSelectTree Flat</span>
-            <span>MultiSelectTree Flat RTL</span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
 
-            <div>Empty</div>
+            <div>empty</div>
             <div>
-                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+                <MultiSelectTreeNormal fillMode="flat" placeholder="MultiSelectTree..." />
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+                <MultiSelectTreeNormal fillMode="flat" placeholder="MultiSelectTree..." />
             </div>
 
-            <div>Arrow button</div>
+            <div>arrow button</div>
             <div>
-                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+                <MultiSelectTreeArrowButton fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+                <MultiSelectTreeArrowButton fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
             </div>
 
-            <div>Normal</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-
-            <div>Hover</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-
-            <div>Focus</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-
-            <div>Disabled</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-
-            <div>Invalid</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-
-            <div>Invalid + Focus</div>
-            <div>
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="flat"
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
+            {[ 'normal', ...MultiSelectTree.states ].map((state) => (
+                <>
+                    <div>{state}</div>
+                    <div>
+                        <MultiSelectTreeValue fillMode="flat" { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                    <div dir="rtl">
+                        <MultiSelectTreeValue fillMode="flat" { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                </>
+            ))}
 
-            <div>Loading</div>
+            <div>invalid + focus</div>
             <div>
-                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading/>
+                <MultiSelectTreeValue fillMode="flat" invalid focus>invalid + focus</MultiSelectTreeValue>
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading />
+                <MultiSelectTreeValue fillMode="flat" invalid focus>invalid + focus</MultiSelectTreeValue>
             </div>
 
-            <div>Multi Line + Overflow</div>
+            <div>multi line + overflow</div>
             <div>
-                <MultiSelectTree fillMode="flat"
+                <MultiSelectTreeNormal
+                    fillMode="flat"
                     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"/> } />
+                            <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 fillMode="flat"
+                <MultiSelectTreeNormal
+                    fillMode="flat"
                     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"/> } />
+                            <Chip text="multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line + overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
                         </>
                     )}
                 />