@vonage/vivid-react 2.10.98 → 3.0.0

package/v3/VwcCombobox/index.js

@@ -7,20 +7,6 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "",
  "name": "Combobox",
- "cssProperties": [
-  {
-   "name": "--vvd-combobox-accent-intermediate",
-   "default": "var(--vvd-color-neutral-500)"
-  },
-  {
-   "name": "--vvd-combobox-accent-primary",
-   "default": "var(--vvd-color-canvas-text)"
-  },
-  {
-   "name": "--vvd-combobox-accent-soft",
-   "default": "var(--vvd-color-neutral-100)"
-  }
- ],
  "slots": [
   {
    "description": "Default slot.",
@@ -28,6 +14,15 @@ Code in this file were generated using following JSON:
   }
  ],
  "members": [
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "ComboboxAppearance | undefined"
+   },
+   "description": "The appearance attribute.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "placement",
@@ -36,6 +31,16 @@ Code in this file were generated using following JSON:
    },
    "description": "the placement of the combobox\n\nHTML Attribute: string"
   },
+  {
+   "kind": "field",
+   "name": "fixedDropdown",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Whether the dropdown is using a fixed positioning strategy.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "_popup",
@@ -51,7 +56,24 @@ Code in this file were generated using following JSON:
    }
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires a custom 'change' event when the value updates",
+   "name": "change"
+  }
+ ],
  "attributes": [
+  {
+   "name": "appearance",
+   "type": {
+    "text": "ComboboxAppearance | undefined"
+   },
+   "description": "The appearance attribute.",
+   "fieldName": "appearance"
+  },
   {
    "name": "placement",
    "type": {
@@ -59,6 +81,15 @@ Code in this file were generated using following JSON:
    },
    "description": "the placement of the combobox\n\nHTML Attribute: string",
    "fieldName": "placement"
+  },
+  {
+   "name": "fixed-dropdown",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Whether the dropdown is using a fixed positioning strategy.",
+   "fieldName": "fixedDropdown"
   }
  ],
  "superclass": {
@@ -71,7 +102,7 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "modelValue",
-    "attributeName": "current-value",
+    "attributeName": "value",
     "eventName": "change",
     "valueMapping": "(event.target as HTMLInputElement).value"
    }
@@ -87,7 +118,7 @@ registerCombobox('vvd3')
 const VwcCombobox = wrapper(`vvd3-combobox`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['placement', '_popup', '_anchor']
+    properties: ['appearance', 'placement', 'fixedDropdown', '_popup', '_anchor']
 })
 
 VwcCombobox.displayName = 'VwcCombobox'

package/v3/VwcCombobox/package.json

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

@@ -117,6 +117,9 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>"
+   },
    "description": "Event that fires when a cell is clicked",
    "name": "cell-click"
   }

package/v3/VwcDataGrid/package.json

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

@@ -14,6 +14,7 @@ declare const VwcDataGridCell: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onSort?: ((event: SyntheticEvent) => void) | undefined;
         onCellClick?: ((event: SyntheticEvent) => void) | undefined;
+        onCellFocused?: ((event: SyntheticEvent) => void) | undefined;
         ariaSelected?: string | null | undefined;
         ariaSort?: string | null | undefined;
         updateCellStyle?: any;

package/v3/VwcDataGridCell/index.js

@@ -153,12 +153,25 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<{columnDataKey: string, ariaSort: string | null}>"
+   },
    "description": "Event that fires when a sortable column header is clicked",
    "name": "sort"
   },
   {
+   "type": {
+    "text": "CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>"
+   },
    "description": "Event that fires when a cell is clicked",
    "name": "cell-click"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<HTMLElement>"
+   },
+   "description": "Fires a custom 'cell-focused' event when focus is on the cell or its contents",
+   "name": "cell-focused"
   }
  ],
  "attributes": [
@@ -197,7 +210,7 @@ import { registerDataGridCell } from '@vonage/vivid'
 registerDataGridCell('vvd3')
 
 const VwcDataGridCell = wrapper(`vvd3-data-grid-cell`,  {
-    events: [{"name":"cell-click","propName":"onCellClick"},{"name":"sort","propName":"onSort"}],
+    events: [{"name":"cell-focused","propName":"onCellFocused"},{"name":"cell-click","propName":"onCellClick"},{"name":"sort","propName":"onSort"}],
     attributes: [],
     properties: ['ariaSelected', 'ariaSort', 'updateCellStyle']
 })

package/v3/VwcDataGridCell/package.json

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

@@ -11,6 +11,7 @@ declare const VwcDataGridRow: {
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onCellClick?: ((event: SyntheticEvent) => void) | undefined;
+        onRowFocused?: ((event: SyntheticEvent) => void) | undefined;
         ariaSelected?: string | null | undefined;
     }): JSX.Element;
     displayName: string;

package/v3/VwcDataGridRow/index.js

@@ -93,8 +93,18 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>"
+   },
    "description": "Event that fires when a cell is clicked",
    "name": "cell-click"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<HTMLElement>"
+   },
+   "description": "Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row",
+   "name": "row-focused"
   }
  ],
  "attributes": [
@@ -124,7 +134,7 @@ import { registerDataGridRow } from '@vonage/vivid'
 registerDataGridRow('vvd3')
 
 const VwcDataGridRow = wrapper(`vvd3-data-grid-row`,  {
-    events: [{"name":"cell-click","propName":"onCellClick"}],
+    events: [{"name":"row-focused","propName":"onRowFocused"},{"name":"cell-click","propName":"onCellClick"}],
     attributes: [],
     properties: ['ariaSelected']
 })

package/v3/VwcDataGridRow/package.json

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

@@ -18,9 +18,9 @@ declare const VwcDatePicker: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onClearClick?: ((event: SyntheticEvent) => void) | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
         onInput?: ((event: SyntheticEvent) => void) | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
+        onClearClick?: ((event: SyntheticEvent) => void) | undefined;
         type?: string | undefined;
         label?: string | undefined;
         min?: string | undefined;

package/v3/VwcDatePicker/index.js

@@ -238,6 +238,33 @@ Code in this file were generated using following JSON:
    }
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emitted when the date is changed by the user.",
+   "name": "input"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emitted when the date is changed by the user.",
+   "name": "change"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Event emitted when the clear button is clicked.",
+   "name": "clear-click",
+   "inheritedFrom": {
+    "name": "DatePickerBase",
+    "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
+   }
+  }
+ ],
  "superclass": {
   "name": "DatePickerBase",
   "module": "/libs/components/src/shared/date-picker/date-picker-base"
@@ -304,16 +331,6 @@ Code in this file were generated using following JSON:
     "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
    }
   }
- ],
- "events": [
-  {
-   "description": "Event emitted when the clear value changes",
-   "name": "clear-click",
-   "inheritedFrom": {
-    "name": "DatePickerBase",
-    "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
-   }
-  }
  ]
 }
 */

package/v3/VwcDatePicker/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-date-picker",
-  "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/VwcDatePickerBase/index.js

@@ -176,7 +176,10 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
-   "description": "Event emitted when the clear value changes",
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Event emitted when the clear button is clicked.",
    "name": "clear-click"
   }
  ],

package/v3/VwcDatePickerBase/package.json

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

@@ -35,7 +35,8 @@ declare const VwcDateRangePicker: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onInput: start | null;
+        onInput?: start | null;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
         onClearClick?: ((event: SyntheticEvent) => void) | undefined;
         initialStart?: string | undefined;
         initialEnd?: string | undefined;

package/v3/VwcDateRangePicker/index.js

@@ -314,15 +314,38 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Event emitted when the start value changes",
    "name": "input:start"
   },
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Event emitted when the end value changes",
    "name": "input:end"
   },
   {
-   "description": "Event emitted when the clear value changes",
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emitted when either the start or end value changes",
+   "name": "input"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emitted when either the start or end value changes",
+   "name": "change"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Event emitted when the clear button is clicked.",
    "name": "clear-click",
    "inheritedFrom": {
     "name": "DatePickerBase",
@@ -425,13 +448,13 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "start",
-    "attributeName": "current-start",
+    "attributeName": "start",
     "eventName": "input:start",
     "valueMapping": "(event.target as any).start"
    },
    {
     "name": "end",
-    "attributeName": "current-end",
+    "attributeName": "end",
     "eventName": "input:end",
     "valueMapping": "(event.target as any).end"
    }
@@ -445,7 +468,7 @@ import { registerDateRangePicker } from '@vonage/vivid'
 registerDateRangePicker('vvd3')
 
 const VwcDateRangePicker = wrapper(`vvd3-date-range-picker`,  {
-    events: [{"name":"clear-click","propName":"onClearClick"},{"name":"input:end","propName":"onInput:end"},{"name":"input:start","propName":"onInput:start"}],
+    events: [{"name":"clear-click","propName":"onClearClick"},{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"},{"name":"input:end","propName":"onInput:end"},{"name":"input:start","propName":"onInput:start"}],
     attributes: [],
     properties: ['initialStart', 'initialEnd', 'start', 'end', 'currentStart', 'currentEnd', 'setFormValue', 'label', 'min', 'max', 'initialValue', 'currentValue', 'readOnly', 'value']
 })

package/v3/VwcDateRangePicker/package.json

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

@@ -6,8 +6,13 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {string} value - Indicates the value's text. **attribute** `value`
 * @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
 * @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} pending - Indicates the pending state of the dial-pad. **attribute** `pending`
 * @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
 * @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+* @param {boolean} noInput - Indicates the no-input state of the dial-pad. **attribute** `no-input`
+* @param {| string
+        | null} endCallButtonLabel  **attribute** `end-call-button-label`
+* @param {string | null} callButtonLabel  **attribute** `call-button-label`
 */
 declare const VwcDialPad: {
     (props: {
@@ -28,8 +33,12 @@ declare const VwcDialPad: {
         value?: string | undefined;
         pattern?: string | undefined;
         disabled?: boolean | undefined;
+        pending?: boolean | undefined;
         callActive?: boolean | undefined;
         noCall?: boolean | undefined;
+        noInput?: boolean | undefined;
+        endCallButtonLabel?: any;
+        callButtonLabel?: string | null | undefined;
     }): JSX.Element;
     displayName: string;
 };
@@ -41,8 +50,13 @@ export default VwcDialPad;
 * @param {string} value - Indicates the value's text. **attribute** `value`
 * @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
 * @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} pending - Indicates the pending state of the dial-pad. **attribute** `pending`
 * @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
 * @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+* @param {boolean} noInput - Indicates the no-input state of the dial-pad. **attribute** `no-input`
+* @param {| string
+        | null} endCallButtonLabel  **attribute** `end-call-button-label`
+* @param {string | null} callButtonLabel  **attribute** `call-button-label`
 */
 declare const VwcDialPad: {
     (props: {
@@ -63,8 +77,12 @@ declare const VwcDialPad: {
         value?: string | undefined;
         pattern?: string | undefined;
         disabled?: boolean | undefined;
+        pending?: boolean | undefined;
         callActive?: boolean | undefined;
         noCall?: boolean | undefined;
+        noInput?: boolean | undefined;
+        endCallButtonLabel?: any;
+        callButtonLabel?: string | null | undefined;
     }): JSX.Element;
     displayName: string;
 };
@@ -76,8 +94,13 @@ export default VwcDialPad;
 * @param {string} value - Indicates the value's text. **attribute** `value`
 * @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
 * @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} pending - Indicates the pending state of the dial-pad. **attribute** `pending`
 * @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
 * @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+* @param {boolean} noInput - Indicates the no-input state of the dial-pad. **attribute** `no-input`
+* @param {| string
+        | null} endCallButtonLabel  **attribute** `end-call-button-label`
+* @param {string | null} callButtonLabel  **attribute** `call-button-label`
 */
 declare const VwcDialPad: {
     (props: {
@@ -98,8 +121,12 @@ declare const VwcDialPad: {
         value?: string | undefined;
         pattern?: string | undefined;
         disabled?: boolean | undefined;
+        pending?: boolean | undefined;
         callActive?: boolean | undefined;
         noCall?: boolean | undefined;
+        noInput?: boolean | undefined;
+        endCallButtonLabel?: any;
+        callButtonLabel?: string | null | undefined;
     }): JSX.Element;
     displayName: string;
 };