@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcAudioPlayer/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcAudioPlayer
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/audio-player
 * @param {| string
@@ -10,13 +10,13 @@ import React, { ReactNode } from 'react';
         | null} skipForwardButtonAriaLabel  **attribute** `skip-forward-aria-label`
 * @param {| string
         | null} skipBackwardButtonAriaLabel  **attribute** `skip-backward-aria-label`
-* @param {AudioPlayerConnotation | undefined} connotation - The connotation the audio-player should have. **attribute** `connotation`
-* @param {string | undefined} src - Indicates the audio-player's src. **attribute** `src`
+* @param {AudioPlayerConnotation | undefined} connotation - Sets the color of the audio player **attribute** `connotation`
+* @param {string | undefined} src - Sets the audio source URL **attribute** `src`
 * @param  playbackRate
-* @param {boolean} disabled - Indicates whether audio player is disabled. **attribute** `disabled`
-* @param {boolean} notime  **attribute** `notime`
+* @param {boolean} disabled - Sets the disabled state of the audio player **attribute** `disabled`
+* @param {boolean} notime - Hides the time stamp **attribute** `notime`
 * @param {AudioPlayerMediaSkipBy | undefined} skipBy - Allows the audio to skip back or forward **attribute** `skip-by`
-* @param {string | null} playbackRates - Sets the available playback rates. When an empty string, no choices will be available **attribute** `playback-rates`
+* @param {string | null} playbackRates - Comma-separated string of numbers to define playback speeds **attribute** `playback-rates`
 * @param {boolean} paused
 * @param  duration
 * @param  currentTime
@@ -28,28 +28,30 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcAudioPlayer: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        playButtonAriaLabel?: any;
-        pauseButtonAriaLabel?: any;
-        sliderAriaLabel?: string | null | undefined;
-        skipForwardButtonAriaLabel?: any;
-        skipBackwardButtonAriaLabel?: any;
-        connotation?: any;
-        src?: string | undefined;
-        playbackRate?: any;
-        disabled?: boolean | undefined;
-        notime?: boolean | undefined;
-        skipBy?: any;
-        playbackRates?: string | null | undefined;
-        paused?: boolean | undefined;
-        duration?: any;
-        currentTime?: any;
-        durationFallback?: boolean | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onPlay?: (event: SyntheticEvent) => void;
+        onPause?: (event: SyntheticEvent) => void;
+        "playButtonAriaLabel"?: any;
+        "pauseButtonAriaLabel"?: any;
+        "sliderAriaLabel"?: string | null;
+        "skipForwardButtonAriaLabel"?: any;
+        "skipBackwardButtonAriaLabel"?: any;
+        "connotation"?: any;
+        "src"?: string | undefined;
+        "playbackRate"?: any;
+        "disabled"?: boolean;
+        "notime"?: boolean;
+        "skipBy"?: any;
+        "playbackRates"?: string | null;
+        "paused"?: boolean;
+        "duration"?: any;
+        "currentTime"?: any;
+        "durationFallback"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcAudioPlayer/index.js

@@ -54,7 +54,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AudioPlayerConnotation | undefined"
    },
-   "description": "The connotation the audio-player should have.",
+   "description": "Sets the color of the audio player",
    "privacy": "public"
   },
   {
@@ -63,12 +63,61 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Indicates the audio-player's src.",
+   "description": "Sets the audio source URL",
    "privacy": "public"
   },
   {
    "kind": "method",
-   "name": "srcChanged"
+   "name": "revokeSrc",
+   "privacy": "private"
+  },
+  {
+   "kind": "method",
+   "name": "getCurrentSrc",
+   "privacy": "private",
+   "return": {
+    "type": {
+     "text": "string"
+    }
+   }
+  },
+  {
+   "kind": "method",
+   "name": "canPlayType",
+   "privacy": "private",
+   "return": {
+    "type": {
+     "text": "boolean"
+    }
+   },
+   "parameters": [
+    {
+     "name": "type",
+     "type": {
+      "text": "string"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "setSrc",
+   "privacy": "private",
+   "parameters": [
+    {
+     "name": "url",
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "name": "blob",
+     "optional": true,
+     "type": {
+      "text": "Blob"
+     }
+    }
+   ]
   },
   {
    "kind": "field",
@@ -81,7 +130,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Indicates whether audio player is disabled.",
+   "description": "Sets the disabled state of the audio player",
    "privacy": "public"
   },
   {
@@ -91,8 +140,8 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "privacy": "public",
-   "description": ""
+   "description": "Hides the time stamp",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -110,7 +159,7 @@ Code in this file were generated using following JSON:
     "text": "string | null"
    },
    "default": "null",
-   "description": "Sets the available playback rates. When an empty string, no choices will be available",
+   "description": "Comma-separated string of numbers to define playback speeds",
    "privacy": "public"
   },
   {
@@ -191,6 +240,16 @@ Code in this file were generated using following JSON:
    "kind": "method",
    "name": "pause"
   },
+  {
+   "kind": "field",
+   "name": "#onPlay",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "#onPause",
+   "privacy": "private"
+  },
   {
    "kind": "method",
    "name": "#setSliderInteractionListeners",
@@ -262,6 +321,22 @@ Code in this file were generated using following JSON:
    }
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires when the audio playback is started.",
+   "name": "play"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires when the audio playback is paused.",
+   "name": "pause"
+  }
+ ],
  "attributes": [
   {
    "name": "play-button-aria-label",
@@ -308,7 +383,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AudioPlayerConnotation | undefined"
    },
-   "description": "The connotation the audio-player should have.",
+   "description": "Sets the color of the audio player",
    "fieldName": "connotation"
   },
   {
@@ -316,7 +391,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Indicates the audio-player's src.",
+   "description": "Sets the audio source URL",
    "fieldName": "src"
   },
   {
@@ -325,7 +400,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Indicates whether audio player is disabled.",
+   "description": "Sets the disabled state of the audio player",
    "fieldName": "disabled"
   },
   {
@@ -334,6 +409,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
+   "description": "Hides the time stamp",
    "fieldName": "notime"
   },
   {
@@ -350,7 +426,7 @@ Code in this file were generated using following JSON:
     "text": "string | null"
    },
    "default": "null",
-   "description": "Sets the available playback rates. When an empty string, no choices will be available",
+   "description": "Comma-separated string of numbers to define playback speeds",
    "fieldName": "playbackRates"
   },
   {
@@ -379,13 +455,13 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerAudioPlayer } from '@vonage/vivid'
 
 registerAudioPlayer('vvd3')
 
 const VwcAudioPlayer = wrapper(`vvd3-audio-player`,  {
-    events: [],
+    events: [{"name":"pause","propName":"onPause"},{"name":"play","propName":"onPlay"}],
     attributes: [],
     properties: ['playButtonAriaLabel', 'pauseButtonAriaLabel', 'sliderAriaLabel', 'skipForwardButtonAriaLabel', 'skipBackwardButtonAriaLabel', 'connotation', 'src', 'playbackRate', 'disabled', 'notime', 'skipBy', 'playbackRates', 'paused', 'duration', 'currentTime', 'durationFallback', 'VIVID_VERSION', 'componentName']
 })

package/v3/VwcAudioPlayer/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-audio-player",
-  "version": "4.29.0",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }

package/v3/VwcAvatar/index.d.ts

@@ -1,12 +1,12 @@
 import React, { ReactNode } from 'react';
 /** VwcAvatar
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/avatar
-* @param {AvatarConnotation | undefined} connotation - The connotation the avatar should have. **attribute** `connotation`
-* @param {AvatarShape | undefined} shape - The shape the avatar should have. **attribute** `shape`
-* @param {AvatarAppearance | undefined} appearance - The appearance the avatar should have. **attribute** `appearance`
-* @param {AvatarSize | undefined} size - The size the avatar should have. **attribute** `size`
-* @param {string | undefined} icon  **attribute** `icon`
-* @param {string | undefined} initials - avatar name **attribute** `initials`
+* @param {AvatarConnotation | undefined} connotation - Sets the element's connotation **attribute** `connotation`
+* @param {AvatarShape | undefined} shape - Sets the element's shape **attribute** `shape`
+* @param {AvatarAppearance | undefined} appearance - Sets the element's appearance **attribute** `appearance`
+* @param {AvatarSize | undefined} size - Sets the element's size **attribute** `size`
+* @param {string | undefined} icon - Sets the element's icon **attribute** `icon`
+* @param {string | undefined} initials - Sets the initials on the Avatar **attribute** `initials`
 * @param {boolean} clickable - Indicates whether avatar should be a clickable <button> element. **attribute** `clickable`
 * @param {string | undefined} download - Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `download`
 * @param {string | undefined} href - The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `href`
@@ -17,7 +17,6 @@ import React, { ReactNode } from 'react';
 * @param {'_self' | '_blank' | '_parent' | '_top' | undefined} target - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `target`
 * @param {string | undefined} type - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `type`
 * @param {HTMLAnchorElement} control - References the root element
-* @param {'delegate'} _vividAriaBehaviour
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -25,29 +24,28 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcAvatar: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        connotation?: any;
-        shape?: any;
-        appearance?: any;
-        size?: any;
-        icon?: string | undefined;
-        initials?: string | undefined;
-        clickable?: boolean | undefined;
-        download?: string | undefined;
-        href?: string | undefined;
-        hreflang?: string | undefined;
-        ping?: string | undefined;
-        referrerpolicy?: string | undefined;
-        rel?: string | undefined;
-        target?: any;
-        type?: string | undefined;
-        control?: any;
-        _vividAriaBehaviour?: any;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "connotation"?: any;
+        "shape"?: any;
+        "appearance"?: any;
+        "size"?: any;
+        "icon"?: string | undefined;
+        "initials"?: string | undefined;
+        "clickable"?: boolean;
+        "download"?: string | undefined;
+        "href"?: string | undefined;
+        "hreflang"?: string | undefined;
+        "ping"?: string | undefined;
+        "referrerpolicy"?: string | undefined;
+        "rel"?: string | undefined;
+        "target"?: any;
+        "type"?: string | undefined;
+        "control"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcAvatar/index.js

@@ -90,7 +90,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarConnotation | undefined"
    },
-   "description": "The connotation the avatar should have.",
+   "description": "Sets the element's connotation",
    "privacy": "public"
   },
   {
@@ -99,7 +99,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarShape | undefined"
    },
-   "description": "The shape the avatar should have.",
+   "description": "Sets the element's shape",
    "privacy": "public"
   },
   {
@@ -108,7 +108,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarAppearance | undefined"
    },
-   "description": "The appearance the avatar should have.",
+   "description": "Sets the element's appearance",
    "privacy": "public"
   },
   {
@@ -117,7 +117,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarSize | undefined"
    },
-   "description": "The size the avatar should have.",
+   "description": "Sets the element's size",
    "privacy": "public"
   },
   {
@@ -126,8 +126,8 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "privacy": "public",
-   "description": ""
+   "description": "Sets the element's icon",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -135,7 +135,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "avatar name",
+   "description": "Sets the initials on the Avatar",
    "privacy": "public"
   },
   {
@@ -264,18 +264,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/patterns/linkable.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "VIVID_VERSION",
@@ -310,7 +298,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarConnotation | undefined"
    },
-   "description": "The connotation the avatar should have.",
+   "description": "Sets the element's connotation",
    "fieldName": "connotation"
   },
   {
@@ -318,7 +306,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarShape | undefined"
    },
-   "description": "The shape the avatar should have.",
+   "description": "Sets the element's shape",
    "fieldName": "shape"
   },
   {
@@ -326,7 +314,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarAppearance | undefined"
    },
-   "description": "The appearance the avatar should have.",
+   "description": "Sets the element's appearance",
    "fieldName": "appearance"
   },
   {
@@ -334,7 +322,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AvatarSize | undefined"
    },
-   "description": "The size the avatar should have.",
+   "description": "Sets the element's size",
    "fieldName": "size"
   },
   {
@@ -342,6 +330,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
+   "description": "Sets the element's icon",
    "fieldName": "icon"
   },
   {
@@ -349,7 +338,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "avatar name",
+   "description": "Sets the initials on the Avatar",
    "fieldName": "initials"
   },
   {
@@ -474,7 +463,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerAvatar } from '@vonage/vivid'
 
 registerAvatar('vvd3')
@@ -482,7 +471,7 @@ registerAvatar('vvd3')
 const VwcAvatar = wrapper(`vvd3-avatar`,  {
     events: [],
     attributes: [],
-    properties: ['connotation', 'shape', 'appearance', 'size', 'icon', 'initials', 'clickable', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['connotation', 'shape', 'appearance', 'size', 'icon', 'initials', 'clickable', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', 'VIVID_VERSION', 'componentName']
 })
 
 VwcAvatar.displayName = 'VwcAvatar'

package/v3/VwcAvatar/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-avatar",
-  "version": "4.29.0",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }

package/v3/VwcBadge/index.d.ts

@@ -1,13 +1,14 @@
 import React, { ReactNode } from 'react';
 /** VwcBadge
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/badge
-* @param {BadgeConnotation | undefined} connotation - The connotation the badge should have. **attribute** `connotation`
-* @param {BadgeShape | undefined} shape - The shape the badge should have. **attribute** `shape`
-* @param {BadgeSize | undefined} size - The size the badge should have. **attribute** `size`
-* @param {BadgeAppearance | undefined} appearance - The appearance the badge should have. **attribute** `appearance`
-* @param {string | undefined} text - Indicates the badge's text. **attribute** `text`
+* @param {BadgeConnotation | undefined} connotation - Sets the badge connotation **attribute** `connotation`
+* @param {BadgeShape | undefined} shape - Sets the badge border-radius **attribute** `shape`
+* @param {BadgeSize | undefined} size - Sets the badge size **attribute** `size`
+* @param {BadgeAppearance | undefined} appearance - Sets the badge appearance **attribute** `appearance`
+* @param {string | undefined} text - Sets a text on the badge **attribute** `text`
 * @param {boolean} iconTrailing - Indicates the icon affix alignment. **attribute** `icon-trailing`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @param {string | undefined} icon - A decorative icon the custom element should have. See the [Vivid Icon
+Gallery](/icons/icons-gallery/) for available icons and `icon-name`s **attribute** `icon`
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -15,19 +16,19 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcBadge: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        connotation?: any;
-        shape?: any;
-        size?: any;
-        appearance?: any;
-        text?: string | undefined;
-        iconTrailing?: boolean | undefined;
-        icon?: string | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "connotation"?: any;
+        "shape"?: any;
+        "size"?: any;
+        "appearance"?: any;
+        "text"?: string | undefined;
+        "iconTrailing"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };