@vonage/vivid-react 3.5.2 → 4.0.0

package/v3/VwcRangeSlider/index.js

@@ -866,6 +866,81 @@ Code in this file were generated using following JSON:
      "input:end"
     ],
     "valueMapping": "event.currentTarget.end"
+   },
+   {
+    "name": "startAsNumber",
+    "propName": "startAsNumber",
+    "eventNames": [
+     "input:start"
+    ],
+    "valueMapping": "event.currentTarget.startAsNumber"
+   },
+   {
+    "name": "endAsNumber",
+    "propName": "endAsNumber",
+    "eventNames": [
+     "input:end"
+    ],
+    "valueMapping": "event.currentTarget.endAsNumber"
+   }
+  ]
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byLabel",
+    "args": [
+     "byLabel"
+    ]
+   }
+  ],
+  "actions": [
+   {
+    "name": "slideStartTo",
+    "args": [
+     "slideTo",
+     "#track",
+     "#startThumb"
+    ]
+   },
+   {
+    "name": "slideEndTo",
+    "args": [
+     "slideTo",
+     "#track",
+     "#endThumb"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "range",
+    "args": [
+     "rangeAsNumber"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "track",
+    "args": [
+     "shadow",
+     ".control"
+    ]
+   },
+   {
+    "name": "startThumb",
+    "args": [
+     "shadow",
+     "#start-thumb"
+    ]
+   },
+   {
+    "name": "endThumb",
+    "args": [
+     "shadow",
+     "#end-thumb"
+    ]
    }
   ]
  }

package/v3/VwcRangeSlider/package.json

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

package/v3/VwcRichTextEditor/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-rich-text-editor",
-  "version": "4.29.0",
+  "version": "5.5.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.5.0"
   }
 }

package/v3/VwcSearchableSelect/index.d.ts

@@ -20,6 +20,9 @@ only when the `values` property has not been explicitly set.
 * @param {boolean} loading - Whether the component is in a loading state. **attribute** `loading`
 * @param {boolean} clearable - Adds a clear button to the input field that clears the selected values. **attribute** `clearable`
 * @param {number | null} maxSelected  **attribute** `max-selected`
+* @param {boolean} enableSelectAll - Adds a "Select All" option at the top of the options list. **attribute** `enable-select-all`
+* @param {string | undefined} selectAllText - Overrides the default "Select All" text **attribute** `select-all-text`
+* @param {string | undefined} deselectAllText - Overrides the default "Deselect All" text **attribute** `deselect-all-text`
 * @param  setFormValue
 * @param {string | undefined} helperText - Provides additional information to help the user enter the correct information.
 To add HTML to the helper text, use the helper-text slot instead. **attribute** `helper-text`
@@ -66,6 +69,9 @@ declare const VwcSearchableSelect: {
         loading?: boolean | undefined;
         clearable?: boolean | undefined;
         maxSelected?: number | undefined;
+        enableSelectAll?: boolean | undefined;
+        selectAllText?: string | undefined;
+        deselectAllText?: string | undefined;
         setFormValue?: any;
         helperText?: string | undefined;
         errorText?: string | undefined;

package/v3/VwcSearchableSelect/index.js

@@ -427,6 +427,34 @@ Code in this file were generated using following JSON:
    "kind": "method",
    "name": "#updateSelectionLimit"
   },
+  {
+   "kind": "field",
+   "name": "enableSelectAll",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a \"Select All\" option at the top of the options list.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "selectAllText",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Overrides the default \"Select All\" text",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "deselectAllText",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Overrides the default \"Deselect All\" text",
+   "privacy": "public"
+  },
   {
    "kind": "method",
    "name": "#determineInitialValues"
@@ -903,6 +931,31 @@ Code in this file were generated using following JSON:
    "default": "null",
    "fieldName": "maxSelected"
   },
+  {
+   "name": "enable-select-all",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a \"Select All\" option at the top of the options list.",
+   "fieldName": "enableSelectAll"
+  },
+  {
+   "name": "select-all-text",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Overrides the default \"Select All\" text",
+   "fieldName": "selectAllText"
+  },
+  {
+   "name": "deselect-all-text",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Overrides the default \"Deselect All\" text",
+   "fieldName": "deselectAllText"
+  },
   {
    "name": "helper-text",
    "type": {
@@ -1040,6 +1093,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "mixins": [
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithFeedback",
    "module": "/src/shared/feedback/mixins"
@@ -1098,6 +1155,38 @@ Code in this file were generated using following JSON:
     "valueMapping": "event.currentTarget.values"
    }
   ]
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "selectOptionByValue",
+    "args": [
+     "selectOptionByValue"
+    ]
+   },
+   {
+    "name": "selectOptionByText",
+    "args": [
+     "selectOptionByText"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "values",
+    "args": [
+     "values"
+    ]
+   },
+   {
+    "name": "selectedOptions",
+    "args": [
+     "selectedOptionsText"
+    ]
+   }
+  ],
+  "refs": []
  }
 }
 */
@@ -1109,7 +1198,7 @@ registerSearchableSelect('vvd3')
 const VwcSearchableSelect = wrapper(`vvd3-searchable-select`,  {
     events: [{"name":"change","propName":"onChange"},{"name":"search-text-change","propName":"onSearchTextChange"},{"name":"input","propName":"onInput"}],
     attributes: [],
-    properties: ['appearance', 'shape', 'fixedDropdown', 'placeholder', 'open', 'multiple', 'externalTags', 'maxLines', 'values', 'initialValues', 'selectedIndex', 'optionFilter', 'loading', 'clearable', 'maxSelected', 'setFormValue', 'helperText', 'errorText', 'validate', 'successText', 'label', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['appearance', 'shape', 'fixedDropdown', 'placeholder', 'open', 'multiple', 'externalTags', 'maxLines', 'values', 'initialValues', 'selectedIndex', 'optionFilter', 'loading', 'clearable', 'maxSelected', 'enableSelectAll', 'selectAllText', 'deselectAllText', 'setFormValue', 'helperText', 'errorText', 'validate', 'successText', 'label', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSearchableSelect.displayName = 'VwcSearchableSelect'

package/v3/VwcSearchableSelect/package.json

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

package/v3/VwcSelect/index.js

@@ -145,11 +145,53 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "method",
-   "name": "setDefaultSelectedOption",
+   "name": "_newDefaultSelectedIndex",
+   "privacy": "protected",
    "return": {
     "type": {
-     "text": "void"
+     "text": "number | null"
+    }
+   },
+   "parameters": [
+    {
+     "name": "prev",
+     "type": {
+      "text": "ListboxOption[]"
+     }
+    },
+    {
+     "name": "next",
+     "type": {
+      "text": "ListboxOption[]"
+     }
+    },
+    {
+     "name": "currentSelectIndex",
+     "type": {
+      "text": "number"
+     }
+    }
+   ],
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "_isDefaultSelected",
+   "privacy": "protected",
+   "parameters": [
+    {
+     "name": "option",
+     "type": {
+      "text": "ListboxOption"
+     }
     }
+   ],
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
    }
   },
   {
@@ -566,6 +608,45 @@ Code in this file were generated using following JSON:
     "module": "src/shared/foundation/listbox/listbox.ts"
    }
   },
+  {
+   "kind": "method",
+   "name": "getNextSelectableIndex",
+   "privacy": "protected",
+   "parameters": [
+    {
+     "name": "fromIndex",
+     "type": {
+      "text": "number"
+     }
+    }
+   ],
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "_validSelectedIndex",
+   "privacy": "protected",
+   "return": {
+    "type": {
+     "text": "number"
+    }
+   },
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number"
+     }
+    }
+   ],
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
+   }
+  },
   {
    "kind": "method",
    "name": "selectFirstOption",
@@ -825,6 +906,10 @@ Code in this file were generated using following JSON:
    "name": "WithLightDOMFeedback",
    "module": "/src/shared/feedback/mixins"
   },
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithErrorText",
    "module": "/src/shared/patterns"
@@ -867,6 +952,25 @@ Code in this file were generated using following JSON:
     "valueMapping": "event.currentTarget.value"
    }
   ]
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "selectOptionByValue",
+    "args": [
+     "selectOptionByValue"
+    ]
+   },
+   {
+    "name": "selectOptionByText",
+    "args": [
+     "selectOptionByText"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": []
  }
 }
 */

package/v3/VwcSelect/package.json

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

package/v3/VwcSelectableBox/index.d.ts

@@ -2,10 +2,10 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcSelectableBox
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/selectable-box
 * @param {boolean} checked - Controls the checked state of the box **attribute** `checked`
-* @param {boolean} clickable  **attribute** `clickable`
 * @param {boolean} clickableBox - Makes the entire selectable box clickable **attribute** `clickable-box`
 * @param {SelectableBoxConnotation | undefined} connotation - The connotation the selectable box should have. **attribute** `connotation`
 * @param {SelectableBoxControlType | undefined} controlType - The type of control the box should have: checkbox or radio. **attribute** `control-type`
+* @param {SelectableBoxControlPlacement} controlPlacement - Defines where the control (checkbox or radio) should be located. **attribute** `control-placement`
 * @param {boolean} tight - Removes the padding around the box's slot content **attribute** `tight`
 * @param {'delegate'} _vividAriaBehaviour
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
@@ -21,10 +21,10 @@ declare const VwcSelectableBox: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onChange?: ((event: SyntheticEvent) => void) | undefined;
         checked?: boolean | undefined;
-        clickable?: boolean | undefined;
         clickableBox?: boolean | undefined;
         connotation?: any;
         controlType?: any;
+        controlPlacement?: any;
         tight?: boolean | undefined;
         _vividAriaBehaviour?: any;
         VIVID_VERSION?: string | undefined;

package/v3/VwcSelectableBox/index.js

@@ -66,16 +66,6 @@ Code in this file were generated using following JSON:
    "description": "Controls the checked state of the box",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "clickable",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "privacy": "public",
-   "description": ""
-  },
   {
    "kind": "field",
    "name": "clickableBox",
@@ -104,6 +94,16 @@ Code in this file were generated using following JSON:
    "description": "The type of control the box should have: checkbox or radio.",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "controlPlacement",
+   "type": {
+    "text": "SelectableBoxControlPlacement"
+   },
+   "default": "'end-stacked'",
+   "description": "Defines where the control (checkbox or radio) should be located.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "tight",
@@ -173,14 +173,6 @@ Code in this file were generated using following JSON:
    "description": "Controls the checked state of the box",
    "fieldName": "checked"
   },
-  {
-   "name": "clickable",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "fieldName": "clickable"
-  },
   {
    "name": "clickable-box",
    "type": {
@@ -206,6 +198,15 @@ Code in this file were generated using following JSON:
    "description": "The type of control the box should have: checkbox or radio.",
    "fieldName": "controlType"
   },
+  {
+   "name": "control-placement",
+   "type": {
+    "text": "SelectableBoxControlPlacement"
+   },
+   "default": "'end-stacked'",
+   "description": "Defines where the control (checkbox or radio) should be located.",
+   "fieldName": "controlPlacement"
+  },
   {
    "name": "tight",
    "type": {
@@ -229,6 +230,51 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "selectable-box"
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "check",
+    "args": [
+     "check",
+     "#control"
+    ]
+   },
+   {
+    "name": "uncheck",
+    "args": [
+     "uncheck",
+     "#control"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "checked",
+    "args": [
+     "checked",
+     "true"
+    ]
+   },
+   {
+    "name": "unchecked",
+    "args": [
+     "checked",
+     "false"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "nestedShadow",
+     "[data-vvd-component].control",
+     "div.control"
+    ]
+   }
+  ]
  }
 }
 */
@@ -240,7 +286,7 @@ registerSelectableBox('vvd3')
 const VwcSelectableBox = wrapper(`vvd3-selectable-box`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['checked', 'clickable', 'clickableBox', 'connotation', 'controlType', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['checked', 'clickableBox', 'connotation', 'controlType', 'controlPlacement', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSelectableBox.displayName = 'VwcSelectableBox'

package/v3/VwcSelectableBox/package.json

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

package/v3/VwcSideDrawer/package.json

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

package/v3/VwcSimpleColorPicker/index.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** VwcSimpleColorPicker
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/simple-color-picker
+* @param {Placement | undefined} placement - Placement of the popup with color swatches **attribute** `placement`
+* @param {number} swatchesPerRow - Number of swatches per row for grid layout **attribute** `swatches-per-row`
+* @param {AnchorType | undefined} anchor - ID or direct reference to the component's anchor element. **attribute** `anchor`
+* @param {boolean} open - Indicates whether the popup is open **attribute** `open`
+* @param {ColorSwatch[]} swatches - List of color swatches, has to be an array of objects
+
+### Examples
+* @param {string | undefined} label - The label for the form element. **attribute** `label`
+* @param {string} value - The current value of the element. **attribute** `current-value`
+* @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`
+* @param {boolean} disabled - Sets the element's disabled state. A disabled element will not be included during form submission. **attribute** `disabled`
+* @param {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name. **attribute** `name`
+* @param {boolean} required - Require the field to be completed prior to form submission. **attribute** `required`
+* @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
+*/
+declare const VwcSimpleColorPicker: {
+    (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;
+        placement?: any;
+        swatchesPerRow?: number | undefined;
+        anchor?: any;
+        open?: boolean | undefined;
+        swatches?: any[] | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        currentValue?: any;
+        initialValue?: string | undefined;
+        disabled?: boolean | undefined;
+        name?: string | undefined;
+        required?: boolean | undefined;
+        VIVID_VERSION?: string | undefined;
+        componentName?: string | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcSimpleColorPicker;