pixel-react 1.7.0 → 1.7.2

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 (69) hide show
  1. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +2 -0
  2. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +2 -0
  3. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  4. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  5. package/lib/components/PhoneInput/PhoneInput.d.ts +0 -1
  6. package/lib/components/PhoneInput/types.d.ts +6 -0
  7. package/lib/components/Select/Select.stories.d.ts +0 -1
  8. package/lib/index.d.ts +8 -0
  9. package/lib/index.esm.js +105 -61
  10. package/lib/index.esm.js.map +1 -1
  11. package/lib/index.js +105 -61
  12. package/lib/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/assets/Themes/BaseTheme.scss +4 -0
  15. package/src/assets/Themes/DarkTheme.scss +5 -1
  16. package/src/assets/icons/approval_pending.svg +8 -8
  17. package/src/assets/icons/auto_save_icon.svg +4 -0
  18. package/src/assets/icons/configuration.svg +3 -3
  19. package/src/assets/icons/defects.svg +8 -8
  20. package/src/assets/icons/element.svg +4 -4
  21. package/src/assets/icons/project_element.svg +4 -4
  22. package/src/assets/icons/step_group.svg +10 -10
  23. package/src/assets/icons/variable.svg +3 -3
  24. package/src/assets/icons/web_service_icon.svg +3 -3
  25. package/src/assets/styles/_colors.scss +0 -1
  26. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +1 -1
  27. package/src/components/DownloadClient/DownloadClient.stories.tsx +1 -1
  28. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
  29. package/src/components/Excel/ExcelFile/ExcelFile.scss +43 -56
  30. package/src/components/Excel/ExcelFile/ExcelFile.tsx +18 -13
  31. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -0
  32. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +1 -2
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +9 -2
  34. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +133 -117
  35. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +6 -0
  36. package/src/components/Excel/ExcelFile.stories.tsx +1 -0
  37. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +19 -8
  38. package/src/components/Icon/iconList.ts +2 -0
  39. package/src/components/PhoneInput/PhoneInput.stories.tsx +16 -41
  40. package/src/components/PhoneInput/PhoneInput.tsx +10 -2
  41. package/src/components/PhoneInput/phoneInput.scss +898 -0
  42. package/src/components/PhoneInput/types.ts +6 -0
  43. package/src/components/TableTree/data.ts +0 -45
  44. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  45. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  46. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  47. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  48. package/lib/components/AddButton/AddButton.d.ts +0 -5
  49. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  50. package/lib/components/AddButton/index.d.ts +0 -1
  51. package/lib/components/AddButton/types.d.ts +0 -4
  52. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  53. package/lib/components/AddVariables/index.d.ts +0 -1
  54. package/lib/components/AddVariables/types.d.ts +0 -35
  55. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  56. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  57. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  58. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  59. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  60. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  61. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  62. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  63. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  64. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  65. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  66. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  67. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  68. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  69. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -3,144 +3,160 @@
3
3
  .ff-excel {
4
4
  display: flex;
5
5
  flex-direction: column;
6
- }
7
6
 
8
- .ff-spreadsheet {
9
- --background-color: var(--drawer-footer-bg);
10
- --text-color: var(--text-color);
11
- --readonly-text-color: var(--toggle-strip-active);
12
- --outline-color: var(--toggle-strip-active);
13
- --outline-background-color: var(--overlay-bg);
14
- --border-color: var(--excel-sheet-border);
15
- --header-background-color: var(--pop-up-background-blur);
16
- --elevation: var(--brand-color);
17
-
18
- position: relative;
19
- overflow: visible;
20
- background: var(--background-color);
21
- color: var(--text-color);
22
- display: inline-block;
23
- }
7
+ .ff-excel-toolbar-container {
8
+ position: relative;
9
+ top: 0;
10
+ background-color: var(--excel-toolbar-bg);
11
+ padding: 4px 8px;
12
+ margin-bottom: 20px;
13
+ }
24
14
 
25
- .ff-spreadsheet-active-cell {
26
- position: absolute;
27
- border: 2px solid var(--outline-color);
28
- box-sizing: border-box;
29
- }
15
+ .ff-spreadsheet {
16
+ --background-color: var(--drawer-footer-bg);
17
+ --text-color: var(--text-color);
18
+ --readonly-text-color: var(--toggle-strip-active);
19
+ --outline-color: var(--toggle-strip-active);
20
+ --outline-background-color: var(--overlay-bg);
21
+ --border-color: var(--excel-sheet-border);
22
+ --header-background-color: var(--excel-header-bg);
23
+ --elevation: var(--brand-color);
24
+
25
+ position: relative;
26
+ overflow: scroll;
27
+ background: var(--background-color);
28
+ color: var(--text-color);
29
+ scrollbar-width: none;
30
+ display: inline-block;
31
+ }
30
32
 
31
- .ff-spreadsheet-active-cell--edit {
32
- background: var(--background-color);
33
- box-shadow: var(--elevation);
34
- }
33
+ .ff-spreadsheet-active-cell {
34
+ position: absolute;
35
+ border: 2px solid var(--outline-color);
36
+ box-sizing: border-box;
37
+ }
35
38
 
36
- .ff-spreadsheet-table {
37
- overflow: scroll;
38
- &::-webkit-scrollbar {
39
- height: 0px;
39
+ .ff-spreadsheet-active-cell--edit {
40
+ background: var(--background-color);
41
+ box-shadow: var(--elevation);
40
42
  }
41
43
 
42
- margin-top: 20px;
43
- border-collapse: collapse;
44
- table-layout: fixed;
45
- }
44
+ .ff-spreadsheet-table {
45
+ overflow: scroll;
46
+ top: 0;
47
+ left: 0;
48
+ margin: 0;
49
+ position: relative;
50
+ &::-webkit-scrollbar {
51
+ height: 0px;
52
+ }
53
+ border-collapse: collapse;
54
+ table-layout: fixed;
55
+ }
46
56
 
47
- .ff-spreadsheet-cell {
48
- outline: none;
49
- position: relative;
50
- z-index: 0;
51
- }
57
+ .ff-spreadsheet-cell {
58
+ outline: none;
59
+ position: relative;
60
+ z-index: 0;
61
+ }
52
62
 
53
- .ff-spreadsheet-active-cell .select_dot {
54
- background-color: var(--elevation);
55
- height: 10px;
56
- width: 10px;
57
- border-radius: 50%;
58
- position: absolute;
59
- bottom: -5px;
60
- right: -5px;
61
- cursor: crosshair;
62
- z-index: 1000;
63
- }
63
+ .ff-spreadsheet-active-cell .select_dot {
64
+ background-color: var(--elevation);
65
+ height: 10px;
66
+ width: 10px;
67
+ border-radius: 50%;
68
+ position: absolute;
69
+ bottom: -5px;
70
+ right: -5px;
71
+ cursor: crosshair;
72
+ z-index: 1000;
73
+ }
64
74
 
65
- .ff-spreadsheet-cell--readonly {
66
- color: var(--readonly-text-color);
67
- }
75
+ .ff-spreadsheet-cell--readonly {
76
+ color: var(--readonly-text-color);
77
+ }
68
78
 
69
- .ff-spreadsheet-cell,
70
- .ff-spreadsheet-header {
71
- border: 0.1px solid var(--border-color);
72
- overflow: hidden;
73
- word-break: keep-all;
74
- white-space: nowrap;
75
- text-align: left;
76
- box-sizing: border-box;
77
- user-select: none;
78
- }
79
+ .ff-spreadsheet-cell,
80
+ .ff-spreadsheet-header {
81
+ border: 0.1px solid var(--border-color);
82
+ overflow: hidden;
83
+ word-break: keep-all;
84
+ white-space: nowrap;
85
+ text-align: left;
86
+ box-sizing: border-box;
87
+ user-select: none;
88
+ }
79
89
 
80
- .ff-spreadsheet-header {
81
- background: var(--header-background-color);
82
- color: var(--readonly-text-color);
83
- text-align: center;
84
- }
90
+ .ff-spreadsheet-header {
91
+ border: 0.1px solid var(--border-color);
92
+ background-color: var(--header-background-color);
93
+ color: var(--readonly-text-color);
94
+ text-align: center;
95
+ z-index: 1000;
96
+ }
85
97
 
86
- .corner_indicator {
87
- margin: 0px 0px 0px 15px;
88
- }
98
+ .ff-spreadsheet-corner-header {
99
+ padding-left: 20px;
100
+ z-index: 1100;
101
+ }
89
102
 
90
- .ff-spreadsheet-header--selected {
91
- background: var(--brand-color);
92
- color: var(--tooltip-text-color);
93
- }
103
+ .ff-spreadsheet-header--selected {
104
+ background: var(--brand-color);
105
+ color: var(--tooltip-text-color);
106
+ }
94
107
 
95
- .ff-spreadsheet-header,
96
- .ff-spreadsheet-data-viewer,
97
- .ff-spreadsheet-data-editor input {
98
- padding: 4px;
99
- box-sizing: border-box;
100
- }
108
+ .ff-spreadsheet-data-viewer,
109
+ .ff-spreadsheet-data-editor input {
110
+ padding: 4px;
111
+ box-sizing: border-box;
112
+ }
113
+ .ff-spreadsheet-header {
114
+ box-sizing: border-box;
115
+ }
101
116
 
102
- .ff-spreadsheet-data-viewer--preserve-breaks {
103
- white-space: pre-wrap;
104
- }
117
+ .ff-spreadsheet-data-viewer--preserve-breaks {
118
+ white-space: pre-wrap;
119
+ }
105
120
 
106
- .ff-spreadsheet-data-editor,
107
- .ff-spreadsheet-data-editor input {
108
- width: 100%;
109
- height: 100%;
110
- }
121
+ .ff-spreadsheet-data-editor,
122
+ .ff-spreadsheet-data-editor input {
123
+ width: 100%;
124
+ height: 100%;
125
+ }
111
126
 
112
- .ff-spreadsheet-data-editor input {
113
- font: inherit;
114
- color: inherit;
115
- background: none;
116
- border: none;
117
- outline: none;
118
- margin: 0;
119
- }
127
+ .ff-spreadsheet-data-editor input {
128
+ font: inherit;
129
+ color: inherit;
130
+ background: none;
131
+ border: none;
132
+ outline: none;
133
+ margin: 0;
134
+ }
120
135
 
121
- .ff-spreadsheet-data-viewer--boolean {
122
- text-align: center;
123
- }
136
+ .ff-spreadsheet-data-viewer--boolean {
137
+ text-align: center;
138
+ }
124
139
 
125
- .ff-spreadsheet-floating-rect {
126
- position: absolute;
127
- pointer-events: none;
128
- box-sizing: border-box;
129
- }
140
+ .ff-spreadsheet-floating-rect {
141
+ position: absolute;
142
+ pointer-events: none;
143
+ box-sizing: border-box;
144
+ }
130
145
 
131
- .ff-spreadsheet-floating-rect--hidden {
132
- display: none;
133
- }
146
+ .ff-spreadsheet-floating-rect--hidden {
147
+ display: none;
148
+ }
134
149
 
135
- .ff-spreadsheet-floating-rect--selected {
136
- background: var(--outline-background-color);
137
- border: 2px var(--outline-color) solid;
138
- }
150
+ .ff-spreadsheet-floating-rect--selected {
151
+ background: var(--outline-background-color);
152
+ border: 2px var(--outline-color) solid;
153
+ }
139
154
 
140
- .ff-spreadsheet-floating-rect--dragging {
141
- border: none;
142
- }
155
+ .ff-spreadsheet-floating-rect--dragging {
156
+ border: none;
157
+ }
143
158
 
144
- .ff-spreadsheet-floating-rect--copied {
145
- border: 2px var(--outline-color) dashed;
159
+ .ff-spreadsheet-floating-rect--copied {
160
+ border: 2px var(--outline-color) dashed;
161
+ }
146
162
  }
@@ -98,6 +98,8 @@ export type Props<CellType extends Types.CellBase> = {
98
98
  /** Callback called when the Spreadsheet's evaluated data changes. */
99
99
  onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
100
100
  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
101
+ /** Set your dynamic sheet Height*/
102
+ sheetHeight: string;
101
103
  };
102
104
 
103
105
  /**
@@ -113,6 +115,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
113
115
  onKeyDown,
114
116
  Table = DefaultTable,
115
117
  Row = DefaultRow,
118
+ sheetHeight,
116
119
  HeaderRow = DefaultHeaderRow,
117
120
  DataEditor = DefaultDataEditor,
118
121
  DataViewer = DefaultDataViewer,
@@ -443,6 +446,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
443
446
  const rootNode = React.useMemo(
444
447
  () => (
445
448
  <div className="ff-excel">
449
+ <div className="ff-excel-toolbar-container">
446
450
  <ExcelToolBar
447
451
  onBold={onBold}
448
452
  onItalic={onItalic}
@@ -455,8 +459,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
455
459
  setBackgroundColor={setBackgroundColor}
456
460
  setFormatePainter={setFormatePainter}
457
461
  />
462
+ </div>
458
463
  <div
459
464
  ref={rootRef}
465
+ style={{height:sheetHeight}}
460
466
  className={classNames('ff-spreadsheet', className)}
461
467
  onKeyDown={handleKeyDown}
462
468
  onMouseMove={handleMouseMove}
@@ -160,6 +160,7 @@ export const Default: Story = {
160
160
  action: () => {},
161
161
  },
162
162
  ],
163
+ sheetHeight:"300px",
163
164
  onSave: () => {},
164
165
  },
165
166
  };
@@ -91,7 +91,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
91
91
  value: string;
92
92
  }>({
93
93
  label: 'Times New Roman',
94
- value: '"Times New Roman"',
94
+ value: 'Times New Roman',
95
+ });
96
+ const [selectedFontSize, setSelectedFontSize] = useState<{
97
+ label: string;
98
+ value: string;
99
+ }>({
100
+ label: '11',
101
+ value: '11',
95
102
  });
96
103
  const [colorContainer, setColorPicker] = useState<ColorContainer>({
97
104
  color: 'var(--error-light)',
@@ -219,9 +226,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
219
226
  <div className="ff-excel-toolbar-font-family">
220
227
  <Select
221
228
  showLabel={false}
229
+ optionZIndex={1000}
222
230
  onChange={(e) => {
223
- setSelectedFontFamily({ label: e.label, value: e.value });
224
- setFontFamily(data, e.label);
231
+ setSelectedFontFamily({ label: e.label, value: e.label });
232
+ setFontFamily(data, e.value);
225
233
  }}
226
234
  required={false}
227
235
  optionsList={fontFamily}
@@ -233,13 +241,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
233
241
  <div className="ff-excel-toolbar-font-size">
234
242
  <Select
235
243
  showLabel={false}
244
+ optionZIndex={1000}
236
245
  required={false}
237
- onChange={(e) => setFontSize(data, e.value)}
238
- optionsList={fontSize}
239
- selectedOption={{
240
- label: '11',
241
- value: '11',
246
+ onChange={(e) => {
247
+ setSelectedFontSize({ label: e.label, value: e.value });
248
+ setFontSize(data, e.value);
242
249
  }}
250
+ optionsList={fontSize}
251
+ selectedOption={selectedFontSize}
243
252
  />
244
253
  </div>
245
254
  </Tooltip>
@@ -308,6 +317,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
308
317
  />
309
318
  <MenuOption
310
319
  iconName="arrow_down"
320
+ zIndex={1000}
311
321
  iconSize={12}
312
322
  options={underlineTypeIcon}
313
323
  tooltipPlacement="top"
@@ -384,6 +394,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
384
394
  <MenuOption
385
395
  iconName="arrow_down"
386
396
  iconSize={12}
397
+ zIndex={1000}
387
398
  options={borderTypeIcon}
388
399
  tooltipPlacement="top"
389
400
  variant="light"
@@ -66,6 +66,7 @@ import TextColor from '../../assets/icons/text_color.svg?react';
66
66
  import FillColor from '../../assets/icons/fill_color.svg?react';
67
67
  import FormulaIcon from '../../assets/icons/formula_icon.svg?react';
68
68
  import ExcelCornerMenu from '../../assets/icons/excel_corner_menu.svg?react';
69
+ import AutoSaveIcon from '../../assets/icons/auto_save_icon.svg?react';
69
70
 
70
71
  import ApkFileType from '../../assets/icons/apk_file_type.svg?react';
71
72
  import CsvFileType from '../../assets/icons/csv_file_type.svg?react';
@@ -318,6 +319,7 @@ Components['text_color'] = TextColor;
318
319
  Components['fill_color'] = FillColor;
319
320
  Components['formula_icon'] = FormulaIcon;
320
321
  Components['excel_corner_menu'] = ExcelCornerMenu;
322
+ Components['auto_save_icon'] = AutoSaveIcon;
321
323
  Components['export'] = Export;
322
324
  Components['apk_file_type'] = ApkFileType;
323
325
  Components['csv_file_type'] = CsvFileType;
@@ -15,7 +15,11 @@ const Template = ({
15
15
  placeholder,
16
16
  onFocus,
17
17
  onBlur,
18
- isValid,
18
+ international,
19
+ enableAreaCodeStretch,
20
+ defaultCountry,
21
+ disabled,
22
+ id,
19
23
  }: PhoneInputProps) => {
20
24
  const [phone, setPhone] = useState<string>(value || '');
21
25
  const [valid, setValid] = useState(true);
@@ -38,6 +42,11 @@ const Template = ({
38
42
  onFocus={onFocus}
39
43
  onBlur={onBlur}
40
44
  isValid={valid}
45
+ international={international}
46
+ enableAreaCodeStretch={enableAreaCodeStretch}
47
+ defaultCountry={defaultCountry}
48
+ disabled={disabled}
49
+ id={id}
41
50
  />
42
51
  );
43
52
  };
@@ -46,50 +55,16 @@ const Template = ({
46
55
  export const Default = Template.bind({});
47
56
  Default.args = {
48
57
  country: 'IN',
49
- value: '9134567890',
58
+ value: '91',
50
59
  width: '400px',
51
60
  placeholder: 'Enter phone number',
52
61
  onChange: () => {},
53
62
  onFocus: () => {},
54
63
  onBlur: () => {},
55
64
  isValid: true,
56
- };
57
-
58
- // Story with initial value
59
- export const WithInitialValue = Template.bind({});
60
- WithInitialValue.args = {
61
- country: 'IN',
62
- value: '9176543210',
63
- width: '300px',
64
- onChange: () => {},
65
- placeholder: 'Enter phone number',
66
- onFocus: () => {},
67
- onBlur: () => {},
68
- isValid: true,
69
- };
70
-
71
- // Story with a custom country
72
- export const WithCustomCountry = Template.bind({});
73
- WithCustomCountry.args = {
74
- country: 'IN',
75
- value: '9176543210',
76
- width: '300px',
77
- onChange: () => {},
78
- placeholder: 'Enter phone number',
79
- onFocus: () => {},
80
- onBlur: () => {},
81
- isValid: true,
82
- };
83
-
84
- // Story with empty value
85
- export const EmptyValue = Template.bind({});
86
- EmptyValue.args = {
87
- country: 'IN',
88
- value: '91',
89
- width: '500px',
90
- onChange: () => {},
91
- placeholder: 'Enter phone number',
92
- onFocus: () => {},
93
- onBlur: () => {},
94
- isValid: false,
65
+ international: true,
66
+ enableAreaCodeStretch: true,
67
+ defaultCountry: 'IN',
68
+ disabled: false,
69
+ id: 'addPrimaryNumberId',
95
70
  };
@@ -1,6 +1,5 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import PhoneInput from 'react-phone-input-2';
3
- import 'react-phone-input-2/lib/style.css';
4
3
  import { PhoneInputProps } from './types';
5
4
  import Typography from '../Typography';
6
5
  import './PhoneInput.scss';
@@ -13,6 +12,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
13
12
  placeholder = 'Enter phone number',
14
13
  onFocus,
15
14
  onBlur,
15
+ id,
16
+ dropdownStyle = {},
17
+ enableAreaCodeStretch = false,
18
+ disabled = false,
16
19
  }) => {
17
20
  const [phone, setPhone] = useState<string>(value);
18
21
  const [isFocused, setIsFocused] = useState(false);
@@ -57,8 +60,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
57
60
  };
58
61
 
59
62
  return (
60
- <div>
63
+ <div id={id}>
61
64
  <PhoneInput
65
+ specialLabel=""
66
+ countryCodeEditable={false}
62
67
  country={country}
63
68
  value={phone}
64
69
  onChange={handlePhoneChange}
@@ -77,6 +82,9 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
77
82
  placeholder={placeholder}
78
83
  onFocus={handleFocus}
79
84
  onBlur={handleBlur}
85
+ dropdownStyle={dropdownStyle}
86
+ enableAreaCodeStretch={enableAreaCodeStretch}
87
+ disabled={disabled}
80
88
  />
81
89
  {error && !isFocused && (
82
90
  <Typography color={'var(--error_light)'} className="error">