@vonage/vivid-react 2.10.98 → 3.0.0

package/v3/VwcMenu/index.js

@@ -44,6 +44,24 @@ Code in this file were generated using following JSON:
    "description": "placement of the menu",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "trigger",
+   "type": {
+    "text": "'auto' | 'legacy' | 'off' | undefined"
+   },
+   "description": "Controls how the menu opens and closes itself.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "#triggerBehaviour",
+   "privacy": "private",
+   "type": {
+    "text": "'auto' | 'legacy' | 'off'"
+   },
+   "readonly": true
+  },
   {
    "kind": "field",
    "name": "autoDismiss",
@@ -51,22 +69,9 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "indicates whether the menu will automatically close when\nthe user clicks outside the menu",
+   "description": "indicates whether the menu will automatically close when focus moves away from it.",
    "privacy": "public"
   },
-  {
-   "kind": "method",
-   "name": "autoDismissChanged",
-   "parameters": [
-    {
-     "name": "oldValue",
-     "optional": true,
-     "type": {
-      "text": "boolean"
-     }
-    }
-   ]
-  },
   {
    "kind": "field",
    "name": "open",
@@ -138,29 +143,12 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "#openIfClosed",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "#updateClickOutsideListeners",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "#wasOpenBeforeClick",
-   "privacy": "private",
-   "default": "new WeakMap<Event, boolean>()"
-  },
-  {
-   "kind": "field",
-   "name": "#onClickOutsideCapture",
+   "name": "#onAnchorClick",
    "privacy": "private"
   },
   {
    "kind": "field",
-   "name": "#onClickOutside",
-   "privacy": "private"
+   "name": "_onFocusout"
   },
   {
    "kind": "field",
@@ -172,14 +160,24 @@ Code in this file were generated using following JSON:
   {
    "kind": "field",
    "name": "handleFocusOut"
+  },
+  {
+   "kind": "field",
+   "name": "domChildren"
   }
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Fired when the menu is opened",
    "name": "open"
   },
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Fired when the menu is closed",
    "name": "close"
   }
@@ -201,13 +199,21 @@ Code in this file were generated using following JSON:
    "description": "placement of the menu",
    "fieldName": "placement"
   },
+  {
+   "name": "trigger",
+   "type": {
+    "text": "'auto' | 'legacy' | 'off' | undefined"
+   },
+   "description": "Controls how the menu opens and closes itself.",
+   "fieldName": "trigger"
+  },
   {
    "name": "auto-dismiss",
    "type": {
     "text": "boolean"
    },
    "default": "false",
-   "description": "indicates whether the menu will automatically close when\nthe user clicks outside the menu",
+   "description": "indicates whether the menu will automatically close when focus moves away from it.",
    "fieldName": "autoDismiss"
   },
   {
@@ -237,7 +243,7 @@ registerMenu('vvd3')
 const VwcMenu = wrapper(`vvd3-menu`,  {
     events: [{"name":"close","propName":"onClose"},{"name":"open","propName":"onOpen"}],
     attributes: [],
-    properties: ['ariaLabel', 'placement', 'autoDismiss', 'open', 'actionItemsSlottedContent', 'handleFocusOut']
+    properties: ['ariaLabel', 'placement', 'trigger', 'autoDismiss', 'open', '_onFocusout', 'actionItemsSlottedContent', 'handleFocusOut', 'domChildren']
 })
 
 VwcMenu.displayName = 'VwcMenu'

package/v3/VwcMenu/package.json

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

package/v3/VwcMenuItem/index.d.ts

@@ -17,6 +17,7 @@ declare const VwcMenuItem: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onExpandedChange?: ((event: SyntheticEvent) => void) | undefined;
         onChange?: ((event: SyntheticEvent) => void) | undefined;
         text?: string | undefined;
         textSecondary?: string | undefined;

package/v3/VwcMenuItem/index.js

@@ -167,6 +167,22 @@ Code in this file were generated using following JSON:
    "name": "updateSubmenu"
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<HTMLElement>"
+   },
+   "description": "Fires a custom 'expanded-change' event when the expanded state changes",
+   "name": "expanded-change"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked",
+   "name": "change"
+  }
+ ],
  "attributes": [
   {
    "name": "text",
@@ -234,7 +250,7 @@ import { registerMenuItem } from '@vonage/vivid'
 registerMenuItem('vvd3')
 
 const VwcMenuItem = wrapper(`vvd3-menu-item`,  {
-    events: [{"name":"change","propName":"onChange"}],
+    events: [{"name":"change","propName":"onChange"},{"name":"expanded-change","propName":"onExpandedChange"}],
     attributes: [],
     properties: ['text', 'textSecondary', 'connotation', 'checkTrailing', 'checkedAppearance', 'trailingMetaSlottedContent', 'updateSubmenu', 'icon']
 })

package/v3/VwcMenuItem/package.json

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

package/v3/VwcNav/package.json

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

package/v3/VwcNavDisclosure/index.d.ts

@@ -3,6 +3,8 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/nav-disclosure
 * @param {HTMLDetailsElement} details
 * @param {string | undefined} label  **attribute** `label`
+* @param {NavDisclosureAppearance | undefined} appearance - The appearance nav-disclosure should have. **attribute** `appearance`
+* @param {NavDisclosureConnotation | undefined} connotation - The connotation nav-disclosure should have. **attribute** `connotation`
 * @param {boolean} open - Indicates whether the nav-disclosure is open **attribute** `open`
 * @param {string | null} ariaCurrent  **attribute** `aria-current`
 */
@@ -16,6 +18,8 @@ declare const VwcNavDisclosure: {
         onToggle?: ((event: SyntheticEvent) => void) | undefined;
         details?: any;
         label?: string | undefined;
+        appearance?: any;
+        connotation?: any;
         open?: boolean | undefined;
         ariaCurrent?: string | null | undefined;
     }): JSX.Element;

package/v3/VwcNavDisclosure/index.js

@@ -8,6 +8,42 @@ Code in this file were generated using following JSON:
  "description": "",
  "name": "NavDisclosure",
  "cssProperties": [
+  {
+   "name": "--vvd-nav-disclosure-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-contrast",
+   "default": "var(--vvd-color-cta-800)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-fierce",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-fierce-primary",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
   {
    "name": "--vvd-nav-disclosure-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -20,10 +56,26 @@ Code in this file were generated using following JSON:
    "name": "--vvd-nav-disclosure-accent-primary-increment",
    "default": "var(--vvd-color-neutral-800)"
   },
+  {
+   "name": "--vvd-nav-disclosure-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-nav-disclosure-accent-fierce-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-nav-disclosure-accent-faint",
    "default": "var(--vvd-color-neutral-50)"
   },
+  {
+   "name": "--vvd-nav-disclosure-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-nav-disclosure-accent-soft",
    "default": "var(--vvd-color-neutral-100)"
@@ -60,6 +112,24 @@ Code in this file were generated using following JSON:
    "privacy": "public",
    "description": ""
   },
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "NavDisclosureAppearance | undefined"
+   },
+   "description": "The appearance nav-disclosure should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "connotation",
+   "type": {
+    "text": "NavDisclosureConnotation | undefined"
+   },
+   "description": "The connotation nav-disclosure should have.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "open",
@@ -86,6 +156,9 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Event emitted when the nav disclosure is toggled.",
    "name": "toggle"
   }
@@ -98,6 +171,22 @@ Code in this file were generated using following JSON:
    },
    "fieldName": "label"
   },
+  {
+   "name": "appearance",
+   "type": {
+    "text": "NavDisclosureAppearance | undefined"
+   },
+   "description": "The appearance nav-disclosure should have.",
+   "fieldName": "appearance"
+  },
+  {
+   "name": "connotation",
+   "type": {
+    "text": "NavDisclosureConnotation | undefined"
+   },
+   "description": "The connotation nav-disclosure should have.",
+   "fieldName": "connotation"
+  },
   {
    "type": {
     "text": "boolean"
@@ -133,7 +222,7 @@ registerNavDisclosure('vvd3')
 const VwcNavDisclosure = wrapper(`vvd3-nav-disclosure`,  {
     events: [{"name":"toggle","propName":"onToggle"}],
     attributes: [],
-    properties: ['details', 'label', 'open', 'ariaCurrent']
+    properties: ['details', 'label', 'appearance', 'connotation', 'open', 'ariaCurrent']
 })
 
 VwcNavDisclosure.displayName = 'VwcNavDisclosure'

package/v3/VwcNavDisclosure/package.json

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

package/v3/VwcNavItem/index.js

@@ -8,6 +8,42 @@ Code in this file were generated using following JSON:
  "description": "A Nav Item Custom HTML Element.\nBased largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
  "name": "NavItem",
  "cssProperties": [
+  {
+   "name": "--vvd-nav-item-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-contrast",
+   "default": "var(--vvd-color-cta-800)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-fierce",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-fierce-primary",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-nav-item-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
   {
    "name": "--vvd-nav-item-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -20,10 +56,26 @@ Code in this file were generated using following JSON:
    "name": "--vvd-nav-item-accent-primary-increment",
    "default": "var(--vvd-color-neutral-800)"
   },
+  {
+   "name": "--vvd-nav-item-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-nav-item-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-nav-item-accent-fierce-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-nav-item-accent-faint",
    "default": "var(--vvd-color-neutral-50)"
   },
+  {
+   "name": "--vvd-nav-item-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-nav-item-accent-soft",
    "default": "var(--vvd-color-neutral-100)"

package/v3/VwcNavItem/package.json

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

package/v3/VwcNote/index.js

@@ -56,6 +56,18 @@ Code in this file were generated using following JSON:
    "name": "--vvd-note-warning-fierce",
    "default": "var(--vvd-color-warning-700)"
   },
+  {
+   "name": "--vvd-note-announcement-intermediate",
+   "default": "var(--vvd-color-announcement-500)"
+  },
+  {
+   "name": "--vvd-note-announcement-faint",
+   "default": "var(--vvd-color-announcement-50)"
+  },
+  {
+   "name": "--vvd-note-announcement-fierce",
+   "default": "var(--vvd-color-announcement-700)"
+  },
   {
    "name": "--vvd-note-accent-intermediate",
    "default": "var(--vvd-color-neutral-500)"

package/v3/VwcNote/package.json

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

package/v3/VwcNumberField/index.d.ts

@@ -1,6 +1,17 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcNumberField
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/number-field
+* @param {boolean} readOnly - When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. **attribute** `readonly`
+* @param {boolean} autofocus - Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information. **attribute** `autofocus`
+* @param {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user. **attribute** `placeholder`
+* @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} minlength - The minimum number of characters a user can enter. **attribute** `minlength`
+* @param {number} size - Sets the width of the element to a specified number of characters. **attribute** `size`
+* @param {number} step - Amount to increment or decrement the value by **attribute** `step`
+* @param {number} max - The maximum the value can be **attribute** `max`
+* @param {number} min - The minimum the value can be **attribute** `min`
+* @param {number} valueAsNumber - The value property, typed as a number.
 * @param {| string
         | null} incrementButtonAriaLabel  **attribute** `increment-button-aria-label`
 * @param {| string
@@ -8,6 +19,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {NumberFieldAppearance | undefined} appearance  **attribute** `appearance`
 * @param {NumberFieldShape | undefined} shape  **attribute** `shape`
 * @param {string | undefined} autoComplete  **attribute** `autoComplete`
+* @param  proxy
 */
 declare const VwcNumberField: {
     (props: {
@@ -16,13 +28,25 @@ declare const VwcNumberField: {
         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;
+        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;
+        step?: number | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        valueAsNumber?: number | undefined;
         incrementButtonAriaLabel?: any;
         decrementButtonAriaLabel?: any;
         appearance?: any;
         shape?: any;
         autoComplete?: string | undefined;
+        proxy?: any;
     }): JSX.Element;
     displayName: string;
 };