diff --git a/.changeset/dry-mirrors-wonder.md b/.changeset/dry-mirrors-wonder.md new file mode 100644 index 00000000..a56aa475 --- /dev/null +++ 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 index 7427f4bb..f6660220 100644 --- 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,6 +13,7 @@ import type { export interface ActionProps extends RenderableProps, ActionElement> { + overlay?: VNode; onPress?(): void | Promise; onpress?(event: ActionEvents['press']): void; } @@ -15,16 +21,20 @@ export interface ActionProps declare module 'preact' { namespace JSX { interface IntrinsicElements { - 'ui-action': Omit; + 'ui-action': Omit; } } } -export function Action({onPress, ...props}: ActionProps) { +export function Action({overlay, onPress, ...props}: ActionProps) { return ( event.respondWith(onPress()) : undefined} - /> + > + {overlay && isValidElement(overlay) + ? cloneElement(overlay, {slot: 'overlay'}) + : null} + ); } diff --git a/packages/clips-preact/source/components/Disclosure.tsx b/packages/clips-preact/source/components/Disclosure.tsx index c55bb6d7..9539e5c9 100644 --- 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, 'label'>, DisclosureElement > { - label?: ComponentChild; + label?: VNode; } declare module 'preact' { diff --git a/packages/clips-preact/source/components/TextField.tsx b/packages/clips-preact/source/components/TextField.tsx index 08eab3ed..76a78d49 100644 --- 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, 'label'> & { - label?: ComponentChild; - }, + Omit, 'label'>, TextFieldElement > { + label?: VNode; 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 index 463e60f6..da854970 100644 --- 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,6 +16,7 @@ import type { export interface ActionProps extends PropsWithChildren> { ref?: ForwardedRef; + overlay?: ReactNode; onPress?(): void | Promise; onpress?(event: ActionEvents['press']): void; } @@ -16,13 +24,13 @@ export interface ActionProps declare module 'react' { namespace JSX { interface IntrinsicElements { - 'ui-action': Omit; + 'ui-action': Omit; } } } export const Action = forwardRef(function Action( - {onPress, ...props}, + {overlay, onPress, ...props}, ref, ) { return ( @@ -30,6 +38,10 @@ export const Action = forwardRef(function Action( ref={ref} {...props} onpress={onPress ? (event) => event.respondWith(onPress()) : undefined} - /> + > + {overlay && isValidElement(overlay) + ? cloneElement(overlay, {slot: 'overlay'}) + : null} + ); }); diff --git a/packages/clips-react/source/components/TextField.tsx b/packages/clips-react/source/components/TextField.tsx index 74c11f3b..f26c54d5 100644 --- 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, 'label'> & { - label?: ReactNode; - } - > { + extends PropsWithChildren, 'label'>> { ref?: ForwardedRef; + label?: ReactNode; onChange?(value: string): void; onchange?(event: TextFieldEvents['change']): void; onInput?(value: string): void;