@commercetools-uikit/selectable-search-input NPM

SelectableSearchInput

Description

A controlled selectable search input component for single-line strings with validation states.

Installation

yarn add @commercetools-uikit/selectable-search-input

npm --save install @commercetools-uikit/selectable-search-input

Additionally install the peer dependencies (if not present)

yarn add react react-intl

npm --save install react react-intl

Usage

import SelectableSearchInput from '@commercetools-uikit/selectable-search-input';

const value = {
  text: 'foo',
  option: 'bar',
};

const Example = () => (
  <SelectableSearchInput
    value={value}
    onChange={(event) => alert(event.target.value)}
    onSubmit={(val) => alert(val)}
    onReset={() => alert('reset')}
    options={[
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
    ]}
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
`id`	`string`			Used as HTML id property. An id is auto-generated when it is not specified.
`autoComplete`	`string`			Used as HTML autocomplete property
`aria-invalid`	`boolean`			Indicate if the value entered in the input is invalid.
`aria-errormessage`	`string`			HTML ID of an element containing an error message related to the input.
`name`	`string`			Used as HTML name of the input component property.
`value`	`Object`See signature.	✅		Value of the input. Consists of text input and selected option.
`onChange`	`Function`See signature.			Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`.
`onBlur`	`Function`See signature.			Called when input is blurred
`onFocus`	`Function`See signature.			Called when input is focused
`onSubmit`	`Function`See signature.	✅		Handler when the search button is clicked.
`onReset`	`Function`See signature.			Handler when the clear button is clicked.
`isAutofocussed`	`boolean`			Focus the input on initial render
`isDisabled`	`boolean`			Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
`isReadOnly`	`boolean`			Indicates that the field is displaying read-only content
`hasError`	`boolean`			Indicates if the input has invalid values
`hasWarning`	`boolean`			Indicates if the input has warning values
`placeholder`	`string`			Placeholder text for the input
`isClearable`	`boolean`		`true`	Indicates if the input should be cleared when the clear button is clicked. Defaults to true.
`horizontalConstraint`	`union`Possible values:`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'`		`'scale'`	Horizontal size limit of the input fields.
`options`	`union`Possible values:`TOption[] , TOptionObject[]`	✅		Array of options that populate the select menu
`menuPortalZIndex`	`number`			z-index value for the menu portal
`menuPortalTarget`	`ReactSelectProps['menuPortalTarget']`			Dom element to portal the select menu to Props from React select was used
`menuShouldBlockScroll`	`ReactSelectProps['menuShouldBlockScroll']`			whether the menu should block scroll while open Props from React select was used
`onMenuInputChange`	`ReactSelectProps['onInputChange']`			Handle change events on the menu input Props from React select was used
`noMenuOptionsMessage`	`ReactSelectProps['noOptionsMessage']`			Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with { inputValue: String }. `inputValue` will be an empty string when no search text is present. Props from React select was used
`isMenuSearchable`	`ReactSelectProps['isSearchable']`			Whether to enable search functionality. Props from React select was used
`maxMenuHeight`	`ReactSelectProps['maxMenuHeight']`			Maximum height of the menu before scrolling Props from React select was used
`closeMenuOnSelect`	`ReactSelectProps['closeMenuOnSelect']`			Whether the menu should close after a value is selected. Defaults to `true`. Props from React select was used
`menuHorizontalConstraint`	`union`Possible values:`3 , 4 , 5`		`3`	Horizontal size limit for the dropdown menu.
`showSubmitButton`	`boolean`		`true`	Show submit button in the input

Signatures

Signature `value`

{
  text: string;
  option: string;
}

Signature `onChange`

(event: TCustomEvent) => void

Signature `onBlur`

(event: TCustomEvent) => void

Signature `onFocus`

(event: TCustomEvent) => void

Signature `onSubmit`

(value: TValue) => void

Signature `onReset`

() => void

`data-*` props

The component further forwards all data- attributes to the underlying input component.

Static methods

`SelectableSearchInput.isEmpty`

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

SelectableSearchInput.isEmpty({
  text: '',
  option: '',
}); // -> true
SelectableSearchInput.isEmpty({
  text: '    ',
  option: 'bar',
}); // -> true
SelectableSearchInput.isEmpty({
  text: 'foo',
  option: 'bar',
}); // -> false

Main Functions and use cases are:

Input field for single-line strings. Used for selectable search.

javascript typescript design-system react uikit

@babel/runtime @babel/runtime-corejs3 @commercetools-uikit/constraints @commercetools-uikit/design-system @commercetools-uikit/hooks @commercetools-uikit/icons @commercetools-uikit/input-utils @commercetools-uikit/secondary-icon-button @commercetools-uikit/select-utils @commercetools-uikit/utils @emotion/react @emotion/styled lodash prop-types react-select

@everything-registry/sub-chunk-190 @commercetools-frontend/ui-kit @commercetools-uikit/inputs

0.0.0-canary-20240429110037

4 days ago

0.0.0-canary-20240429095712

4 days ago

0.0.0-canary-20240429151613

4 days ago

19.2.0

4 days ago

0.0.0-canary-20240429080049

4 days ago

0.0.0-canary-20240426091858

7 days ago

0.0.0-canary-20240425084041

8 days ago

0.0.0-canary-20240424133322

9 days ago

0.0.0-canary-20240424125820

9 days ago

0.0.0-canary-20240424172230

9 days ago

0.0.0-canary-20240423075704

10 days ago

0.0.0-canary-20240422074013

11 days ago

0.0.0-canary-20240417141019

16 days ago

0.0.0-canary-20240417152832

16 days ago

19.1.0

16 days ago

0.0.0-canary-20240416080627

17 days ago

0.0.0-canary-20240416122003

17 days ago

0.0.0-canary-20240415155633

18 days ago

0.0.0-canary-20240415154231

18 days ago

0.0.0-canary-20240412080035

21 days ago

0.0.0-canary-20240411070250

22 days ago

0.0.0-canary-20240409155122

24 days ago

0.0.0-canary-20240408094037

25 days ago

0.0.0-canary-20240408081653

25 days ago

0.0.0-canary-20240408075655

25 days ago

0.0.0-canary-20240408082643

25 days ago

0.0.0-canary-20240408083654

25 days ago

0.0.0-canary-20240404141323

29 days ago

0.0.0-canary-20240401115502

1 month ago

0.0.0-canary-20240326165038

1 month ago

19.0.0

1 month ago

0.0.0-canary-20240322105825

1 month ago

0.0.0-canary-20240321125808

1 month ago

0.0.0-canary-20240321141818

1 month ago

0.0.0-canary-20240321085855

1 month ago

0.0.0-canary-20240321154822

1 month ago

0.0.0-canary-20240320080808

1 month ago

0.0.0-canary-20240319155008

1 month ago

0.0.0-canary-20240319081838

2 months ago

0.0.0-canary-20240319084420

2 months ago

0.0.0-canary-20240319084832

2 months ago

18.5.0

2 months ago

0.0.0-canary-20240318154412

2 months ago

0.0.0-canary-20240318073724

2 months ago

0.0.0-canary-20240311155934

2 months ago

18.4.0

2 months ago

0.0.0-canary-20240311163353

2 months ago

0.0.0-canary-20240229082531

2 months ago

0.0.0-canary-20240229120215

2 months ago

18.3.0

2 months ago

0.0.0-canary-20240222103400

2 months ago

18.2.0

2 months ago

0.0.0-canary-20240221114521

2 months ago

0.0.0-canary-20240219160124

2 months ago

18.1.0

3 months ago

0.0.0-canary-20240214142237

3 months ago

0.0.0-canary-20240214093533

3 months ago

18.0.0

3 months ago

0.0.0-canary-20240213091505

3 months ago

0.0.0-canary-20240212084750

3 months ago

0.0.0-canary-20240212173604

3 months ago

0.0.0-canary-20240209081746

3 months ago

0.0.0-canary-20240208102915

3 months ago

0.0.0-canary-20240207115036

3 months ago

17.1.0

3 months ago

0.0.0-canary-20240206161325

3 months ago

0.0.0-canary-20240202080838

3 months ago

0.0.0-canary-20240131162657

3 months ago

0.0.0-canary-20240131092002

3 months ago

0.0.0-canary-20240129162718

3 months ago

0.0.0-canary-20240130102905

3 months ago

17.0.1

3 months ago

0.0.0-canary-20240123154713

3 months ago

0.0.0-canary-20240118123543

4 months ago

17.0.0

4 months ago

0.0.0-canary-20240118125451

4 months ago

0.0.0-canary-20240117152032

4 months ago

0.0.0-canary-20240116201138

4 months ago

0.0.0-canary-20240116164945

4 months ago

0.0.0-canary-20240112093529

4 months ago

0.0.0-canary-20240109150004

4 months ago

0.0.0-canary-20231229075922

4 months ago

0.0.0-canary-20231221092239

4 months ago

0.0.0-canary-20231219120012

5 months ago

0.0.0-canary-20231219120942

5 months ago

0.0.0-canary-20231219122613

5 months ago

0.0.0-canary-20231219074106

5 months ago

0.0.0-canary-20231214155242

5 months ago

16.12.1

5 months ago

0.0.0-canary-20231204132537

5 months ago

0.0.0-canary-20231204104818

5 months ago

0.0.0-canary-20231128120330

5 months ago

0.0.0-canary-20231128121512

5 months ago

0.0.0-canary-20231128090613

5 months ago

16.12.0

5 months ago

0.0.0-canary-20230927101743

7 months ago

0.0.0-canary-20230926074140

7 months ago

0.0.0-canary-20230824090411

8 months ago

0.0.0-canary-20230731114902

9 months ago

0.0.0-canary-20230731102408

9 months ago

0.0.0-canary-20230822093959

9 months ago

0.0.0-canary-20231120163956

5 months ago

16.9.0

6 months ago

0.0.0-canary-20230802081825

9 months ago

0.0.0-canary-20230721071347

10 months ago

16.11.0

5 months ago

0.0.0-canary-20230705071834

10 months ago

0.0.0-canary-20230919074955

8 months ago

0.0.0-canary-20230922090152

7 months ago

0.0.0-canary-20231020071712

7 months ago

0.0.0-canary-20230919064630

8 months ago

0.0.0-canary-20231023144936

6 months ago

0.0.0-canary-20230823133527

8 months ago

0.0.0-canary-20230731113035

9 months ago

0.0.0-canary-20231020172218

7 months ago

16.5.0

10 months ago

0.0.0-canary-20230908094846

8 months ago

0.0.0-canary-20231020070159

7 months ago

0.0.0-canary-20230713133803

10 months ago

0.0.0-canary-20230927090022

7 months ago

0.0.0-canary-20231012155352

7 months ago

0.0.0-canary-20230811122631

9 months ago

0.0.0-canary-20230901092912

8 months ago

0.0.0-canary-20230921130022

7 months ago

16.10.0

6 months ago

16.6.1

9 months ago

0.0.0-canary-20231120183429

5 months ago

0.0.0-canary-20231010104830

7 months ago

0.0.0-canary-20231109141457

6 months ago

0.0.0-canary-20230628093418

10 months ago

16.6.0

9 months ago

0.0.0-canary-20230831113711

8 months ago

0.0.0-canary-20230713101815

10 months ago

0.0.0-canary-20231107092719

6 months ago

0.0.0-canary-20231002082126

7 months ago

0.0.0-canary-20230713135809

10 months ago

0.0.0-canary-20231030124826

6 months ago

0.0.0-canary-20231023153427

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

0.0.0-canary-20231117123740

6 months ago

0.0.0-canary-20231114154535

6 months ago

0.0.0-canary-20230817081120

9 months ago

0.0.0-canary-20230719081123

10 months ago

0.0.0-canary-20230830124456

8 months ago

0.0.0-canary-20231114065040

6 months ago

0.0.0-canary-20231020094744

7 months ago

0.0.0-canary-20231107090630

6 months ago

0.0.0-canary-20230817075326

9 months ago

0.0.0-canary-20230821101457

9 months ago

0.0.0-canary-20231117094453

6 months ago

0.0.0-canary-20230727081153

9 months ago

0.0.0-canary-20230704112725

10 months ago

0.0.0-canary-20231018130022

7 months ago

0.0.0-canary-20231012152601

7 months ago

16.8.0

6 months ago

0.0.0-canary-20230811081638

9 months ago

0.0.0-canary-20231020101520

7 months ago

0.0.0-canary-20230731104935

9 months ago

0.0.0-canary-20230706135851

10 months ago

0.0.0-canary-20230721064032

10 months ago

16.4.1

10 months ago

16.4.0

10 months ago

0.0.0-canary-20231106201932

6 months ago

0.0.0-canary-20230612081719

11 months ago

0.0.0-canary-20230622095539

11 months ago

0.0.0-canary-20230615074404

11 months ago

16.3.0

11 months ago

0.0.0-canary-20230606070758

11 months ago

16.2.1

11 months ago

0.0.0-canary-20230602105252

11 months ago

0.0.0-canary-20230531075415

11 months ago

0.0.0-canary-20230530084740

11 months ago

16.2.0

11 months ago

0.0.0-canary-20230516152727

12 months ago

0.0.0-canary-20230515141330

12 months ago

0.0.0-canary-20230511114942

12 months ago

0.0.0-canary-20230509073057

12 months ago

0.0.0-canary-20230517085655

12 months ago

16.1.1

12 months ago

16.1.0

12 months ago

0.0.0-canary-20230508154656

12 months ago

0.0.0-canary-20230508094010

12 months ago

0.0.0-canary-20230508202228

12 months ago

0.0.0-canary-20230511082947

12 months ago

0.0.0-canary-20230512103300

12 months ago

0.0.0-canary-20230508132441

12 months ago

0.0.0-canary-20230519193855

12 months ago

0.0.0-canary-20230510151703

12 months ago

0.0.0-canary-20230517083811

12 months ago

0.0.0-canary-20230523175950

12 months ago

0.0.0-canary-20230425100705

1 year ago

0.0.0-canary-20230411085857

1 year ago

0.0.0-canary-20230425104503

1 year ago

0.0.0-canary-20230411145007

1 year ago

0.0.0-canary-20230411070924

1 year ago

0.0.0-canary-20230414072753

1 year ago

0.0.0-canary-20230419083933

1 year ago

0.0.0-canary-20230418082825

1 year ago

0.0.0-canary-20230419102851

1 year ago

0.0.0-canary-20230413110907

1 year ago

0.0.0-canary-20230414074305

1 year ago

15.15.0

1 year ago

15.15.1

1 year ago

0.0.0-canary-20230417133401

1 year ago

0.0.0-canary-20230412115514

1 year ago

0.0.0-canary-20230421074713

1 year ago

0.0.0-canary-20230419090337

1 year ago

0.0.0-canary-20230425170452

1 year ago

0.0.0-canary-20230417121433

1 year ago

0.0.0-canary-20230420142611

1 year ago

0.0.0-canary-20230418125532

1 year ago

16.0.0

1 year ago

0.0.0-canary-20230317091919

1 year ago

0.0.0-canary-20230310083908

1 year ago

0.0.0-canary-20230322092742

1 year ago

0.0.0-canary-20230322095716

1 year ago

0.0.0-canary-20230306130648

1 year ago

0.0.0-canary-20230405095946

1 year ago

0.0.0-canary-20230322092547

1 year ago

0.0.0-canary-20230323075708

1 year ago

0.0.0-canary-20230308143554

1 year ago

0.0.0-canary-20230322092815

1 year ago

0.0.0-canary-20230316110348

1 year ago

0.0.0-canary-20230314112821

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-canary-20230322131309

1 year ago

15.14.0

1 year ago

0.0.0-canary-20230328114311

1 year ago

0.0.0-canary-20230315103223

1 year ago

0.0.0-canary-20230405091338

1 year ago

0.0.0-canary-20230321180521

1 year ago

0.0.0-canary-20230316092959

1 year ago

0.0.0-canary-20230322092658

1 year ago

0.0.0-canary-20230405103941

1 year ago

0.0.0-canary-20230330081111

1 year ago

0.0.0-canary-20230329085321

1 year ago

0.0.0-canary-20230309080723

1 year ago

0.0.0-canary-20230315083610

1 year ago

15.13.1

1 year ago

0.0.0-canary-20230302112958

1 year ago

0.0.0-canary-20230301084013

1 year ago

0.0.0-canary-20230228075726

1 year ago

15.13.0

1 year ago

0.0.0-canary-20230227094010

1 year ago

0.0.0-canary-20230227130646

1 year ago

0.0.0-canary-20230224091531

1 year ago

0.0.0-canary-20230223135944

1 year ago

SelectableSearchInput

Description

Installation

Usage

Properties

Signatures

Signature value

Signature onChange

Signature onBlur

Signature onFocus

Signature onSubmit

Signature onReset

data-* props

Static methods

SelectableSearchInput.isEmpty

Main Functions and use cases are:

Signature `value`

Signature `onChange`

Signature `onBlur`

Signature `onFocus`

Signature `onSubmit`

Signature `onReset`

`data-*` props

`SelectableSearchInput.isEmpty`