@vonage/vivid-react 3.5.1 → 4.0.0

package/v3/VwcNavItem/index.js

@@ -458,6 +458,50 @@ 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"
+    ]
+   }
+  ]
  }
 }
 */

package/v3/VwcNavItem/package.json

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

package/v3/VwcNote/package.json

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

package/v3/VwcNumberField/index.js

@@ -886,6 +886,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "mixins": [
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithFeedback",
    "module": "/src/shared/feedback/mixins"
@@ -944,6 +948,70 @@ Code in this file were generated using following JSON:
     "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"
+    ]
+   }
+  ]
  }
 }
 */

package/v3/VwcNumberField/package.json

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

package/v3/VwcOption/index.d.ts

@@ -4,17 +4,17 @@ 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.
+single selection mode. **attribute** `checked`
+* @param {boolean} defaultSelected - The defaultSelected state of the option. **attribute** `selected`
 * @param {boolean} disabled - The disabled state of the option. **attribute** `disabled`
-* @param {boolean} selectedAttribute - The selected attribute value. This sets the initial selected value. **attribute** `selected`
-* @param {boolean} selected - The checked state of the control.
-* @param {boolean} dirtyValue - Track whether the value has been changed from the initial value
+* @param  selectedAttribute
+* @param {boolean} selected - The checked state of the control. **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} value
+* @param {string | undefined} textSecondary  **attribute** `text-secondary`
 * @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  proxy
@@ -35,14 +35,14 @@ declare const VwcOption: {
         checked?: any;
         defaultSelected?: boolean | undefined;
         disabled?: boolean | undefined;
-        selectedAttribute?: boolean | undefined;
+        selectedAttribute?: any;
         selected?: boolean | undefined;
-        dirtyValue?: boolean | undefined;
+        value?: string | undefined;
         _label?: string | undefined;
         label?: string | undefined;
         _text?: string | undefined;
         text?: any;
-        value?: string | undefined;
+        textSecondary?: string | undefined;
         matchedText?: string | undefined;
         tagConnotation?: any;
         proxy?: any;

package/v3/VwcOption/index.js

@@ -45,6 +45,10 @@ Code in this file were generated using following JSON:
   {
    "description": "The preferred way to add an icon to the component.",
    "name": "icon"
+  },
+  {
+   "description": "For additional elements at the end of the Option.",
+   "name": "trailing-meta"
   }
  ],
  "members": [
@@ -98,22 +102,7 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "selectedAttribute",
-   "type": {
-    "text": "boolean"
-   },
-   "description": "The selected attribute value. This sets the initial selected value.",
-   "privacy": "public"
-  },
-  {
-   "kind": "method",
-   "name": "selectedAttributeChanged",
-   "privacy": "protected",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
+   "name": "selectedAttribute"
   },
   {
    "kind": "field",
@@ -136,30 +125,18 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "dirtyValue",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "description": "Track whether the value has been changed from the initial value"
-  },
-  {
-   "kind": "field",
-   "name": "initialValue",
+   "name": "value",
    "type": {
     "text": "string"
    },
-   "privacy": "protected",
-   "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set."
+   "default": "''",
+   "description": "The value of the option.",
+   "privacy": "public"
   },
   {
    "kind": "method",
-   "name": "initialValueChanged",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
+   "name": "valueChanged",
+   "privacy": "protected"
   },
   {
    "kind": "field",
@@ -192,10 +169,12 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "value",
+   "name": "textSecondary",
    "type": {
-    "text": "string"
-   }
+    "text": "string | undefined"
+   },
+   "privacy": "public",
+   "description": ""
   },
   {
    "kind": "field",
@@ -230,7 +209,7 @@ Code in this file were generated using following JSON:
   {
    "kind": "field",
    "name": "proxy",
-   "default": "new Option(\n\t\t\tthis.text,\n\t\t\t// @ts-expect-error Propery is used before it is assigned\n\t\t\tthis.initialValue,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
+   "default": "new Option(\n\t\t\tthis.text,\n\t\t\tthis.value,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
    "description": ""
   },
   {
@@ -301,6 +280,23 @@ Code in this file were generated using following JSON:
   }
  ],
  "attributes": [
+  {
+   "name": "checked",
+   "type": {
+    "text": "boolean | undefined"
+   },
+   "description": "The checked state is used when the parent listbox is in multiple selection mode.\nTo avoid accessibility conflicts, the checked state should not be present in\nsingle selection mode.",
+   "fieldName": "checked"
+  },
+  {
+   "name": "selected",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "The defaultSelected state of the option.",
+   "fieldName": "defaultSelected"
+  },
   {
    "name": "disabled",
    "type": {
@@ -310,20 +306,21 @@ Code in this file were generated using following JSON:
    "fieldName": "disabled"
   },
   {
-   "name": "selected",
+   "name": "current-selected",
    "type": {
     "text": "boolean"
    },
-   "description": "The selected attribute value. This sets the initial selected value.",
-   "fieldName": "selectedAttribute"
+   "description": "The checked state of the control.",
+   "fieldName": "selected"
   },
   {
    "name": "value",
    "type": {
     "text": "string"
    },
-   "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
-   "fieldName": "initialValue"
+   "default": "''",
+   "description": "The value of the option.",
+   "fieldName": "value"
   },
   {
    "name": "label",
@@ -339,6 +336,13 @@ Code in this file were generated using following JSON:
    },
    "fieldName": "_text"
   },
+  {
+   "name": "text-secondary",
+   "type": {
+    "text": "string | undefined"
+   },
+   "fieldName": "textSecondary"
+  },
   {
    "name": "matched-text",
    "type": {
@@ -398,6 +402,20 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "option"
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "click",
+    "args": [
+     "click",
+     "#locator"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": []
  }
 }
 */
@@ -409,7 +427,7 @@ registerOption('vvd3')
 const VwcOption = wrapper(`vvd3-option`,  {
     events: [],
     attributes: [],
-    properties: ['checked', 'defaultSelected', 'disabled', 'selectedAttribute', 'selected', 'dirtyValue', '_label', 'label', '_text', 'text', 'value', 'matchedText', 'tagConnotation', 'proxy', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'VIVID_VERSION', 'componentName']
+    properties: ['checked', 'defaultSelected', 'disabled', 'selectedAttribute', 'selected', 'value', '_label', 'label', '_text', 'text', 'textSecondary', 'matchedText', 'tagConnotation', 'proxy', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'VIVID_VERSION', 'componentName']
 })
 
 VwcOption.displayName = 'VwcOption'

package/v3/VwcOption/package.json

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

package/v3/VwcOptionTag/package.json

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

package/v3/VwcPagination/index.js

@@ -231,7 +231,72 @@ Code in this file were generated using following JSON:
  },
  "vividComponent": {
   "public": true,
-  "name": "pagination"
+  "name": "pagination",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "propName": "selectedIndex",
+    "eventNames": [
+     "pagination-change"
+    ],
+    "valueMapping": "event.currentTarget.selectedIndex"
+   }
+  ]
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "clickNext",
+    "args": [
+     "click",
+     "#nextButton"
+    ]
+   },
+   {
+    "name": "clickPrev",
+    "args": [
+     "click",
+     "#prevButton"
+    ]
+   },
+   {
+    "name": "clickPageIndex",
+    "args": [
+     "clickPaginationPage"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "total",
+    "args": [
+     "total"
+    ]
+   },
+   {
+    "name": "selectedPage",
+    "args": [
+     "paginationSelectedPage"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "nextButton",
+    "args": [
+     "shadow",
+     ".next-button"
+    ]
+   },
+   {
+    "name": "prevButton",
+    "args": [
+     "shadow",
+     ".prev-button"
+    ]
+   }
+  ]
  }
 }
 */

package/v3/VwcPagination/package.json

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

package/v3/VwcPickerField/index.d.ts

@@ -18,7 +18,6 @@ only when the `value` property has not been explicitly set. **attribute** `value
 * @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
-* @param {boolean} specialHandling
 * @param {VividAriaBehaviour} _vividAriaBehaviour
 */
 declare const VwcPickerField: {
@@ -41,7 +40,6 @@ declare const VwcPickerField: {
         required?: boolean | undefined;
         VIVID_VERSION?: string | undefined;
         componentName?: string | undefined;
-        specialHandling?: boolean | undefined;
         _vividAriaBehaviour?: any;
     }): JSX.Element;
     displayName: string;

package/v3/VwcPickerField/index.js

@@ -42,7 +42,7 @@ Code in this file were generated using following JSON:
    "name": "#localeChangeObserver",
    "privacy": "private",
    "type": {
-    "text": "BindingObserver"
+    "text": "ExpressionNotifier"
    }
   },
   {
@@ -357,18 +357,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/foundation/vivid-element/vivid-element.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "specialHandling",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "inheritedFrom": {
-    "name": "VividElement",
-    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "_vividAriaBehaviour",
@@ -508,6 +496,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "mixins": [
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithFeedback",
    "module": "/src/shared/feedback/mixins"
@@ -536,6 +528,41 @@ Code in this file were generated using following JSON:
  "superclass": {
   "name": "VividElement",
   "module": "/src/shared/foundation/vivid-element/vivid-element"
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "clear",
+    "args": [
+     "clearPicker"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "shadowTextField",
+     "[data-vvd-component=text-field].control"
+    ]
+   },
+   {
+    "name": "pickerButton",
+    "args": [
+     "shadowButton",
+     "#picker-button"
+    ]
+   },
+   {
+    "name": "clearButton",
+    "args": [
+     "shadowButton",
+     "#clear-button"
+    ]
+   }
+  ]
  }
 }
 */
@@ -547,7 +574,7 @@ registerPickerField('vvd3')
 const VwcPickerField = wrapper(`vvd3-picker-field`,  {
     events: [],
     attributes: [],
-    properties: ['readOnly', 'value', 'helperText', 'errorText', 'validate', 'label', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName', 'specialHandling', '_vividAriaBehaviour']
+    properties: ['readOnly', 'value', 'helperText', 'errorText', 'validate', 'label', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName', '_vividAriaBehaviour']
 })
 
 VwcPickerField.displayName = 'VwcPickerField'

package/v3/VwcPickerField/package.json

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

package/v3/VwcPopup/package.json

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

package/v3/VwcProgress/package.json

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