@progress/kendo-themes-html 5.4.2-dev.0 → 5.4.2-dev.3

package/src/combobox/{combobox.jsx → combobox.tsx}

@@ -2,7 +2,6 @@ import { globalDefaultProps } from '../component/index';
 import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
 import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 import { ButtonStatic } from '../button/index';
-import { IconStatic } from '../icon/index';
 
 class Combobox extends Input {
     render() {
@@ -36,7 +35,6 @@ function ComboboxStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -69,37 +67,6 @@ function ComboboxStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            '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'
-        ];
-
-        return (
-            <InputStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <input type={type} className="k-input" {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    <span className="k-select"><IconStatic name="arrow-s" /></span>
-                </span>
-            </InputStatic>
-        );
-    }
-
     return (
         <InputStatic className={comboboxClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}

package/src/dateinput/{dateinput.jsx → dateinput.tsx}

@@ -14,7 +14,6 @@ function DateInputStatic(props) {
     const {
         className: ownClassName,
 
-        type,
         value,
         placeholder,
         autocomplete,
@@ -34,7 +33,6 @@ function DateInputStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
 
@@ -68,41 +66,6 @@ function DateInputStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            'k-widget',
-            'k-dateinput',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focus': focus === true,
-                'k-state-invalid': invalid === true,
-                'k-state-disabled': disabled === true
-            }
-        ];
-
-        let legacyWrapClasses = [
-            'k-dateinput-wrap'
-        ];
-
-        let legacyInputClasses = [
-            'k-input'
-        ];
-
-        return (
-            <InputStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <input type={type} className={legacyInputClasses} {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    {showSpinButton === true && <SpinButtonStatic />}
-                </span>
-            </InputStatic>
-        );
-    }
-
     return (
         <InputStatic className={dateInputClasses} {...ariaAttr} {...htmlAttributes}>
             <InputInnerInputStatic {...inputAttributes} />

package/src/datepicker/{datepicker.jsx → datepicker.tsx}

@@ -2,7 +2,6 @@ import { globalDefaultProps } from '../component/index';
 import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
 import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 import { ButtonStatic } from '../button/index';
-import { IconStatic } from '../icon/index';
 
 class DatePicker extends Input {
     render() {
@@ -36,7 +35,6 @@ function DatePickerStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -69,37 +67,6 @@ function DatePickerStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            'k-widget',
-            'k-datepicker',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focus': focus === true,
-                'k-state-invalid': invalid === true,
-                'k-state-disabled': disabled === true
-            }
-        ];
-
-        let legacyWrapClasses = [
-            'k-picker-wrap'
-        ];
-
-        return (
-            <InputStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <input type={type} className="k-input" {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    <span className="k-select"><IconStatic name="calendar" /></span>
-                </span>
-            </InputStatic>
-        );
-    }
-
     return (
         <InputStatic className={datepickerClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}

package/src/daterangepicker/{daterangepicker.jsx → daterangepicker.tsx}

@@ -39,7 +39,7 @@ function DateRangePickerStatic(props) {
     let DateRangePickerClasses = [
         ownClassName,
         'k-daterangepicker',
-        {'k-disabled': disabled === true}
+        { 'k-disabled': disabled === true }
     ];
 
     let ariaAttr = aria

package/src/datetimepicker/{datetimepicker.jsx → datetimepicker.tsx}

@@ -2,7 +2,6 @@ import { globalDefaultProps } from '../component/index';
 import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
 import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 import { ButtonStatic } from '../button/index';
-import { IconStatic } from '../icon/index';
 
 class DateTimePicker extends Input {
     render() {
@@ -36,7 +35,6 @@ function DateTimePickerStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -69,37 +67,6 @@ function DateTimePickerStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            'k-widget',
-            'k-datetimepicker',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focus': focus === true,
-                'k-state-invalid': invalid === true,
-                'k-state-disabled': disabled === true
-            }
-        ];
-
-        let legacyWrapClasses = [
-            'k-picker-wrap'
-        ];
-
-        return (
-            <InputStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <input type={type} className="k-input" {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    <span className="k-select"><span className="k-link"><IconStatic name="calendar" /></span></span>
-                </span>
-            </InputStatic>
-        );
-    }
-
     return (
         <InputStatic className={dateTimePickerClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}

package/src/dropdowngrid/{dropdowngrid.jsx → dropdowngrid.tsx}

@@ -12,48 +12,16 @@ function DropdownGridStatic(props) {
     const {
         className: ownClassName,
 
-        type,
-        value,
-        placeholder,
-        autocomplete,
-
-        prefix,
-        suffix,
-
-        size,
-        rounded,
-
-        fillMode,
-
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        disabled,
-
-        aria,
-
-        ...htmlAttributes
+        ...otherProps
     } = props;
 
-    htmlAttributes.size = size;
-    htmlAttributes.rounded = rounded;
-    htmlAttributes.fillMode = fillMode;
-    htmlAttributes.hover = hover;
-    htmlAttributes.focus = focus;
-    htmlAttributes.valid = valid;
-    htmlAttributes.invalid = invalid;
-    htmlAttributes.required = required;
-    htmlAttributes.disabled = disabled;
-
     let dropdownGridClasses = [
         ownClassName,
         'k-dropdowngrid'
     ];
 
     return (
-        <ComboboxStatic className={dropdownGridClasses} {...props}></ComboboxStatic>
+        <ComboboxStatic className={dropdownGridClasses} {...otherProps}></ComboboxStatic>
     );
 }
 

package/src/dropdownlist/{dropdownlist.jsx → dropdownlist.tsx}

@@ -2,7 +2,6 @@ import { globalDefaultProps } from '../component/index';
 import { Picker, PickerStatic, InputInnerSpanStatic } from '../input/index';
 import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 import { ButtonStatic } from '../button/index';
-import { IconStatic } from '../icon/index';
 
 class DropdownList extends Picker {
     render() {
@@ -41,7 +40,6 @@ function DropdownListStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -81,37 +79,6 @@ function DropdownListStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            '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'
-        ];
-
-        return (
-            <PickerStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <InputInnerSpanStatic {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    <span className="k-select"><IconStatic name={arrowIconName} /></span>
-                </span>
-            </PickerStatic>
-        );
-    }
-
     return (
         <PickerStatic className={dropdownListClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}

package/src/fab/{fab.jsx → fab.tsx}

@@ -38,7 +38,6 @@ function FabStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -68,31 +67,6 @@ function FabStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-        let legacyClasses = [
-            ownClassName,
-            'k-fab',
-            `k-fab-${themeColor}`,
-            styles.roundedClass( rounded ),
-            {
-                '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} />

package/src/{index.js → index.ts}

@@ -16,6 +16,7 @@ export function init() {
 window.addEventListener('DOMContentLoaded', init);
 
 // Dependencies
+export * from './../lib/jsx-runtime';
 export * from './component/index';
 
 // Typography and utils
@@ -40,9 +41,11 @@ export * from './chip/index';
 // export * from './skeleton/index';
 
 // Native forms
+export * from './action-buttons/index';
 export * from './button/index';
-export * from './menubutton/index';
-export * from './splitbutton/index';
+export * from './button-group/index';
+export * from './menu-button/index';
+export * from './split-button/index';
 export * from './textbox/index';
 export * from './textarea/index';
 export * from './checkbox/index';

package/src/input/{input-inner-input.jsx → input-inner-input.tsx}

@@ -17,7 +17,6 @@ function InputInnerInputStatic(props) {
         autocomplete,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -31,21 +30,10 @@ function InputInnerInputStatic(props) {
         'k-input-inner'
     ];
 
-    let legacyClasses = [
-        ownClassName,
-        'k-input'
-    ];
-
     htmlAttributes.value = value;
     htmlAttributes.placeholder = placeholder;
     htmlAttributes.autocomplete = autocomplete;
 
-    if (legacy) {
-        return (
-            <input type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes} />
-        );
-    }
-
     return (
         <input type={type} className={inputClasses} {...ariaAttr} {...htmlAttributes} />
     );

package/src/input/{input-inner-span.jsx → input-inner-span.tsx}

@@ -20,7 +20,6 @@ function InputInnerSpanStatic(props) {
         valueIconName,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -34,23 +33,6 @@ function InputInnerSpanStatic(props) {
         'k-input-inner'
     ];
 
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            'k-input'
-        ];
-
-        return (
-            <span className={legacyClasses} {...htmlAttributes}>
-                {valueIcon}
-                {valueIcon === null && <IconStatic className="k-icon k-input-value-icon" name={valueIconName} />}
-                {showValue && value === '' && placeholder}
-                {showValue && value && <span className="k-input-value-text">{value}</span>}
-            </span>
-        );
-    }
-
     return (
         <span className={inputClasses} {...ariaAttr} {...htmlAttributes}>
             {valueIcon}

package/src/input/{input-inner-textarea.jsx → input-inner-textarea.tsx}

@@ -15,7 +15,6 @@ function InputInnerTextareaStatic(props) {
         placeholder,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -29,22 +28,9 @@ function InputInnerTextareaStatic(props) {
         'k-input-inner'
     ];
 
-    let legacyClasses = [
-        ownClassName,
-        'k-input'
-    ];
-
     htmlAttributes.value = value;
     htmlAttributes.placeholder = placeholder;
 
-    if (legacy) {
-        return (
-            <textarea className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                {value}
-            </textarea>
-        );
-    }
-
     return (
         <textarea className={inputClasses} {...ariaAttr} {...htmlAttributes}>
             {value}

package/src/input/{input.jsx → input.tsx}

@@ -55,7 +55,6 @@ function InputStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -80,19 +79,6 @@ function InputStatic(props) {
         ? {}
         : {};
 
-    if ( legacy ) {
-
-        let legacyClasses = [
-            ownClassName
-        ];
-
-        return (
-            <span className={legacyClasses} {...htmlAttributes}>
-                {props.children}
-            </span>
-        );
-    }
-
     return (
         <span className={inputClasses} {...ariaAttr} {...htmlAttributes}>
             {props.children}

package/src/input/{picker.jsx → picker.tsx}

@@ -54,7 +54,6 @@ function PickerStatic(props) {
         disabled,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -78,19 +77,6 @@ function PickerStatic(props) {
         ? {}
         : {};
 
-    if ( legacy ) {
-
-        let legacyClasses = [
-            ownClassName
-        ];
-
-        return (
-            <span className={legacyClasses} {...htmlAttributes}>
-                {props.children}
-            </span>
-        );
-    }
-
     return (
         <span className={pickerClasses} {...ariaAttr} {...htmlAttributes}>
             {props.children}

package/src/list/{list-content.jsx → list-content.tsx}

@@ -15,7 +15,6 @@ function ListContentStatic(props) {
         virtualization,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -33,35 +32,6 @@ function ListContentStatic(props) {
         ? {}
         : {};
 
-    if (legacy) {
-
-        let legacyListContentClasses = [
-            ownClassName,
-            'k-list-content',
-            {
-                'k-list-scroller': virtualization === false || virtualization === undefined,
-                'k-virtual-content': virtualization === true
-            }
-        ];
-
-        let legacyListULClasses = [
-            'k-list',
-            'k-reset',
-            {
-                'k-virtual-list': virtualization === true
-            }
-        ];
-
-        return (
-            <div className={legacyListContentClasses} {...ariaAttr} {...htmlAttributes}>
-                <ul className={legacyListULClasses}>
-                    {children}
-                </ul>
-                { virtualization && <div className="k-height-container"><div></div></div> }
-            </div>
-        );
-    }
-
     return (
         <div className={listContentClasses} {...ariaAttr} {...htmlAttributes}>
             <ul className={listULClasses}>

package/src/list/{list-group-item.jsx → list-group-item.tsx}

@@ -13,7 +13,6 @@ function ListGroupItemStatic(props) {
         children,
 
         aria,
-        legacy,
 
         ...htmlAttributes
     } = props;
@@ -23,23 +22,10 @@ function ListGroupItemStatic(props) {
         '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>