@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcNavItem/index.js

@@ -135,7 +135,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -258,18 +258,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",
@@ -337,7 +325,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -458,10 +446,54 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "nav-item"
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byLabel",
+    "args": [
+     "byLabel"
+    ]
+   }
+  ],
+  "actions": [
+   {
+    "name": "click",
+    "args": [
+     "click",
+     "#control"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "current",
+    "args": [
+     "navCurrent",
+     "true"
+    ]
+   },
+   {
+    "name": "!current",
+    "args": [
+     "navCurrent",
+     "false"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "shadow",
+     ".control"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerNavItem } from '@vonage/vivid'
 
 registerNavItem('vvd3')
@@ -469,7 +501,7 @@ registerNavItem('vvd3')
 const VwcNavItem = wrapper(`vvd3-nav-item`,  {
     events: [],
     attributes: [],
-    properties: ['text', 'connotation', 'appearance', 'current', 'icon', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['text', 'connotation', 'appearance', 'current', 'icon', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', 'VIVID_VERSION', 'componentName']
 })
 
 VwcNavItem.displayName = 'VwcNavItem'

package/v3/VwcNavItem/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-nav-item",
-  "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/VwcNote/index.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 /** VwcNote
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/note
-* @param {string | undefined} headline - Indicates the note's headline text **attribute** `headline`
+* @param {string | undefined} headline - Sets the headline text **attribute** `headline`
 * @param {NoteConnotation | undefined} connotation  **attribute** `connotation`
-* @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
@@ -11,15 +12,15 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcNote: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        headline?: string | undefined;
-        connotation?: any;
-        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;
+        "headline"?: string | undefined;
+        "connotation"?: any;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcNote/index.js

@@ -98,7 +98,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Indicates the note's headline text",
+   "description": "Sets the headline text",
    "privacy": "public"
   },
   {
@@ -114,7 +114,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -155,7 +155,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Indicates the note's headline text",
+   "description": "Sets the headline text",
    "fieldName": "headline"
   },
   {
@@ -170,7 +170,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -194,7 +194,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 { registerNote } from '@vonage/vivid'
 
 registerNote('vvd3')

package/v3/VwcNote/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-note",
-  "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/VwcNumberField/index.d.ts

@@ -25,8 +25,8 @@ To add HTML to the helper text, use the helper-text slot instead. **attribute**
 * @param {string | undefined} errorText - Provides a custom error message. Any current error state will be overridden. **attribute** `error-text`
 * @param {string | undefined} successText - Provides a custom success message. Any current error state will be overridden. **attribute** `success-text`
 * @param {string | undefined} label - The label for the form element. **attribute** `label`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
-* @param {'delegate'} _vividAriaBehaviour
+* @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} value - The current value of the element. **attribute** `current-value`
 * @param  currentValue
 * @param {string} initialValue - The default value of the element. This value sets the `value` property
@@ -41,43 +41,44 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcNumberField: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onInput?: ((event: SyntheticEvent) => void) | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        readOnly?: boolean | undefined;
-        autofocus?: boolean | undefined;
-        placeholder?: string | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        size?: number | undefined;
-        scale?: any;
-        step?: number | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        valueAsNumber?: number | undefined;
-        incrementButtonAriaLabel?: any;
-        decrementButtonAriaLabel?: any;
-        appearance?: any;
-        shape?: any;
-        autoComplete?: string | undefined;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        successText?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        _vividAriaBehaviour?: any;
-        value?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        required?: 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;
+        onInput?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        onInput?: (event: SyntheticEvent) => void;
+        "readOnly"?: boolean;
+        "autofocus"?: boolean;
+        "placeholder"?: string;
+        "list"?: string;
+        "maxlength"?: number;
+        "minlength"?: number;
+        "size"?: number;
+        "scale"?: any;
+        "step"?: number;
+        "max"?: number;
+        "min"?: number;
+        "valueAsNumber"?: number;
+        "incrementButtonAriaLabel"?: any;
+        "decrementButtonAriaLabel"?: any;
+        "appearance"?: any;
+        "shape"?: any;
+        "autoComplete"?: string | undefined;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "successText"?: string | undefined;
+        "label"?: string | undefined;
+        "icon"?: string | undefined;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcNumberField/index.js

@@ -407,25 +407,13 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
     "module": "src/shared/patterns/affix.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "validity",
@@ -815,7 +803,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -886,6 +874,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "mixins": [
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithFeedback",
    "module": "/src/shared/feedback/mixins"
@@ -931,7 +923,8 @@ Code in this file were generated using following JSON:
     "name": "modelValue",
     "propName": "value",
     "eventNames": [
-     "input"
+     "input",
+     "@lazy:change"
     ],
     "valueMapping": "event.currentTarget.value"
    },
@@ -939,15 +932,80 @@ Code in this file were generated using following JSON:
     "name": "valueAsNumber",
     "propName": "valueAsNumber",
     "eventNames": [
-     "input"
+     "input",
+     "@lazy:change"
     ],
     "valueMapping": "event.currentTarget.valueAsNumber"
    }
   ]
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "fill",
+    "args": [
+     "fill",
+     "#control"
+    ]
+   },
+   {
+    "name": "clear",
+    "args": [
+     "clear",
+     "#control"
+    ]
+   },
+   {
+    "name": "clickIncrement",
+    "args": [
+     "clickButton",
+     "#incrementButton"
+    ]
+   },
+   {
+    "name": "clickDecrement",
+    "args": [
+     "clickButton",
+     "#decrementButton"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "valueAsNumber",
+    "args": [
+     "valueAsNumber"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "shadow",
+     "input.control"
+    ]
+   },
+   {
+    "name": "incrementButton",
+    "args": [
+     "shadowButton",
+     "#add"
+    ]
+   },
+   {
+    "name": "decrementButton",
+    "args": [
+     "shadowButton",
+     "#subtract"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerNumberField } from '@vonage/vivid'
 
 registerNumberField('vvd3')
@@ -955,7 +1013,7 @@ registerNumberField('vvd3')
 const VwcNumberField = wrapper(`vvd3-number-field`,  {
     events: [{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['readOnly', 'autofocus', 'placeholder', 'list', 'maxlength', 'minlength', 'size', 'scale', 'step', 'max', 'min', 'valueAsNumber', 'incrementButtonAriaLabel', 'decrementButtonAriaLabel', 'appearance', 'shape', 'autoComplete', 'helperText', 'errorText', 'successText', 'label', 'icon', '_vividAriaBehaviour', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['readOnly', 'autofocus', 'placeholder', 'list', 'maxlength', 'minlength', 'size', 'scale', 'step', 'max', 'min', 'valueAsNumber', 'incrementButtonAriaLabel', 'decrementButtonAriaLabel', 'appearance', 'shape', 'autoComplete', 'helperText', 'errorText', 'successText', 'label', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcNumberField.displayName = 'VwcNumberField'

package/v3/VwcNumberField/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-number-field",
-  "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/VwcOption/index.d.ts

@@ -4,22 +4,24 @@ Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/option
 * @param {boolean | undefined} checked - The checked state is used when the parent listbox is in multiple selection mode.
 To avoid accessibility conflicts, the checked state should not be present in
-single selection mode.
-* @param {boolean} defaultSelected - The defaultSelected state of the option. **attribute** `selected`
+single selection mode. **attribute** `checked`
+* @param {boolean} defaultSelected - Sets the option's initial selected state (mirrors the native `selected` attribute) **attribute** `selected`
 * @param {boolean} disabled - The disabled state of the option. **attribute** `disabled`
 * @param  selectedAttribute
-* @param {boolean} selected - The checked state of the control. **attribute** `current-selected`
+* @param {boolean} selected - Indicates whether the option is currently selected **attribute** `current-selected`
 * @param {string} value - The value of the option. **attribute** `value`
 * @param {string | undefined} _label  **attribute** `label`
 * @param {string} label
 * @param {string | undefined} _text  **attribute** `text`
 * @param  text
-* @param {string | undefined} matchedText - Text to highlighted as matching a search query. **attribute** `matched-text`
-* @param {OptionTagConnotation | undefined} tagConnotation - When displayed as a tag, the connotation of the tag. **attribute** `tag-connotation`
+* @param {string | undefined} textSecondary - Secondary text displayed below or next to the primary text **attribute** `text-secondary`
+* @param {string | undefined} matchedText - Text to highlighted as matching a search query **attribute** `matched-text`
+* @param {OptionConnotation | undefined} connotation - Sets the connotation that appears when selected **attribute** `connotation`
+* @param {OptionTagConnotation | undefined} tagConnotation - When displayed as a tag, the connotation of the tag **attribute** `tag-connotation`
 * @param  proxy
-* @param {'host'} _vividAriaBehaviour
 * @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
@@ -27,28 +29,29 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcOption: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        checked?: any;
-        defaultSelected?: boolean | undefined;
-        disabled?: boolean | undefined;
-        selectedAttribute?: any;
-        selected?: boolean | undefined;
-        value?: string | undefined;
-        _label?: string | undefined;
-        label?: string | undefined;
-        _text?: string | undefined;
-        text?: any;
-        matchedText?: string | undefined;
-        tagConnotation?: any;
-        proxy?: any;
-        _vividAriaBehaviour?: any;
-        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;
+        "checked"?: any;
+        "defaultSelected"?: boolean;
+        "disabled"?: boolean;
+        "selectedAttribute"?: any;
+        "selected"?: boolean;
+        "value"?: string;
+        "_label"?: string | undefined;
+        "label"?: string;
+        "_text"?: string | undefined;
+        "text"?: any;
+        "textSecondary"?: string | undefined;
+        "matchedText"?: string | undefined;
+        "connotation"?: any;
+        "tagConnotation"?: any;
+        "proxy"?: any;
+        "iconTrailing"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };