@akad/design-system 1.0.0-alpha.6 → 1.0.0-alpha.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.
- package/css/core.css +1 -1
- package/package.json +1 -1
- package/react/react-lib.js +1077 -1031
- package/react/react-lib.umd.cjs +5 -5
- package/react/src/components/molecules/EditableSelect/EditableSelect.d.ts +47 -1
- package/react/src/components/molecules/EditableSelect/EditableSelect.utils.d.ts +15 -0
- package/react/src/components/molecules/EditableSelect/EditableSelect.utils.test.d.ts +1 -0
- package/scss/core/components/atoms/button.scss +81 -40
- package/scss/core/components/atoms/checkbox.scss +7 -1
- package/scss/core/components/atoms/select.scss +2 -1
- package/scss/core/components/molecules/editable-select.scss +1 -1
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
import { EditableSelectOption } from './EditableSelect.config';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* DsEditableSelect - A select component with two usage modes:
|
|
5
|
+
*
|
|
6
|
+
* **Mode 1: Autocomplete (default)**
|
|
7
|
+
* The user types in the input and the parent component is responsible for
|
|
8
|
+
* filtering and updating the `options` prop accordingly. The dropdown appears
|
|
9
|
+
* only after the user starts typing.
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <DsEditableSelect
|
|
13
|
+
* label="Search"
|
|
14
|
+
* options={filteredOptions}
|
|
15
|
+
* value={inputValue}
|
|
16
|
+
* onChangeHandler={handleFilter}
|
|
17
|
+
* onSelectHandler={handleSelect}
|
|
18
|
+
* />
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* **Mode 2: Searchable Dropdown (showOptionsOnFocus=true)**
|
|
22
|
+
* The dropdown opens immediately when the input is focused, showing all
|
|
23
|
+
* available options. The component filters options internally as the user
|
|
24
|
+
* types. Clicking outside closes the dropdown.
|
|
25
|
+
*
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <DsEditableSelect
|
|
28
|
+
* label="Choose"
|
|
29
|
+
* options={allOptions}
|
|
30
|
+
* value={selectedValue}
|
|
31
|
+
* showOptionsOnFocus
|
|
32
|
+
* onChangeHandler={handleChange}
|
|
33
|
+
* onSelectHandler={handleSelect}
|
|
34
|
+
* />
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
3
37
|
export interface DsEditableSelectProps {
|
|
4
38
|
label?: string;
|
|
5
39
|
name?: string;
|
|
@@ -18,9 +52,21 @@ export interface DsEditableSelectProps {
|
|
|
18
52
|
animated?: boolean;
|
|
19
53
|
onBlurHandler?: () => void;
|
|
20
54
|
onFocusHandler?: () => void;
|
|
55
|
+
showOptionsOnFocus?: boolean;
|
|
56
|
+
inputType?: string;
|
|
57
|
+
inputMin?: string;
|
|
58
|
+
inputMax?: string;
|
|
59
|
+
inputTooltip?: string;
|
|
60
|
+
inputTooltipPosition?: string;
|
|
61
|
+
inputTooltipPlacement?: string;
|
|
62
|
+
inputFeedback?: string;
|
|
63
|
+
inputHasFeedback?: boolean;
|
|
64
|
+
inputNoMargin?: boolean;
|
|
65
|
+
inputMask?: string | object;
|
|
66
|
+
inputOnKeyDownHandler?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
21
67
|
}
|
|
22
68
|
declare const DsEditableSelect: {
|
|
23
|
-
({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, showOptionsOnFocus, inputType, inputMin, inputMax, inputTooltip, inputTooltipPosition, inputTooltipPlacement, inputFeedback, inputHasFeedback, inputNoMargin, inputMask, inputOnKeyDownHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
24
70
|
displayName: string;
|
|
25
71
|
};
|
|
26
72
|
export default DsEditableSelect;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { EditableSelectOption } from './EditableSelect.config';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Filters options internally by the typed text (case-insensitive).
|
|
5
|
+
* Used when showOptionsOnFocus=true, as the component takes
|
|
6
|
+
* responsibility for filtering options based on the input value.
|
|
7
|
+
*/
|
|
8
|
+
export declare const filterOptionsInternally: (allOptions: EditableSelectOption[], searchTerm: string) => EditableSelectOption[];
|
|
9
|
+
/**
|
|
10
|
+
* Returns options without filtering.
|
|
11
|
+
* Used when showOptionsOnFocus=false (default behavior),
|
|
12
|
+
* as filtering is the parent component's responsibility
|
|
13
|
+
* through the options prop.
|
|
14
|
+
*/
|
|
15
|
+
export declare const getOptionsFromParent: (allOptions: EditableSelectOption[]) => EditableSelectOption[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -40,10 +40,14 @@ $button__solid: (
|
|
|
40
40
|
'bg__primary--hover': var(--button-background-color__primary--hover),
|
|
41
41
|
'bg__primary--active': var(--button-background-color__primary--active),
|
|
42
42
|
'text__primary': var(--button-color__primary),
|
|
43
|
-
'text__primary--hover':
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
'text__primary--hover': var(
|
|
44
|
+
--button-color__primary--hover,
|
|
45
|
+
var(--button-color__primary)
|
|
46
|
+
),
|
|
47
|
+
'text__primary--active': var(
|
|
48
|
+
--button-color__primary--active,
|
|
49
|
+
var(--button-color__primary)
|
|
50
|
+
),
|
|
47
51
|
'border__primary': var(--button-background-color__primary),
|
|
48
52
|
'border__primary--hover': var(--button-background-color__primary--hover),
|
|
49
53
|
'border__primary--active': var(--button-background-color__primary--active),
|
|
@@ -51,10 +55,14 @@ $button__solid: (
|
|
|
51
55
|
'bg__secondary--hover': var(--button-background-color__secondary--hover),
|
|
52
56
|
'bg__secondary--active': var(--button-background-color__secondary--active),
|
|
53
57
|
'text__secondary': var(--button-color__secondary),
|
|
54
|
-
'text__secondary--hover':
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
'text__secondary--hover': var(
|
|
59
|
+
--button-color__secondary--hover,
|
|
60
|
+
var(--button-color__secondary)
|
|
61
|
+
),
|
|
62
|
+
'text__secondary--active': var(
|
|
63
|
+
--button-color__secondary--active,
|
|
64
|
+
var(--button-color__secondary)
|
|
65
|
+
),
|
|
58
66
|
'border__secondary': var(--button-background-color__secondary),
|
|
59
67
|
'border__secondary--hover': var(--button-background-color__secondary--hover),
|
|
60
68
|
'border__secondary--active': var(--button-background-color__secondary--active),
|
|
@@ -62,10 +70,14 @@ $button__solid: (
|
|
|
62
70
|
'bg__success--hover': var(--button-background-color__success--hover),
|
|
63
71
|
'bg__success--active': var(--button-background-color__success--active),
|
|
64
72
|
'text__success': var(--button-color__success),
|
|
65
|
-
'text__success--hover':
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
73
|
+
'text__success--hover': var(
|
|
74
|
+
--button-color__success--hover,
|
|
75
|
+
var(--button-color__success)
|
|
76
|
+
),
|
|
77
|
+
'text__success--active': var(
|
|
78
|
+
--button-color__success--active,
|
|
79
|
+
var(--button-color__success)
|
|
80
|
+
),
|
|
69
81
|
'border__success': var(--button-background-color__success),
|
|
70
82
|
'border__success--hover': var(--button-background-color__success--hover),
|
|
71
83
|
'border__success--active': var(--button-background-color__success--active),
|
|
@@ -73,10 +85,14 @@ $button__solid: (
|
|
|
73
85
|
'bg__danger--hover': var(--button-background-color__danger--hover),
|
|
74
86
|
'bg__danger--active': var(--button-background-color__danger--active),
|
|
75
87
|
'text__danger': var(--button-color__danger),
|
|
76
|
-
'text__danger--hover':
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
88
|
+
'text__danger--hover': var(
|
|
89
|
+
--button-color__danger--hover,
|
|
90
|
+
var(--button-color__danger)
|
|
91
|
+
),
|
|
92
|
+
'text__danger--active': var(
|
|
93
|
+
--button-color__danger--active,
|
|
94
|
+
var(--button-color__danger)
|
|
95
|
+
),
|
|
80
96
|
'border__danger': var(--button-background-color__danger),
|
|
81
97
|
'border__danger--hover': var(--button-background-color__danger--hover),
|
|
82
98
|
'border__danger--active': var(--button-background-color__danger--active),
|
|
@@ -84,10 +100,14 @@ $button__solid: (
|
|
|
84
100
|
'bg__warning--hover': var(--button-background-color__warning--hover),
|
|
85
101
|
'bg__warning--active': var(--button-background-color__warning--active),
|
|
86
102
|
'text__warning': var(--button-color__warning),
|
|
87
|
-
'text__warning--hover':
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
103
|
+
'text__warning--hover': var(
|
|
104
|
+
--button-color__warning--hover,
|
|
105
|
+
var(--button-color__warning)
|
|
106
|
+
),
|
|
107
|
+
'text__warning--active': var(
|
|
108
|
+
--button-color__warning--active,
|
|
109
|
+
var(--button-color__warning)
|
|
110
|
+
),
|
|
91
111
|
'border__warning': var(--button-background-color__warning),
|
|
92
112
|
'border__warning--hover': var(--button-background-color__warning--hover),
|
|
93
113
|
'border__warning--active': var(--button-background-color__warning--active),
|
|
@@ -95,10 +115,14 @@ $button__solid: (
|
|
|
95
115
|
'bg__info--hover': var(--button-background-color__info--hover),
|
|
96
116
|
'bg__info--active': var(--button-background-color__info--active),
|
|
97
117
|
'text__info': var(--button-color__info),
|
|
98
|
-
'text__info--hover':
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
118
|
+
'text__info--hover': var(
|
|
119
|
+
--button-color__info--hover,
|
|
120
|
+
var(--button-color__info)
|
|
121
|
+
),
|
|
122
|
+
'text__info--active': var(
|
|
123
|
+
--button-color__info--active,
|
|
124
|
+
var(--button-color__info)
|
|
125
|
+
),
|
|
102
126
|
'border__info': var(--button-background-color__info),
|
|
103
127
|
'border__info--hover': var(--button-background-color__info--hover),
|
|
104
128
|
'border__info--active': var(--button-background-color__info--active),
|
|
@@ -106,10 +130,14 @@ $button__solid: (
|
|
|
106
130
|
'bg__neutral--hover': var(--button-background-color__neutral--hover),
|
|
107
131
|
'bg__neutral--active': var(--button-background-color__neutral--active),
|
|
108
132
|
'text__neutral': var(--button-color__neutral),
|
|
109
|
-
'text__neutral--hover':
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
133
|
+
'text__neutral--hover': var(
|
|
134
|
+
--button-color__neutral--hover,
|
|
135
|
+
var(--button-color__neutral)
|
|
136
|
+
),
|
|
137
|
+
'text__neutral--active': var(
|
|
138
|
+
--button-color__neutral--active,
|
|
139
|
+
var(--button-color__neutral)
|
|
140
|
+
),
|
|
113
141
|
'border__neutral': var(--button-background-color__neutral),
|
|
114
142
|
'border__neutral--hover': var(--button-background-color__neutral--hover),
|
|
115
143
|
'border__neutral--active': var(--button-background-color__neutral--active),
|
|
@@ -127,10 +155,12 @@ $button__outline: (
|
|
|
127
155
|
'border__primary--hover': var(--button-color__primary-outline),
|
|
128
156
|
'border__primary--active': var(--button-color__primary-outline--active),
|
|
129
157
|
'bg__secondary': var(--button-background-color__secondary-outline),
|
|
130
|
-
'bg__secondary--hover':
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
158
|
+
'bg__secondary--hover': var(
|
|
159
|
+
--button-background-color__secondary-outline--hover
|
|
160
|
+
),
|
|
161
|
+
'bg__secondary--active': var(
|
|
162
|
+
--button-background-color__secondary-outline--active
|
|
163
|
+
),
|
|
134
164
|
'text__secondary': var(--button-color__secondary-outline),
|
|
135
165
|
'text__secondary--hover': var(--button-color__secondary-outline),
|
|
136
166
|
'text__secondary--active': var(--button-color__secondary-outline--active),
|
|
@@ -197,8 +227,9 @@ $button__text: (
|
|
|
197
227
|
'border__primary--active': transparent,
|
|
198
228
|
'bg__secondary': transparent,
|
|
199
229
|
'bg__secondary--hover': var(--button-background-color__secondary-text--hover),
|
|
200
|
-
'bg__secondary--active':
|
|
201
|
-
|
|
230
|
+
'bg__secondary--active': var(
|
|
231
|
+
--button-background-color__secondary-text--active
|
|
232
|
+
),
|
|
202
233
|
'text__secondary': var(--button-color__secondary-text),
|
|
203
234
|
'text__secondary--hover': var(--button-color__secondary-text),
|
|
204
235
|
'text__secondary--active': var(--button-color__secondary-text--active),
|
|
@@ -264,10 +295,12 @@ $button__outline: (
|
|
|
264
295
|
'border__primary--hover': var(--button-color__primary-outline),
|
|
265
296
|
'border__primary--active': var(--button-color__primary-outline--active),
|
|
266
297
|
'bg__secondary': var(--button-background-color__secondary-outline),
|
|
267
|
-
'bg__secondary--hover':
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
298
|
+
'bg__secondary--hover': var(
|
|
299
|
+
--button-background-color__secondary-outline--hover
|
|
300
|
+
),
|
|
301
|
+
'bg__secondary--active': var(
|
|
302
|
+
--button-background-color__secondary-outline--active
|
|
303
|
+
),
|
|
271
304
|
'text__secondary': var(--button-color__secondary-outline),
|
|
272
305
|
'text__secondary--hover': var(--button-color__secondary-outline),
|
|
273
306
|
'text__secondary--active': var(--button-color__secondary-outline--active),
|
|
@@ -334,8 +367,9 @@ $button__text: (
|
|
|
334
367
|
'border__primary--active': transparent,
|
|
335
368
|
'bg__secondary': transparent,
|
|
336
369
|
'bg__secondary--hover': var(--button-background-color__secondary-text--hover),
|
|
337
|
-
'bg__secondary--active':
|
|
338
|
-
|
|
370
|
+
'bg__secondary--active': var(
|
|
371
|
+
--button-background-color__secondary-text--active
|
|
372
|
+
),
|
|
339
373
|
'text__secondary': var(--button-color__secondary-text),
|
|
340
374
|
'text__secondary--hover': var(--button-color__secondary-text),
|
|
341
375
|
'text__secondary--active': var(--button-color__secondary-text--active),
|
|
@@ -785,6 +819,13 @@ $button__primary--hover: (
|
|
|
785
819
|
outline: 2px solid var(--color__neutral--50);
|
|
786
820
|
}
|
|
787
821
|
|
|
822
|
+
&:disabled {
|
|
823
|
+
background: var(--color__neutral--30);
|
|
824
|
+
border-color: transparent;
|
|
825
|
+
color: var(--color__neutral--50);
|
|
826
|
+
cursor: not-allowed;
|
|
827
|
+
}
|
|
828
|
+
|
|
788
829
|
&--disabled {
|
|
789
830
|
background: get-token($button__disabled, 'background');
|
|
790
831
|
border-color: transparent;
|
|
@@ -10,13 +10,19 @@
|
|
|
10
10
|
gap: $spacing--xxxs;
|
|
11
11
|
width: fit-content;
|
|
12
12
|
|
|
13
|
-
&--disabled
|
|
13
|
+
&--disabled,
|
|
14
|
+
&:has(input:disabled) {
|
|
14
15
|
color: var(--checkbox-color--disabled);
|
|
15
16
|
cursor: not-allowed;
|
|
16
17
|
|
|
17
18
|
.ds-checkbox__icon.ds-icon {
|
|
18
19
|
color: var(--checkbox-color--disabled);
|
|
19
20
|
}
|
|
21
|
+
|
|
22
|
+
.ds-checkbox__label-title,
|
|
23
|
+
.ds-checkbox__label-description {
|
|
24
|
+
color: var(--checkbox-color--disabled);
|
|
25
|
+
}
|
|
20
26
|
}
|
|
21
27
|
|
|
22
28
|
input[type='checkbox'].ds-checkbox__input {
|