@talixo-ds/options-input 0.0.22 → 0.0.30

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 (32) hide show
  1. package/__tests__/options-input.spec.tsx +229 -0
  2. package/dist/components/min-max-value-label.js.map +1 -1
  3. package/dist/components/options-input-content-item.js +1 -1
  4. package/dist/components/options-input-content-item.js.map +1 -1
  5. package/dist/components/options-input-dropdown-item.js +1 -1
  6. package/dist/components/options-input-dropdown-item.js.map +1 -1
  7. package/dist/components/tests/min-max-value-label.spec.js.map +1 -1
  8. package/dist/components/tests/options-input-content-item.spec.js +1 -1
  9. package/dist/components/tests/options-input-content-item.spec.js.map +1 -1
  10. package/dist/components/tests/options-input-dropdown-item.spec.js +1 -1
  11. package/dist/components/tests/options-input-dropdown-item.spec.js.map +1 -1
  12. package/dist/index.js.map +1 -1
  13. package/dist/options-input.js +1 -1
  14. package/dist/options-input.js.map +1 -1
  15. package/dist/types.js.map +1 -1
  16. package/jest.config.js +9 -0
  17. package/package.json +9 -3
  18. package/tsconfig.json +8 -0
  19. package/dist/__snapshots__/options-input.spec.tsx.snap +0 -251
  20. package/dist/components/tests/__snapshots__/min-max-value-label.spec.tsx.snap +0 -17
  21. package/dist/components/tests/__snapshots__/options-input-content-item.spec.tsx.snap +0 -138
  22. package/dist/components/tests/__snapshots__/options-input-dropdown-item.spec.tsx.snap +0 -134
  23. package/dist/options-input.composition.d.ts +0 -4
  24. package/dist/options-input.composition.js +0 -42
  25. package/dist/options-input.composition.js.map +0 -1
  26. package/dist/options-input.docs.mdx +0 -157
  27. package/dist/options-input.spec.d.ts +0 -1
  28. package/dist/options-input.spec.js +0 -162
  29. package/dist/options-input.spec.js.map +0 -1
  30. package/dist/preview-1718288241661.js +0 -7
  31. package/dist/styles.scss +0 -54
  32. package/dist/tsconfig.json +0 -40
@@ -1,251 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`OptionsInput snapshots should match snapshot 1`] = `
4
- <React.Fragment>
5
- <ForwardRef(Box)
6
- className="options-input__container test-class"
7
- data-testid="options-input-container"
8
- id="test-id"
9
- onBlur={[Function]}
10
- onClick={[Function]}
11
- onFocus={[Function]}
12
- sx={
13
- [
14
- {
15
- "&:hover": {
16
- "borderColor": "#d3d3d3",
17
- },
18
- },
19
- false,
20
- ]
21
- }
22
- tabIndex={0}
23
- >
24
- <ForwardRef(Box)
25
- display="flex"
26
- gap={1}
27
- >
28
- <OptionsInputContentItem
29
- disabled={false}
30
- displayMinMax={false}
31
- item={
32
- {
33
- "details": "This is your luggage",
34
- "icon": "luggage",
35
- "id": "luggage",
36
- "inputQuantity": 1,
37
- "label": "luggage",
38
- "max": 9,
39
- "min": 0,
40
- "quantity": 1,
41
- }
42
- }
43
- />
44
- <OptionsInputContentItem
45
- disabled={false}
46
- displayMinMax={false}
47
- item={
48
- {
49
- "icon": "football",
50
- "id": "sport-equipment",
51
- "inputQuantity": 1,
52
- "label": "sport equipment",
53
- "max": 1,
54
- "min": 0,
55
- "quantity": 1,
56
- }
57
- }
58
- />
59
- </ForwardRef(Box)>
60
- <Memo
61
- sx={
62
- {
63
- "color": [Function],
64
- }
65
- }
66
- />
67
- </ForwardRef(Box)>
68
- <ClickAwayListener
69
- onClickAway={[Function]}
70
- >
71
- <ForwardRef(Popper)
72
- open={false}
73
- placement="bottom-start"
74
- sx={[Function]}
75
- >
76
- <ForwardRef(List)
77
- className="options-input__dropdown-items-list"
78
- data-testid="options-dropdown-list"
79
- disablePadding={true}
80
- sx={
81
- {
82
- "bgcolor": "Background",
83
- "border": [Function],
84
- }
85
- }
86
- >
87
- <OptionsInputDropdownItem
88
- displayMinMax={false}
89
- index={0}
90
- item={
91
- {
92
- "details": "This is your luggage",
93
- "icon": "luggage",
94
- "id": "luggage",
95
- "inputQuantity": 1,
96
- "label": "luggage",
97
- "max": 9,
98
- "min": 0,
99
- "quantity": 1,
100
- }
101
- }
102
- onBlur={[Function]}
103
- onChange={[Function]}
104
- />
105
- <OptionsInputDropdownItem
106
- displayMinMax={false}
107
- index={1}
108
- item={
109
- {
110
- "icon": "football",
111
- "id": "sport-equipment",
112
- "inputQuantity": 1,
113
- "label": "sport equipment",
114
- "max": 1,
115
- "min": 0,
116
- "quantity": 1,
117
- }
118
- }
119
- onBlur={[Function]}
120
- onChange={[Function]}
121
- />
122
- </ForwardRef(List)>
123
- </ForwardRef(Popper)>
124
- </ClickAwayListener>
125
- </React.Fragment>
126
- `;
127
-
128
- exports[`OptionsInput snapshots should render disabled input properly 1`] = `
129
- <React.Fragment>
130
- <ForwardRef(Box)
131
- className="options-input__container options-input__container--disabled test-class"
132
- data-testid="options-input-container"
133
- id="test-id"
134
- onBlur={[Function]}
135
- onClick={[Function]}
136
- onFocus={[Function]}
137
- sx={
138
- [
139
- {
140
- "&:hover": {
141
- "borderColor": "#d3d3d3",
142
- },
143
- },
144
- false,
145
- ]
146
- }
147
- tabIndex={0}
148
- >
149
- <ForwardRef(Box)
150
- display="flex"
151
- gap={1}
152
- >
153
- <OptionsInputContentItem
154
- disabled={true}
155
- displayMinMax={false}
156
- item={
157
- {
158
- "details": "This is your luggage",
159
- "icon": "luggage",
160
- "id": "luggage",
161
- "inputQuantity": 1,
162
- "label": "luggage",
163
- "max": 9,
164
- "min": 0,
165
- "quantity": 1,
166
- }
167
- }
168
- />
169
- <OptionsInputContentItem
170
- disabled={true}
171
- displayMinMax={false}
172
- item={
173
- {
174
- "icon": "football",
175
- "id": "sport-equipment",
176
- "inputQuantity": 1,
177
- "label": "sport equipment",
178
- "max": 1,
179
- "min": 0,
180
- "quantity": 1,
181
- }
182
- }
183
- />
184
- </ForwardRef(Box)>
185
- <Memo
186
- sx={
187
- {
188
- "color": [Function],
189
- }
190
- }
191
- />
192
- </ForwardRef(Box)>
193
- <ClickAwayListener
194
- onClickAway={[Function]}
195
- >
196
- <ForwardRef(Popper)
197
- open={false}
198
- placement="bottom-start"
199
- sx={[Function]}
200
- >
201
- <ForwardRef(List)
202
- className="options-input__dropdown-items-list"
203
- data-testid="options-dropdown-list"
204
- disablePadding={true}
205
- sx={
206
- {
207
- "bgcolor": "Background",
208
- "border": [Function],
209
- }
210
- }
211
- >
212
- <OptionsInputDropdownItem
213
- displayMinMax={false}
214
- index={0}
215
- item={
216
- {
217
- "details": "This is your luggage",
218
- "icon": "luggage",
219
- "id": "luggage",
220
- "inputQuantity": 1,
221
- "label": "luggage",
222
- "max": 9,
223
- "min": 0,
224
- "quantity": 1,
225
- }
226
- }
227
- onBlur={[Function]}
228
- onChange={[Function]}
229
- />
230
- <OptionsInputDropdownItem
231
- displayMinMax={false}
232
- index={1}
233
- item={
234
- {
235
- "icon": "football",
236
- "id": "sport-equipment",
237
- "inputQuantity": 1,
238
- "label": "sport equipment",
239
- "max": 1,
240
- "min": 0,
241
- "quantity": 1,
242
- }
243
- }
244
- onBlur={[Function]}
245
- onChange={[Function]}
246
- />
247
- </ForwardRef(List)>
248
- </ForwardRef(Popper)>
249
- </ClickAwayListener>
250
- </React.Fragment>
251
- `;
@@ -1,17 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`MinMaxValueLabel should match snapshot 1`] = `
4
- <ForwardRef(Typography)
5
- color="black"
6
- sx={
7
- {
8
- "my": 0,
9
- }
10
- }
11
- variant="caption"
12
- >
13
- min: 0
14
- ,
15
- max: 100
16
- </ForwardRef(Typography)>
17
- `;
@@ -1,138 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`OptionsInputDropdownItem should match snapshot 1`] = `
4
- <ForwardRef(Box)
5
- alignItems="center"
6
- color="#a4a5b2"
7
- data-testid="option-item"
8
- display="flex"
9
- gap={0.5}
10
- >
11
- <ForwardRef(Tooltip)
12
- arrow={true}
13
- placement="top"
14
- title={
15
- <ForwardRef(Box)
16
- display="flex"
17
- flexDirection="column"
18
- >
19
- <ForwardRef(Typography)
20
- fontWeight={600}
21
- sx={
22
- {
23
- "my": 0,
24
- }
25
- }
26
- variant="caption"
27
- >
28
- luggage
29
- </ForwardRef(Typography)>
30
- <ForwardRef(Typography)
31
- sx={
32
- {
33
- "my": 0,
34
- }
35
- }
36
- variant="caption"
37
- >
38
- This is your luggage
39
- </ForwardRef(Typography)>
40
- <MinMaxValueLabel
41
- max={10}
42
- min={-10}
43
- />
44
- </ForwardRef(Box)>
45
- }
46
- >
47
- <span>
48
- <div
49
- color="#a4a5b2"
50
- fontSize="medium"
51
- />
52
- </span>
53
- </ForwardRef(Tooltip)>
54
- <ForwardRef(Typography)
55
- color="#a4a5b2"
56
- variant="h6"
57
- >
58
- 0
59
- </ForwardRef(Typography)>
60
- </ForwardRef(Box)>
61
- `;
62
-
63
- exports[`OptionsInputDropdownItem should not render tooltip when there is no label 1`] = `
64
- <ForwardRef(Box)
65
- alignItems="center"
66
- color="#a4a5b2"
67
- data-testid="option-item"
68
- display="flex"
69
- gap={0.5}
70
- >
71
- <div
72
- color="#a4a5b2"
73
- fontSize="medium"
74
- />
75
- <ForwardRef(Typography)
76
- color="#a4a5b2"
77
- variant="h6"
78
- >
79
- 0
80
- </ForwardRef(Typography)>
81
- </ForwardRef(Box)>
82
- `;
83
-
84
- exports[`OptionsInputDropdownItem should render proper alternative styling 1`] = `
85
- <ForwardRef(Box)
86
- alignItems="center"
87
- color="#000000"
88
- data-testid="option-item"
89
- display="flex"
90
- gap={0.5}
91
- >
92
- <ForwardRef(Tooltip)
93
- arrow={true}
94
- placement="top"
95
- title={
96
- <ForwardRef(Box)
97
- display="flex"
98
- flexDirection="column"
99
- >
100
- <ForwardRef(Typography)
101
- fontWeight={600}
102
- sx={
103
- {
104
- "my": 0,
105
- }
106
- }
107
- variant="caption"
108
- >
109
- luggage
110
- </ForwardRef(Typography)>
111
- <ForwardRef(Typography)
112
- sx={
113
- {
114
- "my": 0,
115
- }
116
- }
117
- variant="caption"
118
- >
119
- This is your luggage
120
- </ForwardRef(Typography)>
121
- </ForwardRef(Box)>
122
- }
123
- >
124
- <span>
125
- <div
126
- color="#000000"
127
- fontSize="medium"
128
- />
129
- </span>
130
- </ForwardRef(Tooltip)>
131
- <ForwardRef(Typography)
132
- color="#000000"
133
- variant="h6"
134
- >
135
- 1
136
- </ForwardRef(Typography)>
137
- </ForwardRef(Box)>
138
- `;
@@ -1,134 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`OptionsInputDropdownItem should match snapshot 1`] = `
4
- <React.Fragment>
5
- <ForwardRef(Divider)
6
- sx={
7
- {
8
- "color": [Function],
9
- }
10
- }
11
- />
12
- <ForwardRef(ListItem)
13
- className="options-input__dropdown-item options-input__dropdown-item--empty"
14
- sx={
15
- {
16
- "display": "flex",
17
- "justifyContent": "space-between",
18
- }
19
- }
20
- >
21
- <ForwardRef(Box)
22
- alignItems="center"
23
- display="flex"
24
- >
25
- <div
26
- color="black"
27
- fontSize="small"
28
- />
29
- <ForwardRef(TextField)
30
- InputProps={
31
- {
32
- "disableUnderline": true,
33
- }
34
- }
35
- className="options-input__dropdown-item-input"
36
- inputProps={
37
- {
38
- "data-testid": "dropdown-item-input",
39
- "inputMode": "numeric",
40
- "pattern": "-?[0-9]*",
41
- "style": {
42
- "textAlign": "center",
43
- },
44
- }
45
- }
46
- onBlur={[MockFunction]}
47
- onChange={[Function]}
48
- value={0}
49
- variant="standard"
50
- />
51
- <ForwardRef(Box)
52
- display="flex"
53
- flexDirection="column"
54
- justifyContent="center"
55
- minWidth="5rem"
56
- paddingLeft={1}
57
- paddingRight={2}
58
- >
59
- <ForwardRef(Typography)
60
- color="black"
61
- fontSize={13}
62
- fontWeight={600}
63
- sx={
64
- {
65
- "my": 0,
66
- }
67
- }
68
- variant="caption"
69
- >
70
- luggage-id
71
- </ForwardRef(Typography)>
72
- <ForwardRef(Box)
73
- data-testid="option-details-container"
74
- height="1rem"
75
- onMouseEnter={[Function]}
76
- onMouseLeave={[Function]}
77
- position="relative"
78
- >
79
- <ForwardRef(Typography)
80
- color="gray"
81
- data-testid="option-details"
82
- sx={
83
- {
84
- "my": 0,
85
- "position": "fixed",
86
- "zIndex": 10000,
87
- }
88
- }
89
- variant="caption"
90
- >
91
- This is your lu...
92
- </ForwardRef(Typography)>
93
- </ForwardRef(Box)>
94
- </ForwardRef(Box)>
95
- </ForwardRef(Box)>
96
- <ForwardRef(ButtonGroup)
97
- className="options-input__dropdown-item-buttons"
98
- size="small"
99
- variant="outlined"
100
- >
101
- <ForwardRef(Button)
102
- className="options-input__dropdown-item-button"
103
- color="primary"
104
- disabled={false}
105
- onClick={[Function]}
106
- role="button"
107
- >
108
- <Memo
109
- sx={
110
- {
111
- "color": "primary",
112
- }
113
- }
114
- />
115
- </ForwardRef(Button)>
116
- <ForwardRef(Button)
117
- className="options-input__dropdown-item-button"
118
- color="primary"
119
- disabled={false}
120
- onClick={[Function]}
121
- role="button"
122
- >
123
- <Memo
124
- sx={
125
- {
126
- "color": "primary",
127
- }
128
- }
129
- />
130
- </ForwardRef(Button)>
131
- </ForwardRef(ButtonGroup)>
132
- </ForwardRef(ListItem)>
133
- </React.Fragment>
134
- `;
@@ -1,4 +0,0 @@
1
- export declare const BasicOptionsInput: () => import("react/jsx-runtime").JSX.Element;
2
- export declare const OptionsInputWithDefaultValues: () => import("react/jsx-runtime").JSX.Element;
3
- export declare const OptionsInputWithPersistentOptions: () => import("react/jsx-runtime").JSX.Element;
4
- export declare const OptionsInputDisabled: () => import("react/jsx-runtime").JSX.Element;
@@ -1,42 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { ThemeProvider } from '@mui/material/styles';
3
- import { NextBookingTheme } from "@talixo-ds/component.next-booking-theme";
4
- import { NextDashboardTheme } from "@talixo-ds/component.next-dashboard-theme";
5
- import { OptionsInput } from './options-input';
6
- const options = [
7
- {
8
- id: 'abc',
9
- icon: 'Abc',
10
- label: 'ABC',
11
- details: 'This label is longer so it should be hidden.',
12
- min: 3,
13
- max: 100
14
- },
15
- {
16
- id: 'add',
17
- icon: 'This icon does not exist',
18
- label: 'Add',
19
- details: 'Add new products',
20
- max: 10
21
- },
22
- {
23
- id: 'golf',
24
- icon: 'GolfSticks',
25
- label: 'Golf'
26
- },
27
- {
28
- id: 'pets',
29
- icon: 'Pets',
30
- details: 'Long pet details to display.'
31
- }
32
- ];
33
- const defaultValue = {
34
- abc: 2,
35
- adb: 1
36
- };
37
- const persistentOptions = ['add'];
38
- export const BasicOptionsInput = () => _jsx(OptionsInput, { options: options });
39
- export const OptionsInputWithDefaultValues = () => (_jsx(ThemeProvider, { theme: NextDashboardTheme, children: _jsx(OptionsInput, { options: options, defaultValue: defaultValue }) }));
40
- export const OptionsInputWithPersistentOptions = () => (_jsx(ThemeProvider, { theme: NextBookingTheme, children: _jsx(OptionsInput, { options: options, persistentOptions: persistentOptions, itemsGap: 5 }) }));
41
- export const OptionsInputDisabled = () => (_jsx(ThemeProvider, { theme: NextBookingTheme, children: _jsx(OptionsInput, { options: options, defaultValue: defaultValue, disabled: true }) }));
42
- //# sourceMappingURL=options-input.composition.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"options-input.composition.js","sourceRoot":"","sources":["../options-input.composition.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,GAAG;IACZ;QACE,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,8CAA8C;QACvD,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;KACT;IACH;QACE,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,0BAA0B;QAChC,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,kBAAkB;QAC3B,GAAG,EAAE,EAAE;KACR;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,8BAA8B;KACxC;CACF,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,CAAC;CACP,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,CAAC;AAE1E,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE,CAAC,CAC/C,KAAC,aAAa,IAAC,KAAK,EAAE,kBAAkB,YAC1C,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,GAAI,GAC5C,CACnB,CAAA;AAED,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,KAAC,aAAa,IAAC,KAAK,EAAE,gBAAgB,YACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,GAAI,GACvE,CACjB,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,KAAC,aAAa,IAAC,KAAK,EAAE,gBAAgB,YACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,SAAG,GACzD,CACnB,CAAA"}