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

package/src/multiselecttree/tests/multiselecttree-flat.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 Flat</span>
+            <span>MultiSelectTree Flat RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree 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>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree 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"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree 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"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);

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

@@ -0,0 +1,119 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '..';
+import { Checkbox } from '../../checkbox';
+import { Textbox } from '../../textbox';
+import { Icon } from '../../icon';
+import { Treeview, TreeviewGroup, TreeviewItem } from '../../treeview';
+
+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>Opened</div>
+            <div>
+                <MultiSelectTree opened
+                    tags={(
+                        <>
+                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                    popup={(
+                        <>
+                            <div className="k-list-filter">
+                                <Textbox
+                                    prefix={
+                                        <>
+                                            <Icon name="search" />
+                                        </>
+                                    }
+                                />
+                            </div>
+                            <div className="k-check-all">
+                                <Checkbox/>
+                                <span className="k-checkbox-label">
+                                    Check all
+                                </span>
+                            </div>
+                            <Treeview>
+                                <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>
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree opened
+                    tags={(
+                        <>
+                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                    popup={(
+                        <>
+                            <div className="k-list-filter">
+                                <Textbox
+                                    prefix={
+                                        <>
+                                            <Icon name="search" />
+                                        </>
+                                    }
+                                />
+                            </div>
+                            <div className="k-check-all">
+                                <Checkbox/>
+                                <span className="k-checkbox-label">
+                                    Check all
+                                </span>
+                            </div>
+                            <Treeview>
+                                <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>
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);

package/src/multiselecttree/tests/multiselecttree-outline.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 Outline</span>
+            <span>MultiSelectTree Outline RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    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 fillMode="outline"
+                    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/multiselecttree/tests/multiselecttree-size.tsx

@@ -0,0 +1,54 @@
+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 {
+        max-width: 600px;
+        grid-template-columns: 120px repeat(1, 1fr);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span>small</span>
+            <MultiSelectTree
+                size="small"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+
+            <span>medium</span>
+            <MultiSelectTree
+                size="medium"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+
+            <span>large</span>
+            <MultiSelectTree
+                size="large"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+        </div>
+    </>
+);