diff --git a/packages/html/package-lock.json b/packages/html/package-lock.json index e3e0feaef3c..6f1dc2fc59f 100644 --- a/packages/html/package-lock.json +++ b/packages/html/package-lock.json @@ -14,7 +14,8 @@ "react-dom": "^18.0.0" }, "devDependencies": { - "@types/react": "^18.0.2" + "@types/react": "^18.2.19", + "@types/react-dom": "^18.2.7" } }, "node_modules/@progress/kendo-svg-icons": { @@ -29,9 +30,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.2.15", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz", - "integrity": "sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==", + "version": "18.2.19", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.19.tgz", + "integrity": "sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -39,6 +40,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -112,9 +122,9 @@ "dev": true }, "@types/react": { - "version": "18.2.15", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz", - "integrity": "sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==", + "version": "18.2.19", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.19.tgz", + "integrity": "sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==", "dev": true, "requires": { "@types/prop-types": "*", @@ -122,6 +132,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", diff --git a/packages/html/package.json b/packages/html/package.json index 153a770a863..2789629ccad 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -49,6 +49,7 @@ "react-dom": "^18.0.0" }, "devDependencies": { - "@types/react": "^18.0.2" + "@types/react": "^18.2.19", + "@types/react-dom": "^18.2.7" } } diff --git a/packages/html/src/editor/tests/editor-find-replace.tsx b/packages/html/src/editor/tests/editor-find-replace.tsx index aa0f85b5f71..1ee5c7093bd 100644 --- a/packages/html/src/editor/tests/editor-find-replace.tsx +++ b/packages/html/src/editor/tests/editor-find-replace.tsx @@ -47,7 +47,7 @@ export default () =>(
-
+ } /> @@ -94,7 +94,7 @@ export default () =>(
- + } /> } /> ( }> - + } /> } /> } /> diff --git a/packages/html/src/editor/tests/editor-table-wizard.tsx b/packages/html/src/editor/tests/editor-table-wizard.tsx index e12e0f004f1..9434c798f9b 100644 --- a/packages/html/src/editor/tests/editor-table-wizard.tsx +++ b/packages/html/src/editor/tests/editor-table-wizard.tsx @@ -36,7 +36,7 @@ export default () =>(
- + (
- + } /> } />
@@ -186,7 +186,7 @@ export default () =>( }> - + = (props) => { + const { as: Component = "div", ...other } = props; + + return ; +}; + +FormButtons.className = FORM_BUTTONS_CLASSNAME; diff --git a/packages/html/src/form/form.spec.tsx b/packages/html/src/form/form.spec.tsx index d76c19bb97c..1971f603002 100644 --- a/packages/html/src/form/form.spec.tsx +++ b/packages/html/src/form/form.spec.tsx @@ -1,107 +1,51 @@ -import { classNames, optionClassNames, Size } from '../misc'; -import { FormField } from './form-field'; -import { Fieldset } from './fieldset'; +import { classNames, ComponentSlot, componentSlot, optionClassNames, Size } from "../misc"; +import { KendoComponent } from "../misc/component-props"; +import { FormButtons, FormButtonsProps } from "./form-buttons.spec"; -export const FORM_CLASSNAME = 'k-form'; +export const FORM_CLASSNAME = "k-form"; const states = []; const options = { - size: [ Size.small, Size.medium, Size.large ] + size: [ Size.small, Size.medium, Size.large ], }; export type KendoFormOptions = { - size?: (typeof options.size)[number] | null; + size?: (typeof options.size)[number] | null; }; export type KendoFormProps = KendoFormOptions & { - orientation?: string; - layout?: string; - formButtons?: JSX.Element | string; - cols?: number; - gapX?: number; - gapY?: number; - tag?: string; - children?: JSX.Element | JSX.Element[]; + orientation?: string; + FormButtons?: ComponentSlot; + children?: JSX.Element | JSX.Element[]; }; const defaultProps = { size: Size.medium, - layout: 'basic', - tag: 'form' + FormButtons: FormButtons, }; -export const Form = ( - props: KendoFormProps & - React.HTMLAttributes -) => { - const { - size = defaultProps.size, - orientation, - layout = defaultProps.layout, - formButtons, - cols, - gapX, - gapY, - tag = defaultProps.tag, - children - } = props; +export const Form: KendoComponent<"form", KendoFormProps> = (props) => { + const { as: Component = "form", size = defaultProps.size, orientation } = props; - const Parent = ({ tag, className, children }) => ( tag === 'form' ? {children} :
{children}
); - - const formChildren: JSX.Element | JSX.Element[] = []; - - if (children) { - if ( Array.isArray(children) ) { - children.map( (child, index) => { - if ( child.type === FormField ) { - formChildren.push( - - ); - } else { - formChildren.push(child); - } - } ); - } else if ( children.type === FormField ) { - formChildren.push( ); - } else { - children.type === Fieldset && formChildren.push(
); - } - - } + const [ FormButtons, FormButtonProps ] = componentSlot(props.FormButtons || defaultProps.FormButtons); return ( - - { layout === 'grid' ? -
- {formChildren} -
- : - <>{formChildren} - } - { formButtons && -
- {formButtons} -
- } - + + {props.children} + + ); }; @@ -111,4 +55,3 @@ Form.className = FORM_CLASSNAME; Form.defaultProps = defaultProps; export default Form; - diff --git a/packages/html/src/form/tests/form-field-dateinputs.tsx b/packages/html/src/form/tests/form-field-dateinputs.tsx index c4ef41f4075..30df68de1a6 100644 --- a/packages/html/src/form/tests/form-field-dateinputs.tsx +++ b/packages/html/src/form/tests/form-field-dateinputs.tsx @@ -1,10 +1,9 @@ -import { DateInput } from '../../dateinput'; -import { DatePicker } from '../../datepicker'; -import { DateRangePicker } from '../../daterangepicker'; -import { DateTimePicker } from '../../datetimepicker'; -import { TimePicker } from '../../timepicker'; -import { Form, FormField } from '../../form'; - +import { DateInput } from "../../dateinput"; +import { DatePicker } from "../../datepicker"; +import { DateRangePicker } from "../../daterangepicker"; +import { DateTimePicker } from "../../datetimepicker"; +import { TimePicker } from "../../timepicker"; +import { Form, FormField } from "../../form"; const styles = ` section { @@ -13,107 +12,40 @@ const styles = ` } `; -export default () =>( +export default () => ( <>
- Vertical Form Horizontal Form
+ }> - - } - > - - - - } - > - - - - } - > - + }> - - } - > - + }> - - } - > - + }> + }>
-
+ }> - - } - > - - - - } - > - + }> - - } - > - + }> - - } - > - - - - } - > - + }> + }>
-
); diff --git a/packages/html/src/form/tests/form-grid-layout.tsx b/packages/html/src/form/tests/form-grid-layout.tsx index a5c866d0e0c..d20624abd3a 100644 --- a/packages/html/src/form/tests/form-grid-layout.tsx +++ b/packages/html/src/form/tests/form-grid-layout.tsx @@ -2,6 +2,7 @@ import { DropdownList } from '../../dropdownlist'; import { Textbox } from '../../textbox'; import { Button } from '../../button'; import { Form, FormField, Fieldset } from '../../form'; +import { FormButtons } from '../form-buttons.spec'; export default () =>( @@ -12,11 +13,11 @@ export default () =>(
-
+ - + } >
( Error: The quick brown fox jumps over the lazy dog.
- + - + } > ( Error: The quick brown fox jumps over the lazy dog. - diff --git a/packages/html/src/form/tests/form-sizes.tsx b/packages/html/src/form/tests/form-sizes.tsx index c97b36d2b86..3e85d0d5a2c 100644 --- a/packages/html/src/form/tests/form-sizes.tsx +++ b/packages/html/src/form/tests/form-sizes.tsx @@ -2,6 +2,7 @@ import { DropdownList } from '../../dropdownlist'; import { Textbox } from '../../textbox'; import { Button } from '../../button'; import { Form, FormField, Fieldset } from '../../form'; +import { FormButtons } from '../form-buttons.spec'; const styles = { border: '1px solid grey', padding: '10px' }; @@ -16,11 +17,11 @@ export default () =>(
sm

+ FormButtons={ + - + }>
} /> @@ -34,11 +35,11 @@ export default () =>(
md

+ FormButtons={ + - + }>
} /> @@ -52,11 +53,11 @@ export default () =>(
lg

+ FormButtons={ + - + }>
} /> diff --git a/packages/html/src/gantt/tests/gantt-editing-popup-general.tsx b/packages/html/src/gantt/tests/gantt-editing-popup-general.tsx index deed2763ef5..cee9412da79 100644 --- a/packages/html/src/gantt/tests/gantt-editing-popup-general.tsx +++ b/packages/html/src/gantt/tests/gantt-editing-popup-general.tsx @@ -46,7 +46,7 @@ export default () =>(
- + (
- + ( }> - + } /> } /> } /> diff --git a/packages/html/src/imageeditor/tests/imageeditor-crop-pane.tsx b/packages/html/src/imageeditor/tests/imageeditor-crop-pane.tsx index 621ede4dec8..8f8ecc9a092 100644 --- a/packages/html/src/imageeditor/tests/imageeditor-crop-pane.tsx +++ b/packages/html/src/imageeditor/tests/imageeditor-crop-pane.tsx @@ -5,6 +5,7 @@ import { NumericTextbox } from '../../numerictextbox'; import { Toolbar, ToolbarSeparator } from '../../toolbar'; import { ButtonGroup } from '../../button-group'; import { Form, FormField, Fieldset } from '../../form'; +import { FormButtons } from '../../form/form-buttons.spec'; export default () =>( @@ -57,11 +58,11 @@ export default () =>( {/* Crop Pane */}
- + - + }>
( @@ -42,11 +43,11 @@ export default () =>(
- + - + }>
= { + as?: E; + className?: string; + style?: React.CSSProperties; + tabIndex?: number; + id?: string; +} & React.ComponentPropsWithoutRef & + P; + +export type KendoComponent = ((props: KendoComponentProps) => React.ReactElement) & { + className: string; + states?: (typeof States)[]; + options?: { + size?: (keyof typeof Size)[]; + roundness?: (keyof typeof Roundness)[]; + fillMode?: (keyof typeof FillMode)[]; + themeColor?: (keyof typeof ThemeColor)[]; + }; + defaultProps?: Partial>; +}; diff --git a/packages/html/src/misc/component-slot.ts b/packages/html/src/misc/component-slot.ts new file mode 100644 index 00000000000..65a7bb50997 --- /dev/null +++ b/packages/html/src/misc/component-slot.ts @@ -0,0 +1,11 @@ +export type ComponentSlot

= React.ReactElement

| React.ElementType

; + +function isValidElement(object) { + return typeof object === "object" && object !== null && object.type !== undefined; +} +export const componentSlot =

(slot: ComponentSlot

): [JSX.ElementType, P] => { + if (isValidElement(slot)) { + return [ (slot as JSX.Element).type, (slot as JSX.Element).props ]; + } + return [ slot as JSX.ElementType, {} as P ]; +}; diff --git a/packages/html/src/misc/index.ts b/packages/html/src/misc/index.ts index a283069934f..6fde7f721d2 100644 --- a/packages/html/src/misc/index.ts +++ b/packages/html/src/misc/index.ts @@ -1,3 +1,4 @@ -export * from './class-names'; -export * from './component-class-names'; -export * from './theme'; +export * from "./class-names"; +export * from "./component-class-names"; +export * from "./theme"; +export * from "./component-slot"; diff --git a/packages/html/src/scheduler/tests/scheduler-edit-dialog.tsx b/packages/html/src/scheduler/tests/scheduler-edit-dialog.tsx index 4660881aea0..9736ded8faa 100644 --- a/packages/html/src/scheduler/tests/scheduler-edit-dialog.tsx +++ b/packages/html/src/scheduler/tests/scheduler-edit-dialog.tsx @@ -37,7 +37,7 @@ export default () =>( }> - + }/> }/> }/> diff --git a/packages/html/src/scheduler/tests/scheduler-editing-weekly.tsx b/packages/html/src/scheduler/tests/scheduler-editing-weekly.tsx index 57e8cf58b90..6e1f83191e2 100644 --- a/packages/html/src/scheduler/tests/scheduler-editing-weekly.tsx +++ b/packages/html/src/scheduler/tests/scheduler-editing-weekly.tsx @@ -37,7 +37,7 @@ export default () =>( }> - + }/> }/> ( }> - + Next

+
@@ -224,6 +225,7 @@ Next +
diff --git a/tests/editor/editor-image-editor.html b/tests/editor/editor-image-editor.html index 2084a820f62..91add73e75d 100644 --- a/tests/editor/editor-image-editor.html +++ b/tests/editor/editor-image-editor.html @@ -66,6 +66,7 @@ +
diff --git a/tests/editor/editor-table-wizard.html b/tests/editor/editor-table-wizard.html index 72f4bd4afce..d3c6fb721ec 100644 --- a/tests/editor/editor-table-wizard.html +++ b/tests/editor/editor-table-wizard.html @@ -39,100 +39,28 @@
-
-
-
- -
- - - - - - - -
+
@@ -100,6 +101,7 @@
+
diff --git a/tests/form/form-field-inputs-rtl.html b/tests/form/form-field-inputs-rtl.html index 078645fd701..cb54d26da57 100644 --- a/tests/form/form-field-inputs-rtl.html +++ b/tests/form/form-field-inputs-rtl.html @@ -273,6 +273,7 @@ +
@@ -294,7 +295,6 @@
-
@@ -452,7 +452,6 @@
-
@@ -463,7 +462,6 @@
-
@@ -528,6 +526,7 @@
+
diff --git a/tests/form/form-field-inputs.html b/tests/form/form-field-inputs.html index 2c8377150e8..7c124fa30d2 100644 --- a/tests/form/form-field-inputs.html +++ b/tests/form/form-field-inputs.html @@ -273,6 +273,7 @@ +
@@ -294,7 +295,6 @@
-
@@ -452,7 +452,6 @@
-
@@ -463,7 +462,6 @@
-
@@ -528,6 +526,7 @@
+
diff --git a/tests/form/form-grid-layout.html b/tests/form/form-grid-layout.html index ebcd9b1998e..9725bdbab79 100644 --- a/tests/form/form-grid-layout.html +++ b/tests/form/form-grid-layout.html @@ -12,97 +12,95 @@ Form Grid Layout
-
-
-
- Personal Information -
-
- -
- - - - - - + +
+ Personal Information +
+
+ +
+ + + + + -
+
-
- -
- - - - - - +
+
+ +
+ + + + + -
+
-
- -
- - - - - - +
+
+ +
+ + + + + -
+
-
-
- Shipping Address -
-
- -
- - - France - - +
+
+
+ Shipping Address +
+
+ +
+ + + France -
+ +
-
- -
- - - -
+
+
+ +
+ + +
-
- -
- - - -
+
+
+ +
+ + +
-
-
+
+
-
@@ -149,14 +148,12 @@
Error: error message
-
- - -
+ +
diff --git a/tests/gantt/gantt-editing-popup-general.html b/tests/gantt/gantt-editing-popup-general.html index 5abce3e596a..46566a24b77 100644 --- a/tests/gantt/gantt-editing-popup-general.html +++ b/tests/gantt/gantt-editing-popup-general.html @@ -63,120 +63,102 @@
-
-
-
- -
- - - +
+
+ +
+ + + + + + + - - - - - -
Error
-
+ +
Error
-
- -
- - - - -
+
+
+ +
+ + + +
-
- -
- - - - -
+
+
+ +
+ + + +
-
- -
- - - - -
+
+
+ +
+ + + + +
+
+
+ +
+ + + +
-
- -
- - -
+
+ +
+ + + -
-
-
- -
- - - - -
value from 0 to 1
-
-
-
- -
- - -None- - -
+ +
value from 0 to 1
+
+
+
+ +
+ + -None- + +
+
diff --git a/tests/gantt/gantt-editing-popup-other.html b/tests/gantt/gantt-editing-popup-other.html index 55cc5051482..a43b4e43de0 100644 --- a/tests/gantt/gantt-editing-popup-other.html +++ b/tests/gantt/gantt-editing-popup-other.html @@ -131,6 +131,7 @@
+
diff --git a/tests/grid/grid-column-resizing-actions.html b/tests/grid/grid-column-resizing-actions.html index 45bf94eb077..fe2862b3421 100644 --- a/tests/grid/grid-column-resizing-actions.html +++ b/tests/grid/grid-column-resizing-actions.html @@ -448,6 +448,7 @@
+
diff --git a/tests/grid/grid-editing-popup.html b/tests/grid/grid-editing-popup.html index 0d9d1f60545..ad936bde53e 100644 --- a/tests/grid/grid-editing-popup.html +++ b/tests/grid/grid-editing-popup.html @@ -134,6 +134,7 @@
+
diff --git a/tests/scheduler/scheduler-edit-dialog.html b/tests/scheduler/scheduler-edit-dialog.html index 60daf68f560..dde7414ef03 100644 --- a/tests/scheduler/scheduler-edit-dialog.html +++ b/tests/scheduler/scheduler-edit-dialog.html @@ -261,6 +261,7 @@
+
diff --git a/tests/scheduler/scheduler-editing-weekly.html b/tests/scheduler/scheduler-editing-weekly.html index 067dac702bb..ea71e192210 100644 --- a/tests/scheduler/scheduler-editing-weekly.html +++ b/tests/scheduler/scheduler-editing-weekly.html @@ -327,6 +327,7 @@
+
diff --git a/tests/spreadsheet/spreadsheet-data-validation.html b/tests/spreadsheet/spreadsheet-data-validation.html index dd8e1136b8a..553e3cca1f2 100644 --- a/tests/spreadsheet/spreadsheet-data-validation.html +++ b/tests/spreadsheet/spreadsheet-data-validation.html @@ -104,6 +104,7 @@
+
diff --git a/tests/spreadsheet/spreadsheet-dialog.html b/tests/spreadsheet/spreadsheet-dialog.html index 2b34b857392..b33269007e7 100644 --- a/tests/spreadsheet/spreadsheet-dialog.html +++ b/tests/spreadsheet/spreadsheet-dialog.html @@ -40,6 +40,7 @@
+
@@ -80,6 +81,7 @@
+
@@ -135,6 +137,7 @@
+
@@ -266,6 +269,7 @@
+
diff --git a/tests/taskboard/taskboard-pane.html b/tests/taskboard/taskboard-pane.html index 83ac7ae8399..bd75a8f1109 100644 --- a/tests/taskboard/taskboard-pane.html +++ b/tests/taskboard/taskboard-pane.html @@ -239,6 +239,7 @@
+
@@ -485,6 +486,7 @@
+
diff --git a/tests/treelist/treelist-editing-popup.html b/tests/treelist/treelist-editing-popup.html index d0c5943794a..d12867c895a 100644 --- a/tests/treelist/treelist-editing-popup.html +++ b/tests/treelist/treelist-editing-popup.html @@ -117,6 +117,7 @@
+