update typings

client_core/hooks/did_update.ts

@@ -5,7 +5,7 @@ type EffectCB = Parameters<typeof useLayoutEffect>[0]
 
 type ExtendedRef = {
     [key in typeof symbolIsRendered]: undefined | boolean
-} & React.MutableRefObject<undefined>
+} & React.RefObject<null>
 
 
 const symbolIsRendered = Symbol('rendered')
@@ -17,7 +17,7 @@ const symbolIsRendered = Symbol('rendered')
  * @param dependencies React.useLayoutEffect's second parameter
  * @param ref Optional reusable ref created with React.useRef
  */
-function useDidUpdate(fn: EffectCB, dependencies: React.DependencyList, ref = useRef()) {
+function useDidUpdate(fn: EffectCB, dependencies: React.DependencyList, ref = useRef(null)) {
     useLayoutEffect(() => {
         let retFn!: ReturnType<EffectCB>
 

client_core/hooks/previous.ts

@@ -3,7 +3,7 @@ import { useRef, useLayoutEffect } from 'react'
 
 type ExtendedRef = {
     [key in typeof symbolPrevValue]: any
-} & React.MutableRefObject<undefined>
+} & React.RefObject<null>
 
 
 const symbolPrevValue = Symbol('prev_value')
@@ -15,7 +15,7 @@ const symbolPrevValue = Symbol('prev_value')
  * @param ref Optional reusable ref created with React.useRef
  * @returns previous value or undefined if it's first render
  */
-function usePrevious(value: any, ref = useRef()) {
+function usePrevious(value: any, ref = useRef(null)) {
     useLayoutEffect(() => {
         (ref as ExtendedRef)[symbolPrevValue] = value
     }, [ value ])

client_core/router/Router/index.tsx

@@ -97,7 +97,7 @@ function Router(props: RouterProps) {
         const lastIndex = childrenDepth - 1
         if (prevChildrenArray[lastIndex].traversePath == childrenArray[lastIndex].traversePath) {
             childrenArray.push({
-                El: () => '' as unknown as JSX.Element,
+                El: () => '' as unknown as React.JSX.Element,
                 traversePath: `${childrenArray[lastIndex].traversePath}/`,
                 historyState: null
             })
@@ -163,7 +163,7 @@ function Router(props: RouterProps) {
     }
 
 
-    return resultElement as JSX.Element
+    return resultElement as React.JSX.Element
 }
 
 

client_core/router/Router/types.d.ts

@@ -25,7 +25,7 @@ type GetPageParams = {
     onEnter: ChildrenArrayEl['onEnter']
     onLeave: ChildrenArrayEl['onLeave']
     urlParams: URLparams
-    resultElement: JSX.Element | undefined
+    resultElement: React.JSX.Element | undefined
 }
 
 

client_core/ui/DataTable/helpers/apply_virtualization.ts

@@ -127,7 +127,7 @@ function applyVirtualization(params: UseVirtualizationParams) {
     } = params as VirtualizationMergedProps
 
 
-    rootAttributes.ref = useRef() as Ref
+    rootAttributes.ref = useRef(null)
 
     const [ virtualizationState, setVirtualizationState ] = useState<ScrollTopState>( getDefaultState() )
     const { scrollTop } = virtualizationState

client_core/ui/DataTable/helpers/apply_virtualization_types.d.ts

@@ -1,7 +1,7 @@
 import type { MergedProps, State } from '../types'
 
 
-type Ref = React.MutableRefObject<HTMLDivElement>
+type Ref = React.RefObject<HTMLDivElement>
 
 type Virtualization = NonNullable<MergedProps['virtualization']>
 

client_core/ui/DropdownSearch/helpers/get_search_options_elements.tsx

@@ -10,7 +10,7 @@ function getSearchOptions(props: MergedProps, state: State, onSelect: onSelectIn
     const { searchString, arrowSelectIndex } = state
     const searchLower = searchString?.toLowerCase()
 
-    const options: JSX.Element[] = []
+    const options: React.JSX.Element[] = []
     let selectedOption, selectedOptionIndex
     for (let i = 0; i < searchOptions.length; i++) {
         const option = searchOptions[i]

client_core/ui/DropdownSearch/index.tsx

@@ -87,7 +87,7 @@ const DropdownSearch = component<Props, DefaultProps>(
         const isShowOptions = isFocused
             && (showOnFocus || (searchString ? searchString.length : 0) >= minInputLength)
 
-        let optionsElement: JSX.Element | undefined
+        let optionsElement: React.JSX.Element | undefined
         let selectedOption: Option | undefined
         let selectedOptionIndex: number | undefined
         if (isShowOptions) {

client_core/ui/Input/index.tsx

@@ -90,7 +90,7 @@ const Input = component<Props, DefaultProps>(
                 :   value
         }
         if (autofocus || mask || prefixOrSuffix) {
-            inputProps.ref = useRef() as InputRef
+            inputProps.ref = useRef(null)
 
             autofocus && useEffect(() => {
                 disabled || (inputProps.ref as InputRef).current.focus()

client_core/ui/Input/types.d.ts

@@ -11,7 +11,7 @@ type InnerInputAttributes = {
     onChange?(e: onChangeEventType): void
 } & ReactTagAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
 
-type InputRef = React.MutableRefObject<HTMLInputElement>
+type InputRef = React.RefObject<HTMLInputElement>
 
 type DebounceStore = ReactStore<{
     debounceValue: string | undefined

client_core/ui/NumberPicker/helpers/get_step_buttons_types.d.ts

@@ -14,7 +14,7 @@ type GetStepperButtons = (
         onPickerFocus: ComponentFocusEventHandler | undefined
     }
 ) => {
-    stepperElement: JSX.Element
+    stepperElement: React.JSX.Element
     isDisabledUp: boolean
     isDisabledDown: boolean
 }

client_core/ui/NumberPicker/index.tsx

@@ -73,7 +73,7 @@ const NumberPicker = component<Props, DefaultProps>(
         const numberMask = buildInputRegexp(min, max, precision, regexp)
 
 
-        const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+        const ref = useRef(null)
 
         const _inputStore = inputStore || useState(getDefaultInputStoreState())
         const [{ isFocused }, setInputState ] = _inputStore
@@ -97,7 +97,7 @@ const NumberPicker = component<Props, DefaultProps>(
             e.stopPropagation()
 
             const { relatedTarget } = e.nativeEvent
-            if (!relatedTarget || !(ref.current.contains(relatedTarget as Node))) {
+            if (!relatedTarget || !((ref.current! as HTMLDivElement).contains(relatedTarget as Node))) {
 
                 onBlur?.(e)
                 e.defaultPrevented || setInputState({
@@ -199,7 +199,7 @@ const NumberPicker = component<Props, DefaultProps>(
             disabled: disabled || disabledInput,
             onBlur(event) {
                 const { relatedTarget } = event.nativeEvent
-                if (!relatedTarget || !ref.current.contains(relatedTarget as Node)) {
+                if (!relatedTarget || !(ref.current! as HTMLDivElement).contains(relatedTarget as Node)) {
                     if (!event.defaultPrevented) {
 
                         let newStringValue!: string

client_core/ui/Pagination/index.tsx

@@ -58,7 +58,7 @@ const getPageElement: GetPageElement = (page: number, { curPage, theme }) => (
         key={ page } data-page={ page } children={ page } />
 )
 
-function fillGap(start: number, end: number, result: JSX.Element[], props: MergedProps, isLastGap?: boolean) {
+function fillGap(start: number, end: number, result: React.JSX.Element[], props: MergedProps, isLastGap?: boolean) {
     const { theme, separator } = props
 
     const elementToPush = (start - end) == 1
@@ -69,7 +69,7 @@ function fillGap(start: number, end: number, result: JSX.Element[], props: Merge
     result.push(elementToPush)
 }
 
-function getElementsRange(from: number, to: number, result: JSX.Element[], props: MergedProps) {
+function getElementsRange(from: number, to: number, result: React.JSX.Element[], props: MergedProps) {
     for (let i = from; i <= to; i++) {
         result.push(getPageElement(i, props))
     }
@@ -82,7 +82,7 @@ function getPaginationVisuals(mergedProps: MergedProps, numberOfPages: number) {
 
     const middlePluseSide = elementsByMiddle + elementsBySide
     const maxLength = middlePluseSide * 2 + 3
-    const result: JSX.Element[] = []
+    const result: React.JSX.Element[] = []
 
 
     if (maxLength > numberOfPages) getElementsRange(1, numberOfPages, result, mergedProps)

client_core/ui/Pagination/types.d.ts

@@ -3,7 +3,7 @@ import type {
 } from '../_internals/types'
 
 
-type GetPageElement = (page: number, props: MergedProps) => JSX.Element
+type GetPageElement = (page: number, props: MergedProps) => React.JSX.Element
 
 
 type Theme = {

client_core/ui/Ranger/helpers/get_range_area_elements_types.d.ts

@@ -6,13 +6,13 @@ type GetRangeElement = (
     className: string | undefined,
     width: number,
     isVertical: MergedProps['isVertical']
-) => JSX.Element
+) => React.JSX.Element
 
 type GetRangePickerElement = (
     key: string,
     props: MergedProps,
     width: number
-) => JSX.Element
+) => React.JSX.Element
 
 
 export type { GetRangeElement, GetRangePickerElement }

client_core/ui/Select/index.tsx

@@ -88,11 +88,11 @@ const Select = component<Props, DefaultProps>(
                 [ theme._error, isError ],
                 [ theme._disabled, disabled ]
             ]),
-            ref: useRef() as RootRef
+            ref: useRef(null)
         }
 
 
-        let optionsElement: JSX.Element
+        let optionsElement: React.JSX.Element
         let selectedOption: Props['options'][number] | undefined
         let selectedOptionIndex: number | undefined
 

client_core/ui/Select/types.d.ts

@@ -9,7 +9,7 @@ type OnSelect = (
     payload?: Option['payload']
 ) => void
 
-type RootRef = React.MutableRefObject<HTMLDivElement>
+type RootRef = React.RefObject<HTMLDivElement>
 
 type Store = ReactStore<{
     /** Whether select is in focus */

client_core/ui/Slider/helpers/get_root_props.ts

@@ -10,7 +10,7 @@ function getRootProps(mergedProps: MergedProps) {
     const { className, rootTagAttributes } = mergedProps
     let result = {
         className,
-        ref: (useRef() as React.MutableRefObject<HTMLDivElement>)
+        ref: useRef(null)
     }
     applyRefApi(result, mergedProps)
     result = resolveTagAttributes(result, rootTagAttributes)

client_core/ui/Slider/index.tsx

@@ -55,7 +55,7 @@ const Slider: Component = component<Props, DefaultProps>(
 
 
         useLayoutEffect(() => {
-            const rootElement = sliderRootProps.ref.current as HTMLDivElement
+            const rootElement = sliderRootProps.ref.current! as HTMLDivElement
             rootElement.style.setProperty(
                 '--slide_width',
                 (

client_core/ui/_internals/label.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 
 
 type WithLabel = (
-    input: JSX.Element,
+    input: React.JSX.Element,
     labelProps: ReactTagAttributes<HTMLLabelElement>,
     labelTextProps: ReactTagAttributes<HTMLDivElement>
-) => JSX.Element
+) => React.JSX.Element
 
 
 const withLabel: WithLabel = (input, labelProps, labelTextProps) => (

client_core/ui/_internals/ref_apply.ts

@@ -19,7 +19,7 @@ function applyRefApi<
             :   undefined
 
         useEffect(() => {
-            getRef((rootProps.ref as React.MutableRefObject<HTMLElement>).current, mergedProps)
+            getRef((rootProps.ref as React.RefObject<HTMLElement>).current, mergedProps)
         }, trackDependencies)
     }
 }

client_core/ui/_internals/types.d.ts

@@ -73,7 +73,7 @@ type CoreUIComponent<
 > = {
     defaults: _Defaults
     ID: string
-} & React.MemoExoticComponent<(props: _Props) => JSX.Element>
+} & React.MemoExoticComponent<(props: _Props) => React.JSX.Element>
 
 type CoreUIComponentWithDefaults<_Component extends CoreUIComponent<any, any>> = {
     (...args: Parameters<_Component>): ReturnType<_Component>

demo_app/client/main/pages/DemoComponents/components/DataTable/getEnchancedDataTableProps.tsx

@@ -79,10 +79,10 @@ function getHeadLabelMenuTableCell<T extends Parameters<NonNullable<DemoDataTabl
 
         function getSearch() {
             const searchByField = dataGridHookState.searchByField
-            let searchElement: JSX.Element | JSX.Element[]
+            let searchElement: React.JSX.Element | React.JSX.Element[]
 
             if (type == 'set') {
-                const resultCheckbox: JSX.Element[] = []
+                const resultCheckbox: React.JSX.Element[] = []
                 const searchSet = searchByField[ID] || new Set()
                 const uniqValues = new Set()
                 const { byID, sorted } = entities

demo_app/client/main/pages/DemoComponents/index.tsx

@@ -19,7 +19,7 @@ type SidebarItemProps = {
 
 
 const _demoComponents: Obj<{
-    (): JSX.Element
+    (): React.JSX.Element
     coreSrcDirName: string
 }> = demoComponents
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "siegel",
-    "version": "0.15.5",
+    "version": "0.15.6",
     "homepage": "https://siegel-qe3q.onrender.com",
     "url": "https://github.com/CyberCookie/siegel",
     "bugs": "https://github.com/CyberCookie/siegel/issues",