pixel-react 1.6.7 → 1.6.8

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 (73) hide show
  1. package/lib/components/AppHeader/types.d.ts +2 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
  4. package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
  5. package/lib/components/FileDropzone/types.d.ts +61 -0
  6. package/lib/components/MenuOption/types.d.ts +3 -2
  7. package/lib/components/Search/Search.d.ts +1 -1
  8. package/lib/components/Search/types.d.ts +4 -0
  9. package/lib/components/Table/Types.d.ts +1 -1
  10. package/lib/components/Tabs/types.d.ts +1 -0
  11. package/lib/index.d.ts +95 -23
  12. package/lib/index.esm.js +513 -294
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +514 -293
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/FormatString/FormatString.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
  20. package/src/assets/Themes/BaseTheme.scss +5 -3
  21. package/src/assets/Themes/DarkTheme.scss +5 -3
  22. package/src/assets/icons/window_maximize.svg +1 -2
  23. package/src/assets/icons/window_restore.svg +4 -0
  24. package/src/components/AppHeader/AppHeader.scss +33 -0
  25. package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
  26. package/src/components/AppHeader/AppHeader.tsx +111 -112
  27. package/src/components/AppHeader/types.ts +2 -0
  28. package/src/components/Charts/BarChart/BarChart.scss +4 -1
  29. package/src/components/Charts/BarChart/BarChart.tsx +23 -9
  30. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
  31. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
  32. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
  33. package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
  34. package/src/components/Charts/LineChart/LineChart.scss +13 -9
  35. package/src/components/Charts/LineChart/LineChart.tsx +6 -2
  36. package/src/components/DatePicker/DatePicker.scss +11 -0
  37. package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
  38. package/src/components/DatePicker/DatePicker.tsx +73 -22
  39. package/src/components/FileDropzone/Dropzone.tsx +76 -28
  40. package/src/components/FileDropzone/FileDropzone.scss +30 -2
  41. package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
  42. package/src/components/FileDropzone/FileDropzone.tsx +46 -13
  43. package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
  44. package/src/components/FileDropzone/types.ts +73 -0
  45. package/src/components/Icon/iconList.ts +2 -0
  46. package/src/components/Input/Input.scss +137 -125
  47. package/src/components/Input/Input.tsx +69 -63
  48. package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
  49. package/src/components/InputWithDropdown/types.ts +3 -3
  50. package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
  51. package/src/components/MenuOption/MenuOption.tsx +1 -1
  52. package/src/components/MenuOption/types.ts +4 -2
  53. package/src/components/ModulesChip/ModuleChip.scss +21 -8
  54. package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
  55. package/src/components/ModulesChip/ModuleChip.tsx +6 -9
  56. package/src/components/MultiSelect/Dropdown.tsx +12 -5
  57. package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
  58. package/src/components/MultiSelect/MultiSelect.tsx +10 -9
  59. package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
  60. package/src/components/Search/Search.stories.tsx +28 -9
  61. package/src/components/Search/Search.tsx +32 -29
  62. package/src/components/Search/types.ts +4 -0
  63. package/src/components/Table/Table.scss +6 -5
  64. package/src/components/Table/Types.ts +1 -1
  65. package/src/components/Tabs/Tabs.scss +58 -4
  66. package/src/components/Tabs/Tabs.stories.tsx +31 -12
  67. package/src/components/Tabs/Tabs.tsx +27 -18
  68. package/src/components/Tabs/types.ts +1 -1
  69. package/src/components/TextArea/Textarea.stories.tsx +1 -1
  70. package/src/hooks/useFileDropzone.tsx +2 -1
  71. package/src/index.ts +4 -0
  72. package/src/utils/FormatString/FormatString.stories.tsx +58 -0
  73. package/src/utils/FormatString/FormatString.tsx +41 -0
@@ -0,0 +1,76 @@
1
+ import './FileDropzone.scss';
2
+ import Icon from '../Icon';
3
+ import Tooltip from '../Tooltip';
4
+ import { RadioFilePreviewProps } from './types';
5
+ import Typography from '../Typography';
6
+ import { useRef } from 'react';
7
+
8
+ const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
9
+ selectedFile,
10
+ onFileRemoveClick,
11
+ onFileReplaceClick
12
+ }) => {
13
+ const fileInputRef = useRef<HTMLInputElement | null>(null);
14
+
15
+ const handleReplaceClick = () => {
16
+ if (fileInputRef.current) {
17
+ fileInputRef.current.click();
18
+ }
19
+ };
20
+
21
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
22
+ const file = event.target.files?.[0];
23
+ if (file) {
24
+ onFileReplaceClick?.(file);
25
+ }
26
+ };
27
+ return (
28
+ <div className="ff-webservice-file-wrapper">
29
+ <div className="ff-file-info">
30
+ <>
31
+ <Tooltip title={selectedFile}>
32
+ <Typography
33
+ lineHeight="18px"
34
+ fontWeight="semi-bold"
35
+ color={'var(--text-color)'}
36
+ className="ff-webservice-file-name"
37
+ >
38
+ {selectedFile}
39
+ </Typography>
40
+ </Tooltip>
41
+ </>
42
+ </div>
43
+ <>
44
+ <Tooltip title="Remove">
45
+ <Icon
46
+ name="close"
47
+ height={12}
48
+ width={12}
49
+ hoverEffect
50
+ onClick={onFileRemoveClick}
51
+ />
52
+ </Tooltip>
53
+ </>
54
+ <>
55
+ <Tooltip title="Replace">
56
+ <Icon
57
+ name="replace_file"
58
+ color={'var(--icons-default-color)'}
59
+ height={16}
60
+ width={16}
61
+ hoverEffect
62
+ onClick={handleReplaceClick}
63
+ />
64
+ </Tooltip>
65
+ <input
66
+ type="file"
67
+ ref={fileInputRef}
68
+ className='ff-input-ref'
69
+ onChange={handleFileChange}
70
+ />
71
+ </>
72
+ </div>
73
+ );
74
+ };
75
+
76
+ export default RadioFilePreview;
@@ -1,4 +1,8 @@
1
1
  import { ReactNode } from 'react';
2
+ export interface RadioOption {
3
+ label: string;
4
+ value: string;
5
+ }
2
6
 
3
7
  export interface FileDropzoneProps {
4
8
  /**
@@ -65,6 +69,57 @@ export interface FileDropzoneProps {
65
69
  * Returns the rejected files in the state
66
70
  **/
67
71
  getRejectedFiles?: (files: FileRejection[]) => void;
72
+
73
+ /**
74
+ * If its used in WebService has some other functionality so need to pass boolean value.
75
+ **/
76
+ isWebServiceFileDropZone?: boolean;
77
+
78
+ /**
79
+ * Its the selected radio option as a string.
80
+ **/
81
+ selectedRadioOption?: RadioOption;
82
+
83
+ /**
84
+ * Its the array of radio options in pattern of : { label: string; value: string; }.
85
+ **/
86
+ radioOptions?: RadioOption[];
87
+
88
+ /**
89
+ * Its the function which updates the selected radio option.
90
+ **/
91
+ handleOptionChange?: (option: RadioOption)=> void;
92
+
93
+ /**
94
+ * Its the File Name of File Selected from Local File.
95
+ **/
96
+ setSelectedFile?: (file: File | null) => void;
97
+
98
+ /**
99
+ * Its the File Name of File Selected from Local File.
100
+ **/
101
+ selectedFile?: File | null;
102
+
103
+ /**
104
+ * Its the function which updates the Selected file from Local Directory.
105
+ **/
106
+ handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
107
+
108
+ /**
109
+ * Its the function which makes the selected File empty state.
110
+ **/
111
+ handleRemoveFile?: () => void;
112
+
113
+ /**
114
+ * When The Api for the response fails need to show error message.
115
+ **/
116
+ isApiResponseError?: boolean;
117
+
118
+ /**
119
+ * If isDisable is true not able to access the FileDropzone
120
+ **/
121
+ isDisable?: boolean;
122
+
68
123
  }
69
124
  export interface FileState {
70
125
  accepted: File[];
@@ -95,6 +150,7 @@ export interface DropzoneOptions {
95
150
  invalidFileMessage?: string;
96
151
  fileExistMessage?: string;
97
152
  validateMIMEType?: boolean;
153
+ isApiResponseError?:boolean;
98
154
  }
99
155
 
100
156
  export interface DropzoneState {
@@ -116,6 +172,15 @@ export interface DroppableProps {
116
172
  getInputProps: () => any;
117
173
  isDragActive: boolean;
118
174
  height: number | string;
175
+ isWebServiceFileDropZone?: boolean;
176
+ selectedRadioOption?: Option,
177
+ radioOptions?: RadioOption[],
178
+ handleOptionChange?: (option: RadioOption)=> void,
179
+ selectedFile?: File | null,
180
+ setSelectedFile?: (file: File | null) => void;
181
+ handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
182
+ handleRemoveFile?: () => void;
183
+ isDisable?: boolean;
119
184
  }
120
185
 
121
186
  export interface FilePreviewProps {
@@ -124,3 +189,11 @@ export interface FilePreviewProps {
124
189
  onRemoveClick: (file: File) => void;
125
190
  onReplaceClick: (file: File) => void;
126
191
  }
192
+
193
+ export interface RadioFilePreviewProps {
194
+ selectedFile: string;
195
+ error?: string;
196
+ onFileRemoveClick?: () => void;
197
+ onFileReplaceClick?: (file: File | null) => void;
198
+ setSelectedFile?: (file: File | null) => void;
199
+ }
@@ -127,6 +127,7 @@ import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
127
127
  import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
128
128
  import Reload from '../../assets/icons/reload.svg?react';
129
129
  import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
130
+ import WindowRestore from '../../assets/icons/window_restore.svg?react';
130
131
  import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
131
132
  import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
132
133
  import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
@@ -370,6 +371,7 @@ Components['backward_icon'] = BackwardIcon;
370
371
  Components['forward_icon'] = ForwardIcon;
371
372
  Components['reload'] = Reload;
372
373
  Components['window_maximize'] = WindowMaximize;
374
+ Components['window_restore'] = WindowRestore;
373
375
  Components['window_minimize'] = WindowMinimize;
374
376
  Components['hamburger_menu'] = HamburgerMenu;
375
377
  Components['app_switch'] = AppSwitchIcon;
@@ -1,159 +1,171 @@
1
1
  @use '../../assets/styles/fonts';
2
2
 
3
- .ff-input-container {
4
- display: flex;
5
- flex-direction: column;
6
- position: relative;
3
+ .ff-input-fieldset {
4
+ display: inline-block;
5
+ border: none;
6
+ padding: 0;
7
+ margin: 0;
8
+ width: 100%;
7
9
 
8
- .ff-input {
9
- padding: 6px 8px;
10
+ &--disabled {
10
11
  border: 1px solid var(--input-default-border-color);
12
+ background: var(--input-disabled-background-color);
11
13
  border-radius: 4px;
12
- outline: none;
13
- line-height: 18px;
14
- @extend .fontSm;
15
- &--medium {
16
- padding: 10px 9px;
17
- }
18
- &:disabled {
19
- cursor: not-allowed;
20
- }
21
- &::placeholder {
22
- opacity: 0;
23
- @extend .fontXs;
24
- line-height: 15px;
25
- }
26
- &--disabled {
27
- background: transparent;
28
- border-color: var(--input-default-border-color);
29
- }
30
- &--danger {
31
- border-color: var(--input-error-text-color);
32
- }
33
- &--transparentBackground {
34
- background: transparent;
35
- }
36
- &--no-border {
37
- border: none;
38
- }
39
- &--placeholder {
40
- &::placeholder {
41
- opacity: 1;
42
- }
43
- }
14
+ opacity: 0.5;
44
15
  }
45
-
46
- .ff-input-label-container {
47
- @extend .ff-input;
16
+ .ff-input-container {
48
17
  display: flex;
49
- gap: 2px;
50
- position: absolute;
51
- border: none;
52
- outline: none;
53
- line-height: 18px;
54
- margin-top: 1px;
55
- transition: all 0.3s ease-in-out;
56
- &--medium {
57
- line-height: 25px;
58
- }
59
- .ff-input-label {
60
- color: var(--input-default-label-color);
61
- &--danger {
62
- color: var(--input-error-text-color);
63
- }
64
- &--disabled {
65
- color: var(--input-default-border-color);
66
- background-color: var(--input-label-bg-color);
67
- }
68
- }
18
+ flex-direction: column;
19
+ position: relative;
69
20
 
70
- .required-asterisk {
71
- color: var(--input-error-text-color);
72
- }
73
- }
74
- &:hover {
75
- .ff-input-label {
76
- color: var(--input-default-label-color);
77
- &--no-hover {
78
- color: var(--input-default-label-color);
79
- }
80
- &--disabled {
81
- color: var(--input-default-border-color);
82
- }
83
- &--danger {
84
- color: var(--input-error-text-color);
85
- }
86
- }
87
21
  .ff-input {
88
- border-color: var(--brand-color);
89
- &--no-hover {
90
- border-color: var(--input-default-border-color);
22
+ padding: 6px 8px;
23
+ border: 1px solid var(--input-default-border-color);
24
+ border-radius: 4px;
25
+ outline: none;
26
+ line-height: 18px;
27
+ @extend .fontSm;
28
+ &--medium {
29
+ padding: 10px 9px;
91
30
  }
92
- &--disabled {
31
+ &:disabled {
32
+ cursor: not-allowed;
33
+ border: none;
93
34
  background: transparent;
94
- border-color: var(--input-default-border-color);
35
+ }
36
+ &::placeholder {
37
+ opacity: 0;
38
+ @extend .fontXs;
39
+ line-height: 15px;
95
40
  }
96
41
  &--danger {
97
42
  border-color: var(--input-error-text-color);
98
43
  }
44
+ &--transparentBackground {
45
+ background: transparent;
46
+ }
47
+ &--no-border {
48
+ border: none;
49
+ }
50
+ &--placeholder {
51
+ &::placeholder {
52
+ opacity: 1;
53
+ }
54
+ }
99
55
  }
100
- }
101
- &:focus-within {
56
+
102
57
  .ff-input-label-container {
103
- top: -9px;
104
- @extend .fontXs;
105
- background-color: var(--input-label-bg-color);
106
- line-height: 15px;
107
- padding: 0px 2px;
108
- margin-left: 10px;
109
- }
110
- .ff-input-label {
111
- &--primary {
112
- color: var(--brand-color);
58
+ @extend .ff-input;
59
+ display: flex;
60
+ gap: 2px;
61
+ position: absolute;
62
+ border: none;
63
+ outline: none;
64
+ line-height: 18px;
65
+ margin-top: 1px;
66
+ transition: all 0.3s ease-in-out;
67
+ &--medium {
68
+ line-height: 25px;
113
69
  }
114
- &--danger {
70
+ .ff-input-label {
71
+ color: var(--input-default-label-color);
72
+ &--danger {
73
+ color: var(--input-error-text-color);
74
+ }
75
+ &--disabled {
76
+ color: var(--input-default-border-color);
77
+ background-color: var(--input-label-bg-color);
78
+ }
79
+ }
80
+
81
+ .required-asterisk {
115
82
  color: var(--input-error-text-color);
116
83
  }
117
84
  }
118
- .ff-input {
119
- border-color: var(--brand-color);
120
-
121
- &--danger {
122
- border-color: var(--input-error-text-color);
85
+ &:hover {
86
+ .ff-input-label {
87
+ color: var(--input-default-label-color);
88
+ &--no-hover {
89
+ color: var(--input-default-label-color);
90
+ }
91
+ &--disabled {
92
+ color: var(--input-default-border-color);
93
+ }
94
+ &--danger {
95
+ color: var(--input-error-text-color);
96
+ }
123
97
  }
124
-
125
- &::placeholder {
126
- opacity: 1;
127
- margin-bottom: 1px;
98
+ .ff-input {
99
+ border-color: var(--brand-color);
100
+ &--no-hover {
101
+ border-color: var(--input-default-border-color);
102
+ }
103
+ &--disabled {
104
+ background: transparent;
105
+ border-color: var(--input-default-border-color);
106
+ }
107
+ &--danger {
108
+ border-color: var(--input-error-text-color);
109
+ }
128
110
  }
129
111
  }
130
- }
112
+ &:focus-within {
113
+ .ff-input-label-container {
114
+ top: -9px;
115
+ @extend .fontXs;
116
+ background-color: var(--input-label-bg-color);
117
+ line-height: 15px;
118
+ padding: 0px 2px;
119
+ margin-left: 10px;
120
+ }
121
+ .ff-input-label {
122
+ &--primary {
123
+ color: var(--brand-color);
124
+ }
125
+ &--danger {
126
+ color: var(--input-error-text-color);
127
+ }
128
+ }
129
+ .ff-input {
130
+ border-color: var(--brand-color);
131
+
132
+ &--danger {
133
+ border-color: var(--input-error-text-color);
134
+ }
131
135
 
132
- .ff-input-message {
133
- @extend .fontXs;
134
- padding: 0px 4px;
135
- margin-left: 8px;
136
- line-height: 15px;
137
- &--danger {
138
- color: var(--input-error-text-color);
136
+ &::placeholder {
137
+ opacity: 1;
138
+ margin-bottom: 1px;
139
+ }
140
+ }
139
141
  }
140
- }
141
142
 
142
- &--float {
143
- .ff-input-label-container {
144
- //re-written label container code to place it at on border
145
- top: -9px;
146
- font-size: 10px;
147
- background-color: var(--input-label-bg-color);
143
+ .ff-input-message {
144
+ @extend .fontXs;
145
+ padding: 0px 4px;
146
+ margin-left: 8px;
148
147
  line-height: 15px;
149
- padding: 0px 2px;
150
- margin-left: 10px;
148
+ &--danger {
149
+ color: var(--input-error-text-color);
150
+ }
151
151
  }
152
- &--disabled {
153
- cursor: not-allowed;
152
+
153
+ &--float {
154
154
  .ff-input-label-container {
155
+ //re-written label container code to place it at on border
156
+ top: -9px;
157
+ font-size: 10px;
158
+ background-color: var(--input-label-bg-color);
159
+ line-height: 15px;
160
+ padding: 0px 2px;
161
+ margin-left: 10px;
162
+ }
163
+ &--disabled {
155
164
  cursor: not-allowed;
165
+ .ff-input-label-container {
166
+ cursor: not-allowed;
167
+ }
156
168
  }
157
169
  }
158
170
  }
159
- }
171
+ }
@@ -35,78 +35,84 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
35
35
  const isValueFilled = !checkEmpty(value);
36
36
 
37
37
  return (
38
- <div
39
- className={classNames('ff-input-container', {
40
- 'ff-input-container--float': isValueFilled,
41
- 'ff-input-container--disabled': !!disabled,
38
+ <fieldset
39
+ className={classNames('ff-input-fieldset', {
40
+ 'ff-input-fieldset--disabled': disabled,
42
41
  })}
43
42
  >
44
- {isLabelRequired && (
45
- <label
46
- htmlFor={name}
47
- className={classNames(
48
- `ff-input-label-container ff-input-label-container--${size}`,
49
- {
50
- 'ff-input-label-container--danger': !!error,
51
- }
52
- )}
53
- >
54
- {required && <span className="required-asterisk">*</span>}
55
- <span
43
+ <div
44
+ className={classNames('ff-input-container', {
45
+ 'ff-input-container--float': isValueFilled,
46
+ 'ff-input-container--disabled': !!disabled,
47
+ })}
48
+ >
49
+ {isLabelRequired && (
50
+ <label
51
+ htmlFor={name}
56
52
  className={classNames(
57
- `ff-input-label ff-input-label--${variant}`,
53
+ `ff-input-label-container ff-input-label-container--${size}`,
58
54
  {
59
- 'ff-input-label--no-hover': !!value,
60
- 'ff-input-label--disabled': !!disabled,
61
- 'ff-input-label--danger': !!error,
55
+ 'ff-input-label-container--danger': !!error,
62
56
  }
63
57
  )}
64
58
  >
65
- {label}
66
- </span>
67
- </label>
68
- )}
69
-
70
- <input
71
- ref={ref} // Forward the ref here
72
- name={name}
73
- value={value}
74
- type={type}
75
- spellCheck={false}
76
- id={name}
77
- className={classNames(
78
- `ff-input ff-input-${variant} default-input ff-input--${size}`,
79
- {
80
- ['ff-input--transparentBackground']: !!transparentBackground,
81
- 'ff-input--no-hover': !!value,
82
- 'ff-input--disabled': !!disabled,
83
- 'ff-input--danger': !!error,
84
- 'ff-input--no-border': !!noBorder,
85
- 'ff-input--placeholder': !isLabelRequired,
86
- },
87
- `${className}`
59
+ {required && <span className="required-asterisk">*</span>}
60
+ <span
61
+ className={classNames(
62
+ `ff-input-label ff-input-label--${variant}`,
63
+ {
64
+ 'ff-input-label--no-hover': !!value,
65
+ 'ff-input-label--disabled': !!disabled,
66
+ 'ff-input-label--danger': !!error,
67
+ }
68
+ )}
69
+ >
70
+ {label}
71
+ </span>
72
+ </label>
88
73
  )}
89
- placeholder={placeholder}
90
- disabled={disabled}
91
- onChange={onChange}
92
- onFocus={onFocus}
93
- onBlur={onBlur}
94
- autoComplete={autoComplete}
95
- min={minValue}
96
- max={maxValue}
97
- {...props}
98
- />
99
74
 
100
- {helperText && error && (
101
- <span
102
- className={classNames('ff-input-message', {
103
- 'ff-input-message--danger': !!error,
104
- })}
105
- >
106
- {helperText}
107
- </span>
108
- )}
109
- </div>
75
+ <input
76
+ ref={ref} // Forward the ref here
77
+ name={name}
78
+ value={value}
79
+ type={type}
80
+ spellCheck={false}
81
+ id={name}
82
+ className={classNames(
83
+ `ff-input ff-input-${variant} default-input ff-input--${size}`,
84
+ {
85
+ ['ff-input--transparentBackground']: !!transparentBackground,
86
+ 'ff-input--no-hover': !!value,
87
+ 'ff-input--disabled': !!disabled,
88
+ 'ff-input--danger': !!error,
89
+ 'ff-input--no-border': !!noBorder,
90
+ 'ff-input--placeholder': !isLabelRequired,
91
+ },
92
+ `${className}`
93
+ )}
94
+ placeholder={placeholder}
95
+ disabled={disabled}
96
+ onChange={onChange}
97
+ onFocus={onFocus}
98
+ onBlur={onBlur}
99
+ autoComplete={autoComplete}
100
+ min={minValue}
101
+ max={maxValue}
102
+ {...props}
103
+ />
104
+
105
+ {helperText && error && (
106
+ <span
107
+ className={classNames('ff-input-message', {
108
+ 'ff-input-message--danger': !!error,
109
+ })}
110
+ >
111
+ {helperText}
112
+ </span>
113
+ )}
114
+ </div>
115
+ </fieldset>
110
116
  );
111
117
  }
112
118
  );
@@ -10,6 +10,8 @@
10
10
  border-radius: 4px;
11
11
  padding: 0;
12
12
  position: relative;
13
+ justify-content: space-between;
14
+
13
15
  .ff-input-with-dropdown--left {
14
16
  display: flex;
15
17
  flex-direction: row-reverse;
@@ -24,6 +26,8 @@
24
26
  }
25
27
 
26
28
  .ff-floating-label-input-container {
29
+ display: flex;
30
+ flex: 1;
27
31
  .ff-floating-label {
28
32
  position: absolute;
29
33
  z-index: 9;
@@ -48,7 +52,7 @@
48
52
  }
49
53
 
50
54
  .ff-floating-input {
51
- position: relative;
55
+ width: 100%;
52
56
  padding: 6px 7px;
53
57
  line-height: 18px;
54
58
  border: none;
@@ -92,7 +96,7 @@
92
96
  }
93
97
 
94
98
  .ff-floating-dropdown {
95
- min-width: 120px;
99
+ width: 100%;
96
100
  border: none;
97
101
  outline: none;
98
102
  margin: 0;
@@ -100,6 +104,9 @@
100
104
  &:disabled {
101
105
  cursor: not-allowed;
102
106
  }
107
+ &:hover {
108
+ background-color: var(--dropdown-bg-color);
109
+ }
103
110
  }
104
111
 
105
112
  .ff-floating-dropdown--left {