@vonage/vivid-react 2.10.63 → 2.10.65

package/v3/VwcRadio/index.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 /** Base class for radio
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/radio
 * @param {string | undefined} label - Indicates the radio's label. **attribute** `label`
+* @param {RadioConnotation | undefined} connotation - The connotation the radioButton should have. **attribute** `connotation`
 */
 declare const VwcRadio: {
     (props: {
@@ -11,6 +12,7 @@ declare const VwcRadio: {
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         label?: string | undefined;
+        connotation?: any;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcRadio/index.js

@@ -8,21 +8,53 @@ Code in this file were generated using following JSON:
  "description": "Base class for radio",
  "name": "Radio",
  "cssProperties": [
+  {
+   "name": "--vvd-radio-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-radio-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-radio-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-radio-cta-intermediate",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-radio-cta-backdrop",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-radio-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
   {
    "name": "--vvd-radio-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
   },
   {
-   "name": "--vvd-radio-accent-firm",
-   "default": "var(--vvd-color-canvas-text)"
+   "name": "--vvd-radio-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-radio-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-radio-accent-intermediate",
+   "default": "var(--vvd-color-neutral-500)"
   },
   {
-   "name": "--vvd-radio-accent-faint",
-   "default": "var(--vvd-color-neutral-50)"
+   "name": "--vvd-radio-accent-backdrop",
+   "default": "var(--vvd-color-canvas)"
   },
   {
-   "name": "--vvd-radio-accent-soft",
-   "default": "var(--vvd-color-neutral-100)"
+   "name": "--vvd-radio-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
   }
  ],
  "members": [
@@ -34,6 +66,15 @@ Code in this file were generated using following JSON:
    },
    "description": "Indicates the radio's label.",
    "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "connotation",
+   "type": {
+    "text": "RadioConnotation | undefined"
+   },
+   "description": "The connotation the radioButton should have.",
+   "privacy": "public"
   }
  ],
  "attributes": [
@@ -44,6 +85,14 @@ Code in this file were generated using following JSON:
    },
    "description": "Indicates the radio's label.",
    "fieldName": "label"
+  },
+  {
+   "name": "connotation",
+   "type": {
+    "text": "RadioConnotation | undefined"
+   },
+   "description": "The connotation the radioButton should have.",
+   "fieldName": "connotation"
   }
  ],
  "superclass": {
@@ -60,7 +109,7 @@ registerRadio('vvd3')
 const VwcRadio = wrapper(`vvd3-radio`,  {
     events: [],
     attributes: [],
-    properties: ['label']
+    properties: ['label', 'connotation']
 })
 
 VwcRadio.displayName = 'VwcRadio'

package/v3/VwcRadio/package.json

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

package/v3/VwcRadioGroup/package.json

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

package/v3/VwcSelect/index.d.ts

@@ -1,11 +1,12 @@
 import React, { ReactNode } from 'react';
 /** Base class for select
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/select
-* @param {SelectAppearance | undefined} appearance  **attribute** `appearance`
-* @param {SelectShape | undefined} shape  **attribute** `shape`
 * @param {Popup} _popup
 * @param {HTMLElement} _anchor
-* @param {boolean} fixedDropdown  **attribute** `fixed-dropdown`
+* @param {SelectAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
+* @param {SelectShape | undefined} shape - The shape attribute. **attribute** `shape`
+* @param {boolean} fixedDropdown - The fixed-dropdown attribute. **attribute** `fixed-dropdown`
+* @param {string | undefined} placeholder - The placeholder attribute. **attribute** `placeholder`
 */
 declare const VwcSelect: {
     (props: {
@@ -14,11 +15,12 @@ declare const VwcSelect: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        appearance?: any;
-        shape?: any;
         _popup?: any;
         _anchor?: any;
+        appearance?: any;
+        shape?: any;
         fixedDropdown?: boolean | undefined;
+        placeholder?: string | undefined;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSelect/index.js

@@ -74,31 +74,35 @@ Code in this file were generated using following JSON:
  "members": [
   {
    "kind": "field",
-   "name": "appearance",
+   "name": "_popup",
    "type": {
-    "text": "SelectAppearance | undefined"
+    "text": "Popup"
    }
   },
   {
    "kind": "field",
-   "name": "shape",
+   "name": "_anchor",
    "type": {
-    "text": "SelectShape | undefined"
+    "text": "HTMLElement"
    }
   },
   {
    "kind": "field",
-   "name": "_popup",
+   "name": "appearance",
    "type": {
-    "text": "Popup"
-   }
+    "text": "SelectAppearance | undefined"
+   },
+   "description": "The appearance attribute.",
+   "privacy": "public"
   },
   {
    "kind": "field",
-   "name": "_anchor",
+   "name": "shape",
    "type": {
-    "text": "HTMLElement"
-   }
+    "text": "SelectShape | undefined"
+   },
+   "description": "The shape attribute.",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -106,7 +110,18 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "default": "false"
+   "default": "false",
+   "description": "The fixed-dropdown attribute.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "placeholder",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The placeholder attribute.",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -115,6 +130,15 @@ Code in this file were generated using following JSON:
     "text": "string"
    },
    "readonly": true
+  },
+  {
+   "kind": "method",
+   "name": "setDefaultSelectedOption",
+   "return": {
+    "type": {
+     "text": "void"
+    }
+   }
   }
  ],
  "attributes": [
@@ -123,6 +147,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectAppearance | undefined"
    },
+   "description": "The appearance attribute.",
    "fieldName": "appearance"
   },
   {
@@ -130,6 +155,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectShape | undefined"
    },
+   "description": "The shape attribute.",
    "fieldName": "shape"
   },
   {
@@ -138,7 +164,16 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
+   "description": "The fixed-dropdown attribute.",
    "fieldName": "fixedDropdown"
+  },
+  {
+   "name": "placeholder",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The placeholder attribute.",
+   "fieldName": "placeholder"
   }
  ],
  "superclass": {
@@ -155,7 +190,7 @@ registerSelect('vvd3')
 const VwcSelect = wrapper(`vvd3-select`,  {
     events: [],
     attributes: [],
-    properties: ['appearance', 'shape', '_popup', '_anchor', 'fixedDropdown']
+    properties: ['_popup', '_anchor', 'appearance', 'shape', 'fixedDropdown', 'placeholder']
 })
 
 VwcSelect.displayName = 'VwcSelect'

package/v3/VwcSelect/package.json

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

package/v3/VwcSideDrawer/package.json

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

package/v3/VwcSlider/package.json

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

package/v3/VwcSplitButton/index.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+/** Base class for split button
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/split-button
+* @param {HTMLButtonElement} _action - Action HTML button element
+* @param {HTMLButtonElement} _indicator - Indicator HTML button element
+* @param {SplitButtonConnotation | undefined} connotation - The connotation the split button should have. **attribute** `connotation`
+* @param {SplitButtonShape | undefined} shape - The shape the split button should have. **attribute** `shape`
+* @param {SplitButtonAppearance | undefined} appearance - The appearance the split button should have. **attribute** `appearance`
+* @param {SplitButtonSize | undefined} size - The size the split button should have. **attribute** `size`
+* @param {string | undefined} label - Indicates the split button's label. **attribute** `label`
+* @param {string | undefined} icon - Indicates the split button's icon. **attribute** `icon`
+* @param {string} splitIndicator - Indicates the split button's icon indicator. **attribute** `split-indicator`
+* @param {boolean} disabled - Indicates if the button is disabled. **attribute** `disabled`
+* @param {string | null} ariaLabel  **attribute** `aria-label`
+* @param {string | null} ariaExpanded  **attribute** `aria-expanded`
+*/
+declare const VwcSplitButton: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        _action?: any;
+        _indicator?: any;
+        connotation?: any;
+        shape?: any;
+        appearance?: any;
+        size?: any;
+        label?: string | undefined;
+        icon?: string | undefined;
+        splitIndicator?: string | undefined;
+        disabled?: boolean | undefined;
+        ariaLabel?: string | null | undefined;
+        ariaExpanded?: string | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcSplitButton;

package/v3/VwcSplitButton/index.js

@@ -0,0 +1,311 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for split button",
+ "name": "SplitButton",
+ "cssProperties": [
+  {
+   "name": "--vvd-split-button-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-split-button-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-split-button-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-split-button-cta-contrast",
+   "default": "var(--vvd-color-cta-800)"
+  },
+  {
+   "name": "--vvd-split-button-cta-fierce",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-split-button-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-split-button-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
+  {
+   "name": "--vvd-split-button-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-split-button-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-split-button-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-split-button-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-split-button-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-split-button-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-split-button-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-split-button-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-split-button-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "_action",
+   "type": {
+    "text": "HTMLButtonElement"
+   },
+   "description": "Action HTML button element",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "action",
+   "type": {
+    "text": "HTMLButtonElement"
+   },
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "_indicator",
+   "type": {
+    "text": "HTMLButtonElement"
+   },
+   "description": "Indicator HTML button element",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "indicator",
+   "type": {
+    "text": "HTMLButtonElement"
+   },
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "connotation",
+   "type": {
+    "text": "SplitButtonConnotation | undefined"
+   },
+   "description": "The connotation the split button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "shape",
+   "type": {
+    "text": "SplitButtonShape | undefined"
+   },
+   "description": "The shape the split button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "SplitButtonAppearance | undefined"
+   },
+   "description": "The appearance the split button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "size",
+   "type": {
+    "text": "SplitButtonSize | undefined"
+   },
+   "description": "The size the split button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the split button's label.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "icon",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the split button's icon.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "splitIndicator",
+   "type": {
+    "text": "string"
+   },
+   "default": "'chevron-down-line'",
+   "description": "Indicates the split button's icon indicator.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates if the button is disabled.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaLabel",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null"
+  },
+  {
+   "kind": "field",
+   "name": "ariaExpanded",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "connotation",
+   "type": {
+    "text": "SplitButtonConnotation | undefined"
+   },
+   "description": "The connotation the split button should have.",
+   "fieldName": "connotation"
+  },
+  {
+   "name": "shape",
+   "type": {
+    "text": "SplitButtonShape | undefined"
+   },
+   "description": "The shape the split button should have.",
+   "fieldName": "shape"
+  },
+  {
+   "name": "appearance",
+   "type": {
+    "text": "SplitButtonAppearance | undefined"
+   },
+   "description": "The appearance the split button should have.",
+   "fieldName": "appearance"
+  },
+  {
+   "name": "size",
+   "type": {
+    "text": "SplitButtonSize | undefined"
+   },
+   "description": "The size the split button should have.",
+   "fieldName": "size"
+  },
+  {
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the split button's label.",
+   "fieldName": "label"
+  },
+  {
+   "name": "icon",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the split button's icon.",
+   "fieldName": "icon"
+  },
+  {
+   "name": "split-indicator",
+   "type": {
+    "text": "string"
+   },
+   "default": "'chevron-down-line'",
+   "description": "Indicates the split button's icon indicator.",
+   "fieldName": "splitIndicator"
+  },
+  {
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates if the button is disabled.",
+   "fieldName": "disabled"
+  },
+  {
+   "name": "aria-label",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "fieldName": "ariaLabel"
+  },
+  {
+   "name": "aria-expanded",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "fieldName": "ariaExpanded"
+  }
+ ],
+ "superclass": {
+  "name": "FoundationElement",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerSplitButton } from '@vonage/vivid'
+
+registerSplitButton('vvd3')
+
+const VwcSplitButton = wrapper(`vvd3-split-button`,  {
+    events: [],
+    attributes: [],
+    properties: ['_action', '_indicator', 'connotation', 'shape', 'appearance', 'size', 'label', 'icon', 'splitIndicator', 'disabled', 'ariaLabel', 'ariaExpanded']
+})
+
+VwcSplitButton.displayName = 'VwcSplitButton'
+
+export default VwcSplitButton