@progress/kendo-themes-html 5.0.0-beta.2 → 5.0.0-beta.3

package/lib/jsx-runtime.js

@@ -42,8 +42,14 @@ const attrMap = {
     // Chip
     showavatar: 'showAvatar',
 
-    // Menu list
-    contentTemplate: 'contentTemplate'
+    // Hierarchy
+    haschildren: 'hasChildren',
+
+    // Treeview
+    leafclassname: 'leafClassName',
+
+    // Template
+    contenttemplate: 'contentTemplate'
 };
 
 const booleanAttr = new Set([
@@ -77,6 +83,12 @@ const booleanAttr = new Set([
     'virtualization',
     'root',
 
+    'open',
+    'expanded',
+    'hasChildren',
+
+    'showArrow',
+
     'showAvatar',
 
     'aria'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -34,13 +34,13 @@
     "dev": "rollup -cw"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.7",
+    "@babel/preset-react": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "rollup": "^2.59.0"
+    "@rollup/plugin-node-resolve": "^13.1.2",
+    "rollup": "^2.62.0"
   },
-  "gitHead": "13e32ba172a1fa6fc172c9d989974ebfccef19e6"
+  "gitHead": "a508e10c60c1c14b569a908ef7f8584cf449a421"
 }

package/src/button/button.jsx

@@ -87,7 +87,7 @@ function ButtonStatic(props) {
     if (legacy) {
         return (
             <button type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                <IconStatic name={icon} />
+                <IconStatic className="k-button-icon" name={icon} />
                 { text }
             </button>
         );

package/src/colorpicker/color-preview.jsx

@@ -39,28 +39,35 @@ function ColorPreviewStatic(props) {
 
     if (legacy) {
 
-        let legacyClasses = [
-            ownClassName,
-            'k-selected-color',
-            {
-                'k-no-color': color === ''
-            }
-        ];
-
-        let legacyStyles = {
-            'background-color': color
-        };
-
-        if (iconName === '') {
-            return (
-                <span className={legacyClasses} style={legacyStyles}></span>
-            );
-        }
+        // let legacyClasses = [
+        //     ownClassName,
+        //     'k-selected-color',
+        //     {
+        //         'k-no-color': color === ''
+        //     }
+        // ];
+
+        // let legacyStyles = {
+        //     'background-color': color
+        // };
+
+        // if (iconName === '') {
+        //     return (
+        //         <span className={legacyClasses} style={legacyStyles}></span>
+        //     );
+        // }
+
+        // return (
+        //     <IconStatic className="k-tool-icon" name={iconName}>
+        //         <span className={legacyClasses} style={legacyStyles}></span>
+        //     </IconStatic>
+        // );
 
         return (
-            <IconStatic className="k-tool-icon" name={iconName}>
-                <span className={legacyClasses} style={legacyStyles}></span>
-            </IconStatic>
+            <span className={colorPreviewClasses} {...ariaAttr} {...htmlAttributes}>
+                {iconName && <IconStatic name={iconName} className="k-color-preview-icon" />}
+                <span className="k-color-preview-mask" style={styles}></span>
+            </span>
         );
 
     }

package/src/combobox/combobox.jsx

@@ -76,17 +76,15 @@ function ComboboxStatic(props) {
             'k-widget',
             'k-combobox',
             {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
                 'k-state-disabled': disabled === true
             }
         ];
 
         let legacyWrapClasses = [
-            'k-dropdown-wrap',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focused': focus === true,
-                'k-state-invalid': invalid === true
-            }
+            'k-dropdown-wrap'
         ];
 
         return (

package/src/dropdownlist/dropdownlist.jsx

@@ -88,17 +88,15 @@ function DropdownListStatic(props) {
             'k-widget',
             'k-dropdown',
             {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
                 'k-state-disabled': disabled === true
             }
         ];
 
         let legacyWrapClasses = [
-            'k-dropdown-wrap',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focused': focus === true,
-                'k-state-invalid': invalid === true
-            }
+            'k-dropdown-wrap'
         ];
 
         return (

package/src/fab/README.md

@@ -0,0 +1,19 @@
+```html
+<!-- default rendering -->
+<button type="button" class="k-fab k-fab-rectangle k-fab-md k-rounded-full k-fab-solid k-fab-solid-primary">
+    <span class="k-fab-icon k-icon k-i-plus"></span>
+    <span class="k-fab-text">Create</span>
+</button>
+
+<!-- canonical rendering -->
+<button class="
+    k-fab
+    k-fab-{size}
+    k-fab-{rounded}
+    k-fab-{fillMode}
+    k-fab-{fillMode}-{themeColor}
+">
+    {icon !== '' && <span class="k-fab-icon k-icon k-i-{icon}"></span>}
+    {text !== '' && <span class="k-fab-text">{text}</span>}
+</button>
+```

package/src/fab/fab.jsx

@@ -0,0 +1,154 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component/index';
+import { IconStatic } from '../icon/index';
+
+class Fab extends Component {
+
+    init() {
+        this._props.text = this.element.innerHTML;
+    }
+
+    render() {
+        return <FabStatic {...this.props} />;
+    }
+}
+
+function FabStatic(props) {
+    const {
+        className: ownClassName,
+
+        text,
+        type,
+
+        size,
+        rounded,
+        shape,
+
+        fillMode,
+        themeColor,
+
+        icon,
+
+        position,
+
+        hover,
+        focus,
+        active,
+        selected,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let buttonClasses = [
+        ownClassName,
+        'k-fab',
+        styles.positionClass( position, 'k'),
+        styles.shapeClass( shape, 'k-fab' ),
+        styles.sizeClass( size, 'k-fab' ),
+        styles.roundedClass( rounded ),
+        styles.fillModeClass( fillMode, 'k-fab' ),
+        styles.themeColorClass( fillMode, themeColor, 'k-fab' ),
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-active': active === true,
+            'k-selected': selected === true,
+            'k-disabled': disabled === true
+        }
+    ];
+
+    // Augment attributes
+    htmlAttributes.disabled = disabled;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+        let legacyClasses = [
+            ownClassName,
+            'k-fab',
+            `k-fab-${themeColor}`,
+            {
+                'k-fab-rectangle': rounded === null,
+                'k-fab-rounded': rounded !== 'full' && rounded !== null,
+                'k-fab-pill': rounded === 'full'
+            },
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-active': active === true,
+                'k-state-selected': selected === true,
+                'k-state-disabled': disabled === true
+            },
+            styles.positionClass( position, 'k'),
+            styles.sizeClass( size, 'k-fab' )
+        ];
+
+        return (
+            <button type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
+                <IconStatic className="k-fab-icon" name={icon} />
+                {text && <span className="k-fab-text">{text}</span>}
+            </button>
+        );
+    }
+
+    return (
+        <button type={type} className={buttonClasses} {...ariaAttr} {...htmlAttributes}>
+            <IconStatic className="k-fab-icon" name={icon} />
+            {text && <span className="k-fab-text">{text}</span>}
+        </button>
+    );
+}
+
+FabStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    text: '',
+    icon: '',
+
+    className: '',
+    type: 'button',
+
+    size: 'medium',
+    rounded: 'full',
+    shape: 'rectangle',
+
+    position: null,
+
+    fillMode: 'solid',
+    themeColor: 'primary'
+};
+
+FabStatic.propTypes = {
+    text: typeof '',
+    icon: typeof '',
+
+    type: typeof [ 'button', 'submit', 'reset' ],
+
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
+    shape: typeof [ null, 'rectangle', 'square' ],
+    fillMode: typeof [ null, 'solid' ],
+    themeColor: typeof [ null, 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse' ],
+
+    position: typeof [ null, 'top-start', 'top-center', 'top-end', 'middle-start', 'middle-end', 'bottom-start', 'bottom-center', 'bottom-end' ],
+
+    hover: typeof false,
+    focus: typeof false,
+    active: typeof false,
+    selected: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    className: typeof '',
+    htmlAttributes: typeof []
+};
+
+export { Fab, FabStatic };

package/src/fab/index.js

@@ -0,0 +1 @@
+export * from './fab.jsx';

package/src/index.js

@@ -71,10 +71,8 @@ export * from './switch/index';
 
 // Command interfaces
 // export * from './action-buttons/index';
-// export * from './fab/index';
-// export * from './menu/index';
-export * from './menulist/index';
-export * from './menuitem/index';
+export * from './fab/index';
+export * from './menu/index';
 // export * from './toolbar/index';
 
 // Popups and modals
@@ -93,6 +91,7 @@ export * from './menuitem/index';
 // export * from './pager/index';
 // export * from './stepper/index';
 // export * from './tabstrip/index';
+export * from './treeview/index';
 // export * from './wizard/index';
 
 // Layout & containers

package/src/list/README.md

@@ -90,4 +90,18 @@
         </ul>
     </div>
 </div>
+
+<!-- filter -->
+<div class="k-list-filter">
+    <span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off">
+        <span class="k-input-icon k-icon k-i-search"></span>
+        <input type="text" class="k-input-inner" placeholder="Filter..." autocomplete="off">
+    </span>
+</div>
+
+<!-- no data template -->
+<div class="k-list k-list-md">
+    <div class="k-no-data">No data found.</div>
+</div>
 ```
+

package/src/list/list-item.jsx

@@ -61,7 +61,7 @@ function ListItemStatic(props) {
     if (legacy) {
         return (
             <li className={legacyListItemClasses} {...ariaAttr} {...htmlAttributes}>
-                {showCheckbox && <CheckboxStatic checked={checked} />}
+                {showCheckbox && <span className="k-checkbox-wrap"><CheckboxStatic checked={checked} /></span>}
                 {showIcon && <IconStatic name={iconName} />}
                 <span className="k-list-item-text">{children}</span>
                 {groupLabel !== '' && <div className="k-group">{groupLabel}</div>}
@@ -71,7 +71,7 @@ function ListItemStatic(props) {
 
     return (
         <li className={listItemClasses} {...ariaAttr} {...htmlAttributes}>
-            {showCheckbox && <CheckboxStatic checked={checked} />}
+            {showCheckbox && <span className="k-checkbox-wrap"><CheckboxStatic checked={checked} /></span>}
             {showIcon && <IconStatic name={iconName} />}
             <span className="k-list-item-text">{children}</span>
             {groupLabel !== '' && <div className="k-list-item-group-label">{groupLabel}</div>}

package/src/maskedtextbox/maskedtextbox.jsx

@@ -71,23 +71,20 @@ function MaskedTextboxStatic(props) {
             ownClassName,
             'k-widget',
             'k-maskedtextbox',
-            {
-                'k-state-disabled': disabled === true
-            }
-        ];
-
-        let legacyInputClasses = [
-            'k-textbox',
             {
                 'k-state-hover': hover === true,
-                'k-state-focused': focus === true,
-                'k-state-invalid': invalid === true
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-disabled': disabled === true
             }
         ];
 
         return (
             <InputStatic className={legacyClasses} {...htmlAttributes}>
-                <input type={type} className={legacyInputClasses} {...inputAttributes} />
+                <input type={type} className="k-input" {...inputAttributes} />
+                <InputValidationIconStatic {...props} />
+                <InputLoadingIconStatic {...props} />
+                <InputClearValueStatic {...props} />
             </InputStatic>
         );
     }

package/src/menu/README.md

@@ -0,0 +1,40 @@
+```html
+<!-- default rendering -->
+<ul class="k-group k-menu-group k-reset"></ul>
+
+<!-- canonical rendering -->
+<ul class="
+        k-group k-menu-group k-reset
+        k-menulist-{size}
+    "
+></ul>
+```
+
+```html
+<!-- default rendering -->
+<li class="k-item k-menu-item">
+     <span class="k-link k-menu-link">
+        {icon !== '' && <span class="k-icon k-i-{icon}"></span>}
+        {text !== '' && <span class="k-menu-link-text">Text</span>}
+        <span className="k-menu-expand-arrow k-icon k-i-{arrowIconName || 'none'}"></span>
+     </span>
+</li>
+
+<!-- canonical rendering -->
+<li class="
+    k-item
+    k-menu-item
+    {hover && 'k-hover'}
+    {focus && 'k-focus'}
+    {active && 'k-active'}
+    {disabled && 'k-disabled'}
+" disabled={disabled}>
+     <span class="k-link k-menu-link">
+        {icon !== '' && <span class="k-icon k-i-{icon}"></span>}
+        {text !== '' && <span class="k-menu-link-text">Text</span>}
+        {showArrow && <span className="k-menu-expand-arrow">
+           <span className="k-icon k-i-{arrowIconName || 'none'}"></span>
+        </span>}
+     </span>
+</li>
+```

package/src/{menuitem → menu}/index.js

@@ -1,2 +1,3 @@
+export * from './menu-list.jsx';
 export * from './menu-item.jsx';
 export * from './menu-item-content.jsx';

package/src/{menuitem → menu}/menu-item.jsx

@@ -79,48 +79,52 @@ function MenuItemStatic(props) {
         }
     ];
 
+    let expandArrowName = arrowIconName;
 
-    let legacyMenuItemClasses = [
-        ownClassName,
-        'k-item k-menu-item',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focus': focus === true,
-            'k-state-selected': selected === true,
-            'k-state-disabled': disabled === true,
-        }
-    ];
+    if ( expandArrowName === '' ) {
+        expandArrowName = dir === 'rtl'
+            ? 'arrow-w'
+            : 'arrow-e';
+    }
 
     // Augment attributes
     htmlAttributes.disabled = disabled;
-    htmlAttributes.dir = dir;
 
     let ariaAttr = aria
         ? {}
         : {};
 
     if (legacy) {
+
+        let legacyMenuItemClasses = [
+            ownClassName,
+            'k-item k-menu-item',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-selected': selected === true,
+                'k-state-disabled': disabled === true,
+            }
+        ];
+
         return (
             <li className={legacyMenuItemClasses} {...ariaAttr} {...htmlAttributes}>
-                <span className={`k-link k-menu-link ${active === true && 'k-state-active'}`}>
-                    {icon && <IconStatic name={icon} />}
-                    {text}
-                    {showArrow && <IconStatic className="k-menu-expand-arrow" name={dir === 'ltr' ? 'arrow-60-right' : 'arrow-60-left'} />}
+                <span className={`k-link k-menu-link ${active === true ? 'k-state-active' : ''}`}>
+                    {icon && <IconStatic className="k-menu-link-icon" name={icon} />}
+                    <span className="k-menu-link-text">{text}</span>
+                    {showArrow && <span className="k-menu-expand-arrow"><IconStatic name={expandArrowName} /></span>}
                 </span>
+                {contentTemplate}
             </li>
         );
     }
 
-    const renderLTRArrowIconName = showArrow ? arrowIconName || 'arrow-60-right' : 'none';
-
-    const renderRTLArrowIconName = showArrow ? arrowIconName || 'arrow-60-left' : 'none';
-
     return (
         <li className={menuItemClasses} {...ariaAttr} {...htmlAttributes}>
             <span className={menuItemLinkClasses}>
-                {icon && <IconStatic name={icon} />}
+                {icon && <IconStatic className="k-menu-link-icon" name={icon} />}
                 <span className="k-menu-link-text">{text}</span>
-                {<IconStatic className="k-menu-expand-arrow" name={dir === 'ltr' ? renderLTRArrowIconName : renderRTLArrowIconName} />}
+                {showArrow && <span className="k-menu-expand-arrow"><IconStatic name={expandArrowName} /></span>}
             </span>
             {contentTemplate}
         </li>
@@ -134,6 +138,7 @@ MenuItemStatic.defaultProps = {
     icon: '',
 
     className: '',
+    arrowIconName: '',
 
     size: 'medium',
 

package/src/menu/menu-list.jsx

@@ -0,0 +1,74 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component/index';
+
+class MenuList extends Component {
+    render() {
+        return <MenuListStatic {...this.props} />;
+    }
+}
+
+function MenuListStatic(props) {
+    const {
+        className: ownClassName,
+        children,
+
+        size,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let menuListClasses = [
+        ownClassName,
+        'k-menu-group',
+        styles.sizeClass( size, 'k-menu-group' ),
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyMenuListClasses = [
+            ownClassName,
+            'k-group k-menu-group k-reset',
+        ];
+
+        return (
+            <ul className={legacyMenuListClasses} {...ariaAttr} {...htmlAttributes}>
+                {children}
+            </ul>
+        );
+    }
+
+    return (
+        <ul className={menuListClasses} {...ariaAttr} {...htmlAttributes}>
+            {children}
+        </ul>
+    );
+}
+
+MenuListStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    className: '',
+
+    size: 'medium'
+};
+
+MenuListStatic.propTypes = {
+    size: typeof [ null, 'small', 'medium', 'large' ],
+
+    children: typeof [],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    className: typeof '',
+    htmlAttributes: typeof []
+};
+
+export { MenuList, MenuListStatic };

package/src/menulist/menulist.jsx

@@ -1,5 +1,5 @@
 import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component/index';
+import { Component, globalDefaultProps } from '../component';
 
 class MenuList extends Component {
     render() {
@@ -37,16 +37,12 @@ function MenuListStatic(props) {
 
     if (legacy) {
         return (
-            <ul className={legacyMenuListClasses} {...ariaAttr} {...htmlAttributes}>
-                {props.children}
-            </ul>
+            <ul className={legacyMenuListClasses} {...ariaAttr} {...htmlAttributes} />
         );
     }
 
     return (
-        <ul className={menuListClasses} {...ariaAttr} {...htmlAttributes}>
-            {props.children}
-        </ul>
+        <ul className={menuListClasses} {...ariaAttr} {...htmlAttributes} />
     );
 }
 
@@ -61,8 +57,6 @@ MenuListStatic.defaultProps = {
 MenuListStatic.propTypes = {
     size: typeof [ null, 'small', 'medium', 'large' ],
 
-    children: typeof [],
-
     aria: typeof false,
     legacy: typeof false,
 

package/src/treeview/index.js

@@ -0,0 +1,4 @@
+export * from './treeview.jsx';
+export * from './treeview-group.jsx';
+export * from './treeview-item.jsx';
+export * from './treeview-leaf.jsx';

package/src/treeview/treeview-group.jsx

@@ -0,0 +1,70 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class TreeviewGroup extends Component {
+    render() {
+        return <TreeviewGroupStatic {...this.props} />;
+    }
+}
+
+function TreeviewGroupStatic(props) {
+    const {
+        className: ownClassName,
+
+        items,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let treeviewULClasses = [
+        ownClassName,
+        'k-treeview-group'
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyTreeviewULClasses = [
+            ownClassName,
+            'k-group',
+        ];
+
+        return (
+            <ul className={legacyTreeviewULClasses} {...ariaAttr} {...htmlAttributes}>
+                {items}
+            </ul>
+        );
+    }
+
+    return (
+        <ul className={treeviewULClasses} {...ariaAttr} {...htmlAttributes}>
+            {items}
+        </ul>
+    );
+}
+
+TreeviewGroupStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    items: []
+};
+
+TreeviewGroupStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    items: typeof [],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { TreeviewGroup, TreeviewGroupStatic };

package/src/treeview/treeview-item.jsx

@@ -0,0 +1,142 @@
+import { Component, globalDefaultProps } from '../component/index';
+import { TreeviewGroupStatic } from './treeview-group.jsx';
+import { TreeviewLeafStatic } from './treeview-leaf.jsx';
+import { IconStatic } from '../icon/index';
+import { CheckboxStatic } from '../checkbox/index';
+
+class TreeviewItem extends Component {
+    render() {
+        return <TreeviewItemStatic {...this.props} />;
+    }
+}
+
+function TreeviewItemStatic(props) {
+    const {
+        className: ownClassName,
+        leafClassName,
+
+        items,
+        expanded,
+        hasChildren: _hasChildren,
+
+        text,
+
+        showIcon,
+        iconName,
+        showCheckbox,
+        checked,
+
+        hover,
+        focus,
+        selected,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    const leafProps = {
+        className: leafClassName,
+        text,
+        showIcon,
+        iconName,
+        hover,
+        focus,
+        selected
+    };
+
+    const hasChildren = _hasChildren || items.length > 0;
+
+    let treeviewItemClasses = [
+        ownClassName,
+        'k-treeview-item',
+        {
+            'k-disabled': disabled === true
+        }
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyTreeviewItemClasses = [
+            ownClassName,
+            'k-item',
+            {
+                'k-state-disabled': disabled === true
+            }
+        ];
+
+        return (
+            <li className={legacyTreeviewItemClasses} {...ariaAttr} {...htmlAttributes}>
+                <span className="k-mid">
+                    {hasChildren && <span className="k-treeview-toggle"><IconStatic name={expanded ? 'collapse' : 'expand'} /></span>}
+                    {showCheckbox && <span className="k-checkbox-wrap"><CheckboxStatic checked={checked} /></span>}
+                    <TreeviewLeafStatic {...leafProps} />
+                </span>
+                {expanded && hasChildren && <TreeviewGroupStatic items={items} />}
+            </li>
+        );
+    }
+
+    return (
+        <li className={treeviewItemClasses} {...ariaAttr} {...htmlAttributes}>
+            <span className="k-treeview-mid">
+                {hasChildren && <span className="k-treeview-toggle"><IconStatic name={expanded ? 'collapse' : 'expand'} /></span>}
+                {showCheckbox && <span className="k-checkbox-wrap"><CheckboxStatic checked={checked} /></span>}
+                <TreeviewLeafStatic {...leafProps} />
+            </span>
+            {expanded && hasChildren && <TreeviewGroupStatic items={items} />}
+        </li>
+    );
+}
+
+TreeviewItemStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    leafClassName: '',
+
+    text: '',
+
+    items: [],
+    expanded: false,
+    hasChildren: false,
+
+    showIcon: false,
+    iconName: '',
+    showCheckbox: false,
+    checked: false,
+};
+
+TreeviewItemStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+    leafClassName: typeof '',
+
+    text: typeof '',
+
+    items: [],
+    expanded: typeof false,
+    hasChildren: typeof false,
+
+    showIcon: typeof false,
+    iconName: typeof '',
+    showCheckbox: typeof false,
+    checked: typeof false,
+
+    hover: typeof false,
+    focus: typeof false,
+    selected: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { TreeviewItem, TreeviewItemStatic };

package/src/treeview/treeview-leaf.jsx

@@ -0,0 +1,99 @@
+import { Component, globalDefaultProps } from '../component/index';
+import { IconStatic } from '../icon/index';
+
+class TreeviewLeaf extends Component {
+    render() {
+        return <TreeviewLeafStatic {...this.props} />;
+    }
+}
+
+function TreeviewLeafStatic(props) {
+    const {
+        className: ownClassName,
+
+        text,
+
+        showIcon,
+        iconName,
+
+        hover,
+        focus,
+        selected,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let treeviewLeafClasses = [
+        ownClassName,
+        'k-treeview-leaf',
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-selected': selected === true
+        }
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyTreeviewLeafClasses = [
+            ownClassName,
+            'k-in',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-selected': selected === true
+            }
+        ];
+
+        return (
+            <span className={legacyTreeviewLeafClasses} {...ariaAttr} {...htmlAttributes}>
+                {showIcon && <IconStatic name={iconName} />}
+                <span className="k-treeview-leaf-text">{text}</span>
+            </span>
+        );
+    }
+
+    return (
+        <span className={treeviewLeafClasses} {...ariaAttr} {...htmlAttributes}>
+            {showIcon && <IconStatic name={iconName} />}
+            <span className="k-treeview-leaf-text">{text}</span>
+        </span>
+    );
+}
+
+TreeviewLeafStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    text: '',
+
+    showIcon: false,
+    iconName: ''
+};
+
+TreeviewLeafStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    text: typeof '',
+
+    showIcon: typeof false,
+    iconName: typeof '',
+
+    hover: typeof false,
+    focus: typeof false,
+    selected: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { TreeviewLeaf, TreeviewLeafStatic };

package/src/treeview/treeview.jsx

@@ -0,0 +1,125 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component/index';
+import { TreeviewGroupStatic } from './treeview-group.jsx';
+import { TreeviewItemStatic } from './treeview-item.jsx';
+
+class Treeview extends Component {
+
+    static transformUL( ul ) {
+        let children = ul.props.children;
+        let items = [];
+
+        children.filter( child => child.type === 'LI' ).forEach( li => {
+            items.push( Treeview.transformLI( li ) );
+        });
+
+        return items;
+    }
+
+    static transformLI( li ) {
+        let children = li.props.children;
+        let text = li.props.text || '';
+        let items = [];
+
+        children.forEach( child => {
+            if (text === '' && child.type === '#text') {
+                text = child.props.text;
+            }
+            if (child.type === 'UL') {
+                items.push( ...Treeview.transformUL( child ) );
+            }
+        });
+
+        li.props.children = [];
+        li.props.text = text;
+        li.props.items = items;
+
+        return <TreeviewItemStatic {...li.props} />;
+    }
+
+    init() {
+        let children = this._props.children;
+        let items = [];
+
+        children.filter( child => child.type === 'LI' ).forEach( li => {
+            items.push( Treeview.transformLI( li ) );
+        });
+
+        this._props.children = [];
+        this._props.items = items;
+    }
+
+    render() {
+        return <TreeviewStatic {...this.props} />;
+    }
+}
+
+function TreeviewStatic(props) {
+    const {
+        className: ownClassName,
+
+        items,
+
+        size,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let treeviewClasses = [
+        ownClassName,
+        'k-treeview',
+        styles.sizeClass( size, 'k-treeview' )
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyTreeviewClasses = [
+            ownClassName,
+            'k-treeview'
+        ];
+
+        return (
+            <div className={legacyTreeviewClasses} {...ariaAttr} {...htmlAttributes}>
+                <TreeviewGroupStatic className="k-treeview-lines" items={items} />
+            </div>
+        );
+    }
+
+    return (
+        <div className={treeviewClasses} {...ariaAttr} {...htmlAttributes}>
+            <TreeviewGroupStatic className="k-treeview-lines" items={items} />
+        </div>
+    );
+}
+
+TreeviewStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    items: [],
+
+    size: 'medium'
+};
+
+TreeviewStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    items: typeof [],
+
+    size: typeof [ null, 'small', 'medium', 'large' ],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Treeview, TreeviewStatic };

package/utils/styles.js

@@ -72,6 +72,14 @@ function borderedClass( bordered, prefix ) {
     return `${prefix}-bordered`;
 }
 
+function positionClass( position, prefix ) {
+    if ( position === null ) {
+        return '';
+    }
+
+    return `k-pos-absolute ${prefix}-${position}`;
+}
+
 function classNames( ...args ) {
 
     /* eslint-disable arrow-body-style, no-nested-ternary */
@@ -131,6 +139,7 @@ export {
     fillModeClass,
     themeColorClass,
     borderedClass,
+    positionClass,
 
     classNames,
     cssStyle,

package/src/menuitem/README.md

@@ -1,26 +0,0 @@
-```html
-<!-- default rendering -->
-<li class="k-item k-menu-item">
-     <span class="k-link k-menu-link">
-        {icon !== '' && <span class="k-icon k-i-${icon}"></span>}
-        {text !== '' && <span class="k-menu-link-text">Text</span>}
-        <span className="k-menu-expand-arrow k-icon k-i-${arrowIconName || 'none'}"></span>
-     </span>
-</li>
-
-<!-- canonical rendering -->
-<li class="
-    k-item
-    k-menu-item
-    ${hover && 'k-hover'}
-    ${focus && 'k-focus'}
-    ${active && 'k-active'}
-    ${disabled && 'k-disabled'}
-" disabled={disabled}>
-     <span class="k-link k-menu-link">
-        {icon !== '' && <span class="k-icon k-i-${icon}"></span>}
-        {text !== '' && <span class="k-menu-link-text">Text</span>}
-        <span className="k-menu-expand-arrow k-icon k-i-${arrowIconName || 'none'}"></span>
-     </span>
-</li>
-```

package/src/menulist/README.md

@@ -1,11 +0,0 @@
-```html
-<!-- default rendering -->
-<ul class="k-group k-menu-group k-reset"></ul>
-
-<!-- canonical rendering -->
-<ul class="
-        k-group k-menu-group k-reset
-        k-menulist-${size}
-    "
-></ul>
-```

package/src/menulist/index.js

@@ -1 +0,0 @@
-export * from './menulist.jsx';