@progress/kendo-themes-html 10.2.0-dev.2 → 10.2.0

package/src/menu/templates/menu-popup.tsx

@@ -2,21 +2,19 @@ import { Menu, MenuItem, MenuList, MenuListItem } from "..";
 import { Popup } from "../../popup";
 
 export const MenuPopup = (props) => (
-    <Menu children={
+    <Menu  popup={
+        <Popup className="k-menu-popup" offset={{ left: "90px", top: "auto" }}>
+            <MenuList>
+                <MenuListItem first text="Sub item 1"></MenuListItem>
+                <MenuListItem text="Sub item 2" showArrow ></MenuListItem>
+                <MenuListItem last text="Sub item 3"></MenuListItem>
+            </MenuList>
+        </Popup>
+    } children={
         <>
             <MenuItem first text="Item 1"></MenuItem>
             <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 2"></MenuItem>
-            <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 3"
-                popup={
-                    <Popup className="k-menu-popup" positionMode="fixed">
-                        <MenuList>
-                            <MenuListItem first text="Sub item 1"></MenuListItem>
-                            <MenuListItem text="Sub item 2" showArrow ></MenuListItem>
-                            <MenuListItem last text="Sub item 3"></MenuListItem>
-                        </MenuList>
-                    </Popup>
-                }
-            ></MenuItem>
+            <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 3"></MenuItem>
             <MenuItem text="Item 4"></MenuItem>
             <MenuItem last text="Item 5"></MenuItem>
         </>

package/src/menu/tests/menu-icons.tsx

@@ -8,7 +8,6 @@ const style = `
 
     .k-animation-container {
         position: absolute;
-        top: 100%;
     }
 `;
 
@@ -21,45 +20,43 @@ export default () =>(
             <span>Horizontal Menu RTL</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder"></MenuItem>
-                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList>
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder"></MenuItem>
-                  <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl"  popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder"></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
@@ -68,45 +65,43 @@ export default () =>(
             <span>Horizontal Menu RTL Expand Icon</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder"></MenuItem>
-                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder"></MenuItem>
-                  <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl"  popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder"></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
@@ -115,45 +110,43 @@ export default () =>(
             <span>Horizontal Menu RTL Icon After Text</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
-                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder" iconPosition="after"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
-                  <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl" popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
+                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder" iconPosition="after" showArrow arrowIconName="chevron-down"></MenuItem>
                 </MenuNormal>
             </section>

package/src/menu/tests/menu-separators.tsx

@@ -22,14 +22,9 @@ export default () =>(
             <span>Vertical Menu with Separators</span>
 
             <section>
-                <MenuNormal>
-                    <MenuItem first text="Normal"></MenuItem>
-                    <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuSeparator></MenuSeparator>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                    popup={
+                <MenuNormal popup={
                         <>
-                            <Popup className="k-menu-popup" positionMode="fixed">
+                            <Popup className="k-menu-popup" offset={{ left: "175px", top: "auto" }}>
                                 <MenuList>
                                     <MenuListItem first text="Disabled" disabled></MenuListItem>
                                     <MenuListItem text="Normal"></MenuListItem>
@@ -41,7 +36,11 @@ export default () =>(
                                 </MenuList>
                             </Popup>
                         </>
-                    }></MenuItem>
+                    }>
+                    <MenuItem first text="Normal"></MenuItem>
+                    <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
+                    <MenuSeparator></MenuSeparator>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>
@@ -49,26 +48,25 @@ export default () =>(
             </section>
 
             <section>
-                <MenuVertical>
+                <MenuVertical popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "520px", top: "160px" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuSeparator></MenuSeparator>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuSeparator></MenuSeparator>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList>
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuSeparator></MenuSeparator>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>

package/src/menu/tests/menu.tsx

@@ -9,7 +9,6 @@ const style = `
 
     .k-animation-container {
         position: absolute;
-        top: 100%;
     }
 `;
 
@@ -22,24 +21,33 @@ export default () =>(
             <span>Horizontal Scrolling Menu</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                    <>
+                        <Popup className="k-menu-popup" offset={{ left: "165px", top: "auto" }}>
+                            <MenuList>
+                                <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                <MenuListItem text="Normal"></MenuListItem>
+                                <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                <MenuListItem text="Active" active showArrow></MenuListItem>
+                                <MenuListItem text="Focus" focus></MenuListItem>
+                                <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                            </MenuList>
+                        </Popup>
+                        <Popup className="k-menu-popup" offset={{ left: "300px", top: "175px" }}>
+                            <MenuList>
+                                <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                <MenuListItem text="Normal"></MenuListItem>
+                                <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                <MenuListItem text="Active" active showArrow></MenuListItem>
+                                <MenuListItem text="Focus" focus></MenuListItem>
+                                <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                            </MenuList>
+                        </Popup>
+                    </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                    popup={
-                        <>
-                            <Popup className="k-menu-popup" positionMode="fixed">
-                                <MenuList>
-                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                    <MenuListItem text="Normal"></MenuListItem>
-                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                    <MenuListItem text="Active" active showArrow></MenuListItem>
-                                    <MenuListItem text="Focus" focus></MenuListItem>
-                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                </MenuList>
-                            </Popup>
-                        </>
-                    }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>
@@ -54,24 +62,23 @@ export default () =>(
             <span></span>
 
             <section>
-                <MenuNormal dir="rtl">
+                <MenuNormal dir="rtl" popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "220px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>

package/src/otp/otp-input.tsx

@@ -1,5 +1,5 @@
 import { classNames, States, Size, Roundness, FillMode } from '../misc';
-import { Input, InputInnerInput } from '../input';
+import { Textbox } from '../textbox';
 
 export const ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
 
@@ -35,9 +35,9 @@ export type KendoOneTimePasswordInputProps = KendoOneTimePasswordInputOptions &
 export type KendoOneTimePasswordInputState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
-    size: Input.defaultOptions.size,
-    rounded: Input.defaultOptions.rounded,
-    fillMode: Input.defaultOptions.fillMode,
+    size: Textbox.defaultOptions.size,
+    rounded: Textbox.defaultOptions.rounded,
+    fillMode: Textbox.defaultOptions.fillMode,
 };
 
 export const OneTimePasswordInput = (
@@ -64,11 +64,14 @@ export const OneTimePasswordInput = (
 
 
     return (
-        <Input
+        <Textbox
             {...other}
             size={size}
             rounded={rounded}
             fillMode={fillMode}
+            type={type}
+            value={value}
+            placeholder={placeholder}
             hover={hover}
             focus={focus}
             valid={valid}
@@ -76,12 +79,13 @@ export const OneTimePasswordInput = (
             required={required}
             disabled={disabled}
             readonly={readonly}
+            showClearButton={false}
+            showValidationIcon={false}
             className={classNames(props.className,
                 ONETIMEPASSWORDINPUT_CLASSNAME
             )}
         >
-            <InputInnerInput placeholder={placeholder} value={value} type={type} />
-        </Input>
+        </Textbox>
     );
 };
 

package/src/textbox/textbox.spec.tsx

@@ -44,12 +44,14 @@ export type KendoTextboxProps = KendoTextboxOptions & {
     placeholder?: string;
     autocomplete?: string;
     showClearButton?: boolean;
+    showValidationIcon?: boolean;
 };
 
 export type KendoTextboxState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
     showClearButton: true,
+    showValidationIcon: true,
     size: Input.defaultOptions.size,
     rounded: Input.defaultOptions.rounded,
     fillMode: Input.defaultOptions.fillMode,
@@ -67,6 +69,7 @@ export const Textbox = (
         fillMode = defaultOptions.fillMode,
         separators = defaultOptions.separators,
         showClearButton = defaultOptions.showClearButton,
+        showValidationIcon = defaultOptions.showValidationIcon,
         prefix,
         suffix,
         type,
@@ -107,11 +110,11 @@ export const Textbox = (
             </>
             }
             <InputInnerInput placeholder={placeholder} value={value} type={type} />
-            <InputValidationIcon
+            { showValidationIcon && <InputValidationIcon
                 valid={valid}
                 invalid={invalid}
                 loading={loading}
-                disabled={disabled} />
+                disabled={disabled} />}
             <InputLoadingIcon
                 loading={loading}
                 disabled={disabled} />

package/src/toolbar/toolbar.spec.tsx

@@ -200,7 +200,7 @@ export const Toolbar = (
             {!scrollable && toolbarChildren}
 
             {scrollable && scrollButtons === 'hidden' &&
-               <span className='k-toolbar-items k-toolbar-items-scroll'>{toolbarChildren}</span>
+               <div className='k-toolbar-items k-toolbar-items-scroll'>{toolbarChildren}</div>
             }
 
             {scrollable && scrollButtons === 'start' &&