@vonage/vivid-react 3.3.0 → 3.3.1

package/v3/VwcSearchableSelect/index.js

@@ -0,0 +1,551 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "SearchableSelect",
+ "cssProperties": [
+  {
+   "name": "--vvd-searchable-select-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-intermediate",
+   "default": "var(--vvd-color-neutral-500)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-searchable-select-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "Holds the available options.",
+   "name": ""
+  },
+  {
+   "description": "Slot to add an icon to the control.",
+   "name": "icon"
+  },
+  {
+   "description": "Slot to add meta content to the control.",
+   "name": "meta"
+  },
+  {
+   "description": "Describes how to use the component. Alternative to the `helper-text` attribute.",
+   "name": "helper-text"
+  },
+  {
+   "description": "Message that appears when no options are available.",
+   "name": "no-options"
+  },
+  {
+   "description": "Message that appears when no options match the search query.",
+   "name": "no-matches"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "SearchableSelectAppearance | undefined"
+   },
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "shape",
+   "type": {
+    "text": "SearchableSelectShape | undefined"
+   },
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "fixedDropdown",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "placeholder",
+   "type": {
+    "text": "string | undefined"
+   },
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "open",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "multiple",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "externalTags",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "maxLines",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "privacy": "public",
+   "description": ""
+  },
+  {
+   "kind": "field",
+   "name": "values",
+   "type": {
+    "text": "string[]"
+   },
+   "default": "[]",
+   "description": "List of selected values."
+  },
+  {
+   "kind": "method",
+   "name": "#updateValuesThroughUserInteraction",
+   "parameters": [
+    {
+     "name": "newValues",
+     "type": {
+      "text": "string[]"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#updateValuesWhileMaintainingOrder",
+   "parameters": [
+    {
+     "name": "newValues",
+     "type": {
+      "text": "string[]"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "initialValues",
+   "type": {
+    "text": "string[]"
+   },
+   "default": "[]",
+   "description": "The initial values. This value sets the `values` property\nonly when the `values` property has not been explicitly set."
+  },
+  {
+   "kind": "method",
+   "name": "#isValidValue",
+   "parameters": [
+    {
+     "name": "value",
+     "type": {
+      "text": "string"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "selectedIndex"
+  },
+  {
+   "kind": "field",
+   "name": "options",
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "selectedOptions",
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "#slottedOptionsChangeHandler",
+   "privacy": "private",
+   "type": {
+    "text": "object"
+   },
+   "default": "{\n\t\thandleChange: (source: ListboxOption, _: string) => {\n\t\t\tif (source.selected && !this.values.includes(source.value)) {\n\t\t\t\tthis.values = [...this.values, source.value];\n\t\t\t} else if (!source.selected && this.values.includes(source.value)) {\n\t\t\t\tthis.values = this.values.filter((option) => option !== source.value);\n\t\t\t}\n\t\t},\n\t}"
+  },
+  {
+   "kind": "method",
+   "name": "#updateSelectedOnSlottedOptions"
+  },
+  {
+   "kind": "method",
+   "name": "#handleOptionInteraction",
+   "parameters": [
+    {
+     "name": "option",
+     "type": {
+      "text": "ListboxOption"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "#clonedTagIcons",
+   "privacy": "private",
+   "default": "new Map<ListboxOption, HTMLElement>()"
+  },
+  {
+   "kind": "method",
+   "name": "#tagIconOfOption",
+   "parameters": [
+    {
+     "name": "option",
+     "type": {
+      "text": "ListboxOption"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#updateClonedTagIconOfOption",
+   "parameters": [
+    {
+     "name": "option",
+     "type": {
+      "text": "ListboxOption"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "#suppressFilter",
+   "privacy": "private",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false"
+  },
+  {
+   "kind": "method",
+   "name": "#updateFilteredOptions"
+  },
+  {
+   "kind": "method",
+   "name": "#transitionHighlightedOptionTo",
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number | null"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#selectHighlightedOption"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightFirstOption"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightLastOption"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightPrevPage"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightNextPage"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightPreviousOption"
+  },
+  {
+   "kind": "method",
+   "name": "#highlightNextOption"
+  },
+  {
+   "kind": "method",
+   "name": "#textForValue",
+   "parameters": [
+    {
+     "name": "value",
+     "type": {
+      "text": "string"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#updateTagLayout"
+  },
+  {
+   "kind": "method",
+   "name": "#moveTagFocusTo",
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number | null"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#nextTagIndexLeft",
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#nextTagIndexRight",
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#nextTagIndexForRemoved",
+   "parameters": [
+    {
+     "name": "index",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "clearable",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a clear button to the input field that clears the selected values.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "#determineInitialValues"
+  },
+  {
+   "kind": "method",
+   "name": "#updateFormValue"
+  },
+  {
+   "kind": "field",
+   "name": "setFormValue"
+  },
+  {
+   "kind": "field",
+   "name": "#resizeObserver",
+   "privacy": "private",
+   "default": "new ResizeObserver(() => {\n\t\tthis.#updateTagLayout();\n\t})"
+  },
+  {
+   "kind": "field",
+   "name": "proxy",
+   "inheritedFrom": {
+    "name": "FormAssociatedSearchableSelect",
+    "module": "libs/components/src/lib/searchable-select/searchable-select.form-associated.ts"
+   }
+  }
+ ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fired when the selected options change",
+   "name": "input"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fired when the selected options change",
+   "name": "change"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "appearance",
+   "type": {
+    "text": "SearchableSelectAppearance | undefined"
+   },
+   "fieldName": "appearance"
+  },
+  {
+   "name": "shape",
+   "type": {
+    "text": "SearchableSelectShape | undefined"
+   },
+   "fieldName": "shape"
+  },
+  {
+   "name": "fixed-dropdown",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "fieldName": "fixedDropdown"
+  },
+  {
+   "name": "placeholder",
+   "type": {
+    "text": "string | undefined"
+   },
+   "fieldName": "placeholder"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "fieldName": "open"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "fieldName": "multiple"
+  },
+  {
+   "name": "external-tags",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "fieldName": "externalTags"
+  },
+  {
+   "name": "max-lines",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "fieldName": "maxLines"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a clear button to the input field that clears the selected values.",
+   "fieldName": "clearable"
+  }
+ ],
+ "superclass": {
+  "name": "FormAssociatedSearchableSelect",
+  "module": "/libs/components/src/lib/searchable-select/searchable-select.form-associated"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "searchable-select",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "attributeName": "value",
+    "eventNames": [
+     "input"
+    ],
+    "valueMapping": "(event.target as HTMLInputElement).value"
+   },
+   {
+    "name": "values",
+    "attributeName": "values",
+    "eventNames": [
+     "input"
+    ],
+    "valueMapping": "(event.target as any).values"
+   }
+  ]
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerSearchableSelect } from '@vonage/vivid'
+
+registerSearchableSelect('vvd3')
+
+const VwcSearchableSelect = wrapper(`vvd3-searchable-select`,  {
+    events: [{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"}],
+    attributes: [],
+    properties: ['appearance', 'shape', 'fixedDropdown', 'placeholder', 'open', 'multiple', 'externalTags', 'maxLines', 'values', 'initialValues', 'selectedIndex', 'clearable', 'setFormValue', 'proxy']
+})
+
+VwcSearchableSelect.displayName = 'VwcSearchableSelect'
+
+export default VwcSearchableSelect

package/v3/VwcSearchableSelect/package.json

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

package/v3/VwcSelect/index.d.ts

@@ -1,10 +1,20 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcSelect
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/select
+* @param {boolean} multiple - Indicates if the listbox is in multi-selection mode. **attribute** `multiple`
+* @param {boolean} open - The open attribute. **attribute** `open`
+* @param  value - The value property.
+* @param {SelectSize | undefined} scale - The size the select should have. **attribute** `scale`
 * @param {SelectAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
 * @param {SelectShape | undefined} shape - The shape attribute. **attribute** `shape`
 * @param {boolean} fixedDropdown - The fixed-dropdown attribute. **attribute** `fixed-dropdown`
 * @param {string | undefined} placeholder - The placeholder attribute. **attribute** `placeholder`
+* @param  proxy
+* @param {ListboxOption[]} options - The list of options.
+* @param {boolean} disabled - The disabled state of the listbox.
+* @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 VwcSelect: {
     (props: {
@@ -15,10 +25,20 @@ declare const VwcSelect: {
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
         onInput?: ((event: SyntheticEvent) => void) | undefined;
         onChange?: ((event: SyntheticEvent) => void) | undefined;
+        multiple?: boolean | undefined;
+        open?: boolean | undefined;
+        value?: any;
+        scale?: any;
         appearance?: any;
         shape?: any;
         fixedDropdown?: boolean | undefined;
         placeholder?: string | undefined;
+        proxy?: any;
+        options?: any[] | undefined;
+        disabled?: boolean | undefined;
+        selectedIndex?: number | undefined;
+        selectedOptions?: any[] | undefined;
+        slottedOptionFilter?: any;
     }): JSX.Element;
     displayName: string;
 };