@vonage/vivid-react 4.0.0 → 5.19.0

package/v3/VwcRadioGroup/index.js

@@ -24,7 +24,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "The label for the radio group",
+   "description": "Label of the the Radio Group",
    "privacy": "public"
   },
   {
@@ -33,7 +33,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "When true, the radio group and all its radio buttons will be required",
+   "description": "Sets the required state",
    "privacy": "public"
   },
   {
@@ -51,7 +51,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "Disables the radio group and child radios.",
+   "description": "Whether the input element is disabled",
    "privacy": "public"
   },
   {
@@ -94,7 +94,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "Orientation | 'horizontal' | 'vertical'"
    },
-   "description": "The orientation of the group",
+   "description": "Sets axis on which the tabs are aligned",
    "privacy": "public"
   },
   {
@@ -238,7 +238,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "The label for the radio group",
+   "description": "Label of the the Radio Group",
    "fieldName": "label"
   },
   {
@@ -246,7 +246,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "When true, the radio group and all its radio buttons will be required",
+   "description": "Sets the required state",
    "fieldName": "required"
   },
   {
@@ -262,7 +262,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "boolean"
    },
-   "description": "Disables the radio group and child radios.",
+   "description": "Whether the input element is disabled",
    "fieldName": "disabled"
   },
   {
@@ -293,7 +293,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "Orientation | 'horizontal' | 'vertical'"
    },
-   "description": "The orientation of the group",
+   "description": "Sets axis on which the tabs are aligned",
    "fieldName": "orientation"
   },
   {
@@ -335,7 +335,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerRadioGroup } from '@vonage/vivid'
 
 registerRadioGroup('vvd3')

package/v3/VwcRadioGroup/package.json

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

package/v3/VwcRangeSlider/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** Base class for range-slider
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/range-slider
-* @param {string} start - The start value of the range.
+* @param {string} start - The current start value of the element.
 * @param {| string
         | undefined} initialStart - The initial start value. This value sets the `start` property
 only when the `start` property has not been explicitly set. **attribute** `start`
@@ -11,7 +11,7 @@ to set the `start` property through both property assignment and the
 in UI libraries that bind data through the .setAttribute() API
 and don't support IDL attribute binding. **attribute** `current-start`
 * @param {number} startAsNumber - The start property, typed as a number.
-* @param {string} end - The end value of the range.
+* @param {string} end - The current end value of the element.
 * @param {string | undefined} initialEnd - The initial end value. This value sets the `end` property
 only when the `end` property has not been explicitly set. **attribute** `end`
 * @param {string} currentEnd - The current end value of the element. This property serves as a mechanism
@@ -44,42 +44,44 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 */
 declare const VwcRangeSlider: {
     (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onInput: start | null;
         (event: SyntheticEvent): void;
+        onInput: end | null;
         (event: SyntheticEvent): void;
-        children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onInput?: start | null;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        start?: string | undefined;
-        initialStart?: any;
-        currentStart?: string | undefined;
-        startAsNumber?: number | undefined;
-        end?: string | undefined;
-        initialEnd?: string | undefined;
-        currentEnd?: string | undefined;
-        endAsNumber?: any;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        orientation?: any;
-        ariaStartLabel?: string | null | undefined;
-        ariaEndLabel?: string | null | undefined;
-        markers?: boolean | undefined;
-        connotation?: any;
-        pin?: boolean | undefined;
-        valueTextFormatter?: any;
-        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;
+        onInput?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "start"?: string;
+        "initialStart"?: any;
+        "currentStart"?: string;
+        "startAsNumber"?: number;
+        "end"?: string;
+        "initialEnd"?: string | undefined;
+        "currentEnd"?: string;
+        "endAsNumber"?: any;
+        "min"?: number;
+        "max"?: number;
+        "step"?: number;
+        "orientation"?: any;
+        "ariaStartLabel"?: string | null;
+        "ariaEndLabel"?: string | null;
+        "markers"?: boolean;
+        "connotation"?: any;
+        "pin"?: boolean;
+        "valueTextFormatter"?: any;
+        "label"?: string | undefined;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcRangeSlider/index.js

@@ -34,7 +34,7 @@ Code in this file were generated using following JSON:
     "text": "string"
    },
    "default": "''",
-   "description": "The start value of the range."
+   "description": "The current start value of the element."
   },
   {
    "kind": "field",
@@ -68,7 +68,7 @@ Code in this file were generated using following JSON:
     "text": "string"
    },
    "default": "''",
-   "description": "The end value of the range."
+   "description": "The current end value of the element."
   },
   {
    "kind": "field",
@@ -362,6 +362,11 @@ Code in this file were generated using following JSON:
    "name": "#onThumbBlur",
    "privacy": "private"
   },
+  {
+   "kind": "field",
+   "name": "#onVisibilityChange",
+   "privacy": "private"
+  },
   {
    "kind": "field",
    "name": "#onMouseOver",
@@ -946,7 +951,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerRangeSlider } from '@vonage/vivid'
 
 registerRangeSlider('vvd3')

package/v3/VwcRangeSlider/package.json

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

package/v3/VwcRichTextEditor/index.d.ts

@@ -1,10 +1,8 @@
 import React, { ReactNode } from 'react';
 /** VwcRichTextEditor
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/rich-text-editor
-* @param {string | undefined} value - Indicates the rich text editor's value.
-* @param {number | null} selectionStart  **attribute** `selection-start`
-* @param {number | null} selectionEnd  **attribute** `selection-end`
-* @param {string | undefined} placeholder  **attribute** `placeholder`
+* @param {RteInstance | undefined} instance - The editor instance created from the RteConfig. Without it, the editor will not render.
+* @param {HTMLElement | undefined} editorViewportElement - The viewport wraps the scrollable content of the editor.
 * @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
@@ -12,16 +10,14 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcRichTextEditor: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        value?: string | undefined;
-        selectionStart?: number | undefined;
-        selectionEnd?: number | undefined;
-        placeholder?: string | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "instance"?: any;
+        "editorViewportElement"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcRichTextEditor/index.js

@@ -7,167 +7,96 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "",
  "name": "RichTextEditor",
- "members": [
-  {
-   "kind": "field",
-   "name": "value",
-   "type": {
-    "text": "string | undefined"
-   },
-   "description": "Indicates the rich text editor's value.",
-   "privacy": "public"
-  },
-  {
-   "kind": "field",
-   "name": "#editor",
-   "privacy": "private",
-   "type": {
-    "text": "ProseMirrorFacade | undefined"
-   }
-  },
+ "slots": [
   {
-   "kind": "field",
-   "name": "#editorWrapperElement",
-   "privacy": "private",
-   "type": {
-    "text": "HTMLElement"
-   },
-   "readonly": true
+   "description": "Displayed at the start of the scrollable editor area.",
+   "name": "editor-start"
   },
   {
-   "kind": "field",
-   "name": "selectionStart",
-   "type": {
-    "text": "number | null"
-   },
-   "default": "null"
+   "description": "Displayed at the end of the scrollable editor area.",
+   "name": "editor-end"
   },
   {
-   "kind": "method",
-   "name": "selectionStartChanged"
+   "description": "Displayed between the editor viewport and the toolbar.",
+   "name": "status"
   },
   {
-   "kind": "field",
-   "name": "#updateEditorSelection",
-   "privacy": "private"
-  },
+   "description": "Color picker for the RteTextColorFeature.",
+   "name": "text-color-picker"
+  }
+ ],
+ "members": [
   {
    "kind": "field",
-   "name": "selectionEnd",
+   "name": "instance",
    "type": {
-    "text": "number | null"
+    "text": "RteInstance | undefined"
    },
-   "default": "null"
-  },
-  {
-   "kind": "method",
-   "name": "selectionEndChanged"
+   "description": "The editor instance created from the RteConfig. Without it, the editor will not render."
   },
   {
    "kind": "field",
-   "name": "placeholder",
+   "name": "editorViewportElement",
    "type": {
-    "text": "string | undefined"
-   }
+    "text": "HTMLElement | undefined"
+   },
+   "description": "The viewport wraps the scrollable content of the editor."
   },
   {
    "kind": "method",
-   "name": "placeholderChanged"
-  },
-  {
-   "kind": "field",
-   "name": "#handleSelectionChange",
+   "name": "_initViewIfNeeded",
    "privacy": "private"
   },
-  {
-   "kind": "field",
-   "name": "#handleChange",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "#handleInput",
-   "privacy": "private"
-  },
-  {
-   "kind": "method",
-   "name": "setTextBlock",
-   "parameters": [
-    {
-     "name": "blockType",
-     "type": {
-      "text": "'title' | 'subtitle' | 'body'"
-     }
-    }
-   ]
-  },
   {
    "kind": "method",
-   "name": "setSelectionDecoration",
-   "parameters": [
-    {
-     "name": "decoration",
-     "type": {
-      "text": "string"
-     }
-    }
-   ]
+   "name": "_destroyViewIfNeeded",
+   "privacy": "private"
   },
   {
    "kind": "method",
-   "name": "setSelectionTextSize",
-   "parameters": [
-    {
-     "name": "textSize",
-     "type": {
-      "text": "RICH_TEXT_EDITOR_MENUBAR_TEXT_SIZES"
-     }
-    }
-   ]
+   "name": "_syncStateIfNeeded",
+   "privacy": "private"
   },
   {
    "kind": "field",
-   "name": "selectionStyles",
+   "name": "#localeChangeHandler",
+   "privacy": "private",
    "type": {
-    "text": "SelectionStyles"
+    "text": "object"
    },
-   "readonly": true
-  },
-  {
-   "kind": "method",
-   "name": "focus"
+   "default": "{\n\t\t\thandleChange: () => {\n\t\t\t\tthis.localeChanged();\n\t\t\t},\n\t\t}",
+   "inheritedFrom": {
+    "name": "WithObservableLocale",
+    "module": "src/shared/patterns/localized.ts"
+   }
   },
   {
    "kind": "field",
-   "name": "#editableAreaElement",
+   "name": "#localeChangeObserver",
    "privacy": "private",
    "type": {
-    "text": "HTMLElement"
+    "text": "ExpressionNotifier"
    },
-   "readonly": true
+   "inheritedFrom": {
+    "name": "WithObservableLocale",
+    "module": "src/shared/patterns/localized.ts"
+   }
   },
   {
    "kind": "method",
-   "name": "scrollToAttachments",
-   "parameters": [
-    {
-     "name": "additionalPixels",
-     "default": "0"
-    }
-   ]
+   "name": "#startObservingLocaleChanges",
+   "inheritedFrom": {
+    "name": "WithObservableLocale",
+    "module": "src/shared/patterns/localized.ts"
+   }
   },
   {
    "kind": "method",
-   "name": "addInlineImage",
-   "parameters": [
-    {
-     "name": "imageProps",
-     "type": {
-      "text": "{\n\t\tfile: File;\n\t\tposition?: number;\n\t\talt?: string;\n\t}"
-     }
-    }
-   ],
-   "async": true
+   "name": "#stopObservingLocaleChanges",
+   "inheritedFrom": {
+    "name": "WithObservableLocale",
+    "module": "src/shared/patterns/localized.ts"
+   }
   },
   {
    "kind": "field",
@@ -197,34 +126,9 @@ Code in this file were generated using following JSON:
    }
   }
  ],
- "attributes": [
-  {
-   "name": "selection-start",
-   "type": {
-    "text": "number | null"
-   },
-   "default": "null",
-   "fieldName": "selectionStart"
-  },
-  {
-   "name": "selection-end",
-   "type": {
-    "text": "number | null"
-   },
-   "default": "null",
-   "fieldName": "selectionEnd"
-  },
-  {
-   "name": "placeholder",
-   "type": {
-    "text": "string | undefined"
-   },
-   "fieldName": "placeholder"
-  }
- ],
  "mixins": [
   {
-   "name": "Localized",
+   "name": "WithObservableLocale",
    "module": "/src/shared/patterns"
   }
  ],
@@ -235,10 +139,22 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "rich-text-editor"
- }
+ },
+ "dynamicSlots": [
+  {
+   "name": "inline-image-placeholder",
+   "type": "{ url: string }",
+   "description": "Placeholder content for inline images."
+  },
+  {
+   "name": "suggestions-empty",
+   "type": "{ id: string }",
+   "description": "Empty state if no suggestions are found."
+  }
+ ]
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerRichTextEditor } from '@vonage/vivid'
 
 registerRichTextEditor('vvd3')
@@ -246,7 +162,7 @@ registerRichTextEditor('vvd3')
 const VwcRichTextEditor = wrapper(`vvd3-rich-text-editor`,  {
     events: [],
     attributes: [],
-    properties: ['value', 'selectionStart', 'selectionEnd', 'placeholder', 'VIVID_VERSION', 'componentName']
+    properties: ['instance', 'editorViewportElement', 'VIVID_VERSION', 'componentName']
 })
 
 VwcRichTextEditor.displayName = 'VwcRichTextEditor'

package/v3/VwcRichTextEditor/package.json

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

package/v3/VwcRichTextView/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+/** VwcRichTextView
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/rich-text-view
+* @param {RteView | undefined} view - The view to display, created from the RteConfig.
+* @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 VwcRichTextView: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "view"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcRichTextView;