@progress/kendo-themes-html 6.7.1-dev.1 → 6.8.0-dev.0

package/dist/types/floating-label/index.d.ts

@@ -1 +1,2 @@
 export * from './floating-label.spec';
+export * from './templates/floating-label-normal';

package/dist/types/floating-label/templates/floating-label-normal.d.ts

@@ -0,0 +1,4 @@
+export declare const FloatingLabelNormal: ({ children, ...other }: {
+    [x: string]: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/spreadsheet/tests/spreadsheet-filtering.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-find-replace-dialog.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-format-dialogs.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-formula-dialog.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-formula.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-insert-dialogs.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-jquery.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-print.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-row-contextmenu.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-sheets-bar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/spreadsheet/tests/spreadsheet-tools.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

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": "6.7.1-dev.1",
+  "version": "6.8.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "f167c9ea6622e8affdf7dad8e6f51b7aa9c3a671"
+  "gitHead": "e41c60c822242a3a105f8f403df4fff291c81628"
 }

package/src/floating-label/index.ts

@@ -1 +1,2 @@
 export * from './floating-label.spec';
+export * from './templates/floating-label-normal';

package/src/floating-label/templates/floating-label-normal.tsx

@@ -0,0 +1,7 @@
+import FloatingLabel from "../floating-label.spec";
+
+export const FloatingLabelNormal = ({ children, ...other }) => (
+    <FloatingLabel {...other}>
+        {children}
+    </FloatingLabel>
+);

package/src/floating-label/tests/floating-label-flat.tsx

@@ -1,8 +1,5 @@
-import { FloatingLabel } from '../../floating-label';
-import { Textbox } from '../../textbox';
-import { Combobox } from '../../combobox';
-import { Textarea } from '../../textarea';
-
+import { FloatingLabel, FloatingLabelNormal } from '..';
+import { TextboxNormal } from '../../textbox';
 
 const styles = `
     #test-area {
@@ -21,160 +18,47 @@ export default () =>(
             <span>Floating label flat RTL</span>
 
             <div>
-                <FloatingLabel label="Textbox label" empty>
-                    <Textbox fillMode="flat" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" empty>
-                    <Textbox fillMode="flat" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Textbox with placeholder and floating label" empty>
-                    <Textbox fillMode="flat" placeholder="Placeholder" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox with placeholder and floating label" empty>
-                    <Textbox fillMode="flat" placeholder="Placeholder" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Focused Textbox with placeholder" empty focus>
-                    <Textbox fillMode="flat" placeholder="Placeholder" focus />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal fillMode="flat" placeholder="placeholder" />
+                </FloatingLabelNormal>
             </div>
             <div dir="rtl">
-                <FloatingLabel label="Focused Textbox with placeholder" empty focus>
-                    <Textbox fillMode="flat" placeholder="Placeholder" focus />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal fillMode="flat" placeholder="placeholder" />
+                </FloatingLabelNormal>
             </div>
             <div>
-                <FloatingLabel label="Combobox label" empty>
-                    <Combobox fillMode="flat" />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal fillMode="flat" placeholder="placeholder" focus />
+                </FloatingLabelNormal>
             </div>
             <div dir="rtl">
-                <FloatingLabel label="Combobox label" empty>
-                    <Combobox fillMode="flat" />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal fillMode="flat" placeholder="placeholder" focus />
+                </FloatingLabelNormal>
             </div>
 
-            <div>
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="flat" value="Textbox value" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="flat" value="Textbox value" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="flat" value="Combobox value" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="flat" value="Combobox value" />
-                </FloatingLabel>
-            </div>
+            {[ 'normal', 'hover', ...FloatingLabel.states ].map((state) => {
 
-            <div>
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="flat" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="flat" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="flat" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="flat" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-
-            <div>
-                <FloatingLabel label="Textbox label" focus>
-                    <Textbox fillMode="flat" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" focus>
-                    <Textbox fillMode="flat" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" focus>
-                    <Combobox fillMode="flat" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" focus>
-                    <Combobox fillMode="flat" value="Focus" focus />
-                </FloatingLabel>
-            </div>
+                let value = state;
+                state === 'empty' && (value = '');
 
-            <div>
-                <FloatingLabel label="Textbox label" disabled>
-                    <Textbox fillMode="flat" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" disabled>
-                    <Textbox fillMode="flat" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" disabled>
-                    <Combobox fillMode="flat" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" disabled>
-                    <Combobox fillMode="flat" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
+                return (
+                    <>
+                        <div>
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal fillMode="flat" value={value} { ...{ [state]: true }}/>
+                            </FloatingLabelNormal>
+                        </div>
+                        <div dir="rtl">
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal fillMode="flat" value={value} { ...{ [state]: true }} />
+                            </FloatingLabelNormal>
+                        </div>
+                    </>
+                );
+            })}
 
-            <div>
-                <FloatingLabel label="Textbox label" invalid>
-                    <Textbox fillMode="flat" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" invalid>
-                    <Textbox fillMode="flat" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" invalid>
-                    <Combobox fillMode="flat" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" invalid>
-                    <Combobox fillMode="flat" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Textarea label" empty>
-                    <Textarea fillMode="flat" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textarea label" empty>
-                    <Textarea fillMode="flat" />
-                </FloatingLabel>
-            </div>
         </div>
     </>
 );

package/src/floating-label/tests/floating-label-outline.tsx

@@ -1,8 +1,5 @@
-import { FloatingLabel } from '../../floating-label';
-import { Textbox } from '../../textbox';
-import { Combobox } from '../../combobox';
-import { Textarea } from '../../textarea';
-
+import { FloatingLabel, FloatingLabelNormal } from '..';
+import { TextboxNormal } from '../../textbox';
 
 const styles = `
     #test-area {
@@ -21,160 +18,47 @@ export default () =>(
             <span>Floating label outline RTL</span>
 
             <div>
-                <FloatingLabel label="Textbox label" empty>
-                    <Textbox fillMode="outline" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" empty>
-                    <Textbox fillMode="outline" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Textbox with placeholder and floating label" empty>
-                    <Textbox fillMode="outline" placeholder="Placeholder" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox with placeholder and floating label" empty>
-                    <Textbox fillMode="outline" placeholder="Placeholder" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Focused Textbox with placeholder" empty focus>
-                    <Textbox fillMode="outline" placeholder="Placeholder" focus />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal fillMode="outline" placeholder="placeholder" />
+                </FloatingLabelNormal>
             </div>
             <div dir="rtl">
-                <FloatingLabel label="Focused Textbox with placeholder" empty focus>
-                    <Textbox fillMode="outline" placeholder="Placeholder" focus />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal fillMode="outline" placeholder="placeholder" />
+                </FloatingLabelNormal>
             </div>
             <div>
-                <FloatingLabel label="Combobox label" empty>
-                    <Combobox fillMode="outline" />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal fillMode="outline" placeholder="placeholder" focus />
+                </FloatingLabelNormal>
             </div>
             <div dir="rtl">
-                <FloatingLabel label="Combobox label" empty>
-                    <Combobox fillMode="outline" />
-                </FloatingLabel>
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal fillMode="outline" placeholder="placeholder" focus />
+                </FloatingLabelNormal>
             </div>
 
-            <div>
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="outline" value="Textbox value" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="outline" value="Textbox value" />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="outline" value="Combobox value" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="outline" value="Combobox value" />
-                </FloatingLabel>
-            </div>
+            {[ 'normal', 'hover', ...FloatingLabel.states ].map((state) => {
 
-            <div>
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="outline" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label">
-                    <Textbox fillMode="outline" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="outline" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label">
-                    <Combobox fillMode="outline" value="Hover" hover />
-                </FloatingLabel>
-            </div>
-
-            <div>
-                <FloatingLabel label="Textbox label" focus>
-                    <Textbox fillMode="outline" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" focus>
-                    <Textbox fillMode="outline" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" focus>
-                    <Combobox fillMode="outline" value="Focus" focus />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" focus>
-                    <Combobox fillMode="outline" value="Focus" focus />
-                </FloatingLabel>
-            </div>
+                let value = state;
+                state === 'empty' && (value = '');
 
-            <div>
-                <FloatingLabel label="Textbox label" disabled>
-                    <Textbox fillMode="outline" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" disabled>
-                    <Textbox fillMode="outline" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" disabled>
-                    <Combobox fillMode="outline" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" disabled>
-                    <Combobox fillMode="outline" value="Disabled" disabled />
-                </FloatingLabel>
-            </div>
+                return (
+                    <>
+                        <div>
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal fillMode="outline" value={value} { ...{ [state]: true }}/>
+                            </FloatingLabelNormal>
+                        </div>
+                        <div dir="rtl">
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal fillMode="outline" value={value} { ...{ [state]: true }} />
+                            </FloatingLabelNormal>
+                        </div>
+                    </>
+                );
+            })}
 
-            <div>
-                <FloatingLabel label="Textbox label" invalid>
-                    <Textbox fillMode="outline" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textbox label" invalid>
-                    <Textbox fillMode="outline" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Combobox label" invalid>
-                    <Combobox fillMode="outline" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Combobox label" invalid>
-                    <Combobox fillMode="outline" value="Invalid value" invalid />
-                </FloatingLabel>
-            </div>
-            <div>
-                <FloatingLabel label="Textarea label" empty>
-                    <Textarea fillMode="outline" />
-                </FloatingLabel>
-            </div>
-            <div dir="rtl">
-                <FloatingLabel label="Textarea label" empty>
-                    <Textarea fillMode="outline" />
-                </FloatingLabel>
-            </div>
         </div>
     </>
 );

package/src/floating-label/tests/floating-label-solid.tsx

@@ -0,0 +1,64 @@
+import { FloatingLabel, FloatingLabelNormal } from '..';
+import { TextboxNormal } from '../../textbox';
+
+const styles = `
+    #test-area {
+        width: 660px;
+    }
+    .k-floating-label-container {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Floating label</span>
+            <span>Floating label RTL</span>
+
+            <div>
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal placeholder="placeholder" />
+                </FloatingLabelNormal>
+            </div>
+            <div dir="rtl">
+                <FloatingLabelNormal label="Label with placeholder" empty>
+                    <TextboxNormal placeholder="placeholder" />
+                </FloatingLabelNormal>
+            </div>
+            <div>
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal placeholder="placeholder" focus />
+                </FloatingLabelNormal>
+            </div>
+            <div dir="rtl">
+                <FloatingLabelNormal label="Label with placeholder focused" empty focus>
+                    <TextboxNormal placeholder="placeholder" focus />
+                </FloatingLabelNormal>
+            </div>
+
+            {[ 'normal', 'hover', ...FloatingLabel.states ].map((state) => {
+
+                let value = state;
+                state === 'empty' && (value = '');
+
+                return (
+                    <>
+                        <div>
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal value={value} { ...{ [state]: true }}/>
+                            </FloatingLabelNormal>
+                        </div>
+                        <div dir="rtl">
+                            <FloatingLabelNormal label="Label" { ...{ [state]: true }}>
+                                <TextboxNormal value={value} { ...{ [state]: true }} />
+                            </FloatingLabelNormal>
+                        </div>
+                    </>
+                );
+            })}
+
+        </div>
+    </>
+);