@progress/kendo-themes-html 5.0.0-beta.0 → 5.0.0-beta.4

package/src/list/list-group-item.jsx

@@ -0,0 +1,66 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class ListGroupItem extends Component {
+    render() {
+        return <ListGroupItemStatic {...this.props} />;
+    }
+}
+
+function ListGroupItemStatic(props) {
+    const {
+        className: ownClassName,
+
+        children,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let listGroupItemClasses = [
+        ownClassName,
+        'k-list-group-item'
+    ];
+
+    let legacyListGroupItemClasses = [
+        ownClassName,
+        'k-group-header'
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+        return (
+            <li className={legacyListGroupItemClasses} {...ariaAttr} {...htmlAttributes}>
+                {children}
+            </li>
+        );
+    }
+
+    return (
+        <li className={listGroupItemClasses} {...ariaAttr} {...htmlAttributes}>
+            <span className="k-list-item-text">{children}</span>
+        </li>
+    );
+}
+
+ListGroupItemStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: []
+};
+
+ListGroupItemStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { ListGroupItem, ListGroupItemStatic };

package/src/list/list-header.jsx

@@ -1,4 +1,4 @@
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
 
 class ListHeader extends Component {
     render() {
@@ -10,6 +10,8 @@ function ListHeaderStatic(props) {
     const {
         className: ownClassName,
 
+        children,
+
         aria,
         legacy,
 
@@ -18,11 +20,13 @@ function ListHeaderStatic(props) {
 
     let listHeaderClasses = [
         ownClassName,
-        'k-list-header'
+        // 'k-list-header',
+        'k-list-group-sticky-header'
     ];
 
     let legacyListHeaderClasses = [
-        ownClassName
+        ownClassName,
+        'k-group-header'
     ];
 
     let ariaAttr = aria
@@ -32,14 +36,14 @@ function ListHeaderStatic(props) {
     if (legacy) {
         return (
             <div className={legacyListHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
+                {children}
             </div>
         );
     }
 
     return (
         <div className={listHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
+            <div className="k-list-header-text">{children}</div>
         </div>
     );
 }
@@ -47,14 +51,16 @@ function ListHeaderStatic(props) {
 ListHeaderStatic.defaultProps = {
     ...globalDefaultProps,
 
-    className: ''
+    children: []
 };
 
 ListHeaderStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
     aria: typeof false,
     legacy: typeof false,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };
 

package/src/list/list-item.jsx

@@ -1,4 +1,6 @@
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
+import { CheckboxStatic } from '../checkbox/index';
+import { IconStatic } from '../icon/index';
 
 class ListItem extends Component {
     render() {
@@ -9,9 +11,14 @@ class ListItem extends Component {
 function ListItemStatic(props) {
     const {
         className: ownClassName,
+        children,
 
-        virtualization,
-        custom,
+        groupLabel,
+
+        showIcon,
+        iconName,
+        showCheckbox,
+        checked,
 
         hover,
         focus,
@@ -31,8 +38,7 @@ function ListItemStatic(props) {
             'k-hover': hover === true,
             'k-focus': focus === true,
             'k-selected': selected === true,
-            'k-disabled': disabled === true,
-            'k-custom-item': custom === true
+            'k-disabled': disabled === true
         }
     ];
 
@@ -44,9 +50,7 @@ function ListItemStatic(props) {
             'k-state-hover': hover === true,
             'k-state-focused': focus === true,
             'k-state-selected': selected === true,
-            'k-state-disabled': disabled === true,
-            'k-virtual-item': virtualization === true,
-            'k-custom-item': custom === true
+            'k-state-disabled': disabled === true
         }
     ];
 
@@ -57,14 +61,20 @@ function ListItemStatic(props) {
     if (legacy) {
         return (
             <li className={legacyListItemClasses} {...ariaAttr} {...htmlAttributes}>
-
+                {showCheckbox && <CheckboxStatic checked={checked} />}
+                {showIcon && <IconStatic name={iconName} />}
+                <span className="k-list-item-text">{children}</span>
+                {groupLabel !== '' && <div className="k-group">{groupLabel}</div>}
             </li>
         );
     }
 
     return (
         <li className={listItemClasses} {...ariaAttr} {...htmlAttributes}>
-
+            {showCheckbox && <CheckboxStatic checked={checked} />}
+            {showIcon && <IconStatic name={iconName} />}
+            <span className="k-list-item-text">{children}</span>
+            {groupLabel !== '' && <div className="k-list-item-group-label">{groupLabel}</div>}
         </li>
     );
 }
@@ -72,24 +82,35 @@ function ListItemStatic(props) {
 ListItemStatic.defaultProps = {
     ...globalDefaultProps,
 
-    className: '',
+    children: [],
+
+    groupLabel: '',
 
-    virtualization: false,
-    custom: false
+    showIcon: false,
+    iconName: '',
+    showCheckbox: false,
+    checked: false,
 };
 
 ListItemStatic.propTypes = {
-    virtualization: typeof false,
-    custom: typeof false,
+    children: typeof [],
+    className: typeof '',
+
+    groupLabel: typeof '',
+
+    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,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };
 

package/src/list/list.jsx

@@ -1,7 +1,105 @@
 import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
+import { ListHeaderStatic } from './list-header.jsx';
+import { ListContentStatic } from './list-content.jsx';
+import { ListGroupItemStatic } from './list-group-item.jsx';
+import { ListItemStatic } from './list-item.jsx';
+import { NoDataStatic } from '../nodata/index';
 
 class List extends Component {
+
+    _transformChildrenUniversal() {
+        let virtualization = this._props.virtualization;
+        let children = this._props.children;
+        let listHeader;
+        let listContent;
+        let listChildren = [];
+        let newChildren = [];
+
+        children.forEach( child => {
+            if ( child.type === 'OPTGROUP') {
+                if (child.props.root === true) {
+                    listHeader = <ListHeaderStatic {...child.props}>{child.props.label}</ListHeaderStatic>;
+
+                    child.props.children.forEach( optChild => {
+                        listChildren.push( <ListItemStatic {...optChild.props} /> );
+                    });
+                } else {
+                    child.props.children.forEach( ( optChild, index ) => {
+                        let groupLabel = '';
+
+                        if ( index === 0 ) {
+                            groupLabel = child.props.label;
+                            optChild.props.className = [ optChild.props.className, 'k-first' ];
+                        }
+                        listChildren.push( <ListItemStatic {...optChild.props} groupLabel={groupLabel} /> );
+                    });
+                }
+            } else if ( child.type === 'OPTION' ) {
+                listChildren.push( <ListItemStatic {...child.props} /> );
+            }
+        });
+
+        listContent = <ListContentStatic virtualization={virtualization}>{listChildren}</ListContentStatic>;
+
+        newChildren.push( listHeader );
+        newChildren.push( listContent );
+
+        this._props.children = newChildren;
+    }
+
+    _transformChildrenAngular() {
+        let virtualization = this._props.virtualization;
+        let children = this._props.children;
+        let listHeader;
+        let listContent;
+        let listChildren = [];
+        let newChildren = [];
+
+        children.forEach( child => {
+            if ( child.type === 'OPTGROUP') {
+                if (child.props.root === true) {
+                    listHeader = <ListHeaderStatic {...child.props}>{child.props.label}</ListHeaderStatic>;
+
+                    child.props.children.forEach( optChild => {
+                        listChildren.push( <ListItemStatic {...optChild.props} /> );
+                    });
+                } else {
+                    listChildren.push( <ListGroupItemStatic {...child.props}>{child.props.label}</ListGroupItemStatic> );
+
+                    child.props.children.forEach( optChild => {
+                        listChildren.push( <ListItemStatic {...optChild.props} /> );
+                    });
+                }
+            } else if ( child.type === 'OPTION' ) {
+                listChildren.push( <ListItemStatic {...child.props} /> );
+            }
+        });
+
+        listContent = <ListContentStatic virtualization={virtualization}>{listChildren}</ListContentStatic>;
+
+        newChildren.push( listHeader );
+        newChildren.push( listContent );
+
+        this._props.children = newChildren;
+    }
+
+    init() {
+        let framework = this._props.framework;
+
+        if ( this._props.children.length === 0 ) {
+            this._props.children.push( <NoDataStatic /> );
+            return;
+        }
+
+        if ( framework === 'angular' || framework === 'blazor' ) {
+            this._transformChildrenAngular();
+            return;
+        }
+
+        this._transformChildrenUniversal();
+    }
+
     render() {
         return <ListStatic {...this.props} />;
     }
@@ -10,6 +108,7 @@ class List extends Component {
 function ListStatic(props) {
     const {
         className: ownClassName,
+        children,
 
         size,
 
@@ -33,6 +132,7 @@ function ListStatic(props) {
 
     let legacyListClasses = [
         ownClassName,
+        'k-list-container'
     ];
 
     let ariaAttr = aria
@@ -42,14 +142,14 @@ function ListStatic(props) {
     if (legacy) {
         return (
             <div className={legacyListClasses} {...ariaAttr} {...htmlAttributes}>
-
+                {children}
             </div>
         );
     }
 
     return (
         <div className={listClasses} {...ariaAttr} {...htmlAttributes}>
-
+            {children}
         </div>
     );
 }
@@ -57,7 +157,7 @@ function ListStatic(props) {
 ListStatic.defaultProps = {
     ...globalDefaultProps,
 
-    className: '',
+    children: [],
 
     size: 'medium',
 
@@ -65,14 +165,17 @@ ListStatic.defaultProps = {
 };
 
 ListStatic.propTypes = {
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    framework: typeof [ 'universal', 'angular' ],
+    children: typeof [],
+    className: typeof '',
+
+    size: typeof [ null, 'small', 'medium', 'large' ],
 
     virtualization: typeof false,
 
     aria: typeof false,
     legacy: typeof false,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };
 

package/src/maskedtextbox/maskedtextbox.jsx

@@ -1,4 +1,4 @@
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
 import { InputStatic, InputInnerInputStatic } from '../input/index';
 import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 
@@ -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>
         );
     }
@@ -133,7 +130,7 @@ MaskedTextboxStatic.propTypes = {
     showClearButton: typeof true,
 
     size: typeof [ null, 'small', 'medium', 'large' ],
-    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
 
     fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 

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-content.jsx

@@ -1,4 +1,4 @@
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
 
 class MenuItemContent extends Component {
     render() {

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

@@ -1,4 +1,4 @@
-import { Component, globalDefaultProps } from '../component';
+import { Component, globalDefaultProps } from '../component/index';
 import { IconStatic } from '../icon/index';
 
 class MenuItem extends Component {
@@ -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',
 
@@ -149,7 +154,7 @@ MenuItemStatic.propTypes = {
 
     contentTemplate: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/{menulist/menulist.jsx → menu/menu-list.jsx}

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