@vonage/vivid-react 2.10.56 → 2.10.59

package/types/index.d.ts

@@ -1,2 +1,294 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
 declare module '@vonage/vivid-react-wrapper';
-declare module '@vonage/vivid-react';
+declare module '@vonage/vivid-react';
+declare namespace JSX {
+    interface IntrinsicElements {
+        "vvd3-accordion": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-accordion-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "heading": string | undefined;
+            "no-indicator": boolean;
+            "meta": string | undefined;
+            "size": AccordionItemSize | undefined;
+        }>;
+        "vvd3-action-group": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "shape": ActionGroupShape | undefined;
+            "appearance": ActionGroupAppearance | undefined;
+            "tight": boolean;
+            "role": string | undefined;
+            "aria-label": string | null;
+        }>;
+        "vvd3-alert": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "removable": boolean;
+            "placement": AlertPlacement | undefined;
+            "headline": string | undefined;
+            "text": string | undefined;
+            "icon": string | undefined;
+            "timeoutms": number;
+            "connotation": AlertConnotation | undefined;
+            "open": boolean;
+        }>;
+        "vvd3-avatar": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": AvatarConnotation | undefined;
+            "shape": AvatarShape | undefined;
+            "appearance": AvatarAppearance | undefined;
+            "size": AvatarSize | undefined;
+            "icon": string | undefined;
+            "initials": string | undefined;
+        }>;
+        "vvd3-badge": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": BadgeConnotation | undefined;
+            "shape": BadgeShape | undefined;
+            "appearance": BadgeAppearance | undefined;
+            "text": string | undefined;
+        }>;
+        "vvd3-banner": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "action-href": string | undefined;
+            "action-text": string | undefined;
+            "removable": boolean;
+            "aria-live": any;
+            "role": string | undefined;
+            "text": string | undefined;
+            "connotation": BannerConnotation | undefined;
+        }>;
+        "vvd3-breadcrumb": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-breadcrumb-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+        }>;
+        "vvd3-button": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": ButtonConnotation | undefined;
+            "shape": ButtonShape | undefined;
+            "appearance": ButtonAppearance | undefined;
+            "size": ButtonSize | undefined;
+            "stacked": boolean;
+            "pending": boolean;
+            "label": string | undefined;
+        }>;
+        "vvd3-calendar": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "datetime": Date | string | undefined;
+            "start-day": 'sunday' | 'monday' | undefined;
+            "locales": string | string[] | undefined | undefined;
+            "hour12": boolean;
+        }>;
+        "vvd3-calendar-event": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "heading": string | undefined;
+            "description": string | undefined;
+            "connotation": CalendarEventConnotation | undefined;
+            "appearance": CalendarEventAppearance | undefined;
+            "overlap-count": number | undefined;
+            "start": number | undefined;
+            "duration": number | undefined;
+        }>;
+        "vvd3-card": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "headline": string | undefined;
+            "subtitle": string | undefined;
+            "text": string | undefined;
+            "icon": string | undefined;
+            "elevation": 0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined;
+        }>;
+        "vvd3-checkbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": CheckboxConnotation | undefined;
+        }>;
+        "vvd3-combobox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "placement": PopupPlacement | undefined;
+        }>;
+        "vvd3-data-grid-cell": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-selected": string | null;
+        }>;
+        "vvd3-data-grid-row": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-selected": string | null;
+        }>;
+        "vvd3-data-grid": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "selection-mode": DataGridSelectionMode | undefined;
+        }>;
+        "vvd3-dialog": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "open": boolean;
+            "icon": string | undefined;
+            "icon-placement": IconPlacement | undefined;
+            "subtitle": string | undefined;
+            "headline": string | undefined;
+            "full-width-body": boolean;
+            "aria-labelledby": string | null;
+            "aria-label": string | null;
+            "aria-describedby": string | null;
+        }>;
+        "vvd3-divider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-elevation": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "dp": 0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined;
+            "no-shadow": boolean | undefined;
+        }>;
+        "vvd3-empty-state": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "headline": string | undefined;
+            "icon": string | undefined;
+        }>;
+        "vvd3-fab": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": FabConnotation | undefined;
+            "size": FABSize | undefined;
+            "label": string | undefined;
+        }>;
+        "vvd3-focus": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-header": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "elevation-shadow": boolean;
+            "alternate": boolean;
+        }>;
+        "vvd3-icon": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": IconConnotation | undefined;
+            "size": -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+            "name": string | undefined;
+        }>;
+        "vvd3-layout": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "gutters": Gutters | undefined;
+            "column-basis": ColumnBasis | undefined;
+            "column-spacing": ColumnSpacing | undefined;
+            "row-spacing": RowSpacing | undefined;
+            "auto-sizing": AUTO_SIZING | undefined;
+        }>;
+        "vvd3-listbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "appearance": LisboxAppearance | undefined;
+        }>;
+        "vvd3-menu": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "open": boolean;
+            "placement": Placement | undefined;
+            "anchor": string | undefined;
+            "auto-dismiss": boolean;
+        }>;
+        "vvd3-menu-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+            "text-secondary": string | undefined;
+        }>;
+        "vvd3-nav": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-nav-disclosure": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "label": string | undefined;
+            "open": boolean;
+        }>;
+        "vvd3-nav-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+        }>;
+        "vvd3-note": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "headline": string | undefined;
+            "connotation": NoteConnotation | undefined;
+        }>;
+        "vvd3-number-field": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "appearance": NumberFieldAppearance | undefined;
+            "shape": NumberFieldShape | undefined;
+            "autoComplete": string | undefined;
+        }>;
+        "vvd3-listbox-option": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+            "label": string | undefined;
+        }>;
+        "vvd3-pagination": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "size": PaginationSize | undefined;
+            "nav-icons": boolean;
+            "total": number;
+            "selected-index": number | undefined;
+        }>;
+        "vvd3-popup": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "open": boolean;
+            "dismissible": boolean;
+            "arrow": boolean;
+            "alternate": boolean;
+            "placement": Placement | undefined;
+            "strategy": Strategy | undefined;
+            "anchor": string | HTMLElement | undefined;
+        }>;
+        "vvd3-progress": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "shape": ProgressShape | undefined;
+            "connotation": ProgressConnotation | undefined;
+            "reverse": boolean;
+        }>;
+        "vvd3-progress-ring": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": ProgressRingConnotation | undefined;
+            "size": -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+        }>;
+        "vvd3-radio": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "label": string | undefined;
+        }>;
+        "vvd3-radio-group": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "label": string | undefined;
+        }>;
+        "vvd3-select": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "appearance": SelectAppearance | undefined;
+            "shape": SelectShape | undefined;
+            "fixed-dropdown": boolean;
+        }>;
+        "vvd3-side-drawer": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "alternate": boolean;
+            "modal": boolean;
+            "open": boolean;
+            "trailing": boolean;
+        }>;
+        "vvd3-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "markers": boolean;
+        }>;
+        "vvd3-switch": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "label": string | undefined;
+            "connotation": SwitchConnotation | undefined;
+        }>;
+        "vvd3-tab": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "label": string | undefined;
+            "tabIndex": any;
+            "aria-selected": string | null;
+        }>;
+        "vvd3-tab-panel": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-tabs": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-tag": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": TagConnotation | undefined;
+            "shape": TagShape | undefined;
+            "appearance": TagAppearance | undefined;
+            "label": string | undefined;
+            "removable": boolean;
+            "disabled": boolean;
+            "selectable": boolean;
+            "selected": boolean;
+        }>;
+        "vvd3-tag-group": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-text-anchor": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+        }>;
+        "vvd3-text-area": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "wrap": TextAreaWrap | undefined;
+        }>;
+        "vvd3-text-field": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "appearance": TextFieldAppearance | undefined;
+            "shape": TextFieldShape | undefined;
+            "autoComplete": string | undefined;
+        }>;
+        "vvd3-toggletip": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "headline": string | undefined;
+            "alternate": boolean;
+            "placement": Placement | undefined;
+            "anchor": AnchorType;
+            "open": boolean;
+        }>;
+        "vvd3-tooltip": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+            "placement": Placement | undefined;
+            "open": boolean;
+            "anchor": anchorType | undefined;
+        }>;
+        "vvd3-tree-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "text": string | undefined;
+        }>;
+        "vvd3-tree-view": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+    }
+}

package/v3/VwcAccordion/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+/** Base class for accordion
+* @param {AccordionExpandMode} expandmode - Controls the expand mode of the Accordion, either allowing
+single or multiple item expansion.
+*/
+declare const VwcAccordion: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        expandmode?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcAccordion;

package/v3/VwcAccordion/index.js

@@ -0,0 +1,55 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for accordion",
+ "name": "Accordion",
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "expandmode",
+   "type": {
+    "text": "AccordionExpandMode"
+   },
+   "description": "Controls the expand mode of the Accordion, either allowing\nsingle or multiple item expansion.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "closeAll",
+   "return": {
+    "type": {
+     "text": "void"
+    }
+   }
+  }
+ ],
+ "superclass": {
+  "name": "FastAccordion",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerAccordion } from '@vonage/vivid'
+
+registerAccordion('vvd3')
+
+const VwcAccordion = wrapper(`vvd3-accordion`,  {
+    events: [],
+    attributes: [],
+    properties: ['expandmode']
+})
+
+VwcAccordion.displayName = 'VwcAccordion'
+
+export default VwcAccordion

package/v3/VwcAccordion/package.json

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

package/v3/VwcAccordionItem/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+/** VwcAccordionItem
+* @param {string | undefined} heading  **attribute** `heading`
+* @param {boolean} noIndicator - Indicates whether the accordion-item has indicator **attribute** `no-indicator`
+* @param {string | undefined} meta  **attribute** `meta`
+* @param {AccordionItemSize | undefined} size - The size the accordion-item should have. **attribute** `size`
+*/
+declare const VwcAccordionItem: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        heading?: string | undefined;
+        noIndicator?: boolean | undefined;
+        meta?: string | undefined;
+        size?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcAccordionItem;

package/v3/VwcAccordionItem/index.js

@@ -0,0 +1,121 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "AccordionItem",
+ "cssProperties": [
+  {
+   "name": "--vvd-accordion-item-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-accordion-item-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-accordion-item-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "heading",
+   "type": {
+    "text": "string | undefined"
+   },
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "noIndicator",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates whether the accordion-item has indicator",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "meta",
+   "type": {
+    "text": "string | undefined"
+   },
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "size",
+   "type": {
+    "text": "AccordionItemSize | undefined"
+   },
+   "description": "The size the accordion-item should have.",
+   "privacy": "public"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "heading",
+   "type": {
+    "text": "string | undefined"
+   },
+   "fieldName": "heading"
+  },
+  {
+   "name": "no-indicator",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates whether the accordion-item has indicator",
+   "fieldName": "noIndicator"
+  },
+  {
+   "name": "meta",
+   "type": {
+    "text": "string | undefined"
+   },
+   "fieldName": "meta"
+  },
+  {
+   "name": "size",
+   "type": {
+    "text": "AccordionItemSize | undefined"
+   },
+   "description": "The size the accordion-item should have.",
+   "fieldName": "size"
+  }
+ ],
+ "superclass": {
+  "name": "FASTAccordionItem",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerAccordionItem } from '@vonage/vivid'
+
+registerAccordionItem('vvd3')
+
+const VwcAccordionItem = wrapper(`vvd3-accordion-item`,  {
+    events: [],
+    attributes: [],
+    properties: ['heading', 'noIndicator', 'meta', 'size']
+})
+
+VwcAccordionItem.displayName = 'VwcAccordionItem'
+
+export default VwcAccordionItem

package/v3/VwcAccordionItem/package.json

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

package/v3/VwcActionGroup/index.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+/** Base class for action-group
+* @param {ActionGroupShape | undefined} shape - The shape the ActionGroup should have. **attribute** `shape`
+* @param {ActionGroupAppearance | undefined} appearance - The appearance the ActionGroup should have. **attribute** `appearance`
+* @param {boolean} tight - Indicates whether action group should have padding. **attribute** `tight`
+* @param {string | undefined} role  **attribute** `role`
+* @param {string | null} ariaLabel  **attribute** `aria-label`
+*/
+declare const VwcActionGroup: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        shape?: any;
+        appearance?: any;
+        tight?: boolean | undefined;
+        role?: string | undefined;
+        ariaLabel?: string | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcActionGroup;