fixed types and added forwardRef to py-env

Author: KrzysztofZawisla

source/library/components/py-box/py-box.tsx

@@ -9,8 +9,8 @@ import type { PyBoxProperties, PyBoxTag } from "./py-box.types";
  * @deprecated
  */
 const PyBox: PyBoxTag = forwardRef(
-  <T extends object>(
-    { children, ...rest }: PyBoxProperties<T>,
+  <OptionalProperties extends object>(
+    { children, ...rest }: PyBoxProperties<OptionalProperties>,
     reference: ForwardedRef<HTMLElement> | undefined,
     // eslint-disable-next-line max-params
   ): JSX.Element => {

source/library/components/py-box/py-box.types.ts

@@ -1,7 +1,7 @@
-import type {
+import {
   DetailedHTMLProps,
+  ForwardedRef,
   HTMLAttributes,
-  LegacyRef,
   PropsWithChildren,
   WeakValidationMap,
 } from "react";
@@ -23,7 +23,7 @@ export type PyBoxProperties<OptionalProperties> =
 export type PyBoxTag = {
   <OptionalProperties extends object>(
     properties: PyBoxProperties<OptionalProperties>,
-    reference?: LegacyRef<HTMLElement>,
+    reference?: ForwardedRef<HTMLElement>,
   ): JSX.Element;
   displayName?: string;
   defaultProps?: Partial<PyBoxPropertiesBase>;

source/library/components/py-button/py-button.tsx

@@ -9,8 +9,8 @@ import type { PyButtonProperties, PyButtonTag } from "./py-button.types";
  * @deprecated
  */
 const PyButton: PyButtonTag = forwardRef(
-  <T extends object>(
-    { children, label, ...rest }: PyButtonProperties<T>,
+  <OptionalProperties extends object>(
+    { children, label, ...rest }: PyButtonProperties<OptionalProperties>,
     reference: ForwardedRef<HTMLElement> | undefined,
     // eslint-disable-next-line max-params
   ): JSX.Element => {

source/library/components/py-button/py-button.types.ts

@@ -1,7 +1,7 @@
-import type {
+import {
   DetailedHTMLProps,
+  ForwardedRef,
   HTMLAttributes,
-  LegacyRef,
   WeakValidationMap,
 } from "react";
 import type ReactElementProps from "~types/react-element-properties/react-element-properties";
@@ -24,7 +24,7 @@ export type PyButtonProperties<OptionalProperties> =
 export type PyButtonTag = {
   <OptionalProperties extends object>(
     properties: PyButtonProperties<OptionalProperties>,
-    reference?: LegacyRef<HTMLElement>,
+    reference?: ForwardedRef<HTMLElement>,
   ): JSX.Element;
   displayName?: string;
   defaultProps?: Partial<PyButtonPropertiesBase>;

source/library/components/py-config/py-config.tsx

@@ -44,7 +44,7 @@ const checkForAnyKey = (
  * @see {@link https://pyscript-react.github.io/} Pyscript-react element documentation.
  */
 const PyConfig: PyConfigTag = forwardRef(
-  <T extends object>(
+  <OptionalProperties extends object>(
     {
       children,
       source,
@@ -55,7 +55,7 @@ const PyConfig: PyConfigTag = forwardRef(
       packages,
       plugins,
       ...rest
-    }: PyConfigProperties<T>,
+    }: PyConfigProperties<OptionalProperties>,
     reference: ForwardedRef<HTMLElement> | undefined,
     // eslint-disable-next-line max-params, sonarjs/cognitive-complexity
   ): JSX.Element => {

source/library/components/py-config/py-config.types.ts

@@ -1,7 +1,7 @@
 import {
   DetailedHTMLProps,
+  ForwardedRef,
   HTMLAttributes,
-  LegacyRef,
   WeakValidationMap,
 } from "react";
 import type ReactElementProps from "~types/react-element-properties/react-element-properties";
@@ -82,7 +82,7 @@ export type PyConfigProperties<OptionalProperties> =
 export type PyConfigTag = {
   <OptionalProperties extends object>(
     properties: PyConfigProperties<OptionalProperties>,
-    reference?: LegacyRef<HTMLElement>,
+    reference?: ForwardedRef<HTMLElement>,
   ): JSX.Element;
   displayName?: string;
   defaultProps?: Partial<PyConfigPropertiesBase>;

source/library/components/py-env/py-env.tsx

@@ -1,5 +1,6 @@
 import propTypes from "prop-types";
-import { useMemo, type WeakValidationMap } from "react";
+import { ForwardedRef, WeakValidationMap, forwardRef, useMemo } from "react";
+
 import type {
   PyEnvChildrenAsObject,
   PyEnvProperties,
@@ -12,41 +13,50 @@ import type {
  * @param root0.children
  * @deprecated
  */
-const PyEnv: PyEnvTag = <T extends object>({
-  children,
-  ...rest
-}: PyEnvProperties<T>): JSX.Element => {
-  const fixedChildren: string = useMemo((): string => {
-    const { paths, items }: PyEnvChildrenAsObject = Object(children);
-    if (paths || items) {
-      const fixedItems: string =
-        [...(items || [])]
-          ?.map((element: string): string => {
-            return `- ${element}`;
-          })
-          .join("\n") || "";
-      const fixedPaths: string =
-        [...(paths || [])]
-          ?.map((element: string): string => {
-            return `\t- ${element}`;
-          })
-          .join("\n") || "";
-      const fixedPathsWithCondition: string = fixedPaths
-        ? `\n- paths:\n${fixedPaths}`
-        : "";
-      return `${fixedItems}${fixedPathsWithCondition}`;
-    } else {
-      return Array.isArray(children)
-        ? children
-            .map((element: string): string => {
+const PyEnv: PyEnvTag = forwardRef(
+  <OptionalProperties extends object>(
+    { children, ...rest }: PyEnvProperties<OptionalProperties>,
+    reference: ForwardedRef<HTMLElement> | undefined,
+    // eslint-disable-next-line max-params
+  ): JSX.Element => {
+    const fixedChildren: string = useMemo((): string => {
+      const { paths, items }: PyEnvChildrenAsObject = Object(children);
+      if (paths || items) {
+        const fixedItems: string =
+          [...(items || [])]
+            ?.map((element: string): string => {
               return `- ${element}`;
             })
-            .join("\n")
-        : (children as string);
-    }
-  }, [children]);
-  return <py-env {...rest}>{fixedChildren}</py-env>;
-};
+            .join("\n") || "";
+        const fixedPaths: string =
+          [...(paths || [])]
+            ?.map((element: string): string => {
+              return `\t- ${element}`;
+            })
+            .join("\n") || "";
+        const fixedPathsWithCondition: string = fixedPaths
+          ? `\n- paths:\n${fixedPaths}`
+          : "";
+        return `${fixedItems}${fixedPathsWithCondition}`;
+      } else {
+        return Array.isArray(children)
+          ? children
+              .map((element: string): string => {
+                return `- ${element}`;
+              })
+              .join("\n")
+          : (children as string);
+      }
+    }, [children]);
+    return (
+      <py-env ref={reference} {...rest}>
+        {fixedChildren}
+      </py-env>
+    );
+  },
+) as PyEnvTag;
+
+PyEnv.displayName = "PyEnv";
 
 PyEnv.propTypes = {
   children: propTypes.oneOfType([

source/library/components/py-env/py-env.types.ts

@@ -1,5 +1,6 @@
-import type {
+import {
   DetailedHTMLProps,
+  ForwardedRef,
   HTMLAttributes,
   WeakValidationMap,
 } from "react";
@@ -28,11 +29,17 @@ export type PyEnvPropertiesBase = Omit<
   children: string | string[] | Set<string> | PyEnvChildrenAsObject;
 };
 
-export type PyEnvProperties<T> = T extends infer T
-  ? T & PyEnvPropertiesBase
-  : PyEnvPropertiesBase;
+export type PyEnvProperties<OptionalProperties> =
+  OptionalProperties extends infer OptionalProperties
+    ? OptionalProperties & PyEnvPropertiesBase
+    : PyEnvPropertiesBase;
 
 export type PyEnvTag = {
-  <T extends object>(properties: PyEnvProperties<T>): JSX.Element;
-  propTypes: WeakValidationMap<PyEnvPropertiesBase>;
+  <OptionalProperties extends object>(
+    properties: PyEnvProperties<OptionalProperties>,
+    reference?: ForwardedRef<HTMLElement>,
+  ): JSX.Element;
+  displayName?: string;
+  defaultProps?: Partial<PyEnvPropertiesBase>;
+  propTypes?: WeakValidationMap<PyEnvPropertiesBase>;
 };