JSPM – @equinor/fusion-react-searchable-dropdown@0.1.4

Package Exports

@equinor/fusion-react-searchable-dropdown
@equinor/fusion-react-searchable-dropdown/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@equinor/fusion-react-searchable-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook

Fusion Web Component

Installation

npm install @equinor/fusion-react-searchable-dropdown

Example Usage

import { SearchableDropdown, SearchableDropdownChangeEvent } from '@equinor/fusion-react-searchable-dropdown';
const Component = ({value}: ComponentProps) => {
  const [txt, setTxt] = useState(value);
  const onChange = useCallback(
    (e: SearchableDropdownChangeEvent) => setTxt(e.target.value ?? ''),
    [setTxt]
  );
  return (
    <div>
      <SearchableDropdown onChange={onChange} />
      <span>Value: {txt}</span>
    </div>
  );
};

Properties/Attributes

Name	Type	Description
`value`	`string`	The input control's value.
`type`	`SearchableDropdownType*`	A string specifying the type of control to render.
`variant`	`SearchableDropdownVariant**`	Input style variant to render.
`label`	`string`	Sets floating label value.
`placeholder`	`string`	Sets disappearing input placeholder.
`prefix`	`string`	Prefix text to display before the input.
`suffix`	`string`	Suffix text to display after the input.
`icon`	`IconName***`	Leading icon to display in input. See `fwc-icon`.
`iconTrailing`	`IconName***`	Trailing icon to display in input. See `fwc-icon`.
`disabled`	`boolean`	Whether or not the input should be disabled.
`charCounter`	`boolean	SearchableDropdownCharCounter****`
`helper`	`string`	Helper text to display below the input. Display default only when focused.
`helperPersistent`	`boolean`	Always show the helper text despite focus.
`required`	`boolean`	Displays error state if value is empty and input is blurred.
`maxLength`	`number`	Maximum length to accept input.
`validationMessage`	`string`	Message to show in the error color when the searchable-dropdown is invalid. (Helper text will not be visible)
`pattern`	`string`	`HTMLInputElement.prototype.pattern` (empty string will unset attribute)
`min`	`number`\|`string`	`HTMLInputElement.prototype.min` (empty string will unset attribute)
`max`	`number`\|`string`	`HTMLInputElement.prototype.max` (empty string will unset attribute)
`size`	`number`\|`null`	`HTMLInputElement.prototype.size` (null will unset attribute)
`step`	`number`\|`null`	`HTMLInputElement.prototype.step` (null will unset attribute)
`autoValidate`	`boolean`	Reports validity on value change rather than only on blur.
`validity`	`ValidityState` (readonly)	The `ValidityState` of the searchable-dropdown.
`willValidate`	`boolean` (readonly)	`HTMLInputElement.prototype.willValidate`
`validityTransform`	`ValidityTransform*****`\|`null`	Callback called before each validation check. See the validation section for more details.
`validateOnInitialRender`	`boolean`	Runs validation check on initial render.
`name`	`string`	Sets the `name` attribute on the internal input.***

* SearchableDropdownType is exported by SearchableDropdown.

type SearchableDropdownType = 'text'|'search'|'tel'|'url'|'email'|'password'|
    'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';

** SearchableDropdownVariant is exported by SearchableDropdown.

export type SearchableDropdownVariant = 'filled' | 'outlined';

*** IconName is exported by fwc-icon.

type IconName = keyof typeof edsIcons | string;

**** SearchableDropdownCharCounter is exported by SearchableDropdown.

type SearchableDropdownCharCounter = 'external' | 'internal';

***** ValidityTransform is exported by SearchableDropdown.

type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>

****** The name property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute. See #289.

Methods

Name	Description
`checkValidity() => boolean`	Returns `true` if the searchable-dropdown passes validity checks. Returns `false` and fires an `invalid` event on the searchable-dropdown otherwise. NOTE: When accessing any property or function that checks validity at searchable-dropdown initial boot up, you may have to await `<SearchableDropdown>.updateComplete`.
`reportValidity() => boolean`	Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.
`setCustomValidity(message:string) => void`	Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.
`layout() => Promise<void>`	Re-calculate layout. If a searchable-dropdown is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.

Validation

<SearchableDropdown> follows the basic <input> constraint validation model. It exposes:

required
maxLength
pattern
min
max
step
validity
willValidate
checkValidity()
reportValidity()
setCustomValidity(message)

Additionally, it implements more features such as:

validationMessage
validateOnInitialRender
and validityTransform

By default, <SearchableDropdown> will report validation on blur.