fix: lightbox props type checking in non-strict mode (#2)

src/Lightbox.tsx

@@ -20,7 +20,7 @@ const renderNode = (node: Node, props: LightboxProps): React.ReactElement =>
         node.children?.map((child) => renderNode(child, props))
     );
 
-const LightboxComponent = (props: LightboxProps & typeof LightboxDefaultProps) => {
+const LightboxComponent = (props: LightboxProps) => {
     const { plugins } = props;
 
     const { config, augmentation } = withPlugins(
@@ -44,13 +44,7 @@ const LightboxComponent = (props: LightboxProps & typeof LightboxDefaultProps) =
 
     return <>{renderNode(createNode(CoreModule, config), augmentedProps)}</>;
 };
-
 LightboxComponent.propTypes = LightboxPropTypes;
-LightboxComponent.defaultProps = LightboxDefaultProps;
-
-type LightboxComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P>
-    ? JSX.LibraryManagedAttributes<T, P>
-    : never;
 
 type MakePartial<T> = T extends object ? Partial<T> : T;
 
@@ -61,15 +55,25 @@ type NestedPartial<T extends object> = {
 type NestedOptional<T, K extends keyof T> = Omit<T, K> & NestedPartial<Pick<T, K>>;
 
 export const Lightbox = (
-    props: NestedOptional<LightboxComponentProps<typeof LightboxComponent>, "carousel" | "animation">
+    props: NestedOptional<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "on">
 ) => {
-    const { carousel, animation, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, ...restDefaultProps } = LightboxDefaultProps;
+    const { carousel, animation, render, toolbar, on, ...restProps } = props;
+    const {
+        carousel: defaultCarousel,
+        animation: defaultAnimation,
+        render: defaultRender,
+        toolbar: defaultToolbar,
+        on: defaultOn,
+        ...restDefaultProps
+    } = LightboxDefaultProps;
 
     return (
         <LightboxComponent
             carousel={{ ...defaultCarousel, ...carousel }}
             animation={{ ...defaultAnimation, ...animation }}
+            render={{ ...defaultRender, ...render }}
+            toolbar={{ ...defaultToolbar, ...toolbar }}
+            on={{ ...defaultOn, ...on }}
             {...restDefaultProps}
             {...restProps}
         />

src/types.ts

@@ -82,7 +82,17 @@ export const LightboxPropTypes = {
     close: PropTypes.func.isRequired,
     index: PropTypes.number.isRequired,
     slides: PropTypes.arrayOf(PropTypes.oneOfType(SlideTypesPropTypes).isRequired).isRequired,
-    render: PropTypes.shape({}).isRequired,
+    render: PropTypes.shape({
+        slide: PropTypes.func,
+        iconPrev: PropTypes.func,
+        iconNext: PropTypes.func,
+        iconClose: PropTypes.func,
+        iconLoading: PropTypes.func,
+        iconError: PropTypes.func,
+        buttonPrev: PropTypes.func,
+        buttonNext: PropTypes.func,
+        buttonClose: PropTypes.func,
+    }).isRequired,
     plugins: PropTypes.arrayOf(PropTypes.func.isRequired).isRequired,
     toolbar: PropTypes.shape({
         buttons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["close"]), PropTypes.node])).isRequired,
@@ -98,7 +108,13 @@ export const LightboxPropTypes = {
         fade: PropTypes.number.isRequired,
         swipe: PropTypes.number.isRequired,
     }).isRequired,
-    on: PropTypes.shape({}).isRequired,
+    on: PropTypes.shape({
+        view: PropTypes.func,
+        entering: PropTypes.func,
+        entered: PropTypes.func,
+        exiting: PropTypes.func,
+        exited: PropTypes.func,
+    }).isRequired,
 };
 
 export const LightboxDefaultProps = {

test/core/Lightbox.spec.ts → test/Lightbox.spec.ts

@@ -1,6 +1,6 @@
 import { act, render, screen } from "@testing-library/react";
 
-import { findCurrentImage, lightbox } from "../utils.js";
+import { findCurrentImage, lightbox } from "./utils.js";
 
 describe("Lightbox", () => {
     it("respects open prop", () => {