@vonage/vivid-react 3.3.0 → 3.4.0

package/v3/VwcInlineTimePicker/index.js

@@ -0,0 +1,125 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "InlineTimePicker",
+ "cssProperties": [
+  {
+   "name": "--vvd-time-picker-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "value",
+   "type": {
+    "text": "string | undefined"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "valueChanged",
+   "parameters": [
+    {
+     "name": "_",
+     "optional": true,
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "name": "newValue",
+     "optional": true,
+     "type": {
+      "text": "string"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "minutesStep",
+   "type": {
+    "text": "number"
+   },
+   "default": "1"
+  },
+  {
+   "kind": "field",
+   "name": "secondsStep",
+   "type": {
+    "text": "number | undefined"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "clock",
+   "type": {
+    "text": "'12h' | '24h'"
+   },
+   "default": "'24h'"
+  },
+  {
+   "kind": "field",
+   "name": "min",
+   "type": {
+    "text": "string | undefined"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "max",
+   "type": {
+    "text": "string | undefined"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "scrollSelectedOptionsToTop"
+  }
+ ],
+ "superclass": {
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerInlineTimePicker } from '@vonage/vivid'
+
+registerInlineTimePicker('vvd3')
+
+const VwcInlineTimePicker = wrapper(`vvd3-inline-time-picker`,  {
+    events: [],
+    attributes: [],
+    properties: ['value', 'minutesStep', 'secondsStep', 'clock', 'min', 'max']
+})
+
+VwcInlineTimePicker.displayName = 'VwcInlineTimePicker'
+
+export default VwcInlineTimePicker

package/v3/VwcInlineTimePicker/package.json

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

package/v3/VwcLayout/index.js

@@ -103,8 +103,8 @@ Code in this file were generated using following JSON:
   }
  ],
  "superclass": {
-  "name": "FoundationElement",
-  "package": "@microsoft/fast-foundation"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,

package/v3/VwcLayout/package.json

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

package/v3/VwcListbox/index.d.ts

@@ -1,9 +1,11 @@
 import React, { ReactNode } from 'react';
 /** VwcListbox
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/listbox
-* @param {LisboxAppearance | undefined} appearance - The appearance the listbox should have. **attribute** `appearance`
-* @param {'horizontal' | 'vertical' | undefined} orientation - The direction the listbox options should flow. **attribute** `orientation`
-* @param {ListboxShape | undefined} shape - The shape the listbox should have. **attribute** `shape`
+* @param {ListboxOption[]} options - The list of options.
+* @param {boolean} disabled - The disabled state of the listbox. **attribute** `disabled`
+* @param {number} selectedIndex - The index of the selected option.
+* @param {ListboxOption[]} selectedOptions - A collection of the selected options.
+* @param  slottedOptionFilter - A static filter to include only selectable options.
 */
 declare const VwcListbox: {
     (props: {
@@ -12,9 +14,11 @@ declare const VwcListbox: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        appearance?: any;
-        orientation?: any;
-        shape?: any;
+        options?: any[] | undefined;
+        disabled?: boolean | undefined;
+        selectedIndex?: number | undefined;
+        selectedOptions?: any[] | undefined;
+        slottedOptionFilter?: any;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcListbox/index.js

@@ -7,123 +7,98 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "",
  "name": "Listbox",
- "cssProperties": [
-  {
-   "name": "--vvd-listbox-accent-intermediate",
-   "default": "var(--vvd-color-neutral-500)"
-  },
+ "members": [
   {
-   "name": "--vvd-listbox-accent-primary",
-   "default": "var(--vvd-color-canvas-text)"
+   "kind": "field",
+   "name": "length",
+   "type": {
+    "text": "number"
+   },
+   "description": "The number of options.",
+   "privacy": "public",
+   "readonly": true
   },
-  {
-   "name": "--vvd-listbox-accent-soft",
-   "default": "var(--vvd-color-neutral-100)"
-  }
- ],
- "slots": [
-  {
-   "description": "Default slot.",
-   "name": ""
-  }
- ],
- "members": [
   {
    "kind": "field",
-   "name": "appearance",
+   "name": "options",
    "type": {
-    "text": "LisboxAppearance | undefined"
+    "text": "ListboxOption[]"
    },
-   "description": "The appearance the listbox should have.",
+   "description": "The list of options.",
    "privacy": "public"
   },
   {
    "kind": "field",
-   "name": "orientation",
+   "name": "disabled",
    "type": {
-    "text": "'horizontal' | 'vertical' | undefined"
+    "text": "boolean"
    },
-   "description": "The direction the listbox options should flow.",
+   "description": "The disabled state of the listbox.",
    "privacy": "public"
   },
   {
-   "kind": "method",
-   "name": "orientationChanged",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   }
+   "kind": "field",
+   "name": "selectedIndex",
+   "type": {
+    "text": "number"
+   },
+   "default": "-1",
+   "description": "The index of the selected option.",
+   "privacy": "public"
   },
   {
    "kind": "field",
-   "name": "shape",
+   "name": "selectedOptions",
    "type": {
-    "text": "ListboxShape | undefined"
+    "text": "ListboxOption[]"
    },
-   "description": "The shape the listbox should have.",
+   "default": "[]",
+   "description": "A collection of the selected options.",
    "privacy": "public"
   },
   {
-   "kind": "method",
-   "name": "slottedOptionsChanged",
+   "kind": "field",
+   "name": "slottedOptionFilter",
+   "static": true,
+   "description": "A static filter to include only selectable options.",
    "parameters": [
     {
-     "name": "prev",
-     "type": {
-      "text": "Element[] | undefined"
-     }
-    },
-    {
-     "name": "next",
-     "type": {
-      "text": "Element[]"
-     }
+     "description": "element to filter",
+     "name": "n"
     }
-   ]
+   ],
+   "privacy": "public"
   },
   {
    "kind": "method",
-   "name": "#disableSlottedChildren",
+   "name": "selectFirstOption",
    "return": {
     "type": {
      "text": "void"
     }
-   }
-  }
- ],
- "attributes": [
-  {
-   "name": "appearance",
-   "type": {
-    "text": "LisboxAppearance | undefined"
    },
-   "description": "The appearance the listbox should have.",
-   "fieldName": "appearance"
+   "description": "Moves focus to the first selectable option.",
+   "privacy": "public"
   },
   {
-   "name": "orientation",
-   "type": {
-    "text": "'horizontal' | 'vertical' | undefined"
-   },
-   "description": "The direction the listbox options should flow.",
-   "fieldName": "orientation"
-  },
+   "kind": "method",
+   "name": "setSelectedOptions",
+   "privacy": "public",
+   "description": "Sets an option as selected and gives it focus."
+  }
+ ],
+ "attributes": [
   {
-   "name": "shape",
    "type": {
-    "text": "ListboxShape | undefined"
+    "text": "boolean"
    },
-   "description": "The shape the listbox should have.",
-   "fieldName": "shape"
+   "description": "The disabled state of the listbox.",
+   "fieldName": "disabled"
   }
  ],
  "superclass": {
-  "name": "FoundationListboxElement",
-  "package": "@microsoft/fast-foundation"
- },
- "vividComponent": {
-  "name": "listbox"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  }
 }
 */
@@ -135,7 +110,7 @@ registerListbox('vvd3')
 const VwcListbox = wrapper(`vvd3-listbox`,  {
     events: [],
     attributes: [],
-    properties: ['appearance', 'orientation', 'shape']
+    properties: ['options', 'disabled', 'selectedIndex', 'selectedOptions', 'slottedOptionFilter']
 })
 
 VwcListbox.displayName = 'VwcListbox'

package/v3/VwcListbox/package.json

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

package/v3/VwcMenu/index.d.ts

@@ -5,11 +5,10 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {Placement | undefined} placement - placement of the menu **attribute** `placement`
 * @param {'auto' | 'legacy' | 'off' | undefined} trigger - Controls how the menu opens and closes itself. **attribute** `trigger`
 * @param {boolean} autoDismiss - indicates whether the menu will automatically close when focus moves away from it. **attribute** `auto-dismiss`
+* @param {Strategy | undefined} positionStrategy - The strategy-absolute attribute. **attribute** `position-strategy`
 * @param {boolean} open - indicates whether the menu is open **attribute** `open`
 * @param  _onFocusout
 * @param {HTMLElement[] | undefined} actionItemsSlottedContent
-* @param  handleFocusOut
-* @param  domChildren
 */
 declare const VwcMenu: {
     (props: {
@@ -24,11 +23,10 @@ declare const VwcMenu: {
         placement?: any;
         trigger?: any;
         autoDismiss?: boolean | undefined;
+        positionStrategy?: any;
         open?: boolean | undefined;
         _onFocusout?: any;
         actionItemsSlottedContent?: any;
-        handleFocusOut?: any;
-        domChildren?: any;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcMenu/index.js

@@ -26,6 +26,132 @@ Code in this file were generated using following JSON:
   }
  ],
  "members": [
+  {
+   "kind": "field",
+   "name": "menuItems",
+   "type": {
+    "text": "Element[] | undefined"
+   },
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "expandedItem",
+   "type": {
+    "text": "MenuItem | null"
+   },
+   "privacy": "private",
+   "default": "null"
+  },
+  {
+   "kind": "field",
+   "name": "focusIndex",
+   "type": {
+    "text": "number"
+   },
+   "privacy": "private",
+   "default": "-1",
+   "description": "The index of the focusable element in the items array\ndefaults to -1"
+  },
+  {
+   "kind": "field",
+   "name": "focusableElementRoles",
+   "type": {
+    "text": "{ [key: string]: string }"
+   },
+   "privacy": "private",
+   "static": true,
+   "default": "roleForMenuItem"
+  },
+  {
+   "kind": "method",
+   "name": "focus",
+   "return": {
+    "type": {
+     "text": "void"
+    }
+   },
+   "description": "Moves focus into the menu. If there is a child with the `autofocus` attribute, it will be focused.\nOtherwise, the first focusable child will be focused.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "collapseExpandedItem",
+   "return": {
+    "type": {
+     "text": "void"
+    }
+   },
+   "description": "Collapses any expanded Menu Items.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "handleItemFocus",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "handleExpandedChanged",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "removeItemListeners",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "setItems",
+   "privacy": "private"
+  },
+  {
+   "kind": "method",
+   "name": "domChildren",
+   "privacy": "private",
+   "return": {
+    "type": {
+     "text": "Element[]"
+    }
+   },
+   "description": "get an array of valid DOM children"
+  },
+  {
+   "kind": "field",
+   "name": "isMenuItemElement",
+   "privacy": "private",
+   "description": "check if the item is a menu item"
+  },
+  {
+   "kind": "field",
+   "name": "isFocusableElement",
+   "privacy": "private",
+   "description": "check if the item is focusable"
+  },
+  {
+   "kind": "method",
+   "name": "setFocus",
+   "privacy": "private",
+   "return": {
+    "type": {
+     "text": "void"
+    }
+   },
+   "parameters": [
+    {
+     "name": "focusIndex",
+     "type": {
+      "text": "number"
+     }
+    },
+    {
+     "name": "adjustment",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
   {
    "kind": "field",
    "name": "ariaLabel",
@@ -72,6 +198,16 @@ Code in this file were generated using following JSON:
    "description": "indicates whether the menu will automatically close when focus moves away from it.",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "positionStrategy",
+   "type": {
+    "text": "Strategy | undefined"
+   },
+   "default": "'fixed'",
+   "description": "The strategy-absolute attribute.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "open",
@@ -156,14 +292,6 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "HTMLElement[] | undefined"
    }
-  },
-  {
-   "kind": "field",
-   "name": "handleFocusOut"
-  },
-  {
-   "kind": "field",
-   "name": "domChildren"
   }
  ],
  "events": [
@@ -216,6 +344,15 @@ Code in this file were generated using following JSON:
    "description": "indicates whether the menu will automatically close when focus moves away from it.",
    "fieldName": "autoDismiss"
   },
+  {
+   "name": "position-strategy",
+   "type": {
+    "text": "Strategy | undefined"
+   },
+   "default": "'fixed'",
+   "description": "The strategy-absolute attribute.",
+   "fieldName": "positionStrategy"
+  },
   {
    "type": {
     "text": "boolean"
@@ -226,8 +363,8 @@ Code in this file were generated using following JSON:
   }
  ],
  "superclass": {
-  "name": "FastMenu",
-  "package": "@microsoft/fast-foundation"
+  "name": "VividElement",
+  "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
  },
  "vividComponent": {
   "public": true,
@@ -243,7 +380,7 @@ registerMenu('vvd3')
 const VwcMenu = wrapper(`vvd3-menu`,  {
     events: [{"name":"close","propName":"onClose"},{"name":"open","propName":"onOpen"}],
     attributes: [],
-    properties: ['ariaLabel', 'placement', 'trigger', 'autoDismiss', 'open', '_onFocusout', 'actionItemsSlottedContent', 'handleFocusOut', 'domChildren']
+    properties: ['ariaLabel', 'placement', 'trigger', 'autoDismiss', 'positionStrategy', 'open', '_onFocusout', 'actionItemsSlottedContent']
 })
 
 VwcMenu.displayName = 'VwcMenu'

package/v3/VwcMenu/package.json

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

package/v3/VwcMenuItem/index.d.ts

@@ -1,14 +1,16 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcMenuItem
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/menu-item
+* @param {boolean} disabled - The disabled state of the element. **attribute** `disabled`
+* @param {boolean} expanded - The expanded state of the element. **attribute** `expanded`
+* @param {MenuItemRole} role - The role of the element. **attribute** `role`
+* @param {boolean} checked - The checked value of the element. **attribute** `checked`
 * @param {string | undefined} text - Indicates the menu item's text. **attribute** `text`
 * @param {string | undefined} textSecondary - Indicates the menu item's secondary text. **attribute** `text-secondary`
 * @param {MenuItemConnotation | undefined} connotation - The connotation the fab should have. **attribute** `connotation`
 * @param {boolean} checkTrailing - Controls the placement of the menu item's checkmark or radio icon. **attribute** `check-trailing`
 * @param {CheckAppearance | undefined} checkedAppearance - Controls the appearance of the check indicator. **attribute** `check-appearance`
 * @param {HTMLElement[] | undefined} trailingMetaSlottedContent
-* @param  updateSubmenu
-* @param  handleMenuItemKeyDown
 * @param {string | undefined} icon
 */
 declare const VwcMenuItem: {
@@ -20,14 +22,16 @@ declare const VwcMenuItem: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onExpandedChange?: ((event: SyntheticEvent) => void) | undefined;
         onChange?: ((event: SyntheticEvent) => void) | undefined;
+        disabled?: boolean | undefined;
+        expanded?: boolean | undefined;
+        role?: any;
+        checked?: boolean | undefined;
         text?: string | undefined;
         textSecondary?: string | undefined;
         connotation?: any;
         checkTrailing?: boolean | undefined;
         checkedAppearance?: any;
         trailingMetaSlottedContent?: any;
-        updateSubmenu?: any;
-        handleMenuItemKeyDown?: any;
         icon?: string | undefined;
     }): JSX.Element;
     displayName: string;