@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-dom react-intl

npm --save install react react-dom 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' },
    ]}
    selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
    inputDataProps={[{ 'prop-3': 'value-1' }, { 'prop-4': 'value-2' }]}
  />
);

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.
`_experimentalValue`	`Object`See signature.
`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.
`isCondensed`	`boolean`			Use this property to reduce the paddings of the component for a ui compact variant
`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`		`1`	z-index value for the menu portal Use in conjunction with `menuPortalTarget`
`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
`selectDataProps`	`Record`			used to pass data-* props to the select component. eg: selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
`inputDataProps`	`Record`			used to pass data-* props to the input element. eg: inputDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
`selectCustomComponents`	`ReactSelectProps['components']`			Map of components to overwrite the default ones, see what components you can override Props from React select was used
`rightActionIcon`	`ReactElement`			Custom action icon to be displayed on the right side of the input.
`rightActionProps`	`TIconButtonProps`			Props for the right-action icon-button. Required when rightActionIcon is provided. At least a `label` and an `onClick` prop/function need to be provided.

Signatures

Signature `value`

{
  text: string;
  option: string;
}

Signature `_experimentalValue`

{
  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/icon-button @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-20241028125808

8 months ago

0.0.0-preview-FCT-1187-20241024123200

8 months ago

0.0.0-preview-FCT-1187-20241021190428

9 months ago

19.13.0

9 months ago

0.0.0-canary-20241014160150

9 months ago

0.0.0-canary-20241009193324

9 months ago

0.0.0-canary-20240925165851

9 months ago

0.0.0-canary-20241003145429

9 months ago

0.0.0-canary-20241010130729

9 months ago

0.0.0-canary-20241009071024

9 months ago

0.0.0-canary-20241001174409

9 months ago

0.0.0-canary-20241002142715

9 months ago

0.0.0-canary-20241011135231

9 months ago

0.0.0-canary-20241002130953

9 months ago

0.0.0-canary-20241003153231

9 months ago

0.0.0-canary-20241002142913

9 months ago

0.0.0-canary-20241003151043

9 months ago

0.0.0-canary-20241010162605

9 months ago

19.12.1

9 months ago

0.0.0-canary-20240925171250

9 months ago

0.0.0-canary-20241010205637

9 months ago

0.0.0-canary-20241009175534

9 months ago

0.0.0-canary-20240924122353

9 months ago

0.0.0-canary-20240924135022

9 months ago

0.0.0-canary-20240925133422

9 months ago

0.0.0-canary-20240918073948

10 months ago

0.0.0-canary-20240902123520

10 months ago

0.0.0-preview-test-preview-publishing-20240918183346

10 months ago

0.0.0-canary-20240917143329

10 months ago

0.0.0-canary-20240918181700

10 months ago

0.0.0-canary-20240917153604

10 months ago

0.0.0-canary-20240918160237

10 months ago

0.0.0-canary-20240916085337

10 months ago

0.0.0-canary-20240920133329

10 months ago

19.12.0

10 months ago

0.0.0-canary-20240916105227

10 months ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919120649

10 months ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919103642

10 months ago

19.11.0

10 months ago

19.8.0

12 months ago

19.10.0

11 months ago

0.0.0-canary-20240530100629

1 year ago

0.0.0-canary-20240805095513

11 months ago

19.7.0

12 months ago

0.0.0-canary-20240527065236

1 year ago

19.6.0

1 year ago

0.0.0-canary-20240621090426

1 year ago

0.0.0-canary-20240626090327

1 year ago

0.0.0-canary-20240625115755

1 year ago

19.5.0

1 year ago

0.0.0-canary-20240604125216

1 year ago

0.0.0-canary-20240617063324

1 year ago

0.0.0-canary-20240604163856

1 year ago

0.0.0-canary-20240621133126

1 year ago

0.0.0-canary-20240603111514

1 year ago

0.0.0-canary-20240524063948

1 year ago

0.0.0-canary-20240807084212

11 months ago

0.0.0-canary-20240604151817

1 year ago

19.4.0

1 year ago

0.0.0-canary-20240625124027

1 year ago

0.0.0-canary-20240522094639

1 year ago

0.0.0-canary-20240531145120

1 year ago

0.0.0-canary-20240723124651

12 months ago

0.0.0-canary-20240726072030

11 months ago

0.0.0-canary-20240725110422

11 months ago

0.0.0-canary-20240719104735

12 months ago

0.0.0-canary-20240604153622

1 year ago

0.0.0-canary-20240522101026

1 year ago

0.0.0-canary-20240715071321

12 months ago

0.0.0-canary-20240604115928

1 year ago

0.0.0-canary-20240807112850

11 months ago

19.9.0

11 months ago

0.0.0-canary-20240716102951

12 months ago

0.0.0-canary-20240619142933

1 year ago

0.0.0-canary-20240617084426

1 year ago

0.0.0-canary-20240521130632

1 year ago

0.0.0-canary-20240625081125

1 year ago

0.0.0-canary-20240617073522

1 year ago

0.0.0-canary-20240520083557

1 year ago

0.0.0-canary-20240517151402

1 year ago

0.0.0-canary-20240517123809

1 year ago

0.0.0-canary-20240514135306

1 year ago

0.0.0-canary-20240513101556

1 year ago

0.0.0-canary-20240513120348

1 year ago

19.3.1

1 year ago

0.0.0-canary-20240508080213

1 year ago

19.3.0

1 year ago

0.0.0-canary-20240508074817

1 year ago

0.0.0-canary-20240507115053

1 year ago

0.0.0-canary-20240503144721

1 year ago

0.0.0-canary-20240503111328

1 year ago

0.0.0-canary-20240502134907

1 year ago

0.0.0-canary-20240502125854

1 year ago

0.0.0-canary-20240429110037

1 year ago

0.0.0-canary-20240429095712

1 year ago

0.0.0-canary-20240429151613

1 year ago

19.2.0

1 year ago

0.0.0-canary-20240429080049

1 year ago

0.0.0-canary-20240426091858

1 year ago

0.0.0-canary-20240425084041

1 year ago

0.0.0-canary-20240424133322

1 year ago

0.0.0-canary-20240424125820

1 year ago

0.0.0-canary-20240424172230

1 year ago

0.0.0-canary-20240423075704

1 year ago

0.0.0-canary-20240422074013

1 year ago

0.0.0-canary-20240417141019

1 year ago

0.0.0-canary-20240417152832

1 year ago

19.1.0

1 year ago

0.0.0-canary-20240416080627

1 year ago

0.0.0-canary-20240416122003

1 year ago

0.0.0-canary-20240415155633

1 year ago

0.0.0-canary-20240415154231

1 year ago

0.0.0-canary-20240412080035

1 year ago

0.0.0-canary-20240411070250

1 year ago

0.0.0-canary-20240409155122

1 year ago

0.0.0-canary-20240408094037

1 year ago

0.0.0-canary-20240408081653

1 year ago

0.0.0-canary-20240408075655

1 year ago

0.0.0-canary-20240408082643

1 year ago

0.0.0-canary-20240408083654

1 year ago

0.0.0-canary-20240404141323

1 year ago

0.0.0-canary-20240401115502

1 year ago

0.0.0-canary-20240326165038

1 year ago

19.0.0

1 year ago

0.0.0-canary-20240322105825

1 year ago

0.0.0-canary-20240321125808

1 year ago

0.0.0-canary-20240321141818

1 year ago

0.0.0-canary-20240321085855

1 year ago

0.0.0-canary-20240321154822

1 year ago

0.0.0-canary-20240320080808

1 year ago

0.0.0-canary-20240319155008

1 year ago

0.0.0-canary-20240319081838

1 year ago

0.0.0-canary-20240319084420

1 year ago

0.0.0-canary-20240319084832

1 year ago

18.5.0

1 year ago

0.0.0-canary-20240318154412

1 year ago

0.0.0-canary-20240318073724

1 year ago

0.0.0-canary-20240311155934

1 year ago

18.4.0

1 year ago

0.0.0-canary-20240311163353

1 year ago

0.0.0-canary-20240229082531

1 year ago

0.0.0-canary-20240229120215

1 year ago

18.3.0

1 year ago

0.0.0-canary-20240222103400

1 year ago

18.2.0

1 year ago

0.0.0-canary-20240221114521

1 year ago

0.0.0-canary-20240219160124

1 year ago

18.1.0

1 year ago

0.0.0-canary-20240214142237

1 year ago

0.0.0-canary-20240214093533

1 year ago

18.0.0

1 year ago

0.0.0-canary-20240213091505

1 year ago

0.0.0-canary-20240212084750

1 year ago

0.0.0-canary-20240212173604

1 year ago

0.0.0-canary-20240209081746

1 year ago

0.0.0-canary-20240208102915

1 year ago

0.0.0-canary-20240207115036

1 year ago

17.1.0

1 year ago

0.0.0-canary-20240206161325

1 year ago

0.0.0-canary-20240202080838

1 year ago

0.0.0-canary-20240131162657

1 year ago

0.0.0-canary-20240131092002

1 year ago

0.0.0-canary-20240129162718

1 year ago

0.0.0-canary-20240130102905

1 year ago

17.0.1

1 year ago

0.0.0-canary-20240123154713

1 year ago

0.0.0-canary-20240118123543

1 year ago

17.0.0

1 year ago

0.0.0-canary-20240118125451

1 year ago

0.0.0-canary-20240117152032

1 year ago

0.0.0-canary-20240116201138

1 year ago

0.0.0-canary-20240116164945

1 year ago

0.0.0-canary-20240112093529

1 year ago

0.0.0-canary-20240109150004

1 year ago

0.0.0-canary-20231229075922

2 years ago

0.0.0-canary-20231221092239

2 years ago

0.0.0-canary-20231219120012

2 years ago

0.0.0-canary-20231219120942

2 years ago

0.0.0-canary-20231219122613

2 years ago

0.0.0-canary-20231219074106

2 years ago

0.0.0-canary-20231214155242

2 years ago

16.12.1

2 years ago

0.0.0-canary-20231204132537

2 years ago

0.0.0-canary-20231204104818

2 years ago

0.0.0-canary-20231128120330

2 years ago

0.0.0-canary-20231128121512

2 years ago

0.0.0-canary-20231128090613

2 years ago

16.12.0

2 years ago

0.0.0-canary-20230927101743

2 years ago

0.0.0-canary-20230926074140

2 years ago

0.0.0-canary-20230824090411

2 years ago

0.0.0-canary-20230731114902

2 years ago

0.0.0-canary-20230731102408

2 years ago

0.0.0-canary-20230822093959

2 years ago

0.0.0-canary-20231120163956

2 years ago

16.9.0

2 years ago

0.0.0-canary-20230802081825

2 years ago

0.0.0-canary-20230721071347

2 years ago

16.11.0

2 years ago

0.0.0-canary-20230705071834

2 years ago

0.0.0-canary-20230919074955

2 years ago

0.0.0-canary-20230922090152

2 years ago

0.0.0-canary-20231020071712

2 years ago

0.0.0-canary-20230919064630

2 years ago

0.0.0-canary-20231023144936

2 years ago

0.0.0-canary-20230823133527

2 years ago

0.0.0-canary-20230731113035

2 years ago

0.0.0-canary-20231020172218

2 years ago

16.5.0

2 years ago

0.0.0-canary-20230908094846

2 years ago

0.0.0-canary-20231020070159

2 years ago

0.0.0-canary-20230713133803

2 years ago

0.0.0-canary-20230927090022

2 years ago

0.0.0-canary-20231012155352

2 years ago

0.0.0-canary-20230811122631

2 years ago

0.0.0-canary-20230901092912

2 years ago

0.0.0-canary-20230921130022

2 years ago

16.10.0

2 years ago

16.6.1

2 years ago

0.0.0-canary-20231120183429

2 years ago

0.0.0-canary-20231010104830

2 years ago

0.0.0-canary-20231109141457

2 years ago

0.0.0-canary-20230628093418

2 years ago

16.6.0

2 years ago

0.0.0-canary-20230831113711

2 years ago

0.0.0-canary-20230713101815

2 years ago

0.0.0-canary-20231107092719

2 years ago

0.0.0-canary-20231002082126

2 years ago

0.0.0-canary-20230713135809

2 years ago

0.0.0-canary-20231030124826

2 years ago

0.0.0-canary-20231023153427

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-canary-20231117123740

2 years ago

0.0.0-canary-20231114154535

2 years ago

0.0.0-canary-20230817081120

2 years ago

0.0.0-canary-20230719081123

2 years ago

0.0.0-canary-20230830124456

2 years ago

0.0.0-canary-20231114065040

2 years ago

0.0.0-canary-20231020094744

2 years ago

0.0.0-canary-20231107090630

2 years ago

0.0.0-canary-20230817075326

2 years ago

0.0.0-canary-20230821101457

2 years ago

0.0.0-canary-20231117094453

2 years ago

0.0.0-canary-20230727081153

2 years ago

0.0.0-canary-20230704112725

2 years ago

0.0.0-canary-20231018130022

2 years ago

0.0.0-canary-20231012152601

2 years ago

16.8.0

2 years ago

0.0.0-canary-20230811081638

2 years ago

0.0.0-canary-20231020101520

2 years ago

0.0.0-canary-20230731104935

2 years ago

0.0.0-canary-20230706135851

2 years ago

0.0.0-canary-20230721064032

2 years ago

16.4.1

2 years ago

16.4.0

2 years ago

0.0.0-canary-20231106201932

2 years ago

0.0.0-canary-20230612081719

2 years ago

0.0.0-canary-20230622095539

2 years ago

0.0.0-canary-20230615074404

2 years ago

16.3.0

2 years ago

0.0.0-canary-20230606070758

2 years ago

16.2.1

2 years ago

0.0.0-canary-20230602105252

2 years ago

0.0.0-canary-20230531075415

2 years ago

0.0.0-canary-20230530084740

2 years ago

16.2.0

2 years ago

0.0.0-canary-20230516152727

2 years ago

0.0.0-canary-20230515141330

2 years ago

0.0.0-canary-20230511114942

2 years ago

0.0.0-canary-20230509073057

2 years ago

0.0.0-canary-20230517085655

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

0.0.0-canary-20230508154656

2 years ago

0.0.0-canary-20230508094010

2 years ago

0.0.0-canary-20230508202228

2 years ago

0.0.0-canary-20230511082947

2 years ago

0.0.0-canary-20230512103300

2 years ago

0.0.0-canary-20230508132441

2 years ago

0.0.0-canary-20230519193855

2 years ago

0.0.0-canary-20230510151703

2 years ago

0.0.0-canary-20230517083811

2 years ago

0.0.0-canary-20230523175950

2 years ago

0.0.0-canary-20230425100705

2 years ago

0.0.0-canary-20230411085857

2 years ago

0.0.0-canary-20230425104503

2 years ago

0.0.0-canary-20230411145007

2 years ago

0.0.0-canary-20230411070924

2 years ago

0.0.0-canary-20230414072753

2 years ago

0.0.0-canary-20230419083933

2 years ago

0.0.0-canary-20230418082825

2 years ago

0.0.0-canary-20230419102851

2 years ago

0.0.0-canary-20230413110907

2 years ago

0.0.0-canary-20230414074305

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

0.0.0-canary-20230417133401

2 years ago

0.0.0-canary-20230412115514

2 years ago

0.0.0-canary-20230421074713

2 years ago

0.0.0-canary-20230419090337

2 years ago

0.0.0-canary-20230425170452

2 years ago

0.0.0-canary-20230417121433

2 years ago

0.0.0-canary-20230420142611

2 years ago

0.0.0-canary-20230418125532

2 years ago

16.0.0

2 years ago

0.0.0-canary-20230317091919

2 years ago

0.0.0-canary-20230310083908

2 years ago

0.0.0-canary-20230322092742

2 years ago

0.0.0-canary-20230322095716

2 years ago

0.0.0-canary-20230306130648

2 years ago

0.0.0-canary-20230405095946

2 years ago

0.0.0-canary-20230322092547

2 years ago

0.0.0-canary-20230323075708

2 years ago

0.0.0-canary-20230308143554

2 years ago

0.0.0-canary-20230322092815

2 years ago

0.0.0-canary-20230316110348

2 years ago

0.0.0-canary-20230314112821

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-canary-20230322131309

2 years ago

15.14.0

2 years ago

0.0.0-canary-20230328114311

2 years ago

0.0.0-canary-20230315103223

2 years ago

0.0.0-canary-20230405091338

2 years ago

0.0.0-canary-20230321180521

2 years ago

0.0.0-canary-20230316092959

2 years ago

0.0.0-canary-20230322092658

2 years ago

0.0.0-canary-20230405103941

2 years ago

0.0.0-canary-20230330081111

2 years ago

0.0.0-canary-20230329085321

2 years ago

0.0.0-canary-20230309080723

2 years ago

0.0.0-canary-20230315083610

2 years ago

15.13.1

2 years ago

0.0.0-canary-20230302112958

2 years ago

0.0.0-canary-20230301084013

2 years ago

0.0.0-canary-20230228075726

2 years ago

15.13.0

2 years ago

0.0.0-canary-20230227094010

2 years ago

0.0.0-canary-20230227130646

2 years ago

0.0.0-canary-20230224091531

2 years ago

0.0.0-canary-20230223135944

2 years ago

SelectableSearchInput

Description

Installation

Usage

Properties

Signatures

Signature value

Signature _experimentalValue

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 `_experimentalValue`

Signature `onChange`

Signature `onBlur`

Signature `onFocus`

Signature `onSubmit`

Signature `onReset`

`data-*` props

`SelectableSearchInput.isEmpty`