@livekit/components-js-docs 0.0.5 → 0.1.1

package/generated-docs/react/connectionstatetoastprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ConnectionStateToastProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionStateToast.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionStateToastProps interface
+# ConnectionStateToastProps interface
 
 **Signature:**
 

package/generated-docs/react/connectionstatetoastprops.room.md

@@ -1,6 +1,10 @@
+---
+{ "title": "ConnectionStateToastProps.room property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionStateToastProps.room property
+# ConnectionStateToastProps.room property
 
 **Signature:**
 

package/generated-docs/react/connectionstatusprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ConnectionStatusProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionState.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionStatusProps interface
+# ConnectionStatusProps interface
 
 **Signature:**
 

package/generated-docs/react/connectionstatusprops.room.md

@@ -1,6 +1,10 @@
+---
+{ "title": "ConnectionStatusProps.room property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionStatusProps.room property
+# ConnectionStatusProps.room property
 
 The room from which the connection status should be displayed.
 

package/generated-docs/react/controlbarcontrols.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ControlBarControls type",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ControlBarControls type
+# ControlBarControls type
 
 **Signature:**
 

package/generated-docs/react/controlbarprops.controls.md

@@ -1,6 +1,10 @@
+---
+{ "title": "ControlBarProps.controls property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ControlBarProps.controls property
+# ControlBarProps.controls property
 
 **Signature:**
 

package/generated-docs/react/controlbarprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ControlBarProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ControlBarProps interface
+# ControlBarProps interface
 
 **Signature:**
 

package/generated-docs/react/controlbarprops.variation.md

@@ -1,6 +1,10 @@
+---
+{ "title": "ControlBarProps.variation property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ControlBarProps.variation property
+# ControlBarProps.variation property
 
 **Signature:**
 

package/generated-docs/react/disconnectbuttonprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "DisconnectButtonProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/DisconnectButton.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## DisconnectButtonProps interface
+# DisconnectButtonProps interface
 
 **Signature:**
 

package/generated-docs/react/disconnectbuttonprops.stoptracks.md

@@ -1,6 +1,10 @@
+---
+{ "title": "DisconnectButtonProps.stopTracks property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## DisconnectButtonProps.stopTracks property
+# DisconnectButtonProps.stopTracks property
 
 **Signature:**
 

package/generated-docs/react/focuslayoutcontainerprops.focustrack.md

@@ -1,9 +1,23 @@
+---
+{ "title": "FocusLayoutContainerProps.focusTrack property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutContainerProps.focusTrack property
+# FocusLayoutContainerProps.focusTrack property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 
 **Signature:**
 
 ```typescript
 focusTrack?: TrackReference;
 ```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/focuslayoutcontainerprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "FocusLayoutContainerProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutContainerProps interface
+# FocusLayoutContainerProps interface
 
 **Signature:**
 

package/generated-docs/react/focuslayoutcontainerprops.participants.md

@@ -1,9 +1,23 @@
+---
+{ "title": "FocusLayoutContainerProps.participants property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutContainerProps.participants property
+# FocusLayoutContainerProps.participants property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 
 **Signature:**
 
 ```typescript
 participants?: Array<Participant>;
 ```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/focuslayoutprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "FocusLayoutProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutProps interface
+# FocusLayoutProps interface
 
 **Signature:**
 
@@ -14,7 +21,8 @@ export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement>
 
 ## Properties
 
-| Property                                                              | Type                                                                               | Description  |
-| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ |
-| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: [ParticipantClickEvent](./core/participantclickevent.md)<!-- -->) =&gt; void | _(Optional)_ |
-| [track?](./react/focuslayoutprops.track.md)                           | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)               | _(Optional)_ |
+| Property                                                              | Type                                                                               | Description                                            |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: [ParticipantClickEvent](./core/participantclickevent.md)<!-- -->) =&gt; void | _(Optional)_                                           |
+| [track?](./react/focuslayoutprops.track.md)                           | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)               | _(Optional)_                                           |
+| [trackRef?](./react/focuslayoutprops.trackref.md)                     | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)               | _(Optional)_ The track to display in the focus layout. |

package/generated-docs/react/focuslayoutprops.onparticipantclick.md

@@ -1,6 +1,10 @@
+---
+{ "title": "FocusLayoutProps.onParticipantClick property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutProps.onParticipantClick property
+# FocusLayoutProps.onParticipantClick property
 
 **Signature:**
 

package/generated-docs/react/focuslayoutprops.track.md

@@ -1,9 +1,23 @@
+---
+{ "title": "FocusLayoutProps.track property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutProps.track property
+# FocusLayoutProps.track property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 
 **Signature:**
 
 ```typescript
 track?: TrackReferenceOrPlaceholder;
 ```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/focuslayoutprops.trackref.md

@@ -0,0 +1,17 @@
+---
+{ "title": "FocusLayoutProps.trackRef property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayoutProps.trackRef property
+
+The track to display in the focus layout.
+
+**Signature:**
+
+```typescript
+trackRef?: TrackReferenceOrPlaceholder;
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/focustoggleprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "FocusToggleProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/FocusToggle.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps interface
+# FocusToggleProps interface
 
 **Signature:**
 
@@ -14,7 +21,8 @@ export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonE
 
 ## Properties
 
-| Property                                                | Type         | Description  |
-| ------------------------------------------------------- | ------------ | ------------ |
-| [participant?](./react/focustoggleprops.participant.md) | Participant  | _(Optional)_ |
-| [trackSource](./react/focustoggleprops.tracksource.md)  | Track.Source |              |
+| Property                                                | Type                                                                 | Description  |
+| ------------------------------------------------------- | -------------------------------------------------------------------- | ------------ |
+| [participant?](./react/focustoggleprops.participant.md) | Participant                                                          | _(Optional)_ |
+| [trackRef?](./react/focustoggleprops.trackref.md)       | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md) | _(Optional)_ |
+| [trackSource?](./react/focustoggleprops.tracksource.md) | Track.Source                                                         | _(Optional)_ |

package/generated-docs/react/focustoggleprops.participant.md

@@ -1,9 +1,23 @@
+---
+{ "title": "FocusToggleProps.participant property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps.participant property
+# FocusToggleProps.participant property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 
 **Signature:**
 
 ```typescript
 participant?: Participant;
 ```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/focustoggleprops.trackref.md

@@ -0,0 +1,13 @@
+---
+{ "title": "FocusToggleProps.trackRef property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusToggleProps.trackRef property
+
+**Signature:**
+
+```typescript
+trackRef?: TrackReferenceOrPlaceholder;
+```

package/generated-docs/react/focustoggleprops.tracksource.md

@@ -1,9 +1,23 @@
+---
+{ "title": "FocusToggleProps.trackSource property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps.trackSource property
+# FocusToggleProps.trackSource property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 
 **Signature:**
 
 ```typescript
-trackSource: Track.Source;
+trackSource?: Track.Source;
 ```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/formatchatmessagelinks.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "formatChatMessageLinks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # formatChatMessageLinks

package/generated-docs/react/gridlayoutprops.children.md

@@ -1,6 +1,10 @@
+---
+{ "title": "GridLayoutProps.children property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps.children property
+# GridLayoutProps.children property
 
 **Signature:**
 

package/generated-docs/react/gridlayoutprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "GridLayoutProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/GridLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps interface
+# GridLayoutProps interface
 
 **Signature:**
 

package/generated-docs/react/gridlayoutprops.tracks.md

@@ -1,6 +1,10 @@
+---
+{ "title": "GridLayoutProps.tracks property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps.tracks property
+# GridLayoutProps.tracks property
 
 **Signature:**
 

package/generated-docs/react/hook/usechat.md

@@ -1,21 +1,34 @@
+---
+{
+  "title": "useChat",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useChat.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # useChat
 
+The `useChat` hook provides chat functionality for a LiveKit room. It returns a simple `send` function to send chat messages and an array of `chatMessages` to hold received messages.
+
 ## Import
 
 ```typescript
-import { useChat } from '@livekit/components-react';
+import { useChat } from "@livekit/components-react";
 ```
 
+## Remarks
+
+It is possible to pass configurations for custom message encoding and decoding.
+
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="options" type="{
-    messageEncoder?: MessageEncoder;
-    messageDecoder?: MessageDecoder;
-}" optional=true %}
+      messageEncoder?: MessageEncoder;
+      messageDecoder?: MessageDecoder;
+  }" optional=true %}
 {% /parameter %}
 
 ## Returns
@@ -23,7 +36,7 @@ import { useChat } from '@livekit/components-react';
 ```typescript
 {
     send: ((message: string) => Promise<void>) | undefined;
-    chatMessages: ReceivedChatMessage[];
+    chatMessages: import("@livekit/components-core").ReceivedChatMessage[];
     isSending: boolean;
 }
 ```

package/generated-docs/react/hook/usechattoggle.md

@@ -1,18 +1,31 @@
+---
+{
+  "title": "useChatToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useChatToggle.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # useChatToggle
 
+The `useChatToggle` hook provides state and functions for toggling the chat window.
+
 ## Import
 
 ```typescript
-import { useChatToggle } from '@livekit/components-react';
+import { useChatToggle } from "@livekit/components-react";
 ```
 
+## Remarks
+
+Depends on the `LayoutContext` to work properly.
+
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
-{% parameter name="{ props }" type="UseChatToggleProps" optional=false %}
+{% parameter name="props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
 {% /parameter %}
 
 ## Returns

package/generated-docs/react/hook/useclearpinbutton.md

@@ -1,20 +1,24 @@
+---
+{
+  "title": "useClearPinButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useClearPinButton.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # useClearPinButton
 
+The `useClearPinButton` hook provides props for the [ClearPinButton()](./react/component/clearpinbutton.md) or your custom implementation of it component. It adds the `onClick` handler to signal the `LayoutContext` that the tile in focus should be cleared.
+
 ## Import
 
 ```typescript
-import { useClearPinButton } from '@livekit/components-react';
+import { useClearPinButton } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
-
-{% parameter name="props" type="ClearPinButtonProps" optional=false %}
-{% /parameter %}
-
 ## Returns
 
 ```typescript

package/generated-docs/react/hook/useconnectionqualityindicator.md

@@ -1,16 +1,33 @@
+---
+{
+  "title": "useConnectionQualityIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useConnectionQualityIndicator.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # useConnectionQualityIndicator
 
+The `useConnectionQualityIndicator` hook provides props for the `ConnectionQualityIndicator` or your custom implementation of it component.
+
 ## Import
 
 ```typescript
-import { useConnectionQualityIndicator } from '@livekit/components-react';
+import { useConnectionQualityIndicator } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { quality } = useConnectionQualityIndicator();
+// or
+const { quality } = useConnectionQualityIndicator({ participant });
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="options" type="ConnectionQualityIndicatorOptions" optional=true %}
 {% /parameter %}
@@ -19,64 +36,7 @@ import { useConnectionQualityIndicator } from '@livekit/components-react';
 
 ```typescript
 {
-  className: 'lk-rotate' |
-    'lk-audio-conference' |
-    'lk-audio-conference-stage' |
-    'lk-audio-container' |
-    'lk-button' |
-    'lk-button-group' |
-    'lk-button-group-container' |
-    'lk-camera-off-note' |
-    'lk-chat' |
-    'lk-chat-entry' |
-    'lk-chat-form' |
-    'lk-chat-form-input' |
-    'lk-chat-messages' |
-    'lk-control-bar' |
-    'lk-focus-layout-wrapper' |
-    'lk-form-control' |
-    'lk-grid-layout-wrapper' |
-    'lk-join-button' |
-    'lk-list' |
-    'lk-message-body' |
-    'lk-meta-data' |
-    'lk-participant-name' |
-    'lk-prejoin' |
-    'lk-timestamp' |
-    'lk-username-container' |
-    'lk-video-conference' |
-    'lk-video-conference-inner' |
-    'lk-video-container' |
-    'lk-audio-visualizer' |
-    'lk-button-group-menu' |
-    'lk-button-menu' |
-    'lk-carousel' |
-    'lk-chat-toggle' |
-    'lk-connection-quality' |
-    'lk-device-menu' |
-    'lk-device-menu-heading' |
-    'lk-disconnect-button' |
-    'lk-focus-layout' |
-    'lk-focus-toggle-button' |
-    'lk-focused-participant' |
-    'lk-grid-layout' |
-    'lk-media-device-select' |
-    'lk-pagination-control' |
-    'lk-pagination-count' |
-    'lk-pagination-indicator' |
-    'lk-participant-media-audio' |
-    'lk-participant-media-video' |
-    'lk-participant-metadata' |
-    'lk-participant-metadata-item' |
-    'lk-participant-placeholder' |
-    'lk-participant-tile' |
-    'lk-pip-track' |
-    'lk-room-container' |
-    'lk-spinner' |
-    'lk-start-audio-button' |
-    'lk-toast' |
-    'lk-track-muted-indicator-camera' |
-    'lk-track-muted-indicator-microphone';
+  className: "lk-connection-quality";
   quality: ConnectionQuality;
 }
 ```