Fix missing slots on React and Preact wrapper components

lemonmade · Sep 16, 2024 · 26d3eca · 26d3eca
1 parent b4005bd
commit 26d3eca
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 19 deletions.
diff --git a/.changeset/dry-mirrors-wonder.md b/.changeset/dry-mirrors-wonder.md
@@ -0,0 +1,6 @@
+---
+'@watching/clips-preact': patch
+'@watching/clips-react': patch
+---
+
+Fix missing slots on React and Preact wrapper components
diff --git a/packages/clips-preact/source/components/Action.tsx b/packages/clips-preact/source/components/Action.tsx
@@ -1,4 +1,9 @@
-import type {RenderableProps} from 'preact';
+import {
+  cloneElement,
+  isValidElement,
+  type RenderableProps,
+  type VNode,
+} from 'preact';
 
 import type {
   Action as ActionElement,
@@ -8,23 +13,28 @@ import type {
 
 export interface ActionProps
   extends RenderableProps<Partial<ActionProperties>, ActionElement> {
+  overlay?: VNode<any>;
   onPress?(): void | Promise<void>;
   onpress?(event: ActionEvents['press']): void;
 }
 
 declare module 'preact' {
   namespace JSX {
     interface IntrinsicElements {
-      'ui-action': Omit<ActionProps, 'onPress'>;
+      'ui-action': Omit<ActionProps, 'onPress' | 'overlay'>;
     }
   }
 }
 
-export function Action({onPress, ...props}: ActionProps) {
+export function Action({overlay, onPress, ...props}: ActionProps) {
   return (
     <ui-action
       {...props}
       onpress={onPress ? (event) => event.respondWith(onPress()) : undefined}
-    />
+    >
+      {overlay && isValidElement(overlay)
+        ? cloneElement(overlay, {slot: 'overlay'})
+        : null}
+    </ui-action>
   );
 }
diff --git a/packages/clips-preact/source/components/Disclosure.tsx b/packages/clips-preact/source/components/Disclosure.tsx
@@ -1,7 +1,7 @@
 import {
   cloneElement,
   isValidElement,
-  type ComponentChild,
+  type VNode,
   type RenderableProps,
 } from 'preact';
 
@@ -15,7 +15,7 @@ export interface DisclosureProps
     Omit<Partial<DisclosureProperties>, 'label'>,
     DisclosureElement
   > {
-  label?: ComponentChild;
+  label?: VNode<any>;
 }
 
 declare module 'preact' {

diff --git a/packages/clips-preact/source/components/TextField.tsx b/packages/clips-preact/source/components/TextField.tsx
@@ -1,7 +1,7 @@
 import {
   cloneElement,
   isValidElement,
-  type ComponentChild,
+  type VNode,
   type RenderableProps,
 } from 'preact';
 
@@ -13,11 +13,10 @@ import type {
 
 export interface TextFieldProps
   extends RenderableProps<
-    Omit<Partial<TextFieldProperties>, 'label'> & {
-      label?: ComponentChild;
-    },
+    Omit<Partial<TextFieldProperties>, 'label'>,
     TextFieldElement
   > {
+  label?: VNode<any>;
   onChange?(value: string): void;
   onchange?(event: TextFieldEvents['change']): void;
   onInput?(value: string): void;

diff --git a/packages/clips-react/source/components/Action.tsx b/packages/clips-react/source/components/Action.tsx
@@ -1,4 +1,11 @@
-import {forwardRef, type PropsWithChildren, type ForwardedRef} from 'react';
+import {
+  forwardRef,
+  isValidElement,
+  cloneElement,
+  type ReactNode,
+  type PropsWithChildren,
+  type ForwardedRef,
+} from 'react';
 
 import type {
   Action as ActionElement,
@@ -9,27 +16,32 @@ import type {
 export interface ActionProps
   extends PropsWithChildren<Partial<ActionProperties>> {
   ref?: ForwardedRef<ActionElement>;
+  overlay?: ReactNode;
   onPress?(): void | Promise<void>;
   onpress?(event: ActionEvents['press']): void;
 }
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'ui-action': Omit<ActionProps, 'onPress'>;
+      'ui-action': Omit<ActionProps, 'onPress' | 'overlay'>;
     }
   }
 }
 
 export const Action = forwardRef<ActionElement, ActionProps>(function Action(
-  {onPress, ...props},
+  {overlay, onPress, ...props},
   ref,
 ) {
   return (
     <ui-action
       ref={ref}
       {...props}
       onpress={onPress ? (event) => event.respondWith(onPress()) : undefined}
-    />
+    >
+      {overlay && isValidElement(overlay)
+        ? cloneElement<any>(overlay, {slot: 'overlay'})
+        : null}
+    </ui-action>
   );
 });
diff --git a/packages/clips-react/source/components/TextField.tsx b/packages/clips-react/source/components/TextField.tsx
@@ -14,12 +14,9 @@ import type {
 } from '@watching/clips/elements';
 
 export interface TextFieldProps
-  extends PropsWithChildren<
-    Omit<Partial<TextFieldProperties>, 'label'> & {
-      label?: ReactNode;
-    }
-  > {
+  extends PropsWithChildren<Omit<Partial<TextFieldProperties>, 'label'>> {
   ref?: ForwardedRef<TextFieldElement>;
+  label?: ReactNode;
   onChange?(value: string): void;
   onchange?(event: TextFieldEvents['change']): void;
   onInput?(value: string): void;