@vonage/vivid-react 3.3.0 → 3.4.0

package/v3/VwcDelegatesARIAListbox/package.json

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

package/v3/VwcDelegatesARIAListboxOption/index.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+/** States and properties relating to the ARIA `option` role.
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/delegates-arialistbox-option
+* @param {'true' | 'false' | string | null} ariaChecked - See https://www.w3.org/TR/wai-aria-1.2/#option for more information.
+* @param {string | null} ariaPosInSet - See https://www.w3.org/TR/wai-aria-1.2/#option for more information.
+* @param {'true' | 'false' | string | null} ariaSelected - See https://www.w3.org/TR/wai-aria-1.2/#option for more information.
+* @param {string | null} ariaSetSize - See https://www.w3.org/TR/wai-aria-1.2/#option for more information.
+*/
+declare const VwcDelegatesARIAListboxOption: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        ariaChecked?: any;
+        ariaPosInSet?: string | null | undefined;
+        ariaSelected?: any;
+        ariaSetSize?: string | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDelegatesARIAListboxOption;

package/v3/VwcDelegatesARIAListboxOption/index.js

@@ -0,0 +1,97 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "States and properties relating to the ARIA `option` role.",
+ "name": "DelegatesARIAListboxOption",
+ "cssProperties": [
+  {
+   "name": "--vvd-option-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-option-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-option-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-option-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-option-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-option-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-option-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
+  },
+  {
+   "name": "--vvd-option-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "ariaChecked",
+   "type": {
+    "text": "'true' | 'false' | string | null"
+   },
+   "description": "See https://www.w3.org/TR/wai-aria-1.2/#option for more information.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaPosInSet",
+   "type": {
+    "text": "string | null"
+   },
+   "description": "See https://www.w3.org/TR/wai-aria-1.2/#option for more information.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaSelected",
+   "type": {
+    "text": "'true' | 'false' | string | null"
+   },
+   "description": "See https://www.w3.org/TR/wai-aria-1.2/#option for more information.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaSetSize",
+   "type": {
+    "text": "string | null"
+   },
+   "description": "See https://www.w3.org/TR/wai-aria-1.2/#option for more information.",
+   "privacy": "public"
+  }
+ ]
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDelegatesARIAListboxOption } from '@vonage/vivid'
+
+registerDelegatesARIAListboxOption('vvd3')
+
+const VwcDelegatesARIAListboxOption = wrapper(`vvd3-delegates-arialistbox-option`,  {
+    events: [],
+    attributes: [],
+    properties: ['ariaChecked', 'ariaPosInSet', 'ariaSelected', 'ariaSetSize']
+})
+
+VwcDelegatesARIAListboxOption.displayName = 'VwcDelegatesARIAListboxOption'
+
+export default VwcDelegatesARIAListboxOption

package/v3/VwcDelegatesARIAListboxOption/package.json

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

package/v3/VwcDelegatesARIASelect/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+/** Includes ARIA states and properties relating to the ARIA select role.
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/delegates-ariaselect
+* @param {string | null} ariaControls - See https://www.w3.org/TR/wai-aria-1.2/#combobox for more information
+*/
+declare const VwcDelegatesARIASelect: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        ariaControls?: string | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDelegatesARIASelect;

package/v3/VwcDelegatesARIASelect/index.js

@@ -0,0 +1,70 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Includes ARIA states and properties relating to the ARIA select role.",
+ "name": "DelegatesARIASelect",
+ "cssProperties": [
+  {
+   "name": "--vvd-select-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-select-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-select-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-select-accent-intermediate",
+   "default": "var(--vvd-color-neutral-500)"
+  },
+  {
+   "name": "--vvd-select-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-select-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-select-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-select-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "ariaControls",
+   "type": {
+    "text": "string | null"
+   },
+   "description": "See https://www.w3.org/TR/wai-aria-1.2/#combobox for more information",
+   "privacy": "public"
+  }
+ ]
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDelegatesARIASelect } from '@vonage/vivid'
+
+registerDelegatesARIASelect('vvd3')
+
+const VwcDelegatesARIASelect = wrapper(`vvd3-delegates-ariaselect`,  {
+    events: [],
+    attributes: [],
+    properties: ['ariaControls']
+})
+
+VwcDelegatesARIASelect.displayName = 'VwcDelegatesARIASelect'
+
+export default VwcDelegatesARIASelect

package/v3/VwcDelegatesARIASelect/package.json

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

package/v3/VwcDelegatesARIATextbox/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+/** Includes ARIA states and properties relating to the ARIA textbox role
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/delegates-ariatextbox
+
+*/
+declare const VwcDelegatesARIATextbox: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDelegatesARIATextbox;

package/v3/VwcDelegatesARIATextbox/index.js

@@ -0,0 +1,59 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Includes ARIA states and properties relating to the ARIA textbox role",
+ "name": "DelegatesARIATextbox",
+ "cssProperties": [
+  {
+   "name": "--vvd-text-field-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-text-field-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-text-field-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-text-field-accent-intermediate",
+   "default": "var(--vvd-color-neutral-500)"
+  },
+  {
+   "name": "--vvd-text-field-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-text-field-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-text-field-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-text-field-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  }
+ ]
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDelegatesARIATextbox } from '@vonage/vivid'
+
+registerDelegatesARIATextbox('vvd3')
+
+const VwcDelegatesARIATextbox = wrapper(`vvd3-delegates-ariatextbox`,  {
+    events: [],
+    attributes: [],
+    properties: []
+})
+
+VwcDelegatesARIATextbox.displayName = 'VwcDelegatesARIATextbox'
+
+export default VwcDelegatesARIATextbox

package/v3/VwcDelegatesARIATextbox/package.json

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

package/v3/VwcDialPad/index.js

@@ -346,8 +346,8 @@ export default VwcDialPad
   }
  ],
  "superclass": {
-  "name": "FoundationElement",
-  "package": "@microsoft/fast-foundation"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,

package/v3/VwcDialPad/package.json

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

package/v3/VwcDialog/index.d.ts

@@ -10,7 +10,10 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {string | null} ariaLabel  **attribute** `aria-label`
 * @param {| string
         | null} dismissButtonAriaLabel  **attribute** `dismiss-button-aria-label`
-* @param {boolean} noLightDismiss  **attribute** `no-light-dismiss`
+* @param {boolean} noLightDismiss - Prevents the dialog from being dismissed when clicking outside it. **attribute** `no-light-dismiss`
+* @param {boolean} noDismissOnEsc - Prevents the dialog from being dismissed when the escape key is pressed. **attribute** `no-dismiss-on-esc`
+* @param {boolean} noDismissButton - Hides the dismiss button. **attribute** `no-dismiss-button`
+* @param {boolean} nonDismissible - Disables all means of dismissal for the dialog. **attribute** `non-dismissible`
 * @param {boolean} modal - Controls whether the dialog is modal. **attribute** `modal`
 * @param {string} returnValue
 */
@@ -23,6 +26,7 @@ declare const VwcDialog: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onOpen?: ((event: SyntheticEvent) => void) | undefined;
         onClose?: ((event: SyntheticEvent) => void) | undefined;
+        onCancel?: ((event: SyntheticEvent) => void) | undefined;
         open?: boolean | undefined;
         icon?: string | undefined;
         iconPlacement?: any;
@@ -32,6 +36,9 @@ declare const VwcDialog: {
         ariaLabel?: string | null | undefined;
         dismissButtonAriaLabel?: any;
         noLightDismiss?: boolean | undefined;
+        noDismissOnEsc?: boolean | undefined;
+        noDismissButton?: boolean | undefined;
+        nonDismissible?: boolean | undefined;
         modal?: boolean | undefined;
         returnValue?: string | undefined;
     }): JSX.Element;

package/v3/VwcDialog/index.js

@@ -98,7 +98,35 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "default": "false"
+   "default": "false",
+   "description": "Prevents the dialog from being dismissed when clicking outside it."
+  },
+  {
+   "kind": "field",
+   "name": "noDismissOnEsc",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Prevents the dialog from being dismissed when the escape key is pressed."
+  },
+  {
+   "kind": "field",
+   "name": "noDismissButton",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Hides the dismiss button."
+  },
+  {
+   "kind": "field",
+   "name": "nonDismissible",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Disables all means of dismissal for the dialog."
   },
   {
    "kind": "field",
@@ -130,6 +158,23 @@ Code in this file were generated using following JSON:
    "privacy": "private",
    "readonly": true
   },
+  {
+   "kind": "field",
+   "name": "_showDismissButton",
+   "readonly": true
+  },
+  {
+   "kind": "method",
+   "name": "#isDismissibleVia",
+   "parameters": [
+    {
+     "name": "method",
+     "type": {
+      "text": "DismissMethod"
+     }
+    }
+   ]
+  },
   {
    "kind": "field",
    "name": "#handleScrimClick",
@@ -175,6 +220,13 @@ Code in this file were generated using following JSON:
    },
    "description": "The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.",
    "name": "close"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.",
+   "name": "cancel"
   }
  ],
  "attributes": [
@@ -244,8 +296,36 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
+   "description": "Prevents the dialog from being dismissed when clicking outside it.",
    "fieldName": "noLightDismiss"
   },
+  {
+   "name": "no-dismiss-on-esc",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Prevents the dialog from being dismissed when the escape key is pressed.",
+   "fieldName": "noDismissOnEsc"
+  },
+  {
+   "name": "no-dismiss-button",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Hides the dismiss button.",
+   "fieldName": "noDismissButton"
+  },
+  {
+   "name": "non-dismissible",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Disables all means of dismissal for the dialog.",
+   "fieldName": "nonDismissible"
+  },
   {
    "type": {
     "text": "boolean"
@@ -256,8 +336,8 @@ Code in this file were generated using following JSON:
   }
  ],
  "superclass": {
-  "name": "FoundationElement",
-  "package": "@microsoft/fast-foundation"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,
@@ -282,9 +362,9 @@ import { registerDialog } from '@vonage/vivid'
 registerDialog('vvd3')
 
 const VwcDialog = wrapper(`vvd3-dialog`,  {
-    events: [{"name":"close","propName":"onClose"},{"name":"open","propName":"onOpen"}],
+    events: [{"name":"cancel","propName":"onCancel"},{"name":"close","propName":"onClose"},{"name":"open","propName":"onOpen"}],
     attributes: [],
-    properties: ['open', 'icon', 'iconPlacement', 'subtitle', 'headline', 'fullWidthBody', 'ariaLabel', 'dismissButtonAriaLabel', 'noLightDismiss', 'modal', 'returnValue']
+    properties: ['open', 'icon', 'iconPlacement', 'subtitle', 'headline', 'fullWidthBody', 'ariaLabel', 'dismissButtonAriaLabel', 'noLightDismiss', 'noDismissOnEsc', 'noDismissButton', 'nonDismissible', 'modal', 'returnValue']
 })
 
 VwcDialog.displayName = 'VwcDialog'

package/v3/VwcDialog/package.json

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

package/v3/VwcDivider/index.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
 /** VwcDivider
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/divider
-
+* @param {DividerRole} role - The role of the element. **attribute** `role`
+* @param {Orientation} orientation - The orientation of the divider. **attribute** `orientation`
 */
 declare const VwcDivider: {
     (props: {
@@ -10,6 +11,8 @@ declare const VwcDivider: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        role?: any;
+        orientation?: any;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcDivider/index.js

@@ -7,9 +7,47 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "",
  "name": "Divider",
+ "members": [
+  {
+   "kind": "field",
+   "name": "role",
+   "type": {
+    "text": "DividerRole"
+   },
+   "description": "The role of the element.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "orientation",
+   "type": {
+    "text": "Orientation"
+   },
+   "description": "The orientation of the divider.",
+   "privacy": "public"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "role",
+   "type": {
+    "text": "DividerRole"
+   },
+   "description": "The role of the element.",
+   "fieldName": "role"
+  },
+  {
+   "name": "orientation",
+   "type": {
+    "text": "Orientation"
+   },
+   "description": "The orientation of the divider.",
+   "fieldName": "orientation"
+  }
+ ],
  "superclass": {
-  "name": "FoundationDivider",
-  "package": "@microsoft/fast-foundation"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,
@@ -25,7 +63,7 @@ registerDivider('vvd3')
 const VwcDivider = wrapper(`vvd3-divider`,  {
     events: [],
     attributes: [],
-    properties: []
+    properties: ['role', 'orientation']
 })
 
 VwcDivider.displayName = 'VwcDivider'

package/v3/VwcDivider/package.json

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

package/v3/VwcElevation/index.d.ts

@@ -3,6 +3,7 @@ import React, { ReactNode } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/elevation
 * @param {0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined} dp - Indicates the elevation's dp. **attribute** `dp`
 * @param {boolean | undefined} noShadow - toggles the elevation's shadow. **attribute** `no-shadow`
+* @param {boolean | undefined} notRelative  **attribute** `not-relative`
 */
 declare const VwcElevation: {
     (props: {
@@ -13,6 +14,7 @@ declare const VwcElevation: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         dp?: any;
         noShadow?: any;
+        notRelative?: any;
     }): JSX.Element;
     displayName: string;
 };