diff --git a/src/components/as.tsx b/src/components/as.tsx index 5c3c6f4..bb375b0 100644 --- a/src/components/as.tsx +++ b/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 = ( +export const as = ( fc: ( - props: Omit, keyof ExtraProps | keyof AsProp> & AsProp & ExtraProps, - ref: RefOfType - ) => ReactElement + props: AsInProps, + ref: RefOfType + ) => ReactElement | null ) => - forwardRef(fc) as unknown as ( - props: Omit, keyof ExtraProps | keyof AsProp> & AsProp & ExtraProps - ) => ReactElement; + forwardRef(fc) as unknown as ( + props: AsOutProps + ) => ReturnType; diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index 61b4d1a..45e4e3c 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/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, "children" | "onChange" | "type"> & +type CheckboxProps = Omit< + AllHTMLAttributes, + "children" | "onChange" | "type" | "size" +> & css.CheckboxVariants & { defaultChecked?: boolean; checked?: boolean; diff --git a/src/components/scroll/Scroll.tsx b/src/components/scroll/Scroll.tsx index 56e4ee2..54ab2b1 100644 --- a/src/components/scroll/Scroll.tsx +++ b/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]); diff --git a/src/components/types.ts b/src/components/types.ts index b5ae3e2..0a6a18e 100644 --- a/src/components/types.ts +++ b/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 = { as?: E; }; -export type ComponentProps = PropsWithChildren>; +export type AsInProps = Omit< + PropsWithChildren>, + keyof ExtraProps | keyof AsProp +> & + ExtraProps & + AsProp; + +export type AsOutProps = Omit< + PropsWithChildren>, + keyof ExtraProps | keyof AsProp +> & + ExtraProps & + AsProp;