fix: component props bug (#29)

* fix: ignore checkbox input native size prop

* perf: prevent layout calc for scrollbar size 0

* fix: as component function types

Author: ajbura

src/components/as.tsx

@@ -1,12 +1,12 @@
 import { ElementType, forwardRef, ReactElement } from "react";
-import { ComponentProps, AsProp, RefOfType } from "./types";
+import { AsInProps, AsOutProps, RefOfType } from "./types";
 
-export const as = <T extends ElementType, ExtraProps = unknown>(
+export const as = <DefaultType extends ElementType, ExtraProps = object>(
   fc: (
-    props: Omit<ComponentProps<T>, keyof ExtraProps | keyof AsProp<T>> & AsProp<T> & ExtraProps,
-    ref: RefOfType<T>
-  ) => ReactElement
+    props: AsInProps<DefaultType, ExtraProps>,
+    ref: RefOfType<DefaultType>
+  ) => ReactElement | null
 ) =>
-  forwardRef(fc) as unknown as <E extends ElementType = T>(
-    props: Omit<ComponentProps<E>, keyof ExtraProps | keyof AsProp<E>> & AsProp<E> & ExtraProps
-  ) => ReactElement;
+  forwardRef(fc) as unknown as <T extends ElementType = DefaultType>(
+    props: AsOutProps<T, ExtraProps>
+  ) => ReturnType<typeof fc>;

src/components/checkbox/Checkbox.tsx

@@ -4,7 +4,10 @@ import React, { AllHTMLAttributes, forwardRef } from "react";
 import { Icon, Icons } from "../icon";
 import * as css from "./Checkbox.css";
 
-type CheckboxProps = Omit<AllHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "type"> &
+type CheckboxProps = Omit<
+  AllHTMLAttributes<HTMLInputElement>,
+  "children" | "onChange" | "type" | "size"
+> &
   css.CheckboxVariants & {
     defaultChecked?: boolean;
     checked?: boolean;

src/components/scroll/Scroll.tsx

@@ -13,11 +13,16 @@ export const Scroll = as<"div", css.ScrollVariants>(
     useLayoutEffect(() => {
       if (scrollLocalRef.current) {
         const $scroll = scrollLocalRef.current;
-        const xScrollbarWidth = $scroll.offsetHeight - $scroll.clientHeight;
-        const yScrollbarWidth = $scroll.offsetWidth - $scroll.clientWidth;
+        if (size === "0") {
+          $scroll.setAttribute("data-x-scrollbar-width", "0");
+          $scroll.setAttribute("data-y-scrollbar-width", "0");
+        } else {
+          const xScrollbarWidth = $scroll.offsetHeight - $scroll.clientHeight;
+          const yScrollbarWidth = $scroll.offsetWidth - $scroll.clientWidth;
 
-        $scroll.setAttribute("data-x-scrollbar-width", `${xScrollbarWidth}`);
-        $scroll.setAttribute("data-y-scrollbar-width", `${yScrollbarWidth}`);
+          $scroll.setAttribute("data-x-scrollbar-width", `${xScrollbarWidth}`);
+          $scroll.setAttribute("data-y-scrollbar-width", `${yScrollbarWidth}`);
+        }
       }
     }, [size]);
 

src/components/types.ts

@@ -1,4 +1,9 @@
-import { ComponentPropsWithRef, ElementType, PropsWithChildren } from "react";
+import {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+  PropsWithChildren,
+} from "react";
 
 export type MainColor = "Primary" | "Secondary" | "Success" | "Warning" | "Critical";
 
@@ -18,4 +23,16 @@ export type AsProp<E extends ElementType> = {
   as?: E;
 };
 
-export type ComponentProps<E extends ElementType> = PropsWithChildren<ComponentPropsWithRef<E>>;
+export type AsInProps<E extends ElementType, ExtraProps = object> = Omit<
+  PropsWithChildren<ComponentPropsWithoutRef<E>>,
+  keyof ExtraProps | keyof AsProp<ElementType>
+> &
+  ExtraProps &
+  AsProp<E>;
+
+export type AsOutProps<E extends ElementType, ExtraProps = object> = Omit<
+  PropsWithChildren<ComponentPropsWithRef<E>>,
+  keyof ExtraProps | keyof AsProp<ElementType>
+> &
+  ExtraProps &
+  AsProp<E>;