fix typescript problems

Author: javadbat

docs/package-lock.json

@@ -15,7 +15,7 @@
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
     "jb-date-input": "^3.7.3",
-    "jb-date-input-react": "^2.0.8",
+    "jb-date-input-react": "^2.0.12",
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

docs/package.json

@@ -57,14 +57,14 @@ function Samples() {
           </svg>
         </div>
       </JBDateInput>
-      {/* <JBDateInput label="with inner-box section">
+      <JBDateInput label="with inner-box section">
         <jb-date-input-inbox-element slot="end-section">
           <div>after</div>
         </jb-date-input-inbox-element>
         <jb-date-input-inbox-element slot="start-section">
           <div>before</div>
         </jb-date-input-inbox-element>
-      </JBDateInput> */}
+      </JBDateInput>
       <FormalTheme label="more formal look">{}</FormalTheme>
 
     </SamplesSectionWrapper>

docs/src/components/samples/Samples.tsx

@@ -1,17 +1,20 @@
-import React, { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useImperativeHandle, useCallback, DOMAttributes } from 'react';
 import PropTypes from 'prop-types';
 // import {type} from 'jb-date-input';
 import 'jb-date-input';
 // eslint-disable-next-line no-duplicate-imports
-import { JBDateInputWebComponent, InputTypes, JBDateInputValidationItem } from 'jb-date-input';
+import { JBDateInputWebComponent, InputTypes, JBDateInputValidationItem, JBDDateInputInboxElementWebComponent } from 'jb-date-input';
 import { useEvent } from '../../custom-hooks/UseEvent';
 
+type CustomEvents<K extends string> = { [key in K] : (event: CustomEvent) => void };
+
+type CustomElement<T, K extends string> = Partial<T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>>;
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
       interface IntrinsicElements {
         'jb-date-input': JBDateInputType,
-        'jb-date-input-inbox-element':HTMLDivElement
+        'jb-date-input-inbox-element':CustomElement<JBDDateInputInboxElementWebComponent,'Click'>
       }
       interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
         class?:string,
@@ -39,7 +42,7 @@ export type JBDateInputProps = {
     required?: boolean,
     calendarDefaultDateView?:{ year:number, month: number, dateType:InputTypes},
     usePersianNumber?: boolean,
-    children:React.ReactNode | string | HTMLElement | HTMLCollection | undefined | null,
+    children:any,
 }
 
 const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
@@ -168,7 +171,7 @@ JBDateInput.propTypes = {
     calendarDefaultDateView: PropTypes.shape({ year: PropTypes.number.isRequired, month: PropTypes.number.isRequired, dateType: PropTypes.oneOf<InputTypes>([InputTypes.gregorian, InputTypes.jalali]).isRequired }),
     // calendarDefaultDateView: PropTypes.object,
     usePersianNumber: PropTypes.bool,
-    children:PropTypes.element
+    // children:PropTypes.element
 };
 
 export default JBDateInput;

lib/JBDateInput.tsx

@@ -18,7 +18,7 @@
     "react component",
     "react"
   ],
-  "version": "2.0.8",
+  "version": "2.0.12",
   "bugs": "https://github.com/javadbat/jb-date-input-react/issues",
   "license": "MIT",
   "files": [
@@ -36,6 +36,6 @@
     "url": "https://github.com/javadbat/jb-date-input-react"
   },
   "dependencies": {
-    "jb-date-input": ">=3.7.3"
+    "jb-date-input": ">=3.7.5"
   }
 }