@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcOption/index.js

@@ -8,6 +8,38 @@ Code in this file were generated using following JSON:
  "description": "An Option Custom HTML Element.\nImplements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .",
  "name": "ListboxOption",
  "cssProperties": [
+  {
+   "name": "--vvd-option-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-option-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-option-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-option-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-option-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-option-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
+  {
+   "name": "--vvd-option-cta-pale",
+   "default": "var(--vvd-color-cta-300)"
+  },
+  {
+   "name": "--vvd-option-cta-dim",
+   "default": "var(--vvd-color-cta-200)"
+  },
   {
    "name": "--vvd-option-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -45,6 +77,14 @@ Code in this file were generated using following JSON:
   {
    "description": "The preferred way to add an icon to the component.",
    "name": "icon"
+  },
+  {
+   "description": "Icon to be displayed in the tag when selected inside of Searchable Select.",
+   "name": "tag-icon"
+  },
+  {
+   "description": "For additional elements at the end of the Option.",
+   "name": "trailing-meta"
   }
  ],
  "members": [
@@ -64,7 +104,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The defaultSelected state of the option.",
+   "description": "Sets the option's initial selected state (mirrors the native `selected` attribute)",
    "privacy": "public"
   },
   {
@@ -106,7 +146,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "The checked state of the control.",
+   "description": "Indicates whether the option is currently selected",
    "privacy": "public"
   },
   {
@@ -163,6 +203,15 @@ Code in this file were generated using following JSON:
    "kind": "field",
    "name": "text"
   },
+  {
+   "kind": "field",
+   "name": "textSecondary",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Secondary text displayed below or next to the primary text",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "form",
@@ -177,12 +226,16 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Text to highlighted as matching a search query."
+   "description": "Text to highlighted as matching a search query"
   },
   {
    "kind": "field",
-   "name": "_hasMatchedText",
-   "readonly": true
+   "name": "connotation",
+   "type": {
+    "text": "OptionConnotation | undefined"
+   },
+   "description": "Sets the connotation that appears when selected",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -190,7 +243,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "OptionTagConnotation | undefined"
    },
-   "description": "When displayed as a tag, the connotation of the tag.",
+   "description": "When displayed as a tag, the connotation of the tag",
    "privacy": "public"
   },
   {
@@ -199,18 +252,6 @@ Code in this file were generated using following JSON:
    "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": ""
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'host'",
-   "type": {
-    "text": "'host'"
-   },
-   "inheritedFrom": {
-    "name": "HostSemantics",
-    "module": "src/shared/aria/host-semantics.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "iconTrailing",
@@ -231,7 +272,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",
@@ -267,13 +308,21 @@ 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.",
+   "description": "Sets the option's initial selected state (mirrors the native `selected` attribute)",
    "fieldName": "defaultSelected"
   },
   {
@@ -289,7 +338,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "The checked state of the control.",
+   "description": "Indicates whether the option is currently selected",
    "fieldName": "selected"
   },
   {
@@ -315,20 +364,36 @@ Code in this file were generated using following JSON:
    },
    "fieldName": "_text"
   },
+  {
+   "name": "text-secondary",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Secondary text displayed below or next to the primary text",
+   "fieldName": "textSecondary"
+  },
   {
    "name": "matched-text",
    "type": {
     "text": "string | undefined"
    },
-   "description": "Text to highlighted as matching a search query.",
+   "description": "Text to highlighted as matching a search query",
    "fieldName": "matchedText"
   },
+  {
+   "name": "connotation",
+   "type": {
+    "text": "OptionConnotation | undefined"
+   },
+   "description": "Sets the connotation that appears when selected",
+   "fieldName": "connotation"
+  },
   {
    "name": "tag-connotation",
    "type": {
     "text": "OptionTagConnotation | undefined"
    },
-   "description": "When displayed as a tag, the connotation of the tag.",
+   "description": "When displayed as a tag, the connotation of the tag",
    "fieldName": "tagConnotation"
   },
   {
@@ -349,7 +414,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",
@@ -374,10 +439,24 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "option"
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "click",
+    "args": [
+     "click",
+     "#locator"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": []
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerOption } from '@vonage/vivid'
 
 registerOption('vvd3')
@@ -385,7 +464,7 @@ registerOption('vvd3')
 const VwcOption = wrapper(`vvd3-option`,  {
     events: [],
     attributes: [],
-    properties: ['checked', 'defaultSelected', 'disabled', 'selectedAttribute', 'selected', 'value', '_label', 'label', '_text', 'text', 'matchedText', 'tagConnotation', 'proxy', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'VIVID_VERSION', 'componentName']
+    properties: ['checked', 'defaultSelected', 'disabled', 'selectedAttribute', 'selected', 'value', '_label', 'label', '_text', 'text', 'textSecondary', 'matchedText', 'connotation', 'tagConnotation', 'proxy', '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.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/VwcOptionTag/index.d.ts

@@ -7,6 +7,7 @@ import React, { ReactNode } from 'react';
 * @param {boolean} removable  **attribute** `removable`
 * @param {boolean} disabled  **attribute** `disabled`
 * @param {boolean} hasIconPlaceholder
+* @param {OptionTagSize | undefined} scale  **attribute** `scale`
 * @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
@@ -14,18 +15,19 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcOptionTag: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        shape?: any;
-        connotation?: any;
-        label?: string | undefined;
-        removable?: boolean | undefined;
-        disabled?: boolean | undefined;
-        hasIconPlaceholder?: 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;
+        "shape"?: any;
+        "connotation"?: any;
+        "label"?: string | undefined;
+        "removable"?: boolean;
+        "disabled"?: boolean;
+        "hasIconPlaceholder"?: boolean;
+        "scale"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcOptionTag/index.js

@@ -64,8 +64,11 @@ Code in this file were generated using following JSON:
    "default": "false"
   },
   {
-   "kind": "method",
-   "name": "_onClickRemove"
+   "kind": "field",
+   "name": "scale",
+   "type": {
+    "text": "OptionTagSize | undefined"
+   }
   },
   {
    "kind": "field",
@@ -125,6 +128,13 @@ Code in this file were generated using following JSON:
    },
    "default": "false",
    "fieldName": "disabled"
+  },
+  {
+   "name": "scale",
+   "type": {
+    "text": "OptionTagSize | undefined"
+   },
+   "fieldName": "scale"
   }
  ],
  "mixins": [
@@ -139,7 +149,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 { registerOptionTag } from '@vonage/vivid'
 
 registerOptionTag('vvd3')
@@ -147,7 +157,7 @@ registerOptionTag('vvd3')
 const VwcOptionTag = wrapper(`vvd3-option-tag`,  {
     events: [],
     attributes: [],
-    properties: ['shape', 'connotation', 'label', 'removable', 'disabled', 'hasIconPlaceholder', 'VIVID_VERSION', 'componentName']
+    properties: ['shape', 'connotation', 'label', 'removable', 'disabled', 'hasIconPlaceholder', 'scale', 'VIVID_VERSION', 'componentName']
 })
 
 VwcOptionTag.displayName = 'VwcOptionTag'

package/v3/VwcOptionTag/package.json

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

@@ -3,9 +3,6 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/pagination
 * @param {PaginationSize | undefined} size - The size the pagination should have. **attribute** `size`
 * @param {PaginationShape | undefined} shape - The shape the pagination should have. **attribute** `shape`
-* @param {Button[] | undefined} paginationButtons
-* @param {Button | undefined} prevButton
-* @param {Button | undefined} nextButton
 * @param {boolean} navIcons  **attribute** `nav-icons`
 * @param {number} total  **attribute** `total`
 * @param {number | undefined} selectedIndex  **attribute** `selected-index`
@@ -16,21 +13,18 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcPagination: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onPaginationChange?: ((event: SyntheticEvent) => void) | undefined;
-        size?: any;
-        shape?: any;
-        paginationButtons?: any;
-        prevButton?: any;
-        nextButton?: any;
-        navIcons?: boolean | undefined;
-        total?: number | undefined;
-        selectedIndex?: 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;
+        onPaginationChange?: (event: SyntheticEvent) => void;
+        "size"?: any;
+        "shape"?: any;
+        "navIcons"?: boolean;
+        "total"?: number;
+        "selectedIndex"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcPagination/index.js

@@ -26,27 +26,6 @@ Code in this file were generated using following JSON:
    "description": "The shape the pagination should have.",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "paginationButtons",
-   "type": {
-    "text": "Button[] | undefined"
-   }
-  },
-  {
-   "kind": "field",
-   "name": "prevButton",
-   "type": {
-    "text": "Button | undefined"
-   }
-  },
-  {
-   "kind": "field",
-   "name": "nextButton",
-   "type": {
-    "text": "Button | undefined"
-   }
-  },
   {
    "kind": "field",
    "name": "navIcons",
@@ -76,60 +55,6 @@ Code in this file were generated using following JSON:
    },
    "default": "0"
   },
-  {
-   "kind": "method",
-   "name": "totalChanged",
-   "parameters": [
-    {
-     "name": "_",
-     "type": {
-      "text": "number"
-     }
-    },
-    {
-     "name": "newValue",
-     "type": {
-      "text": "number"
-     }
-    }
-   ]
-  },
-  {
-   "kind": "method",
-   "name": "selectedIndexChanged",
-   "parameters": [
-    {
-     "name": "oldValue",
-     "type": {
-      "text": "number"
-     }
-    },
-    {
-     "name": "newValue",
-     "type": {
-      "text": "number"
-     }
-    }
-   ]
-  },
-  {
-   "kind": "method",
-   "name": "paginationButtonsChanged",
-   "parameters": [
-    {
-     "name": "_",
-     "type": {
-      "text": "Button[] | undefined"
-     }
-    },
-    {
-     "name": "newValue",
-     "type": {
-      "text": "Button[]"
-     }
-    }
-   ]
-  },
   {
    "kind": "field",
    "name": "#constrainedSelectedIndex",
@@ -231,11 +156,76 @@ 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"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerPagination } from '@vonage/vivid'
 
 registerPagination('vvd3')
@@ -243,7 +233,7 @@ registerPagination('vvd3')
 const VwcPagination = wrapper(`vvd3-pagination`,  {
     events: [{"name":"pagination-change","propName":"onPaginationChange"}],
     attributes: [],
-    properties: ['size', 'shape', 'paginationButtons', 'prevButton', 'nextButton', 'navIcons', 'total', 'selectedIndex', 'VIVID_VERSION', 'componentName']
+    properties: ['size', 'shape', 'navIcons', 'total', 'selectedIndex', 'VIVID_VERSION', 'componentName']
 })
 
 VwcPagination.displayName = 'VwcPagination'

package/v3/VwcPagination/package.json

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 /** Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
 picking values.
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/picker-field
+* @param {TextFieldSize | undefined} scale - Sets the display size of the picker field input element. **attribute** `scale`
 * @param {boolean} readOnly - Whether the date-picker is readonly. **attribute** `readonly`
 * @param {string} value - The current value of the element. **attribute** `current-value`
 * @param {string | undefined} helperText - Provides additional information to help the user enter the correct information.
@@ -18,31 +19,28 @@ 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: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        readOnly?: boolean | undefined;
-        value?: string | undefined;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        validate?: any;
-        label?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
-        specialHandling?: boolean | undefined;
-        _vividAriaBehaviour?: any;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "scale"?: any;
+        "readOnly"?: boolean;
+        "value"?: string;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "validate"?: any;
+        "label"?: string | undefined;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };