@vonage/vivid-react 3.4.1 → 3.5.0

package/v3/VwcTabs/index.js

@@ -35,26 +35,25 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "activeid",
-   "type": {
-    "text": "string"
-   },
-   "description": "The id of the active tab",
-   "privacy": "public"
+   "name": "_pairedTabs",
+   "privacy": "private",
+   "description": "Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.",
+   "readonly": true
   },
   {
    "kind": "field",
-   "name": "#isLastTabSelectedAfterRemove",
-   "privacy": "private"
+   "name": "_validTabs",
+   "privacy": "private",
+   "description": "Tabs that are eligible to become active.",
+   "readonly": true
   },
   {
    "kind": "field",
-   "name": "activeindicator",
+   "name": "activeid",
    "type": {
-    "text": "boolean"
+    "text": "string"
    },
-   "default": "true",
-   "description": "Whether or not to show the active indicator",
+   "description": "The id of the active tab",
    "privacy": "public"
   },
   {
@@ -64,127 +63,62 @@ Code in this file were generated using following JSON:
     "text": "HTMLElement"
    },
    "description": "A reference to the active tab",
-   "privacy": "public"
-  },
-  {
-   "kind": "field",
-   "name": "prevActiveTabIndex",
-   "type": {
-    "text": "number"
-   },
-   "privacy": "private",
-   "default": "0"
+   "privacy": "public",
+   "readonly": true
   },
   {
-   "kind": "field",
-   "name": "activeTabIndex",
-   "type": {
-    "text": "number"
-   },
-   "privacy": "private",
-   "default": "0"
+   "kind": "method",
+   "name": "#setActiveTabDueToUserInteraction",
+   "parameters": [
+    {
+     "name": "tab",
+     "type": {
+      "text": "HTMLElement"
+     }
+    }
+   ]
   },
   {
    "kind": "field",
-   "name": "tabIds",
-   "type": {
-    "text": "Array<string>"
-   },
+   "name": "#isTabsChangeQueued",
    "privacy": "private",
-   "default": "[]"
-  },
-  {
-   "kind": "field",
-   "name": "tabpanelIds",
    "type": {
-    "text": "Array<string>"
+    "text": "boolean"
    },
-   "privacy": "private",
-   "default": "[]"
-  },
-  {
-   "kind": "field",
-   "name": "change",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "isDisabledElement",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "isHiddenElement",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "isFocusableElement",
-   "privacy": "private"
+   "default": "false"
   },
   {
    "kind": "method",
-   "name": "getActiveIndex",
+   "name": "_registerTabsChange",
    "privacy": "private",
-   "return": {
-    "type": {
-     "text": "number"
-    }
-   }
-  },
-  {
-   "kind": "field",
-   "name": "setTabs",
-   "privacy": "private"
+   "description": "Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and\nactive id are updated at the same time."
   },
   {
    "kind": "field",
-   "name": "setTabPanels",
-   "privacy": "private"
-  },
-  {
-   "kind": "method",
-   "name": "getTabIds",
+   "name": "#lastActiveId",
    "privacy": "private",
-   "return": {
-    "type": {
-     "text": "Array<string>"
-    }
-   }
+   "type": {
+    "text": "string | undefined"
+   },
+   "default": "undefined"
   },
   {
    "kind": "method",
-   "name": "getTabPanelIds",
-   "privacy": "private",
-   "return": {
-    "type": {
-     "text": "Array<string>"
-    }
-   }
+   "name": "#handleTabsChange"
   },
   {
    "kind": "method",
-   "name": "setComponent",
-   "privacy": "private",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
+   "name": "#updateSlottedChildren",
+   "description": "Updates the tabs and their panels according to the current state of the component."
   },
   {
    "kind": "field",
-   "name": "handleTabClick",
+   "name": "#onTabClick",
    "privacy": "private"
   },
   {
    "kind": "field",
-   "name": "#isHorizontal",
-   "privacy": "private"
-  },
-  {
-   "kind": "field",
-   "name": "#handleTabKeyDown",
+   "name": "#onTabKeyDown",
    "privacy": "private"
   },
   {
@@ -203,46 +137,34 @@ Code in this file were generated using following JSON:
      }
     }
    ],
-   "description": "The adjust method for FASTTabs",
+   "description": "Adjusts the active index by numerical increments.\nOnly enabled tabs are considered.",
    "privacy": "public"
   },
   {
    "kind": "field",
-   "name": "adjustForward",
-   "privacy": "private"
+   "name": "#isTransitioningTransform",
+   "privacy": "private",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false"
   },
   {
-   "kind": "field",
-   "name": "adjustBackward",
-   "privacy": "private"
+   "kind": "method",
+   "name": "#cancelAnimationIfNeeded"
   },
   {
    "kind": "method",
-   "name": "#moveToNextTab",
+   "name": "#moveActiveIndicator",
    "parameters": [
     {
-     "name": "direction",
+     "name": "shouldAnimate",
      "type": {
-      "text": "1 | -1"
+      "text": "boolean"
      }
     }
    ]
   },
-  {
-   "kind": "field",
-   "name": "#moveToTabByIndex",
-   "privacy": "private"
-  },
-  {
-   "kind": "method",
-   "name": "focusTab",
-   "privacy": "private",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
-  },
   {
    "kind": "field",
    "name": "tablist",
@@ -291,16 +213,6 @@ Code in this file were generated using following JSON:
    "kind": "method",
    "name": "#updateScrollStatus"
   },
-  {
-   "kind": "field",
-   "name": "#shouldMoveIndicator",
-   "privacy": "private",
-   "readonly": true
-  },
-  {
-   "kind": "method",
-   "name": "#patchIndicatorStyleTransition"
-  },
   {
    "kind": "field",
    "name": "#resizeObserver",
@@ -310,56 +222,75 @@ Code in this file were generated using following JSON:
    }
   },
   {
-   "kind": "method",
-   "name": "#updateTabsConnotation"
+   "kind": "field",
+   "name": "#tabListWrapper",
+   "privacy": "private",
+   "type": {
+    "text": "HTMLElement"
+   },
+   "readonly": true
   },
   {
    "kind": "field",
-   "name": "#tabListWrapper",
+   "name": "#tabListScrollWrapper",
    "privacy": "private",
+   "type": {
+    "text": "HTMLElement"
+   },
    "readonly": true
   },
   {
    "kind": "method",
-   "name": "#scrollToIndex",
+   "name": "#scrollToTab",
    "parameters": [
     {
-     "name": "index",
+     "name": "tab",
      "type": {
-      "text": "number"
+      "text": "HTMLElement"
      }
+    },
+    {
+     "name": "shouldAnimate",
+     "default": "true"
     }
    ]
   },
   {
-   "kind": "method",
-   "name": "#getGridProperty"
-  },
-  {
-   "kind": "method",
-   "name": "#getTranslateProperty"
+   "kind": "field",
+   "name": "activeindicator",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "true",
+   "description": "Deprecated attribute. It has no effect.",
+   "privacy": "public"
   },
   {
-   "kind": "method",
-   "name": "#handleActiveIndicatorPosition",
-   "parameters": [
-    {
-     "name": "animate",
-     "default": "true"
-    }
-   ]
+   "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": "method",
-   "name": "#animateActiveIndicator",
-   "parameters": [
-    {
-     "name": "animate",
-     "type": {
-      "text": "boolean"
-     }
-    }
-   ]
+   "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"
+   }
   }
  ],
  "events": [
@@ -388,14 +319,6 @@ Code in this file were generated using following JSON:
    "description": "The id of the active tab",
    "fieldName": "activeid"
   },
-  {
-   "type": {
-    "text": "boolean"
-   },
-   "default": "true",
-   "description": "Whether or not to show the active indicator",
-   "fieldName": "activeindicator"
-  },
   {
    "name": "connotation",
    "type": {
@@ -428,11 +351,20 @@ Code in this file were generated using following JSON:
    },
    "description": "Controls the layout of the tabs.",
    "fieldName": "tabsLayout"
+  },
+  {
+   "name": "activeindicator",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "true",
+   "description": "Deprecated attribute. It has no effect.",
+   "fieldName": "activeindicator"
   }
  ],
  "superclass": {
   "name": "VividElement",
-  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,
@@ -448,7 +380,7 @@ registerTabs('vvd3')
 const VwcTabs = wrapper(`vvd3-tabs`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['orientation', 'activeid', 'activeindicator', 'activetab', 'tablist', 'connotation', 'gutters', 'scrollablePanel', 'tabsLayout']
+    properties: ['orientation', 'activeid', 'tablist', 'connotation', 'gutters', 'scrollablePanel', 'tabsLayout', 'activeindicator', 'VIVID_VERSION', 'componentName']
 })
 
 VwcTabs.displayName = 'VwcTabs'

package/v3/VwcTabs/package.json

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

package/v3/VwcTag/index.d.ts

@@ -9,6 +9,11 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {boolean} disabled - indicates whether the tag is disabled **attribute** `disabled`
 * @param {boolean} selectable - indicates whether the tag is selectable **attribute** `selectable`
 * @param {boolean} selected - indicates whether the tag is selected **attribute** `selected`
+* @param {'delegate'} _vividAriaBehaviour
+* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @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 VwcTag: {
     (props: {
@@ -27,6 +32,10 @@ declare const VwcTag: {
         disabled?: boolean | undefined;
         selectable?: boolean | undefined;
         selected?: boolean | undefined;
+        _vividAriaBehaviour?: any;
+        icon?: string | undefined;
+        VIVID_VERSION?: string | undefined;
+        componentName?: string | undefined;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcTag/index.js

@@ -67,7 +67,7 @@ Code in this file were generated using following JSON:
  ],
  "slots": [
   {
-   "description": "Add an icon to the component.",
+   "description": "The preferred way to add an icon to the component.",
    "name": "icon"
   }
  ],
@@ -182,6 +182,58 @@ Code in this file were generated using following JSON:
      "text": "void"
     }
    }
+  },
+  {
+   "kind": "field",
+   "name": "_vividAriaBehaviour",
+   "default": "'delegate'",
+   "type": {
+    "text": "'delegate'"
+   },
+   "inheritedFrom": {
+    "name": "DelegatesAria",
+    "module": "src/shared/aria/delegates-aria.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "icon",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "A decorative icon the custom element should have.",
+   "privacy": "public",
+   "inheritedFrom": {
+    "name": "AffixIcon",
+    "module": "src/shared/patterns/affix.ts"
+   }
+  },
+  {
+   "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"
+   }
   }
  ],
  "events": [
@@ -234,6 +286,7 @@ Code in this file were generated using following JSON:
    "fieldName": "label"
   },
   {
+   "name": "removable",
    "type": {
     "text": "boolean"
    },
@@ -242,6 +295,7 @@ Code in this file were generated using following JSON:
    "fieldName": "removable"
   },
   {
+   "name": "disabled",
    "type": {
     "text": "boolean"
    },
@@ -250,6 +304,7 @@ Code in this file were generated using following JSON:
    "fieldName": "disabled"
   },
   {
+   "name": "selectable",
    "type": {
     "text": "boolean"
    },
@@ -258,17 +313,44 @@ Code in this file were generated using following JSON:
    "fieldName": "selectable"
   },
   {
+   "name": "selected",
    "type": {
     "text": "boolean"
    },
    "default": "false",
    "description": "indicates whether the tag is selected",
    "fieldName": "selected"
+  },
+  {
+   "name": "icon",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "A decorative icon the custom element should have.",
+   "fieldName": "icon",
+   "inheritedFrom": {
+    "name": "AffixIcon",
+    "module": "src/shared/patterns/affix.ts"
+   }
+  }
+ ],
+ "mixins": [
+  {
+   "name": "Localized",
+   "module": "/src/shared/patterns"
+  },
+  {
+   "name": "DelegatesAria",
+   "module": "/src/shared/aria/delegates-aria"
+  },
+  {
+   "name": "AffixIcon",
+   "module": "/src/shared/patterns/affix"
   }
  ],
  "superclass": {
   "name": "VividElement",
-  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,
@@ -284,7 +366,7 @@ registerTag('vvd3')
 const VwcTag = wrapper(`vvd3-tag`,  {
     events: [{"name":"removed","propName":"onRemoved"},{"name":"selected-change","propName":"onSelectedChange"}],
     attributes: [],
-    properties: ['connotation', 'shape', 'appearance', 'label', 'removable', 'disabled', 'selectable', 'selected']
+    properties: ['connotation', 'shape', 'appearance', 'label', 'removable', 'disabled', 'selectable', 'selected', '_vividAriaBehaviour', 'icon', 'VIVID_VERSION', 'componentName']
 })
 
 VwcTag.displayName = 'VwcTag'

package/v3/VwcTag/package.json

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

package/v3/VwcTagGroup/index.d.ts

@@ -1,7 +1,10 @@
 import React, { ReactNode } from 'react';
 /** VwcTagGroup
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/tag-group
-* @param {string | null} ariaLabel  **attribute** `aria-label`
+* @param {'delegate'} _vividAriaBehaviour
+* @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 VwcTagGroup: {
     (props: {
@@ -10,7 +13,9 @@ declare const VwcTagGroup: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        ariaLabel?: string | null | undefined;
+        _vividAriaBehaviour?: any;
+        VIVID_VERSION?: string | undefined;
+        componentName?: string | undefined;
     }): JSX.Element;
     displayName: string;
 };