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

package/src/filemanager/tests/filemanager-preview.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
@@ -32,15 +33,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -157,15 +158,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -273,15 +274,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">

package/src/grid/tests/grid-column-menu-rtl.tsx

@@ -83,7 +83,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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 className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
                                     <div className="k-column-list-wrapper">
@@ -118,7 +120,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -132,7 +136,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -156,7 +162,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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 className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
                                     <div className="k-column-list-wrapper">
@@ -197,7 +205,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -211,7 +221,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -239,7 +251,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -248,7 +262,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -262,7 +278,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <div className="k-column-list">
@@ -296,7 +314,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -305,7 +325,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <form className="k-filter-menu k-group k-reset">
@@ -334,7 +356,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -358,7 +382,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -367,7 +393,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <form className="k-filter-menu k-group k-reset">
@@ -399,7 +427,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>

package/src/grid/tests/grid-column-menu.tsx

@@ -83,7 +83,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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 className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
                                     <div className="k-column-list-wrapper">
@@ -118,7 +120,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -132,7 +136,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -156,7 +162,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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 className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
                                     <div className="k-column-list-wrapper">
@@ -197,7 +205,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -211,7 +221,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -239,7 +251,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -248,7 +262,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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>
@@ -262,7 +278,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <div className="k-column-list">
@@ -296,7 +314,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -305,7 +325,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <form className="k-filter-menu k-group k-reset">
@@ -334,7 +356,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>
@@ -358,7 +382,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="columns" />Columns
                                     <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>
@@ -367,7 +393,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="filter" />Filter
                                     <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 className="k-columnmenu-item-content k-columns-item">
                                     <form className="k-filter-menu k-group k-reset">
@@ -399,7 +427,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     <Icon name="set-column-position" />Set column position
                                     <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>

package/src/index.ts

@@ -31,12 +31,14 @@ export * from './checkbox/index';
 export * from './radio/index';
 // export * from './listbox/index';
 // export * from './progressbar/index';
-// export * from './slider/index';
+export * from './slider/index';
 
 // Augmented inputs
 export * from './floating-label/index';
 export * from './autocomplete/index';
 export * from './colorpalette/index';
+export * from './colorgradient/index';
+export * from './coloreditor/index';
 export * from './captcha/index';
 export * from './colorpicker/index';
 export * from './combobox/index';
@@ -51,6 +53,7 @@ export * from './dropdownlist/index';
 export * from './dropdowntree/index';
 export * from './maskedtextbox/index';
 export * from './multiselect/index';
+export * from './multiselecttree/index';
 export * from './numerictextbox/index';
 // export * from './rating/index';
 export * from './searchbox/index';
@@ -74,8 +77,8 @@ export * from './window/index';
 
 // Navigation
 export * from './appbar/index';
-// export * from './bottom-nav/index';
-// export * from './breadcrumb/index';
+export * from './bottom-nav/index';
+export * from './breadcrumb/index';
 export * from './pager/index';
 // export * from './stepper/index';
 // export * from './tabstrip/index';
@@ -84,7 +87,7 @@ export * from './treeview/index';
 
 // Layout & containers
 export * from './card/index';
-// export * from './expander/index';
+export * from './expansion-panel/index';
 // export * from './panelbar/index';
 // export * from './splitter/index';
 // export * from './tile-layout/index';

package/src/multiselecttree/index.ts

@@ -0,0 +1 @@
+export * from './multiselecttree.spec';

package/src/multiselecttree/multiselecttree.spec.tsx

@@ -0,0 +1,150 @@
+import { classNames, States, Size, Roundness, FillMode } from '../utils';
+import {
+    Input,
+    InputClearValue,
+    InputLoadingIcon,
+    InputPrefix,
+    InputSuffix,
+    InputValidationIcon
+} from '../input';
+import { Button } from '../button';
+import { ChipList } from '../chip';
+import { Popup } from '../popup';
+
+export const MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+];
+
+const options = {
+    size: [ Size.small, Size.medium, Size.large ],
+    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
+    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline ],
+};
+
+const defaultProps = {
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+};
+
+export type KendoMultiSelectTreeOptions = {
+    size?: (typeof options.size)[number] | null;
+    rounded?: (typeof options.rounded)[number] | null;
+    fillMode?: (typeof options.fillMode)[number] | null;
+};
+
+export type KendoMultiSelectTreeProps = KendoMultiSelectTreeOptions & {
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    type?: string;
+    placeholder?: string;
+    tags?: JSX.Element;
+    popup?: JSX.Element;
+    showArrowButton?: boolean;
+    opened?: boolean;
+};
+
+export type KendoMultiSelectTreeState = { [K in (typeof states)[number]]?: boolean };
+
+export const MultiSelectTree = (
+    props: KendoMultiSelectTreeProps &
+        KendoMultiSelectTreeState &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        prefix,
+        suffix,
+        placeholder,
+        tags,
+        popup,
+        size,
+        rounded,
+        fillMode,
+        showArrowButton,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        opened,
+        ...other
+    } = props;
+
+
+    return (
+        <>
+            <Input
+                {...other}
+                size={size}
+                rounded={rounded}
+                fillMode={fillMode}
+                hover={hover}
+                focus={focus}
+                valid={valid}
+                invalid={invalid}
+                required={required}
+                loading={loading}
+                disabled={disabled}
+                readonly={readonly}
+                className={classNames(props.className, MULTISELECTTREE_CLASSNAME)}
+            >
+                <InputPrefix>{prefix}</InputPrefix>
+                <ChipList size={size} className="k-input-values">
+                    <>
+                        {tags}
+                    </>
+                </ChipList>
+                <span className="k-input-inner">
+                    <span className="k-input-value-text">{placeholder}</span>
+                </span>
+                <InputValidationIcon
+                    valid={valid}
+                    invalid={invalid}
+                    loading={loading}
+                    disabled={disabled} />
+                <InputLoadingIcon
+                    loading={loading}
+                    disabled={disabled} />
+                <InputClearValue
+                    loading={loading}
+                    disabled={disabled}
+                    readonly={readonly}
+                    value={tags ? 'value' : ''} />
+                <InputSuffix>{suffix}</InputSuffix>
+                {showArrowButton && (
+                    <Button
+                        className="k-input-button"
+                        icon="caret-alt-down"
+                        rounded={null}
+                        size={size}
+                        fillMode={fillMode}
+                    />
+                )}
+            </Input>
+            { opened && popup &&
+                <Popup className="k-multiselecttree-popup">
+                    {popup}
+                </Popup>
+            }
+        </>
+    );
+};
+
+MultiSelectTree.states = states;
+MultiSelectTree.options = options;
+MultiSelectTree.className = MULTISELECTTREE_CLASSNAME;
+MultiSelectTree.defaultProps = defaultProps;
+
+export default MultiSelectTree;