UNPKG

@vonage/vivid-react

Version:

Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings

1,118 lines (1,113 loc) 25 kB
/* * 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": "The preferred way 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" }, { "description": "Message that appears there are no options to display and the component is in a loading state.", "name": "loading-options" } ], "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": "searchText", "description": "The current search text of the component.", "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": "optionFilter", "type": { "text": "(\n\t\toption: ListboxOption,\n\t\tsearchText: string\n\t) => boolean | undefined" }, "description": "Function to filter the options to display." }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Whether the component is in a loading state." }, { "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": "field", "name": "maxSelected", "type": { "text": "number | null" }, "default": "null", "privacy": "public", "description": "" }, { "kind": "method", "name": "#updateSelectionLimit" }, { "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": "helperText", "type": { "text": "string | undefined" }, "description": "Provides additional information to help the user enter the correct information.\nTo add HTML to the helper text, use the helper-text slot instead.", "privacy": "public", "inheritedFrom": { "name": "WithFeedback", "module": "src/shared/feedback/mixins.ts" } }, { "kind": "field", "name": "errorText", "type": { "text": "string | undefined" }, "description": "Provides a custom error message. Any current error state will be overridden.", "privacy": "public", "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "field", "name": "#blockValidateCalls", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "field", "name": "#originalValidateFn", "privacy": "private", "type": { "text": "() => void" }, "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "method", "name": "#forceCustomError", "parameters": [ { "name": "errorMessage", "type": { "text": "string" } } ], "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "method", "name": "#clearCustomErrorAndRevalidate", "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "field", "name": "validate", "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "kind": "field", "name": "successText", "type": { "text": "string | undefined" }, "description": "Provides a custom success message. Any current error state will be overridden.", "privacy": "public", "inheritedFrom": { "name": "WithSuccessText", "module": "src/shared/patterns/form-elements/with-success-text.ts" } }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The label for the form element.", "inheritedFrom": { "name": "FormElement", "module": "src/shared/patterns/form-elements/form-element.ts" } }, { "kind": "field", "name": "#handleInvalidEvent", "privacy": "private", "inheritedFrom": { "name": "FormElement", "module": "src/shared/patterns/form-elements/form-element.ts" } }, { "kind": "field", "name": "_vividAriaBehaviour", "default": "'delegate'", "type": { "text": "'delegate'" }, "inheritedFrom": { "name": "DelegatesAria", "module": "src/shared/aria/delegates-aria.ts" } }, { "kind": "field", "name": "iconTrailing", "type": { "text": "boolean" }, "default": "false", "description": "Indicates the icon affix alignment.", "privacy": "public", "inheritedFrom": { "name": "AffixIconWithTrailing", "module": "src/shared/patterns/affix.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": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the element", "readonly": true, "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "form", "type": { "text": "HTMLFormElement | null" }, "description": "Retrieve a reference to the associated form.\nReturns null if not associated to any form.", "readonly": true, "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Retrieve the localized validation message,\nor custom validation message if set.", "readonly": true, "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "willValidate", "type": { "text": "boolean" }, "description": "Whether the element will be validated when the\nform is submitted", "readonly": true, "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "labels", "type": { "text": "ReadonlyArray<Node>" }, "description": "A reference to all associated label elements", "readonly": true, "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value of the element.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "currentValue", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "initialValue", "type": { "text": "string" }, "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Sets the element's disabled state. A disabled element will not be included during form submission.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "description": "Require the field to be completed prior to form submission.", "default": "false", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Return the current validity of the element.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Return the current validity of the element.\nIf false, fires an invalid event at the element.", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.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": [ { "type": { "text": "CustomEvent<undefined>" }, "description": "Fired when the selected options change", "name": "input" }, { "type": { "text": "CustomEvent<undefined>" }, "description": "Fired when the search text changes", "name": "search-text-change" }, { "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" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "multiple", "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" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Whether the component is in a loading state.", "fieldName": "loading" }, { "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Adds a clear button to the input field that clears the selected values.", "fieldName": "clearable" }, { "name": "max-selected", "type": { "text": "number | null" }, "default": "null", "fieldName": "maxSelected" }, { "name": "helper-text", "type": { "text": "string | undefined" }, "description": "Provides additional information to help the user enter the correct information.\nTo add HTML to the helper text, use the helper-text slot instead.", "fieldName": "helperText", "inheritedFrom": { "name": "WithFeedback", "module": "src/shared/feedback/mixins.ts" } }, { "name": "error-text", "type": { "text": "string | undefined" }, "description": "Provides a custom error message. Any current error state will be overridden.", "fieldName": "errorText", "inheritedFrom": { "name": "WithErrorText", "module": "src/shared/patterns/form-elements/with-error-text.ts" } }, { "name": "success-text", "type": { "text": "string | undefined" }, "description": "Provides a custom success message. Any current error state will be overridden.", "fieldName": "successText", "inheritedFrom": { "name": "WithSuccessText", "module": "src/shared/patterns/form-elements/with-success-text.ts" } }, { "name": "label", "type": { "text": "string | undefined" }, "description": "The label for the form element.", "fieldName": "label", "inheritedFrom": { "name": "FormElement", "module": "src/shared/patterns/form-elements/form-element.ts" } }, { "name": "icon-trailing", "type": { "text": "boolean" }, "default": "false", "description": "Indicates the icon affix alignment.", "fieldName": "iconTrailing", "inheritedFrom": { "name": "AffixIconWithTrailing", "module": "src/shared/patterns/affix.ts" } }, { "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" } }, { "name": "current-value", "type": { "text": "string" }, "description": "The current value of the element.", "fieldName": "value", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "name": "value", "type": { "text": "string" }, "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.", "fieldName": "initialValue", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Sets the element's disabled state. A disabled element will not be included during form submission.", "fieldName": "disabled", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "name": "name", "type": { "text": "string" }, "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.", "fieldName": "name", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } }, { "name": "required", "type": { "text": "boolean" }, "description": "Require the field to be completed prior to form submission.", "default": "false", "fieldName": "required", "inheritedFrom": { "name": "FormAssociated", "module": "src/shared/foundation/form-associated/form-associated.ts" } } ], "mixins": [ { "name": "WithFeedback", "module": "/src/shared/feedback/mixins" }, { "name": "WithErrorText", "module": "/src/shared/patterns" }, { "name": "WithSuccessText", "module": "/src/shared/patterns" }, { "name": "FormElement", "module": "/src/shared/patterns" }, { "name": "DelegatesAria", "module": "/src/shared/aria/delegates-aria" }, { "name": "AffixIconWithTrailing", "module": "/src/shared/patterns" }, { "name": "Localized", "module": "/src/shared/patterns" }, { "name": "FormAssociated", "module": "/src/shared/foundation/form-associated/form-associated" } ], "superclass": { "name": "VividElement", "module": "/src/shared/foundation/vivid-element/vivid-element" }, "vividComponent": { "public": true, "name": "searchable-select", "vueModels": [ { "name": "modelValue", "propName": "value", "eventNames": [ "input" ], "valueMapping": "event.currentTarget.value" }, { "name": "values", "propName": "values", "eventNames": [ "input" ], "valueMapping": "event.currentTarget.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":"search-text-change","propName":"onSearchTextChange"},{"name":"input","propName":"onInput"}], attributes: [], properties: ['appearance', 'shape', 'fixedDropdown', 'placeholder', 'open', 'multiple', 'externalTags', 'maxLines', 'values', 'initialValues', 'selectedIndex', 'optionFilter', 'loading', 'clearable', 'maxSelected', 'setFormValue', 'helperText', 'errorText', 'validate', 'successText', 'label', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName'] }) VwcSearchableSelect.displayName = 'VwcSearchableSelect' export default VwcSearchableSelect