pixel-react 1.5.5 → 1.5.6

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 (57) hide show
  1. package/lib/components/DatePicker/types.d.ts +4 -0
  2. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
  3. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  4. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  7. package/lib/components/FileDropzone/types.d.ts +3 -0
  8. package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
  9. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
  10. package/lib/index.d.ts +49 -2
  11. package/lib/index.esm.js +899 -550
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +899 -549
  14. package/lib/index.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/assets/icons/dashboard_icon.svg +31 -0
  17. package/src/assets/styles/_colors.scss +1 -0
  18. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  19. package/src/components/DatePicker/DatePicker.scss +4 -3
  20. package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
  21. package/src/components/DatePicker/DatePicker.tsx +62 -49
  22. package/src/components/DatePicker/types.ts +5 -0
  23. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
  24. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
  25. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
  26. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
  27. package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
  28. package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
  29. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
  30. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
  31. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
  32. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
  34. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
  35. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
  36. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
  37. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
  38. package/src/components/Excel/ExcelFile.stories.tsx +42 -43
  39. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
  40. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
  41. package/src/components/FileDropzone/Dropzone.tsx +2 -0
  42. package/src/components/FileDropzone/FileDropzone.scss +1 -2
  43. package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
  44. package/src/components/FileDropzone/FileDropzone.tsx +11 -3
  45. package/src/components/FileDropzone/types.ts +5 -0
  46. package/src/components/Icon/Icon.stories.tsx +5 -4
  47. package/src/components/Icon/iconList.ts +2 -0
  48. package/src/components/MultiSelect/MultiSelect.scss +41 -50
  49. package/src/components/MultiSelect/MultiSelect.tsx +48 -48
  50. package/src/components/Select/Select.scss +11 -1
  51. package/src/components/Select/Select.tsx +2 -2
  52. package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
  53. package/src/components/StateDropdown/StateDropdown.tsx +27 -12
  54. package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
  55. package/src/components/TableTree/TableTree.scss +17 -15
  56. package/src/components/TableTree/TableTree.tsx +42 -40
  57. package/src/index.ts +2 -0
@@ -38,7 +38,9 @@ const ChipElement = ({
38
38
  title={label?.length > 25 ? label : ''}
39
39
  zIndex={zIndex + 1}
40
40
  >
41
- {truncateText(label, 25)}
41
+ <Typography fontSize={10} lineHeight={'14px'} className="stye">
42
+ {truncateText(label, 25)}
43
+ </Typography>
42
44
  </Tooltip>
43
45
  </span>
44
46
  {!disableChip && (
@@ -342,6 +344,7 @@ const MultiSelect = ({
342
344
  (isFieldSkipped && required),
343
345
  'default-label': !isOpen && !selectedOptions?.length,
344
346
  })}
347
+ required={required}
345
348
  children={label}
346
349
  />
347
350
  ) : (
@@ -355,26 +358,10 @@ const MultiSelect = ({
355
358
  )}
356
359
 
357
360
  {!withSelectButton && (
358
- <div className='ff-multiselect-chip-parent-container'>
359
- <div className="ff-multiselect-chip-container">
360
- {displayCount ? (
361
- <>
362
- {selectedOptions
363
- .slice(0, maxVisibleChips)
364
- .map((option) => (
365
- <ChipElement
366
- zIndex={zIndex}
367
- key={getLabel(option, labelAccessor)}
368
- label={getLabel(option, labelAccessor) || ''}
369
- onChipCloseClick={(e) =>
370
- handleChipCloseClick(option, e)
371
- }
372
- disableChip={option?.isDisabled || false}
373
- />
374
- ))}
375
- </>
376
- ) : (
377
- selectedOptions.map((option) => (
361
+ <div className="ff-multiselect-chip-container">
362
+ {displayCount ? (
363
+ <>
364
+ {selectedOptions.slice(0, maxVisibleChips).map((option) => (
378
365
  <ChipElement
379
366
  zIndex={zIndex}
380
367
  key={getLabel(option, labelAccessor)}
@@ -384,38 +371,51 @@ const MultiSelect = ({
384
371
  }
385
372
  disableChip={option?.isDisabled || false}
386
373
  />
387
- ))
388
- )}
389
- <div className="ff-multiselect-input-container">
390
- <input
391
- value={searchedKeyword}
392
- type={type}
393
- autoComplete="off"
394
- placeholder={placeholderForSearching}
395
- ref={inputRef}
396
- onChange={handleSearch}
397
- onKeyDown={handleKeyEnter}
398
- id="input-ele"
399
- className="ff-select-input"
400
- style={{
401
- display:
402
- isOpen || selectedOptions.length ? 'inherit' : 'none',
403
- }}
374
+ ))}
375
+ </>
376
+ ) : (
377
+ selectedOptions.map((option) => (
378
+ <ChipElement
379
+ zIndex={zIndex}
380
+ key={getLabel(option, labelAccessor)}
381
+ label={getLabel(option, labelAccessor) || ''}
382
+ onChipCloseClick={(e) => handleChipCloseClick(option, e)}
383
+ disableChip={option?.isDisabled || false}
404
384
  />
405
- </div>
406
- </div>
407
- {hiddenCount > 0 && displayCount && (
408
- <div
409
- className="ff-multiselect-more-chip"
410
- onClick={toggleDropdown}
411
- >
412
- +{hiddenCount}
413
- </div>
385
+ ))
414
386
  )}
387
+ <div className="ff-multiselect-input-container">
388
+ <input
389
+ value={searchedKeyword}
390
+ type={type}
391
+ autoComplete="off"
392
+ placeholder={placeholderForSearching}
393
+ ref={inputRef}
394
+ onChange={handleSearch}
395
+ onKeyDown={handleKeyEnter}
396
+ id="input-ele"
397
+ className="ff-select-input"
398
+ style={{
399
+ display:
400
+ isOpen || selectedOptions.length ? 'inherit' : 'none',
401
+ }}
402
+ />
403
+ </div>
415
404
  </div>
416
405
  )}
417
406
  </div>
418
-
407
+ {hiddenCount > 0 && displayCount && (
408
+ <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
409
+ <Typography
410
+ fontSize={12}
411
+ fontWeight="semi-bold"
412
+ lineHeight="16px"
413
+ color="var(--brand-color)"
414
+ >
415
+ +{hiddenCount}
416
+ </Typography>
417
+ </div>
418
+ )}
419
419
  <div
420
420
  onClick={(e) => {
421
421
  toggleDropdown(e);
@@ -38,7 +38,17 @@
38
38
  box-sizing: border-box;
39
39
 
40
40
  &:hover {
41
- @include select-state-style(var(--ff-select-brand-color));
41
+ border-color: var(--ff-select-brand-color);
42
+
43
+ .ff-select-labels {
44
+ color: var(--ff-select-default-color);
45
+ }
46
+
47
+ .ff-select-arrows-wrapper {
48
+ .ff-select-arrows {
49
+ @include svg-path-style(var(--ff-select-text-hover-color));
50
+ }
51
+ }
42
52
  }
43
53
 
44
54
  .ff-select-inputField {
@@ -216,8 +216,8 @@ const Select: FC<SelectProps> = ({
216
216
  {errorMsg && (
217
217
  <Typography
218
218
  as="div"
219
- lineHeight="12px"
220
- fontSize={8}
219
+ lineHeight="15px"
220
+ fontSize={10}
221
221
  color="var(--error_light)"
222
222
  className="ff-select-error-msg"
223
223
  >
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import StateDropdown from './StateDropdown';
3
+ import React from 'react';
3
4
 
4
5
  const meta: Meta<typeof StateDropdown> = {
5
6
  title: 'Components/StateDropdown',
@@ -23,6 +24,8 @@ export const Disable: Story = {
23
24
  isApprovePage: false,
24
25
  disabled: true,
25
26
  userHasOnlyViewAccess: true,
27
+ showBorder: true,
28
+ height:24,
26
29
  },
27
30
  };
28
31
 
@@ -91,6 +94,8 @@ export const NewState: Story = {
91
94
  disabled={false}
92
95
  isOnlyReviewer={false}
93
96
  userHasOnlyViewAccess={false}
97
+ showBorder={true}
98
+ height={24}
94
99
  />
95
100
  );
96
101
  },
@@ -11,6 +11,9 @@ const StateDropdown = ({
11
11
  disabled = false,
12
12
  isOnlyReviewer = false,
13
13
  userHasOnlyViewAccess = false,
14
+ showBorder=true,
15
+ height=24,
16
+ zIndex=100,
14
17
  }: StateDropdownProps) => {
15
18
  let currentState = value.toUpperCase();
16
19
  let content;
@@ -129,9 +132,11 @@ const StateDropdown = ({
129
132
  optionsList={options}
130
133
  selectedOption={selectedOption}
131
134
  showLabel={false}
132
- showBorder={false}
135
+ showBorder={showBorder}
133
136
  disableInput={true}
134
- height={24}
137
+ height={height}
138
+ selectedOptionColor={'var(--brand-color'}
139
+ optionZIndex={zIndex}
135
140
  />
136
141
  ) : (
137
142
  <Select
@@ -141,9 +146,11 @@ const StateDropdown = ({
141
146
  optionsList={options}
142
147
  selectedOption={selectedOption}
143
148
  showLabel={false}
144
- showBorder={false}
149
+ showBorder={showBorder}
145
150
  disableInput={true}
146
- height={24}
151
+ height={height}
152
+ selectedOptionColor={'var(--brand-color'}
153
+ optionZIndex={zIndex}
147
154
  />
148
155
  );
149
156
  } else if (
@@ -158,9 +165,11 @@ const StateDropdown = ({
158
165
  optionsList={options}
159
166
  selectedOption={selectedOption}
160
167
  showLabel={false}
161
- showBorder={false}
168
+ showBorder={showBorder}
162
169
  disableInput={true}
163
- height={24}
170
+ height={height}
171
+ selectedOptionColor={'var(--brand-color'}
172
+ optionZIndex={zIndex}
164
173
  />
165
174
  );
166
175
  } else if (currentState === 'APPROVED') {
@@ -172,9 +181,11 @@ const StateDropdown = ({
172
181
  optionsList={options}
173
182
  selectedOption={selectedOption}
174
183
  showLabel={false}
175
- showBorder={false}
184
+ showBorder={showBorder}
176
185
  disableInput={true}
177
- height={24}
186
+ height={height}
187
+ selectedOptionColor={'var(--brand-color'}
188
+ optionZIndex={zIndex}
178
189
  />
179
190
  );
180
191
  } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
@@ -186,9 +197,11 @@ const StateDropdown = ({
186
197
  optionsList={options}
187
198
  selectedOption={selectedOption}
188
199
  showLabel={false}
189
- showBorder={false}
200
+ showBorder={showBorder}
190
201
  disableInput={true}
191
- height={24}
202
+ height={height}
203
+ selectedOptionColor={'var(--brand-color'}
204
+ optionZIndex={zIndex}
192
205
  />
193
206
  );
194
207
  } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
@@ -200,9 +213,11 @@ const StateDropdown = ({
200
213
  optionsList={options}
201
214
  selectedOption={selectedOption}
202
215
  showLabel={false}
203
- showBorder={false}
216
+ showBorder={showBorder}
204
217
  disableInput={true}
205
- height={24}
218
+ height={height}
219
+ selectedOptionColor={'var(--brand-color'}
220
+ optionZIndex={zIndex}
206
221
  />
207
222
  );
208
223
  } else {
@@ -17,5 +17,11 @@ export interface StateDropdownProps{
17
17
  userHasOnlyViewAccess:boolean;
18
18
 
19
19
  handleStateValueClick:()=>void;
20
+
21
+ showBorder?:boolean;
22
+
23
+ height?:number;
24
+
25
+ zIndex?:number;
20
26
  }
21
27
 
@@ -108,17 +108,21 @@
108
108
  padding: 0 8px;
109
109
  white-space: nowrap;
110
110
  text-overflow: ellipsis;
111
-
112
111
  &:first-child {
113
- position: sticky;
114
-
115
112
  padding-left: calc(var(--level) * var(--indent-size));
116
113
  height: 32px;
117
- position: sticky; /* Make first td sticky */
118
- left: 0;
119
- z-index: 10; /* Ensure it stays on top of the other cells */
120
- background-color: var(--slider-table-color);
121
- // Vertical line connecting the node to the parent
114
+ z-index: 0;
115
+ }
116
+
117
+ .first-div {
118
+ background-color: white;
119
+ display: flex;
120
+ width: 100%;
121
+ height: 32px;
122
+
123
+ &:hover {
124
+ background-color: var(--hover-color);
125
+ }
122
126
  &::before {
123
127
  content: '';
124
128
  position: absolute;
@@ -126,7 +130,6 @@
126
130
  left: calc(var(--level) * var(--indent-size) - 4px);
127
131
  width: 1px;
128
132
  height: calc(var(--total-children-height));
129
- // background-color: var(--tree-connecting-lines-color);
130
133
  background-color: var(--tree-connecting-lines-color);
131
134
  z-index: 9999;
132
135
  }
@@ -155,15 +158,14 @@
155
158
  content: none;
156
159
  }
157
160
  }
158
-
159
- th:first-child,
160
- td:first-child {
161
- position: sticky;
162
- left: 0;
163
- }
164
161
  }
165
162
 
166
163
  .ff-title-action-container {
167
164
  display: none;
168
165
  align-items: center;
169
166
  }
167
+ th:first-child,
168
+ td:first-child {
169
+ position: sticky;
170
+ left: 0;
171
+ }
@@ -169,46 +169,48 @@ const TableTree = ({
169
169
  if (column.accessor === 'title') {
170
170
  return (
171
171
  <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
172
- <span className="ff-toggle-folder" onClick={handleToggleExpand}>
173
- {node.folder && (
174
- <span
175
- className={`ff-toggle-arrow-icon ${
176
- isExpanded ? 'ff-expanded' : 'ff-collapsed'
177
- }`}
178
- >
179
- <Arrow />
180
- </span>
181
- )}
182
- </span>
183
-
184
- <div
185
- className="ff-title"
186
- style={{ fontWeight: node.folder ? 600 : 400 }}
187
- onClick={(event) => onClick(event, node)}
188
- >
189
- {select === 'checkbox' && (
190
- <Checkbox
191
- checked={selected.includes(node.key)}
192
- onChange={(e) => handleCheckBoxChange(e, node)}
193
- />
194
- )}
195
- {select === 'radio' && (
196
- <RadioButton
197
- name={node.title}
198
- value={node.key}
199
- onChange={(e) => handleCheckBoxChange(e, node)}
200
- />
201
- )}
202
-
203
- <Typography className="ff-title-label" fontWeight="medium">
204
- {prepareData(node, column)}
205
- </Typography>
206
-
207
- {column.actions && (
208
- <div className="ff-title-action-container">
209
- {column.actions(node)}
210
- </div>
211
- )}
172
+ <div className="first-div">
173
+ {' '}
174
+ <span className="ff-toggle-folder" onClick={handleToggleExpand}>
175
+ {node.folder && (
176
+ <span
177
+ className={`ff-toggle-arrow-icon ${
178
+ isExpanded ? 'ff-expanded' : 'ff-collapsed'
179
+ }`}
180
+ >
181
+ <Arrow />
182
+ </span>
183
+ )}
184
+ </span>
185
+ <div
186
+ className="ff-title"
187
+ style={{ fontWeight: node.folder ? 600 : 400 }}
188
+ onClick={(event) => onClick(event, node)}
189
+ >
190
+ {select === 'checkbox' && (
191
+ <Checkbox
192
+ checked={selected.includes(node.key)}
193
+ onChange={(e) => handleCheckBoxChange(e, node)}
194
+ />
195
+ )}
196
+ {select === 'radio' && (
197
+ <RadioButton
198
+ name={node.title}
199
+ value={node.key}
200
+ onChange={(e) => handleCheckBoxChange(e, node)}
201
+ />
202
+ )}
203
+
204
+ <Typography className="ff-title-label" fontWeight="medium">
205
+ {prepareData(node, column)}
206
+ </Typography>
207
+
208
+ {column.actions && (
209
+ <div className="ff-title-action-container">
210
+ {column.actions(node)}
211
+ </div>
212
+ )}
213
+ </div>
212
214
  </div>
213
215
  </td>
214
216
  );
package/src/index.ts CHANGED
@@ -64,6 +64,7 @@ import StatusCard from './components/StatusCard';
64
64
  import VariableDropdown from './components/Editor/VariableDropdown';
65
65
 
66
66
  import LineChart from './components/Charts/LineChart';
67
+ import DownloadClient from './components/DownloadClient/DownloadClient';
67
68
  // Utils imports
68
69
  import { checkEmpty } from './utils/checkEmpty/checkEmpty';
69
70
  import {
@@ -157,6 +158,7 @@ export {
157
158
  ToggleSwitch,
158
159
  Avatar,
159
160
  VariableDropdown,
161
+ DownloadClient,
160
162
  // utils exports
161
163
  checkEmpty,
162
164
  getExtension,