@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/{VwcImagePlaceholder → VwcColorPicker}/package.json

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

package/v3/VwcCombobox/index.d.ts

@@ -3,24 +3,23 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/combobox
 * @param {ComboboxAutocomplete | undefined} autocomplete - The autocomplete attribute. **attribute** `autocomplete`
 * @param {ListboxOption[]} filteredOptions - The collection of currently filtered options.
-* @param {ComboboxAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
-* @param {ComboboxShape | undefined} shape - The shape attribute. **attribute** `shape`
-* @param {ComboboxSize | undefined} scale - The size the combobox should have. **attribute** `scale`
+* @param {ComboboxAppearance | undefined} appearance - Sets the element's appearance **attribute** `appearance`
+* @param {ComboboxShape | undefined} shape - Sets the shape of the combobox element **attribute** `shape`
+* @param {ComboboxSize | undefined} scale - Sets the display size of the input element **attribute** `scale`
 * @param {PopupPlacement | undefined} placement - the placement of the combobox
 
 HTML Attribute: string **attribute** `placement`
-* @param {boolean} fixedDropdown - Whether the dropdown is using a fixed positioning strategy. **attribute** `fixed-dropdown`
-* @param {Popup} _popup
-* @param {HTMLElement} _anchor
-* @param {boolean} open - The open attribute. **attribute** `open`
-* @param {ListboxOption[]} options - The list of options.
+* @param {boolean} fixedDropdown - Sets the position strategy of the dropdown to fixed **attribute** `fixed-dropdown`
+* @param {boolean} open - Sets the element's menu to be open **attribute** `open`
+* @param {ListboxOption[]} options - A read-only list of options.
 * @param {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user. **attribute** `placeholder`
 * @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`
 * @param {string | undefined} errorText - Provides a custom error message. Any current error state will be overridden. **attribute** `error-text`
 * @param {string | undefined} successText - Provides a custom success message. Any current error state will be overridden. **attribute** `success-text`
 * @param {string | undefined} label - The label for the form element. **attribute** `label`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @param {string | undefined} icon - A decorative icon the custom element should have. See the [Vivid Icon
+Gallery](/icons/icons-gallery/) for available icons and `icon-name`s **attribute** `icon`
 * @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
@@ -38,39 +37,38 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcCombobox: {
     (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;
-        autocomplete?: any;
-        filteredOptions?: any[] | undefined;
-        appearance?: any;
-        shape?: any;
-        scale?: any;
-        placement?: any;
-        fixedDropdown?: boolean | undefined;
-        _popup?: any;
-        _anchor?: any;
-        open?: boolean | undefined;
-        options?: any[] | undefined;
-        placeholder?: string | undefined;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        successText?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        value?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        selectedIndex?: number | undefined;
-        selectedOptions?: any[] | undefined;
-        slottedOptionFilter?: any;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "autocomplete"?: any;
+        "filteredOptions"?: any[];
+        "appearance"?: any;
+        "shape"?: any;
+        "scale"?: any;
+        "placement"?: any;
+        "fixedDropdown"?: boolean;
+        "open"?: boolean;
+        "options"?: any[];
+        "placeholder"?: string;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "successText"?: string | undefined;
+        "label"?: string | undefined;
+        "icon"?: string | undefined;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "selectedIndex"?: number;
+        "selectedOptions"?: any[];
+        "slottedOptionFilter"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcCombobox/index.js

@@ -51,7 +51,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxAppearance | undefined"
    },
-   "description": "The appearance attribute.",
+   "description": "Sets the element's appearance",
    "privacy": "public"
   },
   {
@@ -60,7 +60,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxShape | undefined"
    },
-   "description": "The shape attribute.",
+   "description": "Sets the shape of the combobox element",
    "privacy": "public"
   },
   {
@@ -69,7 +69,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxSize | undefined"
    },
-   "description": "The size the combobox should have.",
+   "description": "Sets the display size of the input element",
    "privacy": "public"
   },
   {
@@ -87,23 +87,9 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Whether the dropdown is using a fixed positioning strategy.",
+   "description": "Sets the position strategy of the dropdown to fixed",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "_popup",
-   "type": {
-    "text": "Popup"
-   }
-  },
-  {
-   "kind": "field",
-   "name": "_anchor",
-   "type": {
-    "text": "HTMLElement"
-   }
-  },
   {
    "kind": "method",
    "name": "validate",
@@ -152,7 +138,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The open attribute.",
+   "description": "Sets the element's menu to be open",
    "privacy": "public"
   },
   {
@@ -161,7 +147,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ListboxOption[]"
    },
-   "description": "The list of options.",
+   "description": "A read-only list of options.",
    "privacy": "public",
    "inheritedFrom": {
     "name": "Listbox",
@@ -188,6 +174,28 @@ Code in this file were generated using following JSON:
    "description": "Filter available options by text value.",
    "privacy": "public"
   },
+  {
+   "kind": "method",
+   "name": "_isDefaultSelected",
+   "privacy": "protected",
+   "parameters": [
+    {
+     "name": "option",
+     "type": {
+      "text": "ListboxOption"
+     }
+    }
+   ],
+   "return": {
+    "type": {
+     "text": "boolean"
+    }
+   },
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
+   }
+  },
   {
    "kind": "field",
    "name": "helperText",
@@ -303,7 +311,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -533,6 +541,28 @@ Code in this file were generated using following JSON:
     "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",
@@ -548,6 +578,40 @@ Code in this file were generated using following JSON:
     "module": "src/shared/foundation/listbox/listbox.ts"
    }
   },
+  {
+   "kind": "method",
+   "name": "_newDefaultSelectedIndex",
+   "privacy": "protected",
+   "return": {
+    "type": {
+     "text": "number | null"
+    }
+   },
+   "parameters": [
+    {
+     "name": "prev",
+     "type": {
+      "text": "ListboxOption[]"
+     }
+    },
+    {
+     "name": "next",
+     "type": {
+      "text": "ListboxOption[]"
+     }
+    },
+    {
+     "name": "currentSelectedIndex",
+     "type": {
+      "text": "number"
+     }
+    }
+   ],
+   "inheritedFrom": {
+    "name": "Listbox",
+    "module": "src/shared/foundation/listbox/listbox.ts"
+   }
+  },
   {
    "kind": "method",
    "name": "setSelectedOptions",
@@ -609,7 +673,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxAppearance | undefined"
    },
-   "description": "The appearance attribute.",
+   "description": "Sets the element's appearance",
    "fieldName": "appearance"
   },
   {
@@ -617,7 +681,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxShape | undefined"
    },
-   "description": "The shape attribute.",
+   "description": "Sets the shape of the combobox element",
    "fieldName": "shape"
   },
   {
@@ -625,7 +689,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ComboboxSize | undefined"
    },
-   "description": "The size the combobox should have.",
+   "description": "Sets the display size of the input element",
    "fieldName": "scale"
   },
   {
@@ -642,7 +706,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Whether the dropdown is using a fixed positioning strategy.",
+   "description": "Sets the position strategy of the dropdown to fixed",
    "fieldName": "fixedDropdown"
   },
   {
@@ -651,7 +715,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The open attribute.",
+   "description": "Sets the element's menu to be open",
    "fieldName": "open"
   },
   {
@@ -715,7 +779,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -786,6 +850,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "mixins": [
+  {
+   "name": "WithContextualHelp",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "WithFeedback",
    "module": "/src/shared/feedback/mixins"
@@ -828,10 +896,49 @@ Code in this file were generated using following JSON:
     "valueMapping": "event.currentTarget.value"
    }
   ]
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "fill",
+    "args": [
+     "comboboxFill"
+    ]
+   },
+   {
+    "name": "clear",
+    "args": [
+     "comboboxClear"
+    ]
+   },
+   {
+    "name": "selectOptionByText",
+    "args": [
+     "selectOptionByText"
+    ]
+   },
+   {
+    "name": "selectOptionByValue",
+    "args": [
+     "selectOptionByValue"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "shadow",
+     "input.control"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerCombobox } from '@vonage/vivid'
 
 registerCombobox('vvd3')
@@ -839,7 +946,7 @@ registerCombobox('vvd3')
 const VwcCombobox = wrapper(`vvd3-combobox`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['autocomplete', 'filteredOptions', 'appearance', 'shape', 'scale', 'placement', 'fixedDropdown', '_popup', '_anchor', 'open', 'options', 'placeholder', 'helperText', 'errorText', 'successText', 'label', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'selectedIndex', 'selectedOptions', 'slottedOptionFilter', 'VIVID_VERSION', 'componentName']
+    properties: ['autocomplete', 'filteredOptions', 'appearance', 'shape', 'scale', 'placement', 'fixedDropdown', 'open', 'options', 'placeholder', 'helperText', 'errorText', 'successText', 'label', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'selectedIndex', 'selectedOptions', 'slottedOptionFilter', 'VIVID_VERSION', 'componentName']
 })
 
 VwcCombobox.displayName = 'VwcCombobox'

package/v3/VwcCombobox/package.json

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

package/v3/VwcContextualHelp/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+/** VwcContextualHelp
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/contextual-help
+* @param {Placement | undefined} placement - Preferred placement of the Contextual Help's Toggletip in relation to the button element **attribute** `placement`
+* @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 VwcContextualHelp: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "placement"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcContextualHelp;

package/v3/VwcContextualHelp/index.js

@@ -0,0 +1,131 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "ContextualHelp",
+ "cssProperties": [
+  {
+   "name": "--vvd-button-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-button-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-button-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-button-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-button-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-button-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-button-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-button-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-button-accent-fierce-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  },
+  {
+   "description": "Custom icon slot (optional).",
+   "name": "icon"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "placement",
+   "type": {
+    "text": "Placement | undefined"
+   },
+   "default": "'right'",
+   "description": "Preferred placement of the Contextual Help's Toggletip in relation to the button element",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "VIVID_VERSION",
+   "static": true,
+   "default": "__PACKAGE_VERSION__",
+   "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+   "type": {
+    "text": "string"
+   },
+   "inheritedFrom": {
+    "name": "VividElement",
+    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "componentName",
+   "type": {
+    "text": "string"
+   },
+   "static": true,
+   "description": "Core component name, without prefix",
+   "inheritedFrom": {
+    "name": "VividElement",
+    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+   }
+  }
+ ],
+ "attributes": [
+  {
+   "name": "placement",
+   "type": {
+    "text": "Placement | undefined"
+   },
+   "default": "'right'",
+   "description": "Preferred placement of the Contextual Help's Toggletip in relation to the button element",
+   "fieldName": "placement"
+  }
+ ],
+ "superclass": {
+  "name": "VividElement",
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "contextual-help"
+ }
+}
+*/
+import wrapper from '@repo/react-component-wrapper'
+import { registerContextualHelp } from '@vonage/vivid'
+
+registerContextualHelp('vvd3')
+
+const VwcContextualHelp = wrapper(`vvd3-contextual-help`,  {
+    events: [],
+    attributes: [],
+    properties: ['placement', 'VIVID_VERSION', 'componentName']
+})
+
+VwcContextualHelp.displayName = 'VwcContextualHelp'
+
+export default VwcContextualHelp

package/v3/{VwcProseMirrorFacade → VwcContextualHelp}/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@vonage/vivid-react-vvd3-prose-mirror-facade",
-  "version": "4.29.0",
+  "name": "@vonage/vivid-react-vvd3-contextual-help",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }

package/v3/VwcCountry/index.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+/** VwcCountry
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/country
+* @param {string | undefined} code - ISO 3166-1 alpha-2 country code (e.g. "GB", "UK", "US"). When set, the component shows the
+matching flag (from [flag-icons](https://github.com/lipis/flag-icons)) and the code (e.g. "UK")
+automatically. **attribute** `code`
+* @param {string | undefined} label - Optional text to show instead of the country code (e.g. "Saint Helena" for "SH"). Useful for
+less familiar codes. **attribute** `label`
+* @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 VwcCountry: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "code"?: string | undefined;
+        "label"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcCountry;