pixel-react 1.7.4 → 1.7.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 (29) hide show
  1. package/lib/components/ConditionalDropdown/types.d.ts +1 -1
  2. package/lib/components/FileDropzone/types.d.ts +12 -4
  3. package/lib/components/MenuOption/types.d.ts +1 -1
  4. package/lib/components/PopUpModal/types.d.ts +2 -1
  5. package/lib/index.d.ts +69 -63
  6. package/lib/index.esm.js +70 -46
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +70 -46
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
  12. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
  13. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
  14. package/src/components/ConditionalDropdown/types.ts +1 -1
  15. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
  16. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
  17. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
  18. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
  19. package/src/components/FileDropzone/Dropzone.tsx +3 -0
  20. package/src/components/FileDropzone/FileDropzone.scss +18 -0
  21. package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
  22. package/src/components/FileDropzone/FileDropzone.tsx +2 -0
  23. package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
  24. package/src/components/FileDropzone/types.ts +13 -4
  25. package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
  26. package/src/components/MenuOption/MenuOption.tsx +9 -2
  27. package/src/components/MenuOption/types.ts +1 -1
  28. package/src/components/PopUpModal/types.ts +4 -3
  29. package/src/components/Search/Search.stories.tsx +1 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.7.4",
4
+ "version": "1.7.6",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -111,6 +111,10 @@
111
111
  border-collapse: collapse;
112
112
  text-align: left;
113
113
 
114
+ .ff-legend-table-thead {
115
+ position: static;
116
+ top: auto;
117
+ }
114
118
  .ff-table-header {
115
119
  @extend .fontXs;
116
120
  font-weight: bold;
@@ -314,7 +314,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
314
314
  return (
315
315
  <div className="ff-legend-table-wrapper">
316
316
  <table className="ff-legend-table">
317
- <thead>
317
+ <thead className='ff-legend-table-thead'>
318
318
  <tr>
319
319
  <th className="ff-table-header" style={{ width: tableWidth }}>
320
320
  Name
@@ -84,7 +84,7 @@ WithInitialValue.args = {
84
84
  export const DropdownOnHash: Story = {
85
85
  render: () => {
86
86
  const [hashInputValue, setHashInputValue] = useState<
87
- dynamicObject | undefined
87
+ dynamicObject | null
88
88
  >();
89
89
  const testData = [
90
90
  {
@@ -26,7 +26,7 @@ export interface ConditionalDropdownProps {
26
26
  /**
27
27
  * Function storing and updating the inputValue state
28
28
  */
29
- setHashInputValue?:(value: dynamicObject | undefined) => void;
29
+ setHashInputValue?:(value: File |dynamicObject | null) => void;
30
30
 
31
31
  /**
32
32
  * List of variables
@@ -105,21 +105,21 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
105
105
 
106
106
  return (
107
107
  <th
108
- style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
109
108
  className={classNames('ff-spreadsheet-header', {
110
109
  'ff-spreadsheet-header--selected': selected,
111
110
  })}
111
+ style={{ minWidth: `${columnWidth}px` }} //Dynamic value, Inline Styling required
112
112
  onClick={handleClick}
113
113
  onContextMenu={contextClick}
114
114
  tabIndex={0}
115
115
  >
116
- <div
117
- onClick={handleClick}
118
- onContextMenu={contextClick}
119
- tabIndex={0}>
120
- </div>
121
- <Typography fontWeight='medium'>
122
- {label !== undefined ? label : columnIndexToLabel(column)}
116
+ <div
117
+ onClick={handleClick}
118
+ onContextMenu={contextClick}
119
+ tabIndex={0}
120
+ ></div>
121
+ <Typography fontWeight="medium">
122
+ {label !== undefined ? label : columnIndexToLabel(column)}
123
123
  </Typography>
124
124
  <div
125
125
  onMouseDown={onMouseDown}
@@ -103,14 +103,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
103
103
 
104
104
  return (
105
105
  <th
106
- style={{
107
- height: `${rowHeight}px`,
108
- minWidth: '60px',
109
- position: 'relative',
110
- }} //Dynamic value, Inline Styling required
111
106
  className={classNames('ff-spreadsheet-header', {
112
107
  'ff-spreadsheet-header--selected': selected,
113
108
  })}
109
+ style={{ height: `${rowHeight}px`, minWidth: '60px' }} //Dynamic value, Inline Styling required
114
110
  onClick={handleClick}
115
111
  onContextMenu={contextClick}
116
112
  tabIndex={0}
@@ -93,20 +93,21 @@
93
93
  text-align: center;
94
94
  z-index: 1000;
95
95
  position: sticky;
96
+ top: 0;
97
+ left: 0;
96
98
  }
97
99
 
98
100
  .ff-spreadsheet-corner-header {
99
101
  position: fixed;
100
- z-index: 2000;
102
+ z-index: 3000;
101
103
  }
102
104
 
103
105
  .ff-spreadsheet-row-header {
104
- // position: relative;
105
106
  height: 34px;
106
107
  }
107
108
 
108
109
  .corner-header {
109
- border: 0.1px solid var(--border-color);
110
+ border: 1px solid var(--border-color);
110
111
  background-color: var(--header-background-color);
111
112
  position: absolute;
112
113
  display: flex;
@@ -1,4 +1,4 @@
1
- import { useEffect, useState } from 'react';
1
+ import { useEffect, useRef, useState } from 'react';
2
2
  import './ExcelToolBar.scss';
3
3
  import MenuOption from '../../MenuOption';
4
4
  import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
69
69
  };
70
70
 
71
71
  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
72
+ const underLineMenuRef = useRef<HTMLSpanElement>(null);
73
+ const borderMenuRef = useRef<HTMLSpanElement>(null);
72
74
 
73
75
  useEffect(() => {
74
76
  setCellStyle(cell?.style || basicStyle);
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
315
317
  onClick={() => setUnderlineType(data, underLine, true)}
316
318
  name={getUnderlineIcon()}
317
319
  />
318
- <MenuOption
319
- iconName="arrow_down"
320
- zIndex={1000}
321
- iconSize={12}
322
- options={underlineTypeIcon}
323
- tooltipPlacement="top"
324
- variant="light"
325
- onOptionClick={(e) => {
326
- let selectedValue = e.value as string;
327
- setUnderlineType(data, selectedValue, true);
328
- setUnderLine(selectedValue);
329
- }}
330
- />
320
+ <span ref={underLineMenuRef}>
321
+ <MenuOption
322
+ targetRef={underLineMenuRef}
323
+ iconName="arrow_down"
324
+ zIndex={1000}
325
+ iconSize={12}
326
+ options={underlineTypeIcon}
327
+ tooltipPlacement="top"
328
+ variant="light"
329
+ onOptionClick={(e) => {
330
+ let selectedValue = e.value as string;
331
+ setUnderlineType(data, selectedValue, true);
332
+ setUnderLine(selectedValue);
333
+ }}
334
+ />
335
+ </span>
331
336
  </div>
332
337
  </Tooltip>
333
338
  </div>
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
391
396
  onClick={() => setBorderType(data, border, 'black')}
392
397
  name={getBorderIcon()}
393
398
  />
394
- <MenuOption
395
- iconName="arrow_down"
396
- iconSize={12}
397
- zIndex={1000}
398
- options={borderTypeIcon}
399
- tooltipPlacement="top"
400
- variant="light"
401
- onOptionClick={(e) => {
402
- let selectedValue = e.value as string;
403
- setBorderType(data, selectedValue, 'black');
404
- setBorder(selectedValue);
405
- }}
406
- />
399
+ <span ref={borderMenuRef}>
400
+ <MenuOption
401
+ iconName="arrow_down"
402
+ targetRef={borderMenuRef}
403
+ iconSize={12}
404
+ zIndex={1000}
405
+ options={borderTypeIcon}
406
+ tooltipPlacement="top"
407
+ variant="light"
408
+ onOptionClick={(e) => {
409
+ let selectedValue = e.value as string;
410
+ setBorderType(data, selectedValue, 'black');
411
+ setBorder(selectedValue);
412
+ }}
413
+ />
414
+ </span>
407
415
  </div>
408
416
  </Tooltip>
409
417
  </div>
@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
24
24
  setSelectedFile,
25
25
  handleRemoveFile,
26
26
  isDisable,
27
+ setShowDrawer,
27
28
  }) => {
28
29
  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
29
30
  return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
42
43
  onFileRemoveClick={handleRemoveFile}
43
44
  onFileReplaceClick={setSelectedFile}
44
45
  setSelectedFile={setSelectedFile}
46
+ selectedRadioOption={selectedRadioOption}
47
+ setShowDrawer={setShowDrawer}
45
48
  />
46
49
  ) : (
47
50
  <>
@@ -4,6 +4,12 @@
4
4
  gap: $gap;
5
5
  }
6
6
 
7
+ @mixin flex-center {
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ }
12
+
7
13
  @mixin center {
8
14
  display: grid;
9
15
  place-items: center;
@@ -160,4 +166,16 @@
160
166
  .ff-disable-file-dropzone-wrapper {
161
167
  opacity: 0.5;
162
168
  cursor: not-allowed;
169
+ }
170
+ .footer_basic_button {
171
+ width: 100%;
172
+ position: absolute;
173
+ bottom: 0;
174
+ right: 0;
175
+ @include flex-center;
176
+ justify-content: flex-end;
177
+ gap: 16px;
178
+ border-top: 1px solid var(--border-color);
179
+ padding: 4px 8px;
180
+ background-color: var(--primary-icon-color);
163
181
  }
@@ -5,8 +5,10 @@ import Toaster from '../Toast';
5
5
  import { useState } from 'react';
6
6
  import { RadioOption } from './types';
7
7
  import Drawer from '../Drawer/Drawer';
8
- import Typography from '../Typography';
8
+ import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
9
9
  import './FileDropzone.scss';
10
+ import { DynamicObj } from '../CreateVariable/types';
11
+ import Button from '../Button';
10
12
 
11
13
  const meta: Meta<typeof FileDropzone> = {
12
14
  title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
107
109
 
108
110
  const [selectedRadioOption, setSelectedRadioOption] =
109
111
  useState<RadioOption>();
110
- const [selectedFile, setSelectedFile] = useState<File | null>(null);
111
-
112
+ const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
113
+ null
114
+ );
115
+ const [testDataSelectedFile, setTestDataSelectedFile] = useState<
116
+ DynamicObj | File | null
117
+ >(null);
112
118
 
113
119
  const drawerArgs = {
114
120
  primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
156
162
  }, 2000);
157
163
  };
158
164
 
165
+ const testData = [
166
+ {
167
+ _id: '1',
168
+ name: 'File1.txt',
169
+ actualPath: '/documents/File1.txt',
170
+ searchKey: 'file1',
171
+ parentId: 'root',
172
+ },
173
+ {
174
+ _id: '2',
175
+ name: 'File2.doc',
176
+ actualPath: '/documents/File2.doc',
177
+ searchKey: 'file2',
178
+ parentId: 'root',
179
+ },
180
+ {
181
+ _id: '3',
182
+ name: 'Image1.png',
183
+ actualPath: '/images/Image1.png',
184
+ searchKey: 'image1',
185
+ parentId: 'folder1',
186
+ },
187
+ {
188
+ _id: '4',
189
+ name: 'Presentation.ppt',
190
+ actualPath: '/presentations/Presentation.ppt',
191
+ searchKey: 'presentation',
192
+ parentId: 'folder2',
193
+ },
194
+ ];
195
+
196
+ const handleSaveButton = () => {
197
+ setSelectedFile(testDataSelectedFile);
198
+ setShowModal(false);
199
+ };
200
+
159
201
  return (
160
202
  <>
161
203
  <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
176
218
  selectedFile={selectedFile}
177
219
  handleFileChange={handleFileChange}
178
220
  handleRemoveFile={handleRemoveFile}
221
+ setShowDrawer={setShowModal}
179
222
  />
180
223
  {showToaster && (
181
224
  <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
185
228
  toastMessage={'Max 5 files can be uploaded'}
186
229
  />
187
230
  )}
188
- {selectedRadioOption?.value === 'Local File' &&
231
+ {selectedRadioOption?.value === 'Test Data' && (
189
232
  <Drawer
190
233
  {...drawerArgs}
191
234
  isOpen={showModal}
192
235
  onClose={() => setShowModal(false)}
193
- isFooterRequired={true}
236
+ isFooterRequired={false}
194
237
  _isExpanded={false}
195
238
  size="small"
239
+
196
240
  >
197
- <Typography>Upload TestData Files Here</Typography>
241
+ <ConditionalDropdown
242
+ label="Select Path Using #"
243
+ placeholder="Enter # to search files"
244
+ isHash
245
+ dataFiles={testData}
246
+ dropdownWidth="auto"
247
+ setHashInputValue={setTestDataSelectedFile}
248
+ />
249
+ <div className="footer_basic_button">
250
+ <Button
251
+ type="button"
252
+ variant="secondary"
253
+ size="small"
254
+ onClick={() => setShowModal(false)}
255
+ label={'Cancel'}
256
+ />
257
+
258
+ <Button
259
+ type={'button'}
260
+ variant="primary"
261
+ size="small"
262
+ label={'Save'}
263
+ onClick={handleSaveButton}
264
+ />
265
+ </div>
198
266
  </Drawer>
199
- }
267
+ )}
200
268
  </>
201
269
  );
202
270
  },
@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
38
38
  handleRemoveFile,
39
39
  isApiResponseError = false,
40
40
  isDisable = false,
41
+ setShowDrawer,
41
42
  }) => {
42
43
  const fileInputRef = useRef<HTMLInputElement | null>(null);
43
44
  const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
131
132
  handleRemoveFile={handleRemoveFile}
132
133
  setSelectedFile={setSelectedFile}
133
134
  isDisable={isDisable}
135
+ setShowDrawer={setShowDrawer}
134
136
  />
135
137
 
136
138
  {isWebServiceFileDropZone && (
@@ -8,14 +8,18 @@ import { useRef } from 'react';
8
8
  const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
9
9
  selectedFile,
10
10
  onFileRemoveClick,
11
- onFileReplaceClick
11
+ onFileReplaceClick,
12
+ selectedRadioOption,
13
+ setShowDrawer,
12
14
  }) => {
13
15
  const fileInputRef = useRef<HTMLInputElement | null>(null);
14
16
 
15
17
  const handleReplaceClick = () => {
16
- if (fileInputRef.current) {
17
- fileInputRef.current.click();
18
+ if (selectedRadioOption?.value === 'Test Data') {
19
+ setShowDrawer?.(true);
20
+ return;
18
21
  }
22
+ fileInputRef.current?.click();
19
23
  };
20
24
 
21
25
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { DynamicObj } from '../CreateVariable/types';
2
3
  export interface RadioOption {
3
4
  label: string;
4
5
  value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
93
94
  /**
94
95
  * Its the File Name of File Selected from Local File.
95
96
  **/
96
- setSelectedFile?: (file: File | null) => void;
97
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
97
98
 
98
99
  /**
99
100
  * Its the File Name of File Selected from Local File.
100
101
  **/
101
- selectedFile?: File | null;
102
+ selectedFile?: File | DynamicObj | null;
102
103
 
103
104
  /**
104
105
  * Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
120
121
  **/
121
122
  isDisable?: boolean;
122
123
 
124
+ /**
125
+ * Its the boolean value setted when the replace is clicked for TestData radio option .
126
+ **/
127
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
128
+
123
129
  }
124
130
  export interface FileState {
125
131
  accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
176
182
  selectedRadioOption?: Option,
177
183
  radioOptions?: RadioOption[],
178
184
  handleOptionChange?: (option: RadioOption)=> void,
179
- selectedFile?: File | null,
180
- setSelectedFile?: (file: File | null) => void;
185
+ selectedFile?: File | DynamicObj | null,
186
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
181
187
  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
182
188
  handleRemoveFile?: () => void;
183
189
  isDisable?: boolean;
190
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
184
191
  }
185
192
 
186
193
  export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
196
203
  onFileRemoveClick?: () => void;
197
204
  onFileReplaceClick?: (file: File | null) => void;
198
205
  setSelectedFile?: (file: File | null) => void;
206
+ selectedRadioOption?: Option,
207
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
199
208
  }
@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
135
135
  dropdownPlacement: 'down',
136
136
  },
137
137
  render: (args) => {
138
- const moreRef = useRef<HTMLDivElement>(null);
139
138
  return (
140
- <div ref={moreRef}>
139
+ <div id="more">
141
140
  <MenuOption
142
141
  {...args}
143
142
  options={options}
144
- targetRef={moreRef}
143
+ targetRef={'more'}
145
144
  onOptionClick={handleOptionClick}
146
145
  />
147
146
  </div>
@@ -153,9 +153,15 @@ const MenuOption = ({
153
153
  };
154
154
 
155
155
  const calculateDims = () => {
156
- if (targetRef?.current) {
157
- const rect = targetRef.current.getBoundingClientRect();
156
+ let targetElement: HTMLElement | null = null;
157
+ if (typeof targetRef === 'string') {
158
+ targetElement = document.getElementById(targetRef);
159
+ } else if (targetRef && targetRef.current) {
160
+ targetElement = targetRef.current;
161
+ }
158
162
 
163
+ if (targetElement) {
164
+ const rect = targetElement.getBoundingClientRect();
159
165
  setMenuPosition({
160
166
  top: rect.top + window.scrollY,
161
167
  left: rect.left + window.scrollX,
@@ -164,6 +170,7 @@ const MenuOption = ({
164
170
  });
165
171
  }
166
172
  };
173
+
167
174
  return (
168
175
  <div className="ff-menu-option-container" ref={menuRef}>
169
176
  <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
@@ -208,7 +208,7 @@ interface MenuOptionProps {
208
208
  * @optional
209
209
  */
210
210
  optionCardVariant?: 'primary';
211
- targetRef?: React.RefObject<HTMLElement>;
211
+ targetRef?: string | React.RefObject<HTMLElement>;
212
212
  }
213
213
 
214
214
  interface OptionProps {
@@ -5,12 +5,13 @@ export interface PopUpModalProps {
5
5
  titleMessage: string;
6
6
  subTitleMessage?: string;
7
7
  iconName: string;
8
- modalMessage: string;
8
+ modalMessage: string | React.ReactNode;
9
+ secondaryMessage?: string | React.ReactNode;
9
10
  firstButtonLabel?: string;
10
11
  secondButtonLabel: string;
11
12
  buttonVariant: any;
12
13
  border: string;
13
- popupWidth?:string,
14
+ popupWidth?: string;
14
15
  colorForTitleMessage?: string;
15
- footerContent?:React.ReactNode;
16
+ footerContent?: React.ReactNode;
16
17
  }
@@ -1,6 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import Search from './Search';
3
- import React,{ useState } from 'react';
3
+ import React, { useState } from 'react';
4
4
  const meta: Meta<typeof Search> = {
5
5
  title: 'Components/Search',
6
6
  component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
17
17
  const [searchValue, setSearchValue] = useState('');
18
18
 
19
19
  const handleSearch = (value: string) => {
20
- alert(`Searching for: ${value}`);
21
20
  setSearchValue(value);
22
21
  };
23
22