feat: add support for HtmlElement props in Collapsible and Accordion components

src/components/Accordion.tsx

@@ -1,15 +1,28 @@
-import { createSignal, FlowComponent, JSX, mergeProps } from "solid-js";
+import {
+  createSignal,
+  FlowComponent,
+  JSX,
+  mergeProps,
+  splitProps,
+} from "solid-js";
 import Collapsible from "./Collapsible";
 
 const createAccordion = (defaultItem: number | null = 0) => {
   const [item, setItem] = createSignal(defaultItem);
-  const AccordionItem: FlowComponent<{
+  const AccordionItem: FlowComponent<
-    alignCenter?: boolean;
+    {
-    label?: JSX.Element;
+      alignCenter?: boolean;
-    item?: number;
+      label?: JSX.Element;
-    activeTitleColor?: string;
+      item?: number;
-  }> = (p) => {
+    } & Parameters<typeof Collapsible>[0]
-    const props = mergeProps({ alignCenter: true, item: Math.random() }, p);
+  > = (p) => {
+    const mprops = mergeProps({ alignCenter: true, item: Math.random() }, p);
+    const [props, rest] = splitProps(mprops, [
+      "alignCenter",
+      "item",
+      "label",
+      "children",
+    ]);
 
     return (
       <Collapsible
@@ -25,10 +38,10 @@ const createAccordion = (defaultItem: number | null = 0) => {
             {props.label}
           </div>
         }
-        activeTitleColor={props.activeTitleColor}
         onChange={(evt: any) =>
           setItem(evt.currentTarget.checked && props.item)
         }
+        {...rest}
       >
         {props.children}
       </Collapsible>

src/components/Collapsible.tsx

@@ -1,4 +1,4 @@
-import { FlowComponent, JSX, mergeProps } from "solid-js";
+import { FlowComponent, JSX, mergeProps, onMount, splitProps } from "solid-js";
 
 const Collapsible: FlowComponent<
   {
@@ -8,7 +8,15 @@ const Collapsible: FlowComponent<
     label: string | JSX.Element;
   } & JSX.HTMLAttributes<HTMLDivElement>
 > = (p) => {
-  const props = mergeProps({ activeTitleColor: "text-black" }, p);
+  const mprops = mergeProps({ activeTitleColor: "text-black" }, p);
+  let [props, rest] = splitProps(mprops, [
+    "activeTitleColor",
+    "onChange",
+    "value",
+    "label",
+    "class",
+    "children",
+  ]);
   let inputRef: HTMLInputElement = undefined!;
 
   return (
@@ -19,7 +27,7 @@ const Collapsible: FlowComponent<
         props.class
       }
       onFocus={(evt) => {
-        if (props.value) {
+        if (inputRef.checked) {
           return;
         }
 
@@ -27,6 +35,7 @@ const Collapsible: FlowComponent<
         inputRef.checked = true;
         inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
       }}
+      {...rest}
     >
       <input
         ref={inputRef}