@commercetools-uikit/selectable-search-input 16.1.0 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/commercetools-uikit-selectable-search-input.cjs.dev.js +14 -36
  2. package/dist/commercetools-uikit-selectable-search-input.cjs.prod.js +8 -28
  3. package/dist/commercetools-uikit-selectable-search-input.esm.js +15 -37
  4. package/dist/declarations/src/selectable-search-input.styles.d.ts +27 -29
  5. package/dist/declarations/src/selectable-select.d.ts +0 -2
  6. package/package.json +9 -9
package/dist/declarations/src/selectable-search-input.styles.d.ts CHANGED
@@ -20,13 +20,11 @@ type TCreateSelectableSelectStyles = {
20
20
  hasWarning?: boolean;
21
21
  isReadOnly?: boolean;
22
22
  menuPortalZIndex?: number;
23
- isNewTheme: boolean;
24
23
  dropdownHasFocus?: boolean;
25
- textInputHasFocus?: boolean;
26
24
  };
27
- declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled, isReadOnly, menuPortalZIndex, isNewTheme, dropdownHasFocus, textInputHasFocus, }: TCreateSelectableSelectStyles) => {
25
+ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled, isReadOnly, menuPortalZIndex, dropdownHasFocus, }: TCreateSelectableSelectStyles) => {
28
26
  control: (base: TBase, state: ReactSelectProps) => {
29
- padding: "var(--padding-for-selectable-search-input-dropdown, 0 var(--spacing-20))";
27
+ padding: "var(--padding-for-selectable-search-input-dropdown, 0 12px)";
30
28
  borderTopRightRadius: string;
31
29
  borderBottomRightRadius: string;
32
30
  borderRight: string;
@@ -38,9 +36,9 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
38
36
  backgroundColor: string;
39
37
  };
40
38
  fontSize: "var(--font-size-for-input, 1rem)";
41
- borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 1px)";
42
- borderRadius: "var(--border-radius-for-input, 6px)";
43
- minHeight: "var(--height-for-input, 32px)";
39
+ borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 2px)";
40
+ borderRadius: "var(--border-radius-for-input, 4px)";
41
+ minHeight: "var(--height-for-input, 40px)";
44
42
  transition: string;
45
43
  outline: number;
46
44
  boxShadow: string;
@@ -57,11 +55,11 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
57
55
  singleValue: (base: TBase) => {
58
56
  marginLeft: number;
59
57
  maxWidth: string;
60
- color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-error, #e60050)" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-warning, #f16d0e)";
58
+ color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-error, #e60050)" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))" | "var(--font-color-for-input-when-warning, #f16d0e)";
61
59
  backgroundColor?: string | undefined;
62
60
  };
63
61
  dropdownIndicator: () => {
64
- fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)";
62
+ fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))";
65
63
  };
66
64
  menu: (base: {
67
65
  fontColorForInput?: string | undefined;
@@ -74,9 +72,9 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
74
72
  pointerEvents?: string | undefined;
75
73
  }) => {
76
74
  border: string;
77
- borderRadius: "var(--border-radius-for-input, 6px)";
75
+ borderRadius: "var(--border-radius-for-input, 4px)";
78
76
  backgroundColor: "var(--background-color-for-input, #fff)";
79
- boxShadow: "var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))";
77
+ boxShadow: "var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))";
80
78
  fontSize: "var(--font-size-for-input, 1rem)";
81
79
  fontFamily: string;
82
80
  margin: string;
@@ -122,7 +120,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
122
120
  }) => {
123
121
  display: string;
124
122
  padding: number;
125
- marginLeft: "var(--margin-for-select-input-icon, 4px)";
123
+ marginLeft: "var(--margin-for-select-input-icon, 8px)";
126
124
  fontColorForInput?: string | undefined;
127
125
  borderColorForInput?: string | undefined;
128
126
  color?: string | undefined;
@@ -142,8 +140,8 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
142
140
  boxShadow?: string | undefined;
143
141
  pointerEvents?: string | undefined;
144
142
  }) => {
145
- padding: "var(--padding-for-select-input-menu, inherit)";
146
- borderRadius: "var(--border-radius-for-input, 6px)";
143
+ padding: "var(--padding-for-select-input-menu, var(--spacing-10) 0)";
144
+ borderRadius: "var(--border-radius-for-input, 4px)";
147
145
  backgroundColor: "var(--background-color-for-input, #fff)";
148
146
  fontColorForInput?: string | undefined;
149
147
  borderColorForInput?: string | undefined;
@@ -184,11 +182,11 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
184
182
  pointerEvents?: string | undefined;
185
183
  }) => {
186
184
  display: string;
187
- alignItems: "var(--align-items-for-select-input-tag, unset)";
188
- height: "var(--height-for-select-input-tag, 26px)";
185
+ alignItems: "var(--align-items-for-select-input-tag, center)";
186
+ height: "var(--height-for-select-input-tag, 32px)";
189
187
  backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
190
188
  padding: string;
191
- border: "var(--border-for-select-input-tag, none)";
189
+ border: "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))";
192
190
  fontColorForInput?: string | undefined;
193
191
  borderColorForInput?: string | undefined;
194
192
  color?: string | undefined;
@@ -207,7 +205,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
207
205
  boxShadow?: string | undefined;
208
206
  pointerEvents?: string | undefined;
209
207
  }) => {
210
- fontSize: "var(--font-size-for-select-input-tag, 0.9231rem)";
208
+ fontSize: "var(--font-size-for-select-input-tag, 1rem)";
211
209
  color: string | undefined;
212
210
  padding: string;
213
211
  borderRadius: string;
@@ -239,7 +237,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
239
237
  isDisabled?: boolean | undefined;
240
238
  isSelected?: boolean | undefined;
241
239
  }) => {
242
- borderColor: "var(--border-color-for-tag, hsl(0, 0%, 60%))";
240
+ borderColor: "var(--border-color-for-tag, #ccc)";
243
241
  padding: string;
244
242
  borderRadius: string;
245
243
  borderStyle: string;
@@ -253,7 +251,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
253
251
  borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
254
252
  backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
255
253
  'svg *': {
256
- fill: "var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)";
254
+ fill: "var(--font-color-for-clear-input-icon-when-hovered, #e60050)";
257
255
  };
258
256
  };
259
257
  fontColorForInput?: string | undefined;
@@ -282,16 +280,16 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
282
280
  isSelected?: boolean | undefined;
283
281
  }) => {
284
282
  transition: string;
285
- paddingLeft: "var(--padding-left-for-select-input-options, 8px)";
286
- paddingRight: "var(--padding-right-for-select-input-options, 8px)";
287
- paddingTop: "var(--padding-top-for-select-input-options, 4px)";
288
- paddingBottom: "var(--padding-bottom-for-select-input-options, 4px)";
289
- lineHeight: "var(--line-height-for-select-input-options, inherit)";
283
+ paddingLeft: "var(--padding-left-for-select-input-options, 16px)";
284
+ paddingRight: "var(--padding-right-for-select-input-options, 16px)";
285
+ paddingTop: "var(--padding-top-for-select-input-options, 8px)";
286
+ paddingBottom: "var(--padding-bottom-for-select-input-options, 8px)";
287
+ lineHeight: "var(--line-height-for-select-input-options, 1.625rem)";
290
288
  color: string | undefined;
291
289
  backgroundColor: string | undefined;
292
290
  '&:active': {
293
291
  color: string | undefined;
294
- backgroundColor: "var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))";
292
+ backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
295
293
  };
296
294
  fontColorForInput?: string | undefined;
297
295
  borderColorForInput?: string | undefined;
@@ -338,7 +336,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
338
336
  backgroundColor: string;
339
337
  overflow: string;
340
338
  display: string;
341
- fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)";
339
+ fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))";
342
340
  fontColorForInput?: string | undefined;
343
341
  borderColorForInput?: string | undefined;
344
342
  color?: string | undefined;
@@ -380,7 +378,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
380
378
  boxShadow?: string | undefined;
381
379
  pointerEvents?: string | undefined;
382
380
  }) => {
383
- color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))";
381
+ color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))";
384
382
  fontSize: "var(--font-size-small, 0.9231rem)";
385
383
  textTransform: string;
386
384
  fontWeight: string;
@@ -412,7 +410,7 @@ declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled,
412
410
  }) => {
413
411
  fontFamily: string;
414
412
  minHeight: "var(--size-height-input, 32px)";
415
- borderRadius: "var(--border-radius-for-input, 6px)";
413
+ borderRadius: "var(--border-radius-for-input, 4px)";
416
414
  borderColor: string | undefined;
417
415
  boxShadow: string | undefined;
418
416
  fontColorForInput?: string | undefined;
package/dist/declarations/src/selectable-select.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { TSelectableSearchInputProps, TOption } from './selectable-search-input';
3
3
  type TSelectableSelect = {
4
- textInputHasFocus: boolean;
5
4
  dropdownHasFocus: boolean;
6
- isNewTheme: boolean;
7
5
  handleDropdownFocus: () => void;
8
6
  handleDropdownBlur: () => void;
9
7
  textInputRef: React.RefObject<HTMLInputElement>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/selectable-search-input",
3
3
  "description": "A controlled selectable search input component for single-line strings with validation states.",
4
- "version": "16.1.0",
4
+ "version": "16.2.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,14 +21,14 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "16.1.0",
25
- "@commercetools-uikit/design-system": "16.1.0",
26
- "@commercetools-uikit/hooks": "16.1.0",
27
- "@commercetools-uikit/icons": "16.1.0",
28
- "@commercetools-uikit/input-utils": "16.1.0",
29
- "@commercetools-uikit/secondary-icon-button": "16.1.0",
30
- "@commercetools-uikit/select-utils": "16.1.0",
31
- "@commercetools-uikit/utils": "16.1.0",
24
+ "@commercetools-uikit/constraints": "16.2.0",
25
+ "@commercetools-uikit/design-system": "16.2.0",
26
+ "@commercetools-uikit/hooks": "16.2.0",
27
+ "@commercetools-uikit/icons": "16.2.0",
28
+ "@commercetools-uikit/input-utils": "16.2.0",
29
+ "@commercetools-uikit/secondary-icon-button": "16.2.0",
30
+ "@commercetools-uikit/select-utils": "16.2.0",
31
+ "@commercetools-uikit/utils": "16.2.0",
32
32
  "@emotion/react": "^11.10.5",
33
33
  "@emotion/styled": "^11.10.5",
34
34
  "lodash": "4.17.21",