@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcTabs/package.json

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

@@ -9,8 +9,8 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {boolean} disabled - indicates whether the tag is disabled **attribute** `disabled`
 * @param {boolean} selectable - indicates whether the tag is selectable **attribute** `selectable`
 * @param {boolean} selected - indicates whether the tag is selected **attribute** `selected`
-* @param {'delegate'} _vividAriaBehaviour
-* @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
@@ -18,24 +18,23 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcTag: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onSelectedChange?: ((event: SyntheticEvent) => void) | undefined;
-        onRemoved?: ((event: SyntheticEvent) => void) | undefined;
-        connotation?: any;
-        shape?: any;
-        appearance?: any;
-        label?: string | undefined;
-        removable?: boolean | undefined;
-        disabled?: boolean | undefined;
-        selectable?: boolean | undefined;
-        selected?: boolean | undefined;
-        _vividAriaBehaviour?: 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;
+        onSelectedChange?: (event: SyntheticEvent) => void;
+        onRemoved?: (event: SyntheticEvent) => void;
+        "connotation"?: any;
+        "shape"?: any;
+        "appearance"?: any;
+        "label"?: string | undefined;
+        "removable"?: boolean;
+        "disabled"?: boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcTag/index.js

@@ -9,13 +9,21 @@ Code in this file were generated using following JSON:
  "name": "Tag",
  "cssProperties": [
   {
-   "name": "--vvd-tag-cta-contrast",
-   "default": "var(--vvd-color-cta-800)"
+   "name": "--vvd-tag-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-tag-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
   },
   {
    "name": "--vvd-tag-cta-soft",
    "default": "var(--vvd-color-cta-100)"
   },
+  {
+   "name": "--vvd-tag-cta-contrast",
+   "default": "var(--vvd-color-cta-800)"
+  },
   {
    "name": "--vvd-tag-cta-pale",
    "default": "var(--vvd-color-cta-300)"
@@ -24,6 +32,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-tag-cta-fierce",
    "default": "var(--vvd-color-cta-700)"
   },
+  {
+   "name": "--vvd-tag-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
   {
    "name": "--vvd-tag-cta-firm-all",
    "default": "var(--vvd-color-cta-600)"
@@ -37,13 +49,221 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-cta-200)"
   },
   {
-   "name": "--vvd-tag-accent-contrast",
-   "default": "var(--vvd-color-neutral-800)"
+   "name": "--vvd-tag-success-primary",
+   "default": "var(--vvd-color-success-500)"
+  },
+  {
+   "name": "--vvd-tag-success-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-tag-success-soft",
+   "default": "var(--vvd-color-success-100)"
+  },
+  {
+   "name": "--vvd-tag-success-contrast",
+   "default": "var(--vvd-color-success-800)"
+  },
+  {
+   "name": "--vvd-tag-success-pale",
+   "default": "var(--vvd-color-success-300)"
+  },
+  {
+   "name": "--vvd-tag-success-fierce",
+   "default": "var(--vvd-color-success-700)"
+  },
+  {
+   "name": "--vvd-tag-success-firm",
+   "default": "var(--vvd-color-success-600)"
+  },
+  {
+   "name": "--vvd-tag-success-firm-all",
+   "default": "var(--vvd-color-success-600)"
+  },
+  {
+   "name": "--vvd-tag-success-faint",
+   "default": "var(--vvd-color-success-50)"
+  },
+  {
+   "name": "--vvd-tag-success-dim",
+   "default": "var(--vvd-color-success-200)"
+  },
+  {
+   "name": "--vvd-tag-alert-primary",
+   "default": "var(--vvd-color-alert-500)"
+  },
+  {
+   "name": "--vvd-tag-alert-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-tag-alert-soft",
+   "default": "var(--vvd-color-alert-100)"
+  },
+  {
+   "name": "--vvd-tag-alert-contrast",
+   "default": "var(--vvd-color-alert-800)"
+  },
+  {
+   "name": "--vvd-tag-alert-pale",
+   "default": "var(--vvd-color-alert-300)"
+  },
+  {
+   "name": "--vvd-tag-alert-fierce",
+   "default": "var(--vvd-color-alert-700)"
+  },
+  {
+   "name": "--vvd-tag-alert-firm",
+   "default": "var(--vvd-color-alert-600)"
+  },
+  {
+   "name": "--vvd-tag-alert-firm-all",
+   "default": "var(--vvd-color-alert-600)"
+  },
+  {
+   "name": "--vvd-tag-alert-faint",
+   "default": "var(--vvd-color-alert-50)"
+  },
+  {
+   "name": "--vvd-tag-alert-dim",
+   "default": "var(--vvd-color-alert-200)"
+  },
+  {
+   "name": "--vvd-tag-warning-primary",
+   "default": "var(--vvd-color-warning-300)"
+  },
+  {
+   "name": "--vvd-tag-warning-primary-text",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-tag-warning-soft",
+   "default": "var(--vvd-color-warning-100)"
+  },
+  {
+   "name": "--vvd-tag-warning-contrast",
+   "default": "var(--vvd-color-warning-800)"
+  },
+  {
+   "name": "--vvd-tag-warning-pale",
+   "default": "var(--vvd-color-warning-300)"
+  },
+  {
+   "name": "--vvd-tag-warning-fierce",
+   "default": "var(--vvd-color-warning-700)"
+  },
+  {
+   "name": "--vvd-tag-warning-firm",
+   "default": "var(--vvd-color-warning-600)"
+  },
+  {
+   "name": "--vvd-tag-warning-firm-all",
+   "default": "var(--vvd-color-warning-600)"
+  },
+  {
+   "name": "--vvd-tag-warning-faint",
+   "default": "var(--vvd-color-warning-50)"
+  },
+  {
+   "name": "--vvd-tag-warning-dim",
+   "default": "var(--vvd-color-warning-200)"
+  },
+  {
+   "name": "--vvd-tag-information-primary",
+   "default": "var(--vvd-color-information-500)"
+  },
+  {
+   "name": "--vvd-tag-information-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-tag-information-soft",
+   "default": "var(--vvd-color-information-100)"
+  },
+  {
+   "name": "--vvd-tag-information-contrast",
+   "default": "var(--vvd-color-information-800)"
+  },
+  {
+   "name": "--vvd-tag-information-pale",
+   "default": "var(--vvd-color-information-300)"
+  },
+  {
+   "name": "--vvd-tag-information-fierce",
+   "default": "var(--vvd-color-information-700)"
+  },
+  {
+   "name": "--vvd-tag-information-firm",
+   "default": "var(--vvd-color-information-600)"
+  },
+  {
+   "name": "--vvd-tag-information-firm-all",
+   "default": "var(--vvd-color-information-600)"
+  },
+  {
+   "name": "--vvd-tag-information-faint",
+   "default": "var(--vvd-color-information-50)"
+  },
+  {
+   "name": "--vvd-tag-information-dim",
+   "default": "var(--vvd-color-information-200)"
+  },
+  {
+   "name": "--vvd-tag-announcement-primary",
+   "default": "var(--vvd-color-announcement-500)"
+  },
+  {
+   "name": "--vvd-tag-announcement-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-tag-announcement-soft",
+   "default": "var(--vvd-color-announcement-100)"
+  },
+  {
+   "name": "--vvd-tag-announcement-contrast",
+   "default": "var(--vvd-color-announcement-800)"
+  },
+  {
+   "name": "--vvd-tag-announcement-pale",
+   "default": "var(--vvd-color-announcement-300)"
+  },
+  {
+   "name": "--vvd-tag-announcement-fierce",
+   "default": "var(--vvd-color-announcement-700)"
+  },
+  {
+   "name": "--vvd-tag-announcement-firm",
+   "default": "var(--vvd-color-announcement-600)"
+  },
+  {
+   "name": "--vvd-tag-announcement-firm-all",
+   "default": "var(--vvd-color-announcement-600)"
+  },
+  {
+   "name": "--vvd-tag-announcement-faint",
+   "default": "var(--vvd-color-announcement-50)"
+  },
+  {
+   "name": "--vvd-tag-announcement-dim",
+   "default": "var(--vvd-color-announcement-200)"
+  },
+  {
+   "name": "--vvd-tag-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-tag-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
   },
   {
    "name": "--vvd-tag-accent-soft",
    "default": "var(--vvd-color-neutral-100)"
   },
+  {
+   "name": "--vvd-tag-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
   {
    "name": "--vvd-tag-accent-pale",
    "default": "var(--vvd-color-neutral-300)"
@@ -52,6 +272,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-tag-accent-fierce",
    "default": "var(--vvd-color-neutral-700)"
   },
+  {
+   "name": "--vvd-tag-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-tag-accent-firm-all",
    "default": "var(--vvd-color-neutral-600)"
@@ -162,46 +386,13 @@ Code in this file were generated using following JSON:
    "name": "#select",
    "privacy": "private"
   },
-  {
-   "kind": "method",
-   "name": "handleKeydown",
-   "parameters": [
-    {
-     "name": "e",
-     "type": {
-      "text": "KeyboardEvent"
-     }
-    }
-   ]
-  },
-  {
-   "kind": "method",
-   "name": "handleClick",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
-  },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "icon",
    "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",
@@ -326,7 +517,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",
@@ -355,10 +546,96 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "tag"
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byLabel",
+    "args": [
+     "byLabel"
+    ]
+   }
+  ],
+  "actions": [
+   {
+    "name": "click",
+    "args": [
+     "click",
+     "#base"
+    ]
+   },
+   {
+    "name": "remove",
+    "args": [
+     "click",
+     "#dismissButton"
+    ]
+   },
+   {
+    "name": "select",
+    "args": [
+     "toggleTag",
+     "true"
+    ]
+   },
+   {
+    "name": "unselect",
+    "args": [
+     "toggleTag",
+     "false"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "selected",
+    "args": [
+     "selected",
+     "true"
+    ]
+   },
+   {
+    "name": "unselected",
+    "args": [
+     "selected",
+     "false"
+    ]
+   },
+   {
+    "name": "disabled",
+    "args": [
+     "disabled",
+     "true"
+    ]
+   },
+   {
+    "name": "!disabled",
+    "args": [
+     "disabled",
+     "false"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "base",
+    "args": [
+     "shadow",
+     ".base"
+    ]
+   },
+   {
+    "name": "dismissButton",
+    "args": [
+     "shadow",
+     ".dismiss-button"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerTag } from '@vonage/vivid'
 
 registerTag('vvd3')
@@ -366,7 +643,7 @@ registerTag('vvd3')
 const VwcTag = wrapper(`vvd3-tag`,  {
     events: [{"name":"removed","propName":"onRemoved"},{"name":"selected-change","propName":"onSelectedChange"}],
     attributes: [],
-    properties: ['connotation', 'shape', 'appearance', 'label', 'removable', 'disabled', 'selectable', 'selected', '_vividAriaBehaviour', 'icon', 'VIVID_VERSION', 'componentName']
+    properties: ['connotation', 'shape', 'appearance', 'label', 'removable', 'disabled', 'selectable', 'selected', 'icon', 'VIVID_VERSION', 'componentName']
 })
 
 VwcTag.displayName = 'VwcTag'

package/v3/VwcTag/package.json

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

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 /** VwcTagGroup
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/tag-group
-* @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
@@ -9,13 +8,12 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcTagGroup: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        _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;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcTagGroup/index.js

@@ -28,18 +28,6 @@ Code in this file were generated using following JSON:
   "name": "tag-group"
  },
  "members": [
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "VIVID_VERSION",
@@ -70,7 +58,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 { registerTagGroup } from '@vonage/vivid'
 
 registerTagGroup('vvd3')
@@ -78,7 +66,7 @@ registerTagGroup('vvd3')
 const VwcTagGroup = wrapper(`vvd3-tag-group`,  {
     events: [],
     attributes: [],
-    properties: ['_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['VIVID_VERSION', 'componentName']
 })
 
 VwcTagGroup.displayName = 'VwcTagGroup'

package/v3/VwcTagGroup/package.json

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

@@ -6,7 +6,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {boolean} autofocus - Indicates that this element should get focus after the page finishes loading. **attribute** `autofocus`
 * @param {string} formId - The https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id of the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form the element is associated to **attribute** `form`
 * @param {string} list - Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. **attribute** `list`
-* @param {number} maxlength - The maximum number of characters a user can enter. **attribute** `maxlength`
+* @param {number} maxlength - Maximum length (number of characters) of `value` **attribute** `maxlength`
 * @param {number} minlength - The minimum number of characters a user can enter. **attribute** `minlength`
 * @param {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user. **attribute** `placeholder`
 * @param {number} cols - Sizes the element horizontally by a number of character columns. **attribute** `cols`
@@ -21,7 +21,6 @@ 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 {'delegate'} _vividAriaBehaviour
 * @param  currentValue
 * @param {string} initialValue - The default value of the element. This value sets the `value` property
 only when the `value` property has not been explicitly set. **attribute** `value`
@@ -35,38 +34,38 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcTextArea: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        onInput?: ((event: SyntheticEvent) => void) | undefined;
-        readOnly?: boolean | undefined;
-        resize?: any;
-        autofocus?: boolean | undefined;
-        formId?: string | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        placeholder?: string | undefined;
-        cols?: number | undefined;
-        rows?: number | undefined;
-        spellcheck?: boolean | undefined;
-        wrap?: any;
-        helperText?: string | undefined;
-        value?: string | undefined;
-        charCount?: boolean | undefined;
-        errorText?: string | undefined;
-        successText?: string | undefined;
-        label?: string | undefined;
-        _vividAriaBehaviour?: any;
-        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;
+        onChange?: (event: SyntheticEvent) => void;
+        onInput?: (event: SyntheticEvent) => void;
+        onInput?: (event: SyntheticEvent) => void;
+        "readOnly"?: boolean;
+        "resize"?: any;
+        "autofocus"?: boolean;
+        "formId"?: string;
+        "list"?: string;
+        "maxlength"?: number;
+        "minlength"?: number;
+        "placeholder"?: string;
+        "cols"?: number;
+        "rows"?: number;
+        "spellcheck"?: boolean;
+        "wrap"?: any;
+        "helperText"?: string | undefined;
+        "value"?: string;
+        "charCount"?: boolean;
+        "errorText"?: string | undefined;
+        "successText"?: string | undefined;
+        "label"?: string | undefined;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };