@material/select

@material/select

Version 14.0.0
Published 1 year ago
2 MB
19 dependencies
MIT license

Install

npm i @material/select

yarn add @material/select

pnpm add @material/select

Overview

The Material Components web select (text field drop-down) component

Index

Variables

variable cssClasses

const cssClasses: {
    ACTIVATED: string;
    DISABLED: string;
    FOCUSED: string;
    INVALID: string;
    MENU_INVALID: string;
    OUTLINED: string;
    REQUIRED: string;
    ROOT: string;
    WITH_LEADING_ICON: string;
};

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable helperTextCssClasses

const helperTextCssClasses: {
    HELPER_TEXT_VALIDATION_MSG: string;
    HELPER_TEXT_VALIDATION_MSG_PERSISTENT: string;
};

variable helperTextStrings

const helperTextStrings: { ARIA_HIDDEN: string; ROLE: string };

Copyright 2018 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable iconStrings

const iconStrings: { ICON_EVENT: string; ICON_ROLE: string };

Copyright 2018 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable numbers

const numbers: {
    LABEL_SCALE: number;
    UNSET_INDEX: number;
    CLICK_DEBOUNCE_TIMEOUT_MS: number;
};

variable strings

const strings: {
    ARIA_CONTROLS: string;
    ARIA_DESCRIBEDBY: string;
    ARIA_SELECTED_ATTR: string;
    CHANGE_EVENT: string;
    HIDDEN_INPUT_SELECTOR: string;
    LABEL_SELECTOR: string;
    LEADING_ICON_SELECTOR: string;
    LINE_RIPPLE_SELECTOR: string;
    MENU_SELECTOR: string;
    OUTLINE_SELECTOR: string;
    SELECTED_TEXT_SELECTOR: string;
    SELECT_ANCHOR_SELECTOR: string;
    VALUE_ATTR: string;
};

Classes

class MDCSelect

class MDCSelect extends MDCComponent<MDCSelectFoundation> {}

property disabled

disabled: boolean;

property required

required: boolean;

Returns whether the select is required.

property selectedIndex

selectedIndex: number;

property valid

valid: boolean;

Checks if the select is in a valid state.

property value

value: string;

method attachTo

static attachTo: (root: Element) => MDCSelect;

method destroy

destroy: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCSelectFoundation;

method initialize

initialize: (
    labelFactory?: MDCFloatingLabelFactory,
    lineRippleFactory?: MDCLineRippleFactory,
    outlineFactory?: MDCNotchedOutlineFactory,
    menuFactory?: MDCMenuFactory,
    iconFactory?: MDCSelectIconFactory,
    helperTextFactory?: MDCSelectHelperTextFactory
) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

Initializes the select's event listeners and internal state based on the environment's state.

method layout

layout: () => void;

Re-calculates if the notched outline should be notched and if the label should float.

method layoutOptions

layoutOptions: () => void;

Synchronizes the list of options with the state of the foundation. Call this whenever menu options are dynamically updated.

method setSelectedIndex

setSelectedIndex: (selectedIndex: number, skipNotify?: boolean) => void;

method setValue

setValue: (value: string, skipNotify?: boolean) => void;

class MDCSelectFoundation

class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {}

constructor

constructor(
    adapter?: Partial<MDCSelectAdapter>,
    foundationMap?: Partial<MDCSelectFoundationMap>
);

Parameter adapter
Parameter foundationMap
Map from subcomponent names to their subfoundations.

property cssClasses

static readonly cssClasses: {
    ACTIVATED: string;
    DISABLED: string;
    FOCUSED: string;
    INVALID: string;
    MENU_INVALID: string;
    OUTLINED: string;
    REQUIRED: string;
    ROOT: string;
    WITH_LEADING_ICON: string;
};

property defaultAdapter

static readonly defaultAdapter: MDCSelectAdapter;

See MDCSelectAdapter for typing information on parameters and return types.

property numbers

static readonly numbers: {
    LABEL_SCALE: number;
    UNSET_INDEX: number;
    CLICK_DEBOUNCE_TIMEOUT_MS: number;
};

property strings

static readonly strings: {
    ARIA_CONTROLS: string;
    ARIA_DESCRIBEDBY: string;
    ARIA_SELECTED_ATTR: string;
    CHANGE_EVENT: string;
    HIDDEN_INPUT_SELECTOR: string;
    LABEL_SELECTOR: string;
    LEADING_ICON_SELECTOR: string;
    LINE_RIPPLE_SELECTOR: string;
    MENU_SELECTOR: string;
    OUTLINE_SELECTOR: string;
    SELECTED_TEXT_SELECTOR: string;
    SELECT_ANCHOR_SELECTOR: string;
    VALUE_ATTR: string;
};

method getDisabled

getDisabled: () => boolean;

method getRequired

getRequired: () => boolean;

method getSelectedIndex

getSelectedIndex: () => number;

Returns the index of the currently selected menu item, or -1 if none.

method getUseDefaultValidation

getUseDefaultValidation: () => boolean;

method getValue

getValue: () => string;

method handleBlur

handleBlur: () => void;

Handles blur events from select element.

method handleChange

handleChange: () => void;

Handles value changes, via change event or programmatic updates.

method handleClick

handleClick: (normalizedX: number) => void;

method handleFocus

handleFocus: () => void;

Handles focus events from select element.

method handleKeydown

handleKeydown: (event: KeyboardEvent) => void;

Handles keydown events on select element. Depending on the type of character typed, does typeahead matching or opens menu.

method handleMenuClosed

handleMenuClosed: () => void;

method handleMenuClosing

handleMenuClosing: () => void;

method handleMenuItemAction

handleMenuItemAction: (index: number) => void;

method handleMenuOpened

handleMenuOpened: () => void;

method init

init: () => void;

method isValid

isValid: () => boolean;

method layout

layout: () => void;

Re-calculates if the notched outline should be notched and if the label should float.

method layoutOptions

layoutOptions: () => void;

Synchronizes the list of options with the state of the foundation. Call this whenever menu options are dynamically updated.

method notchOutline

notchOutline: (openNotch: boolean) => void;

Opens/closes the notched outline.

method openMenu

openMenu: () => void;

Opens the menu.

method setDisabled

setDisabled: (isDisabled: boolean) => void;

method setHelperTextContent

setHelperTextContent: (content: string) => void;

Parameter content
Sets the content of the helper text.

method setLeadingIconAriaLabel

setLeadingIconAriaLabel: (label: string) => void;

Sets the aria label of the leading icon.

method setLeadingIconContent

setLeadingIconContent: (content: string) => void;

Sets the text content of the leading icon.

method setRequired

setRequired: (isRequired: boolean) => void;

method setSelectedIndex

setSelectedIndex: (
    index: number,
    closeMenu?: boolean,
    skipNotify?: boolean
) => void;

method setUseDefaultValidation

setUseDefaultValidation: (useDefaultValidation: boolean) => void;

method setValid

setValid: (isValid: boolean) => void;

method setValue

setValue: (value: string, skipNotify?: boolean) => void;

class MDCSelectHelperText

class MDCSelectHelperText extends MDCComponent<MDCSelectHelperTextFoundation> {}

property foundationForSelect

readonly foundationForSelect: MDCSelectHelperTextFoundation;

method attachTo

static attachTo: (root: Element) => MDCSelectHelperText;

method getDefaultFoundation

getDefaultFoundation: () => MDCSelectHelperTextFoundation;

class MDCSelectHelperTextFoundation

class MDCSelectHelperTextFoundation extends MDCFoundation<MDCSelectHelperTextAdapter> {}

constructor

constructor(adapter?: Partial<MDCSelectHelperTextAdapter>);

property cssClasses

static readonly cssClasses: {
    HELPER_TEXT_VALIDATION_MSG: string;
    HELPER_TEXT_VALIDATION_MSG_PERSISTENT: string;
};

property defaultAdapter

static readonly defaultAdapter: MDCSelectHelperTextAdapter;

See MDCSelectHelperTextAdapter for typing information on parameters and return types.

property strings

static readonly strings: { ARIA_HIDDEN: string; ROLE: string };

method getId

getId: () => string | null;

The ID of the helper text, or null if none is set.

method getIsValidation

getIsValidation: () => boolean;

Whether the helper text acts as a validation message. By default, validation messages are hidden when the select is valid and visible when the select is invalid.

method getIsValidationMsgPersistent

getIsValidationMsgPersistent: () => boolean;

Whether the validation helper text persists even if the input is valid. If it is, it will be displayed in the normal (grey) color.

method isVisible

isVisible: () => boolean;

Whether the helper text is currently visible.

method setContent

setContent: (content: string) => void;

Sets the content of the helper text field.

method setValidation

setValidation: (isValidation: boolean) => void;

Sets the helper text to act as a validation message. By default, validation messages are hidden when the select is valid and visible when the select is invalid.
Parameter isValidation
True to make the helper text act as an error validation message.

method setValidationMsgPersistent

setValidationMsgPersistent: (isPersistent: boolean) => void;

Sets the persistency of the validation helper text. This keeps the validation message visible even if the select is valid, though it will be displayed in the normal (grey) color.

method setValidity

setValidity: (selectIsValid: boolean) => void;

When acting as a validation message, shows/hides the helper text and triggers alerts as necessary based on the select's validity.

class MDCSelectIcon

class MDCSelectIcon extends MDCComponent<MDCSelectIconFoundation> {}

property foundationForSelect

readonly foundationForSelect: MDCSelectIconFoundation;

method attachTo

static attachTo: (root: Element) => MDCSelectIcon;

method getDefaultFoundation

getDefaultFoundation: () => MDCSelectIconFoundation;

class MDCSelectIconFoundation

class MDCSelectIconFoundation extends MDCFoundation<MDCSelectIconAdapter> {}

constructor

constructor(adapter?: Partial<MDCSelectIconAdapter>);

property defaultAdapter

static readonly defaultAdapter: MDCSelectIconAdapter;

See MDCSelectIconAdapter for typing information on parameters and return types.

property strings

static readonly strings: { ICON_EVENT: string; ICON_ROLE: string };

method destroy

destroy: () => void;

method handleInteraction

handleInteraction: (evt: MouseEvent | KeyboardEvent) => void;

method init

init: () => void;

method setAriaLabel

setAriaLabel: (label: string) => void;

method setContent

setContent: (content: string) => void;

method setDisabled

setDisabled: (disabled: boolean) => void;

Interfaces

interface MDCSelectAdapter

interface MDCSelectAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method activateBottomLine

activateBottomLine: () => void;

Activates the bottom line, showing a focused state.

method addClass

addClass: (className: string) => void;

Adds class to select anchor element.

method addMenuClass

addMenuClass: (className: string) => void;

Adds class to the menu element.

method closeMenu

closeMenu: () => void;

Closes the menu.

method closeOutline

closeOutline: () => void;

Closes notch in outline element, if the outline exists.

method deactivateBottomLine

deactivateBottomLine: () => void;

Deactivates the bottom line.

method floatLabel

floatLabel: (shouldFloat: boolean) => void;

Floats label determined based off of the shouldFloat argument.

method focusMenuItemAtIndex

focusMenuItemAtIndex: (index: number) => void;

Focuses the menu item element at the given index.

method getAnchorElement

getAnchorElement: () => Element | null;

Returns the select anchor element.

method getLabelWidth

getLabelWidth: () => number;

Returns width of label in pixels, if the label exists.

method getMenuItemCount

getMenuItemCount: () => number;

Returns the number of menu items.

method getMenuItemTextAtIndex

getMenuItemTextAtIndex: (index: number) => string;

Gets the text content of the menu item element at the given index.

method getMenuItemValues

getMenuItemValues: () => string[];

Returns an array representing the VALUE_ATTR attributes of each menu item.

method getSelectAnchorAttr

getSelectAnchorAttr: (attr: string) => string | null;

Gets the given attribute on the select anchor element.

method getSelectedIndex

getSelectedIndex: () => number;

Returns the selected index.

method hasClass

hasClass: (className: string) => boolean;

Returns true if the select anchor element contains the given class name.

method hasLabel

hasLabel: () => boolean;

Returns true if label exists, false if it doesn't.

method hasOutline

hasOutline: () => boolean;

Returns true if outline element exists, false if it doesn't.

method isSelectAnchorFocused

isSelectAnchorFocused: () => boolean;

Returns whether the select anchor is focused.

method isTypeaheadInProgress

isTypeaheadInProgress: () => boolean;

Returns whether typeahead is in progress in the menu.

method notchOutline

notchOutline: (labelWidth: number) => void;

Only implement if outline element exists.

method notifyChange

notifyChange: (value: string) => void;

Emits a change event when an element is selected.

method openMenu

openMenu: () => void;

Opens the menu.

method removeClass

removeClass: (className: string) => void;

Removes a class from the select anchor element.

method removeMenuClass

removeMenuClass: (className: string) => void;

Removes a class from the menu element.

method removeSelectAnchorAttr

removeSelectAnchorAttr: (attr: string) => void;

Removes the given attribute on the select anchor element.

method setLabelRequired

setLabelRequired: (isRequired: boolean) => void;

Styles the label as required, if the label exists.

method setMenuAnchorCorner

setMenuAnchorCorner: (anchorCorner: Corner) => void;

Sets the menu anchor corner.

method setMenuAnchorElement

setMenuAnchorElement: (anchorEl: Element) => void;

Sets the menu anchor element.

method setMenuWrapFocus

setMenuWrapFocus: (wrapFocus: boolean) => void;

Sets whether the menu should wrap focus.

method setRippleCenter

setRippleCenter: (normalizedX: number) => void;

Sets the line ripple transform origin center.

method setSelectAnchorAttr

setSelectAnchorAttr: (attr: string, value: string) => void;

Sets the given attribute on the select anchor element.

method setSelectedIndex

setSelectedIndex: (index: number) => void;

Sets the selected index in the menu.

method setSelectedText

setSelectedText: (text: string) => void;

Sets the text content of the selectedText element to the given string.

method typeaheadMatchItem

typeaheadMatchItem: (nextChar: string, startingIndex: number) => number;

Adds a character to the list typeahead buffer and returns index of the next item in the list matching the buffer.

interface MDCSelectEvent

interface MDCSelectEvent extends Event {}

property detail

readonly detail: MDCSelectEventDetail;

interface MDCSelectEventDetail

interface MDCSelectEventDetail {}

property index

index: number;

property value

value: string;

interface MDCSelectFoundationMap

interface MDCSelectFoundationMap {}

property helperText

helperText: MDCSelectHelperTextFoundation;

property leadingIcon

leadingIcon: MDCSelectIconFoundation;

interface MDCSelectHelperTextAdapter

interface MDCSelectHelperTextAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method addClass

addClass: (className: string) => void;

Adds a class to the helper text element.

method getAttr

getAttr: (attr: string) => string | null;

Gets an attribute from the helper text element.

method hasClass

hasClass: (className: string) => boolean;

Returns whether or not the helper text element contains the given class.

method removeAttr

removeAttr: (attr: string) => void;

Removes an attribute from the helper text element.

method removeClass

removeClass: (className: string) => void;

Removes a class from the helper text element.

method setAttr

setAttr: (attr: string, value: string) => void;

Sets an attribute with a given value on the helper text element.

method setContent

setContent: (content: string) => void;

Sets the text content for the helper text element.

interface MDCSelectIconAdapter

interface MDCSelectIconAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method deregisterInteractionHandler

deregisterInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

Deregisters an event listener on the icon element for a given event.

method getAttr

getAttr: (attr: string) => string | null;

Gets the value of an attribute on the icon element.

method notifyIconAction

notifyIconAction: () => void;

Emits a custom event "MDCSelect:icon" denoting a user has clicked the icon.

method registerInteractionHandler

registerInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

Registers an event listener on the icon element for a given event.

method removeAttr

removeAttr: (attr: string) => void;

Removes an attribute from the icon element.

method setAttr

setAttr: (attr: string, value: string) => void;

Sets an attribute on the icon element.

method setContent

setContent: (content: string) => void;

Sets the text content of the icon element.

Type Aliases

type MDCSelectHelperTextFactory

type MDCSelectHelperTextFactory = (
    el: Element,
    foundation?: MDCSelectHelperTextFoundation
) => MDCSelectHelperText;

type MDCSelectIconFactory

type MDCSelectIconFactory = (
    el: Element,
    foundation?: MDCSelectIconFoundation
) => MDCSelectIcon;

Package Files (14)

Dependencies (19)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/select.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/select)

HTML

<a href="https://www.jsdocs.io/package/@material/select"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 4751 ms.
Missing or incorrect documentation? Open an issue for this package.

@material/select

Install

Overview

Index

Variables

Classes

Interfaces

Type Aliases

Variables

variable cssClasses

variable helperTextCssClasses

variable helperTextStrings

variable iconStrings

variable numbers

variable strings

Classes

class MDCSelect

property disabled

property required

property selectedIndex

property valid

property value

method attachTo

method destroy

method getDefaultFoundation

method initialize

method initialSyncWithDOM

method layout

method layoutOptions

method setSelectedIndex

method setValue

class MDCSelectFoundation

constructor

Parameter adapter

Parameter foundationMap

property cssClasses

property defaultAdapter

property numbers

property strings

method getDisabled

method getRequired

method getSelectedIndex

method getUseDefaultValidation

method getValue

method handleBlur

method handleChange

method handleClick

method handleFocus

method handleKeydown

method handleMenuClosed

method handleMenuClosing

method handleMenuItemAction

method handleMenuOpened

method init

method isValid

method layout

method layoutOptions

method notchOutline

method openMenu

method setDisabled

method setHelperTextContent

Parameter content

method setLeadingIconAriaLabel

method setLeadingIconContent

method setRequired

method setSelectedIndex

method setUseDefaultValidation

method setValid

method setValue

class MDCSelectHelperText

property foundationForSelect

method attachTo

method getDefaultFoundation

class MDCSelectHelperTextFoundation

constructor

property cssClasses

property defaultAdapter

property strings

method getId

method getIsValidation