Fixes for docs package and forwardRefs components (#912)

livekit · Jul 3, 2024 · cd447a1 · cd447a1
1 parent 3c3c314
commit cd447a1
Show file tree

Hide file tree

Showing 28 changed files with 474 additions and 437 deletions.
diff --git a/.changeset/quick-suns-relate.md b/.changeset/quick-suns-relate.md
@@ -0,0 +1,7 @@
+---
+"@livekit/components-core": patch
+"@livekit/components-react": patch
+"@livekit/api-documenter": patch
+---
+
+Fix docs package parameter extraction and forwardRefs components typing
diff --git a/docs/alpha-docs/README.md b/docs/alpha-docs/README.md
diff --git a/packages/core/etc/components-core.api.md b/packages/core/etc/components-core.api.md
@@ -8,7 +8,6 @@ import type { AudioCaptureOptions } from 'livekit-client';
 import { BehaviorSubject } from 'rxjs';
 import { ConnectionQuality } from 'livekit-client';
 import { ConnectionState } from 'livekit-client';
-import createEmailRegExp from 'email-regex';
 import { DataPacket_Kind } from 'livekit-client';
 import type { DataPublishOptions } from 'livekit-client';
 import { LocalAudioTrack } from 'livekit-client';
@@ -128,7 +127,10 @@ export const createDefaultGrammar: () => {
     url: RegExp;
 };
 
-export { createEmailRegExp }
+// @public (undocumented)
+export function createEmailRegExp({ exact }?: {
+    exact?: boolean;
+}): RegExp;
 
 // Warning: (ae-internal-missing-underscore) The name "createInteractingObservable" should be prefixed with an underscore because the declaration is marked as @internal
 //

diff --git a/packages/react/etc/components-react.api.md b/packages/react/etc/components-react.api.md
@@ -51,7 +51,7 @@ export interface AudioConferenceProps extends React_2.HTMLAttributes<HTMLDivElem
 }
 
 // @public
-export const AudioTrack: React_2.ForwardRefExoticComponent<AudioTrackProps & React_2.RefAttributes<HTMLAudioElement>>;
+export const AudioTrack: (props: AudioTrackProps & React_2.RefAttributes<HTMLAudioElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface AudioTrackProps extends React_2.AudioHTMLAttributes<HTMLAudioElement> {
@@ -64,7 +64,7 @@ export interface AudioTrackProps extends React_2.AudioHTMLAttributes<HTMLAudioEl
 }
 
 // @public
-export const AudioVisualizer: React_2.ForwardRefExoticComponent<AudioVisualizerProps & React_2.RefAttributes<SVGSVGElement>>;
+export const AudioVisualizer: (props: AudioVisualizerProps & React_2.RefAttributes<SVGSVGElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface AudioVisualizerProps extends React_2.HTMLAttributes<SVGElement> {
@@ -103,7 +103,7 @@ export function Chat({ messageFormatter, messageDecoder, messageEncoder, channel
 export const ChatCloseIcon: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
 // @public
-export const ChatEntry: React_2.ForwardRefExoticComponent<ChatEntryProps & React_2.RefAttributes<HTMLLIElement>>;
+export const ChatEntry: (props: ChatEntryProps & React_2.RefAttributes<HTMLLIElement>) => React_2.ReactNode;
 
 // @public
 export interface ChatEntryProps extends React_2.HTMLAttributes<HTMLLIElement> {
@@ -137,7 +137,7 @@ export interface ChatProps extends React_2.HTMLAttributes<HTMLDivElement>, ChatO
 }
 
 // @public
-export const ChatToggle: React_2.ForwardRefExoticComponent<ChatToggleProps & React_2.RefAttributes<HTMLButtonElement>>;
+export const ChatToggle: (props: ChatToggleProps & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface ChatToggleProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -149,14 +149,14 @@ export interface ChatToggleProps extends React_2.ButtonHTMLAttributes<HTMLButton
 export const Chevron: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
 // @public
-export const ClearPinButton: React_2.ForwardRefExoticComponent<ClearPinButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export const ClearPinButton: (props: ClearPinButtonProps & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface ClearPinButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 // @public
-export const ConnectionQualityIndicator: React_2.ForwardRefExoticComponent<ConnectionQualityIndicatorProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ConnectionQualityIndicator: (props: ConnectionQualityIndicatorProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface ConnectionQualityIndicatorOptions {
@@ -169,7 +169,7 @@ export interface ConnectionQualityIndicatorProps extends React_2.HTMLAttributes<
 }
 
 // @public
-export const ConnectionState: React_2.ForwardRefExoticComponent<ConnectionStatusProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ConnectionState: (props: ConnectionStatusProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // @public
 export function ConnectionStateToast(props: ConnectionStateToastProps): React_2.JSX.Element;
@@ -209,7 +209,7 @@ export interface ControlBarProps extends React_2.HTMLAttributes<HTMLDivElement>
 }
 
 // @public
-export const DisconnectButton: React_2.ForwardRefExoticComponent<DisconnectButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export const DisconnectButton: (props: DisconnectButtonProps & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface DisconnectButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -245,7 +245,7 @@ export interface FocusLayoutProps extends React_2.HTMLAttributes<HTMLElement> {
 }
 
 // @public
-export const FocusToggle: React_2.ForwardRefExoticComponent<FocusToggleProps & React_2.RefAttributes<HTMLButtonElement>>;
+export const FocusToggle: (props: FocusToggleProps & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // Warning: (ae-internal-missing-underscore) The name "FocusToggleIcon" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -310,9 +310,7 @@ export type LayoutContextType = {
 export const LeaveIcon: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
 // @public
-export const LiveKitRoom: React_2.ForwardRefExoticComponent<LiveKitRoomProps & {
-    children?: React_2.ReactNode;
-} & React_2.RefAttributes<HTMLDivElement>>;
+export const LiveKitRoom: (props: React_2.PropsWithChildren<LiveKitRoomProps> & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface LiveKitRoomProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onError'> {
@@ -377,7 +375,7 @@ export interface MediaDeviceMenuProps extends React_2.ButtonHTMLAttributes<HTMLB
 }
 
 // @public
-export const MediaDeviceSelect: React_2.ForwardRefExoticComponent<MediaDeviceSelectProps & React_2.RefAttributes<HTMLUListElement>>;
+export const MediaDeviceSelect: (props: MediaDeviceSelectProps & React_2.RefAttributes<HTMLUListElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface MediaDeviceSelectProps extends Omit<React_2.HTMLAttributes<HTMLUListElement>, 'onError'> {
@@ -430,7 +428,7 @@ export interface MultiBandTrackVolumeOptions {
 }
 
 // @public
-export const ParticipantAudioTile: React_2.ForwardRefExoticComponent<ParticipantTileProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ParticipantAudioTile: (props: ParticipantTileProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // Warning: (ae-internal-missing-underscore) The name "ParticipantClickEvent" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -468,7 +466,7 @@ export interface ParticipantLoopProps {
 }
 
 // @public
-export const ParticipantName: React_2.ForwardRefExoticComponent<ParticipantNameProps & React_2.RefAttributes<HTMLSpanElement>>;
+export const ParticipantName: (props: ParticipantNameProps & React_2.RefAttributes<HTMLSpanElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface ParticipantNameProps extends React_2.HTMLAttributes<HTMLSpanElement>, UseParticipantInfoOptions {
@@ -480,7 +478,7 @@ export interface ParticipantNameProps extends React_2.HTMLAttributes<HTMLSpanEle
 export const ParticipantPlaceholder: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
 // @public
-export const ParticipantTile: React_2.ForwardRefExoticComponent<ParticipantTileProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ParticipantTile: (props: ParticipantTileProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface ParticipantTileProps extends React_2.HTMLAttributes<HTMLDivElement> {
@@ -561,7 +559,7 @@ export interface RoomAudioRendererProps {
 export const RoomContext: React_2.Context<Room | undefined>;
 
 // @public
-export const RoomName: React_2.ForwardRefExoticComponent<RoomNameProps & React_2.RefAttributes<HTMLSpanElement>>;
+export const RoomName: (props: RoomNameProps & React_2.RefAttributes<HTMLSpanElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface RoomNameProps extends React_2.HTMLAttributes<HTMLSpanElement> {
@@ -597,7 +595,7 @@ export function setLogLevel(level: LogLevel, options?: SetLogLevelOptions): void
 export const SpinnerIcon: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
 // @public
-export const StartAudio: React_2.ForwardRefExoticComponent<AllowAudioPlaybackProps & React_2.RefAttributes<HTMLButtonElement>>;
+export const StartAudio: (props: AllowAudioPlaybackProps & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // @public
 export function Toast(props: React_2.HTMLAttributes<HTMLDivElement>): React_2.JSX.Element;
@@ -612,7 +610,7 @@ export interface TrackLoopProps {
 }
 
 // @public
-export const TrackMutedIndicator: React_2.ForwardRefExoticComponent<TrackMutedIndicatorProps & React_2.RefAttributes<HTMLDivElement>>;
+export const TrackMutedIndicator: (props: TrackMutedIndicatorProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface TrackMutedIndicatorProps extends React_2.HTMLAttributes<HTMLDivElement> {
@@ -640,7 +638,7 @@ export type TrackReferenceOrPlaceholder = TrackReference | TrackReferencePlaceho
 // Warning: (ae-forgotten-export) The symbol "ToggleSource" needs to be exported by the entry point index.d.ts
 //
 // @public
-export const TrackToggle: React_2.ForwardRefExoticComponent<TrackToggleProps<ToggleSource> & React_2.RefAttributes<HTMLButtonElement>>;
+export const TrackToggle: <T extends ToggleSource>(props: TrackToggleProps<T> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface TrackToggleProps<T extends ToggleSource> extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
@@ -1162,7 +1160,7 @@ export interface VideoConferenceProps extends React_2.HTMLAttributes<HTMLDivElem
 }
 
 // @public
-export const VideoTrack: React_2.ForwardRefExoticComponent<VideoTrackProps & React_2.RefAttributes<HTMLVideoElement>>;
+export const VideoTrack: (props: VideoTrackProps & React_2.RefAttributes<HTMLVideoElement>) => React_2.ReactNode;
 
 // @public (undocumented)
 export interface VideoTrackProps extends React_2.VideoHTMLAttributes<HTMLVideoElement> {

diff --git a/packages/react/src/components/ChatEntry.tsx b/packages/react/src/components/ChatEntry.tsx
@@ -33,7 +33,9 @@ export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
  * @see `Chat`
  * @public
  */
-export const ChatEntry = /* @__PURE__ */ React.forwardRef<HTMLLIElement, ChatEntryProps>(
+export const ChatEntry: (
+  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLLIElement, ChatEntryProps>(
   function ChatEntry(
     { entry, hideName = false, hideTimestamp = false, messageFormatter, ...props }: ChatEntryProps,
     ref,

diff --git a/packages/react/src/components/ConnectionState.tsx b/packages/react/src/components/ConnectionState.tsx
@@ -22,14 +22,15 @@ export interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivEleme
  * ```
  * @public
  */
-export const ConnectionState = /* @__PURE__ */ React.forwardRef<
-  HTMLDivElement,
-  ConnectionStatusProps
->(function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) {
-  const connectionState = useConnectionState(room);
-  return (
-    <div ref={ref} {...props}>
-      {connectionState}
-    </div>
-  );
-});
+export const ConnectionState: (
+  props: ConnectionStatusProps & React.RefAttributes<HTMLDivElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLDivElement, ConnectionStatusProps>(
+  function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) {
+    const connectionState = useConnectionState(room);
+    return (
+      <div ref={ref} {...props}>
+        {connectionState}
+      </div>
+    );
+  },
+);
diff --git a/packages/react/src/components/LiveKitRoom.tsx b/packages/react/src/components/LiveKitRoom.tsx
@@ -100,7 +100,9 @@ export interface LiveKitRoomProps extends Omit<React.HTMLAttributes<HTMLDivEleme
  * ```
  * @public
  */
-export const LiveKitRoom = /* @__PURE__ */ React.forwardRef<
+export const LiveKitRoom: (
+  props: React.PropsWithChildren<LiveKitRoomProps> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
   HTMLDivElement,
   React.PropsWithChildren<LiveKitRoomProps>
 >(function LiveKitRoom(props: React.PropsWithChildren<LiveKitRoomProps>, ref) {

diff --git a/packages/react/src/components/RoomName.tsx b/packages/react/src/components/RoomName.tsx
@@ -16,8 +16,12 @@ export interface RoomNameProps extends React.HTMLAttributes<HTMLSpanElement> {
  * </LiveKitRoom>
  * ```
  * @public
+ *
+ * @param props - RoomNameProps
  */
-export const RoomName = /* @__PURE__ */ React.forwardRef<HTMLSpanElement, RoomNameProps>(
+export const RoomName: (
+  props: RoomNameProps & React.RefAttributes<HTMLSpanElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLSpanElement, RoomNameProps>(
   function RoomName(
     { childrenPosition = 'before', children, ...htmlAttributes }: RoomNameProps,
     ref,

diff --git a/packages/react/src/components/controls/ChatToggle.tsx b/packages/react/src/components/controls/ChatToggle.tsx
@@ -17,7 +17,9 @@ export interface ChatToggleProps extends React.ButtonHTMLAttributes<HTMLButtonEl
  * ```
  * @public
  */
-export const ChatToggle = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ChatToggleProps>(
+export const ChatToggle: (
+  props: ChatToggleProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ChatToggleProps>(
   function ChatToggle(props: ChatToggleProps, ref) {
     const { mergedProps } = useChatToggle({ props });
 

diff --git a/packages/react/src/components/controls/ClearPinButton.tsx b/packages/react/src/components/controls/ClearPinButton.tsx
@@ -18,14 +18,15 @@ export interface ClearPinButtonProps extends React.ButtonHTMLAttributes<HTMLButt
  * ```
  * @public
  */
-export const ClearPinButton = /* @__PURE__ */ React.forwardRef<
-  HTMLButtonElement,
-  ClearPinButtonProps
->(function ClearPinButton(props: ClearPinButtonProps, ref) {
-  const { buttonProps } = useClearPinButton(props);
-  return (
-    <button ref={ref} {...buttonProps}>
-      {props.children}
-    </button>
-  );
-});
+export const ClearPinButton: (
+  props: ClearPinButtonProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ClearPinButtonProps>(
+  function ClearPinButton(props: ClearPinButtonProps, ref) {
+    const { buttonProps } = useClearPinButton(props);
+    return (
+      <button ref={ref} {...buttonProps}>
+        {props.children}
+      </button>
+    );
+  },
+);
diff --git a/packages/react/src/components/controls/DisconnectButton.tsx b/packages/react/src/components/controls/DisconnectButton.tsx
@@ -18,14 +18,15 @@ export interface DisconnectButtonProps extends React.ButtonHTMLAttributes<HTMLBu
  * ```
  * @public
  */
-export const DisconnectButton = /* @__PURE__ */ React.forwardRef<
-  HTMLButtonElement,
-  DisconnectButtonProps
->(function DisconnectButton(props: DisconnectButtonProps, ref) {
-  const { buttonProps } = useDisconnectButton(props);
-  return (
-    <button ref={ref} {...buttonProps}>
-      {props.children}
-    </button>
-  );
-});
+export const DisconnectButton: (
+  props: DisconnectButtonProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, DisconnectButtonProps>(
+  function DisconnectButton(props: DisconnectButtonProps, ref) {
+    const { buttonProps } = useDisconnectButton(props);
+    return (
+      <button ref={ref} {...buttonProps}>
+        {props.children}
+      </button>
+    );
+  },
+);
diff --git a/packages/react/src/components/controls/FocusToggle.tsx b/packages/react/src/components/controls/FocusToggle.tsx
@@ -22,7 +22,9 @@ export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonE
  * ```
  * @public
  */
-export const FocusToggle = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, FocusToggleProps>(
+export const FocusToggle: (
+  props: FocusToggleProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, FocusToggleProps>(
   function FocusToggle({ trackRef, ...props }: FocusToggleProps, ref) {
     const trackRefFromContext = useMaybeTrackRefContext();