Skip to content

Commit 5a7573e

Browse files
emmenkoemmenko
authored
fix: explicitly expose react-select components as static properties (#2140)
1 parent 0254200 commit 5a7573e

File tree

15 files changed

+226
-130
lines changed

15 files changed

+226
-130
lines changed

‎.changeset/hungry-fireants-share.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@commercetools-uikit/async-creatable-select-input': patch
3+
'@commercetools-uikit/async-select-input': patch
4+
'@commercetools-uikit/creatable-select-input': patch
5+
'@commercetools-uikit/select-input': patch
6+
'@commercetools-uikit/utils': patch
7+
---
8+
9+
Explicitly expose `react-select` components as static properties so that type declarations are properly exposed as well.

‎packages/components/inputs/async-creatable-select-input/README.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -130,36 +130,35 @@ In case you need one of the currently excluded props, feel free to open a PR add
130130

131131
#### `isTouched(touched)`
132132

133-
Expects to be called with an array or boolean.
134-
Returns `true` when truthy.
133+
Returns truthy value for the Formik `touched` value of this input field.
135134

136-
#### Components
135+
## Components
137136

138-
It is possible to customize `SelectInput` by passing the `components` property.
139-
`SelectInput` exports the default underlying components as static exports.
137+
It is possible to customize `AsyncCreatableSelectInput` by passing the `components` property.
138+
`AsyncCreatableSelectInput` exports the default underlying components as static exports.
140139

141140
Components available as static exports are:
142141

143142
- `ClearIndicator`
144143
- `Control`
145-
- `DropdownIndicator`
146-
- `DownChevron`
147144
- `CrossIcon`
145+
- `DownChevron`
146+
- `DropdownIndicator`
148147
- `Group`
149148
- `GroupHeading`
150149
- `IndicatorsContainer`
151150
- `IndicatorSeparator`
152151
- `Input`
153152
- `LoadingIndicator`
153+
- `LoadingMessage`
154154
- `Menu`
155155
- `MenuList`
156156
- `MenuPortal`
157-
- `LoadingMessage`
158-
- `NoOptionsMessage`
159157
- `MultiValue`
160158
- `MultiValueContainer`
161159
- `MultiValueLabel`
162160
- `MultiValueRemove`
161+
- `NoOptionsMessage`
163162
- `Option`
164163
- `Placeholder`
165164
- `SelectContainer`

‎packages/components/inputs/async-creatable-select-input/docs/additional-info.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,35 @@ In case you need one of the currently excluded props, feel free to open a PR add
77

88
#### `isTouched(touched)`
99

10-
Expects to be called with an array or boolean.
11-
Returns `true` when truthy.
10+
Returns truthy value for the Formik `touched` value of this input field.
1211

13-
#### Components
12+
## Components
1413

15-
It is possible to customize `SelectInput` by passing the `components` property.
16-
`SelectInput` exports the default underlying components as static exports.
14+
It is possible to customize `AsyncCreatableSelectInput` by passing the `components` property.
15+
`AsyncCreatableSelectInput` exports the default underlying components as static exports.
1716

1817
Components available as static exports are:
1918

2019
- `ClearIndicator`
2120
- `Control`
22-
- `DropdownIndicator`
23-
- `DownChevron`
2421
- `CrossIcon`
22+
- `DownChevron`
23+
- `DropdownIndicator`
2524
- `Group`
2625
- `GroupHeading`
2726
- `IndicatorsContainer`
2827
- `IndicatorSeparator`
2928
- `Input`
3029
- `LoadingIndicator`
30+
- `LoadingMessage`
3131
- `Menu`
3232
- `MenuList`
3333
- `MenuPortal`
34-
- `LoadingMessage`
35-
- `NoOptionsMessage`
3634
- `MultiValue`
3735
- `MultiValueContainer`
3836
- `MultiValueLabel`
3937
- `MultiValueRemove`
38+
- `NoOptionsMessage`
4039
- `Option`
4140
- `Placeholder`
4241
- `SelectContainer`

‎packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,7 @@ import {
2020
messages,
2121
createSelectStyles,
2222
} from '@commercetools-uikit/select-utils';
23-
import {
24-
addStaticFields,
25-
filterDataAttributes,
26-
warning,
27-
} from '@commercetools-uikit/utils';
23+
import { filterDataAttributes, warning } from '@commercetools-uikit/utils';
2824

2925
const LoadingIndicator = () => <LoadingSpinner scale="s" />;
3026
LoadingIndicator.displayName = 'LoadingIndicator';
@@ -503,21 +499,57 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
503499
</Constraints.Horizontal>
504500
);
505501
};
502+
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
503+
AsyncCreatableSelectInput.defaultProps = defaultProps;
504+
505+
/**
506+
* Expose static helper methods.
507+
*/
506508

507509
// Formik will set the field to an array on submission, so we always have to
508510
// deal with an array. The touched state ends up being an empty array in case
509511
// values were removed only. So we have to treat any array we receive as
510512
// a signal of the field having been touched.
511513
AsyncCreatableSelectInput.isTouched = (touched: unknown) => Boolean(touched);
512514

513-
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
514-
515-
AsyncCreatableSelectInput.defaultProps = defaultProps;
515+
/**
516+
* Expose react-select components for customization purposes.
517+
*/
516518

517-
addStaticFields(AsyncCreatableSelectInput, {
518-
...defaultComponents,
519-
...customizedComponents,
520-
isTouched: AsyncCreatableSelectInput.isTouched,
521-
});
519+
// custom
520+
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
521+
AsyncCreatableSelectInput.Control = defaultComponents.Control;
522+
AsyncCreatableSelectInput.CrossIcon = defaultComponents.CrossIcon;
523+
AsyncCreatableSelectInput.DownChevron = defaultComponents.DownChevron;
524+
// custom
525+
AsyncCreatableSelectInput.DropdownIndicator =
526+
customizedComponents.DropdownIndicator;
527+
AsyncCreatableSelectInput.Group = defaultComponents.Group;
528+
AsyncCreatableSelectInput.GroupHeading = defaultComponents.GroupHeading;
529+
AsyncCreatableSelectInput.IndicatorSeparator =
530+
defaultComponents.IndicatorSeparator;
531+
AsyncCreatableSelectInput.IndicatorsContainer =
532+
defaultComponents.IndicatorsContainer;
533+
AsyncCreatableSelectInput.Input = defaultComponents.Input;
534+
// custom
535+
AsyncCreatableSelectInput.LoadingIndicator =
536+
customizedComponents.LoadingIndicator;
537+
AsyncCreatableSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
538+
AsyncCreatableSelectInput.Menu = defaultComponents.Menu;
539+
AsyncCreatableSelectInput.MenuList = defaultComponents.MenuList;
540+
AsyncCreatableSelectInput.MenuPortal = defaultComponents.MenuPortal;
541+
AsyncCreatableSelectInput.MultiValue = defaultComponents.MultiValue;
542+
AsyncCreatableSelectInput.MultiValueContainer =
543+
defaultComponents.MultiValueContainer;
544+
AsyncCreatableSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
545+
// custom
546+
AsyncCreatableSelectInput.MultiValueRemove =
547+
customizedComponents.MultiValueRemove;
548+
AsyncCreatableSelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage;
549+
AsyncCreatableSelectInput.Option = defaultComponents.Option;
550+
AsyncCreatableSelectInput.Placeholder = defaultComponents.Placeholder;
551+
AsyncCreatableSelectInput.SelectContainer = defaultComponents.SelectContainer;
552+
AsyncCreatableSelectInput.SingleValue = defaultComponents.SingleValue;
553+
AsyncCreatableSelectInput.ValueContainer = defaultComponents.ValueContainer;
522554

523555
export default AsyncCreatableSelectInput;

‎packages/components/inputs/async-select-input/README.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -125,36 +125,35 @@ In case you need one of the currently excluded props, feel free to open a PR add
125125

126126
#### `isTouched(touched)`
127127

128-
Expects to be called with an array or boolean.
129-
Returns `true` when truthy.
128+
Returns truthy value for the Formik `touched` value of this input field.
130129

131-
#### Components
130+
## Components
132131

133-
It is possible to customize `SelectInput` by passing the `components` property.
134-
`SelectInput` exports the default underlying components as static exports.
132+
It is possible to customize `AsyncSelectInput` by passing the `components` property.
133+
`AsyncSelectInput` exports the default underlying components as static exports.
135134

136135
Components available as static exports are:
137136

138137
- `ClearIndicator`
139138
- `Control`
140-
- `DropdownIndicator`
141-
- `DownChevron`
142139
- `CrossIcon`
140+
- `DownChevron`
141+
- `DropdownIndicator`
143142
- `Group`
144143
- `GroupHeading`
145144
- `IndicatorsContainer`
146145
- `IndicatorSeparator`
147146
- `Input`
148147
- `LoadingIndicator`
148+
- `LoadingMessage`
149149
- `Menu`
150150
- `MenuList`
151151
- `MenuPortal`
152-
- `LoadingMessage`
153-
- `NoOptionsMessage`
154152
- `MultiValue`
155153
- `MultiValueContainer`
156154
- `MultiValueLabel`
157155
- `MultiValueRemove`
156+
- `NoOptionsMessage`
158157
- `Option`
159158
- `Placeholder`
160159
- `SelectContainer`

‎packages/components/inputs/async-select-input/docs/additional-info.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,35 @@ In case you need one of the currently excluded props, feel free to open a PR add
77

88
#### `isTouched(touched)`
99

10-
Expects to be called with an array or boolean.
11-
Returns `true` when truthy.
10+
Returns truthy value for the Formik `touched` value of this input field.
1211

13-
#### Components
12+
## Components
1413

15-
It is possible to customize `SelectInput` by passing the `components` property.
16-
`SelectInput` exports the default underlying components as static exports.
14+
It is possible to customize `AsyncSelectInput` by passing the `components` property.
15+
`AsyncSelectInput` exports the default underlying components as static exports.
1716

1817
Components available as static exports are:
1918

2019
- `ClearIndicator`
2120
- `Control`
22-
- `DropdownIndicator`
23-
- `DownChevron`
2421
- `CrossIcon`
22+
- `DownChevron`
23+
- `DropdownIndicator`
2524
- `Group`
2625
- `GroupHeading`
2726
- `IndicatorsContainer`
2827
- `IndicatorSeparator`
2928
- `Input`
3029
- `LoadingIndicator`
30+
- `LoadingMessage`
3131
- `Menu`
3232
- `MenuList`
3333
- `MenuPortal`
34-
- `LoadingMessage`
35-
- `NoOptionsMessage`
3634
- `MultiValue`
3735
- `MultiValueContainer`
3836
- `MultiValueLabel`
3937
- `MultiValueRemove`
38+
- `NoOptionsMessage`
4039
- `Option`
4140
- `Placeholder`
4241
- `SelectContainer`

‎packages/components/inputs/async-select-input/src/async-select-input.tsx‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import {
99
type OptionsOrGroups,
1010
} from 'react-select';
1111
import AsyncSelect, { type AsyncProps } from 'react-select/async';
12-
import {
13-
addStaticFields,
14-
filterDataAttributes,
15-
} from '@commercetools-uikit/utils';
12+
import { filterDataAttributes } from '@commercetools-uikit/utils';
1613
import Constraints from '@commercetools-uikit/constraints';
1714
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
1815
import {
@@ -449,21 +446,51 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
449446
</Constraints.Horizontal>
450447
);
451448
};
449+
AsyncSelectInput.displayName = 'AsyncSelectInput';
450+
AsyncSelectInput.defaultProps = defaultProps;
451+
452+
/**
453+
* Expose static helper methods.
454+
*/
452455

453456
// Formik will set the field to an array on submission, so we always have to
454457
// deal with an array. The touched state ends up being an empty array in case
455458
// values were removed only. So we have to treat any array we receive as
456459
// a signal of the field having been touched.
457460
AsyncSelectInput.isTouched = (touched: unknown) => Boolean(touched);
458461

459-
AsyncSelectInput.displayName = 'AsyncSelectInput';
460-
461-
AsyncSelectInput.defaultProps = defaultProps;
462+
/**
463+
* Expose react-select components for customization purposes.
464+
*/
462465

463-
addStaticFields(AsyncSelectInput, {
464-
...defaultComponents,
465-
...customizedComponents,
466-
isTouched: AsyncSelectInput.isTouched,
467-
});
466+
// custom
467+
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
468+
AsyncSelectInput.Control = defaultComponents.Control;
469+
AsyncSelectInput.CrossIcon = defaultComponents.CrossIcon;
470+
AsyncSelectInput.DownChevron = defaultComponents.DownChevron;
471+
// custom
472+
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
473+
AsyncSelectInput.Group = defaultComponents.Group;
474+
AsyncSelectInput.GroupHeading = defaultComponents.GroupHeading;
475+
AsyncSelectInput.IndicatorSeparator = defaultComponents.IndicatorSeparator;
476+
AsyncSelectInput.IndicatorsContainer = defaultComponents.IndicatorsContainer;
477+
AsyncSelectInput.Input = defaultComponents.Input;
478+
// custom
479+
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
480+
AsyncSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
481+
AsyncSelectInput.Menu = defaultComponents.Menu;
482+
AsyncSelectInput.MenuList = defaultComponents.MenuList;
483+
AsyncSelectInput.MenuPortal = defaultComponents.MenuPortal;
484+
AsyncSelectInput.MultiValue = defaultComponents.MultiValue;
485+
AsyncSelectInput.MultiValueContainer = defaultComponents.MultiValueContainer;
486+
AsyncSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
487+
// custom
488+
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
489+
AsyncSelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage;
490+
AsyncSelectInput.Option = defaultComponents.Option;
491+
AsyncSelectInput.Placeholder = defaultComponents.Placeholder;
492+
AsyncSelectInput.SelectContainer = defaultComponents.SelectContainer;
493+
AsyncSelectInput.SingleValue = defaultComponents.SingleValue;
494+
AsyncSelectInput.ValueContainer = defaultComponents.ValueContainer;
468495

469496
export default AsyncSelectInput;

‎packages/components/inputs/creatable-select-input/README.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -126,36 +126,35 @@ The options support a `isDisabled` property which will render the option with a
126126

127127
### `isTouched(touched)`
128128

129-
Expects to be called with an array or boolean.
130-
Returns `true` when truthy.
129+
Returns truthy value for the Formik `touched` value of this input field.
131130

132-
### Components
131+
## Components
133132

134-
It is possible to customize `SelectInput` by passing the `components` property.
135-
`SelectInput` exports the default underlying components as static exports.
133+
It is possible to customize `CreatableSelectInput` by passing the `components` property.
134+
`CreatableSelectInput` exports the default underlying components as static exports.
136135

137136
Components available as static exports are:
138137

139138
- `ClearIndicator`
140139
- `Control`
141-
- `DropdownIndicator`
142-
- `DownChevron`
143140
- `CrossIcon`
141+
- `DownChevron`
142+
- `DropdownIndicator`
144143
- `Group`
145144
- `GroupHeading`
146145
- `IndicatorsContainer`
147146
- `IndicatorSeparator`
148147
- `Input`
149148
- `LoadingIndicator`
149+
- `LoadingMessage`
150150
- `Menu`
151151
- `MenuList`
152152
- `MenuPortal`
153-
- `LoadingMessage`
154-
- `NoOptionsMessage`
155153
- `MultiValue`
156154
- `MultiValueContainer`
157155
- `MultiValueLabel`
158156
- `MultiValueRemove`
157+
- `NoOptionsMessage`
159158
- `Option`
160159
- `Placeholder`
161160
- `SelectContainer`

0 commit comments

Comments
 (0)