@vonage/vivid-react 4.0.0 → 5.19.0

package/v3/VwcTableHeaderCell/package.json

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

package/v3/VwcTableRow/index.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+/** VwcTableRow
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/table-row
+* @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 VwcTableRow: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcTableRow;

package/v3/VwcTableRow/index.js

@@ -0,0 +1,140 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "TableRow",
+ "cssProperties": [
+  {
+   "name": "--vvd-data-grid-row-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-pale",
+   "default": "var(--vvd-color-cta-300)"
+  },
+  {
+   "name": "--vvd-data-grid-row-cta-dim",
+   "default": "var(--vvd-color-cta-200)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
+  },
+  {
+   "name": "--vvd-data-grid-row-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "mixins": [
+  {
+   "name": "HostSemantics",
+   "module": "/src/shared/aria/host-semantics"
+  }
+ ],
+ "superclass": {
+  "name": "VividElement",
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "table-row"
+ },
+ "members": [
+  {
+   "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"
+   }
+  }
+ ]
+}
+*/
+import wrapper from '@repo/react-component-wrapper'
+import { registerTableRow } from '@vonage/vivid'
+
+registerTableRow('vvd3')
+
+const VwcTableRow = wrapper(`vvd3-table-row`,  {
+    events: [],
+    attributes: [],
+    properties: ['VIVID_VERSION', 'componentName']
+})
+
+VwcTableRow.displayName = 'VwcTableRow'
+
+export default VwcTableRow

package/v3/VwcTableRow/package.json

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

package/v3/VwcTableSortingButton/index.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** VwcTableSortingButton
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/table-sorting-button
+* @param {null | 'none' | 'asc' | 'desc' | undefined} direction - Current direction of the sorting **attribute** `direction`
+* @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 VwcTableSortingButton: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onSort?: (event: SyntheticEvent) => void;
+        "direction"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcTableSortingButton;

package/v3/VwcTableSortingButton/index.js

@@ -0,0 +1,112 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "TableSortingButton",
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "direction",
+   "type": {
+    "text": "null | 'none' | 'asc' | 'desc' | undefined"
+   },
+   "description": "Current direction of the sorting",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "#nextDirection",
+   "privacy": "private",
+   "readonly": true
+  },
+  {
+   "kind": "method",
+   "name": "toggleSort"
+  },
+  {
+   "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": [
+  {
+   "name": "sort",
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emitted when sorting button is clicked."
+  }
+ ],
+ "attributes": [
+  {
+   "name": "direction",
+   "type": {
+    "text": "null | 'none' | 'asc' | 'desc' | undefined"
+   },
+   "description": "Current direction of the sorting",
+   "fieldName": "direction"
+  }
+ ],
+ "mixins": [
+  {
+   "name": "DelegatesAria",
+   "module": "/src/shared/aria/delegates-aria"
+  }
+ ],
+ "superclass": {
+  "name": "VividElement",
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "table-sorting-button"
+ }
+}
+*/
+import wrapper from '@repo/react-component-wrapper'
+import { registerTableSortingButton } from '@vonage/vivid'
+
+registerTableSortingButton('vvd3')
+
+const VwcTableSortingButton = wrapper(`vvd3-table-sorting-button`,  {
+    events: [{"name":"sort","propName":"onSort"}],
+    attributes: [],
+    properties: ['direction', 'VIVID_VERSION', 'componentName']
+})
+
+VwcTableSortingButton.displayName = 'VwcTableSortingButton'
+
+export default VwcTableSortingButton

package/v3/VwcTableSortingButton/package.json

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

package/v3/VwcTabs/index.d.ts

@@ -2,11 +2,10 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcTabs
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/tabs
 * @param {TabsOrientation} orientation - The orientation **attribute** `orientation`
-* @param {string} activeid - The id of the active tab **attribute** `activeid`
-* @param {HTMLElement | undefined} tablist
-* @param {TabsConnotation | undefined} connotation - The connotation the tabs should have. **attribute** `connotation`
-* @param {TabsGutters | undefined} gutters - sets the initial preferred margin from predefined available options **attribute** `gutters`
-* @param {boolean} scrollablePanel - sets overflow to the tab-panel **attribute** `scrollable-panel`
+* @param {string} activeid - Match with an `id` set on a Tab to mark it as active on initial load **attribute** `activeid`
+* @param {TabsConnotation | undefined} connotation - Sets the connotation color of the active tab **attribute** `connotation`
+* @param {TabsGutters | undefined} gutters - Sets the spacing inside the Tab Panels **attribute** `gutters`
+* @param {boolean} scrollablePanel - Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`) **attribute** `scrollable-panel`
 * @param {'align-start' | 'stretch' | undefined} tabsLayout - Controls the layout of the tabs. **attribute** `tabs-layout`
 * @param {boolean} activeindicator - Deprecated attribute. It has no effect. **attribute** `activeindicator`
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
@@ -16,21 +15,21 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcTabs: {
     (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;
-        orientation?: any;
-        activeid?: string | undefined;
-        tablist?: any;
-        connotation?: any;
-        gutters?: any;
-        scrollablePanel?: boolean | undefined;
-        tabsLayout?: any;
-        activeindicator?: boolean | 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;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "orientation"?: any;
+        "activeid"?: string;
+        "connotation"?: any;
+        "gutters"?: any;
+        "scrollablePanel"?: boolean;
+        "tabsLayout"?: any;
+        "activeindicator"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcTabs/index.js

@@ -19,8 +19,12 @@ Code in this file were generated using following JSON:
  ],
  "slots": [
   {
-   "description": "Default slot.",
+   "description": "Default slot for tab and tab-panel elements.",
    "name": ""
+  },
+  {
+   "description": "Slot for action items such as buttons or controls.",
+   "name": "action-items"
   }
  ],
  "members": [
@@ -57,7 +61,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "The id of the active tab",
+   "description": "Match with an `id` set on a Tab to mark it as active on initial load",
    "privacy": "public"
   },
   {
@@ -169,20 +173,13 @@ Code in this file were generated using following JSON:
     }
    ]
   },
-  {
-   "kind": "field",
-   "name": "tablist",
-   "type": {
-    "text": "HTMLElement | undefined"
-   }
-  },
   {
    "kind": "field",
    "name": "connotation",
    "type": {
     "text": "TabsConnotation | undefined"
    },
-   "description": "The connotation the tabs should have.",
+   "description": "Sets the connotation color of the active tab",
    "privacy": "public"
   },
   {
@@ -191,7 +188,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "TabsGutters | undefined"
    },
-   "description": "sets the initial preferred margin from predefined available options",
+   "description": "Sets the spacing inside the Tab Panels",
    "privacy": "public"
   },
   {
@@ -201,7 +198,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "sets overflow to the tab-panel",
+   "description": "Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`)",
    "privacy": "public"
   },
   {
@@ -320,7 +317,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "The id of the active tab",
+   "description": "Match with an `id` set on a Tab to mark it as active on initial load",
    "fieldName": "activeid"
   },
   {
@@ -328,7 +325,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "TabsConnotation | undefined"
    },
-   "description": "The connotation the tabs should have.",
+   "description": "Sets the connotation color of the active tab",
    "fieldName": "connotation"
   },
   {
@@ -336,7 +333,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "TabsGutters | undefined"
    },
-   "description": "sets the initial preferred margin from predefined available options",
+   "description": "Sets the spacing inside the Tab Panels",
    "fieldName": "gutters"
   },
   {
@@ -345,7 +342,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "sets overflow to the tab-panel",
+   "description": "Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`)",
    "fieldName": "scrollablePanel"
   },
   {
@@ -376,7 +373,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 { registerTabs } from '@vonage/vivid'
 
 registerTabs('vvd3')
@@ -384,7 +381,7 @@ registerTabs('vvd3')
 const VwcTabs = wrapper(`vvd3-tabs`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['orientation', 'activeid', 'tablist', 'connotation', 'gutters', 'scrollablePanel', 'tabsLayout', 'activeindicator', 'VIVID_VERSION', 'componentName']
+    properties: ['orientation', 'activeid', '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": "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/VwcTag/index.d.ts

@@ -9,8 +9,8 @@ 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 | 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} 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
@@ -18,24 +18,23 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcTag: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onSelectedChange?: ((event: SyntheticEvent) => void) | undefined;
-        onRemoved?: ((event: SyntheticEvent) => void) | undefined;
-        connotation?: any;
-        shape?: any;
-        appearance?: any;
-        label?: string | undefined;
-        removable?: boolean | undefined;
-        disabled?: boolean | undefined;
-        selectable?: boolean | undefined;
-        selected?: boolean | undefined;
-        _vividAriaBehaviour?: any;
-        icon?: 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;
+        onSelectedChange?: (event: SyntheticEvent) => void;
+        onRemoved?: (event: SyntheticEvent) => void;
+        "connotation"?: any;
+        "shape"?: any;
+        "appearance"?: any;
+        "label"?: string | undefined;
+        "removable"?: boolean;
+        "disabled"?: boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };