pixel-react 1.5.6 → 1.5.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.
Files changed (28) hide show
  1. package/.storybook/main.ts +7 -1
  2. package/lib/components/Charts/LineChart/types.d.ts +3 -0
  3. package/lib/components/LabelEditTextField/types.d.ts +5 -0
  4. package/lib/components/MiniModal/types.d.ts +9 -0
  5. package/lib/index.d.ts +17 -0
  6. package/lib/index.esm.js +169 -95
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +169 -95
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/assets/icons/info_user.svg +5 -0
  12. package/src/assets/icons/license_info.svg +12 -12
  13. package/src/components/Charts/LineChart/LineChart.scss +8 -7
  14. package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
  15. package/src/components/Charts/LineChart/LineChart.tsx +30 -27
  16. package/src/components/Charts/LineChart/types.ts +22 -20
  17. package/src/components/EditTextField/EditTextField.stories.tsx +1 -1
  18. package/src/components/Icon/iconList.ts +2 -0
  19. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -0
  20. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +11 -15
  21. package/src/components/LabelEditTextField/LabelEditTextField.tsx +44 -13
  22. package/src/components/LabelEditTextField/types.ts +5 -0
  23. package/src/components/MiniModal/MiniModal.scss +9 -5
  24. package/src/components/MiniModal/MiniModal.stories.tsx +28 -1
  25. package/src/components/MiniModal/MiniModal.tsx +110 -74
  26. package/src/components/MiniModal/types.ts +9 -0
  27. package/src/components/MultiSelect/MultiSelect.stories.tsx +1 -1
  28. package/src/components/MultiSelect/MultiSelect.tsx +11 -8
@@ -31,6 +31,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
31
31
  extraLeftSpace,
32
32
  isIconModel,
33
33
  wrapperProperties,
34
+ arrowZIndex,
35
+ overlay,
36
+ outSideClick,
34
37
  },
35
38
  ref
36
39
  ) => {
@@ -127,9 +130,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
127
130
  } else if (modalPosition === 'right') {
128
131
  return leftTopArrow
129
132
  ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
130
- : modalPositionState?.top - safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
133
+ : modalPositionState?.top -
134
+ safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
131
135
  } else if (modalPosition === 'top') {
132
- return modalPositionState.top - (safeHeight + (extraTopSpace?.normalModal ?? 10));
136
+ return (
137
+ modalPositionState.top -
138
+ (safeHeight + (extraTopSpace?.normalModal ?? 10))
139
+ );
133
140
  }
134
141
  return modalPositionState.top - safeHeight / 1.5;
135
142
  };
@@ -138,7 +145,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
138
145
  // Specifying the modal left
139
146
  const calculateModalLeft = () => {
140
147
  if (modalPosition === 'right') {
141
- return modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40);
148
+ return (
149
+ modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
150
+ );
142
151
  } else if (firstAnchorRef) {
143
152
  return firstAnchor;
144
153
  } else if (modalPosition === 'left') {
@@ -152,9 +161,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
152
161
  // Handle escape and enter functionality
153
162
  const handleEsc = useEscapeKey('Escape');
154
163
  const handleEnter = useEscapeKey('Enter');
155
- handleEsc(cancelButtonProps?.onClick);
164
+ handleEsc(outSideClick);
156
165
  handleEnter(proceedButtonProps?.onClick);
157
- useClickOutside(modalRef, cancelButtonProps.onClick);
166
+ useClickOutside(modalRef, outSideClick);
158
167
 
159
168
  // Calculate the modal position
160
169
  const calculatePosition = useCallback(() => {
@@ -192,96 +201,123 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
192
201
  height: modalHeight,
193
202
  borderRadius: modalBorderRadius = 4,
194
203
  zIndex: modalZIndex = 99,
204
+ boxShadow: modalBoxShadow,
195
205
  } = modalProperties || {};
196
206
 
197
- const { width: wrapperWidth = 35, zIndex: wrapperZIndex = 101 } =
198
- wrapperProperties || {};
207
+ const {
208
+ width: wrapperWidth = 35,
209
+ zIndex: wrapperZIndex = 101,
210
+ boxShadow: wrapperBoxShadow,
211
+ } = wrapperProperties || {};
212
+ const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
199
213
 
200
214
  if (isWrapped && isPopOver) {
201
215
  return null;
202
216
  }
203
217
 
204
218
  return createPortal(
205
- <div
206
- ref={ref || modalRef}
207
- className={classNames('ff-mini-edit-modal-container', {
208
- modalVisible: isVisible,
209
- animatedModal: isAnimated,
210
- })}
211
- style={{
212
- top: `${calculatedModalTop}px`,
213
- left: `${calculatedModalLeft}px`,
214
- }}
215
- >
216
- {isPopOver && (
217
- <div
218
- className={`popover-arrow popover-arrow-${
219
- modalPosition === 'right'
220
- ? 'left'
221
- : modalPosition === 'top'
222
- ? 'bottom'
223
- : modalPosition === 'left'
224
- ? 'right'
225
- : 'top'
226
- } ${getArrowClassName()}`}
227
- />
228
- )}
229
- {isWrapped && (
219
+ <>
220
+ {isOverlay && (
230
221
  <div
231
- className={'wrapped-div'}
222
+ className={classNames('ff-mini-modal-overlay')}
232
223
  style={{
233
- left: `${calculatedAnchorRefLeft}px`,
234
- width: `${wrapperWidth}px`,
235
- zIndex: `${wrapperZIndex}`,
224
+ zIndex: zIndexOverlay ?? 98,
225
+ backgroundColor: backgroundColorOverlay ?? 'transparent',
236
226
  }}
227
+ onClick={cancelButtonProps?.onClick}
237
228
  ></div>
238
229
  )}
239
230
  <div
240
- className={classNames('mini-edit-modal', {
241
- 'mini-edit-modal-wrapper-shadow': !!isWrapped,
242
- 'mini-edit-modal-arrow-shadow': !!isPopOver,
231
+ ref={ref || modalRef}
232
+ className={classNames('ff-mini-edit-modal-container', {
233
+ modalVisible: isVisible,
234
+ animatedModal: isAnimated,
243
235
  })}
244
236
  style={{
245
- minWidth: isWrapped ? '358px' : '',
246
- width: `${modalWidth}px`,
247
- height: `${modalHeight}px`,
248
- borderRadius: `${modalBorderRadius}px`,
249
- zIndex: `${modalZIndex}`,
237
+ top: `${calculatedModalTop}px`,
238
+ left: `${calculatedModalLeft}px`,
250
239
  }}
251
240
  >
252
- {headerProps ? (
253
- <Typography as="div">{headerProps}</Typography>
254
- ) : isIconModel ? (
255
- <></>
256
- ) : (
257
- <Typography as="header">
258
- <Typography as="h2">Header text</Typography>
259
- <hr />
260
- </Typography>
241
+ {isPopOver && (
242
+ <div
243
+ className={`popover-arrow popover-arrow-${
244
+ modalPosition === 'right'
245
+ ? 'left'
246
+ : modalPosition === 'top'
247
+ ? 'bottom'
248
+ : modalPosition === 'left'
249
+ ? 'right'
250
+ : 'top'
251
+ } ${getArrowClassName()}`}
252
+ style={{
253
+ zIndex: `${arrowZIndex}`,
254
+ }}
255
+ />
261
256
  )}
262
- <div>{childContent}</div>
263
- {footerContent ? (
264
- <Typography as="footer">{footerContent}</Typography>
265
- ) : isIconModel ? (
266
- <></>
267
- ) : (
268
- <footer className="modal-footer">
269
- <Button
270
- variant="primary"
271
- className="btn-cancel"
272
- onClick={cancelButtonProps?.onClick}
273
- label={cancelButtonProps?.text}
274
- />
275
- <Button
276
- variant="secondary"
277
- className="btn-proceed"
278
- label={proceedButtonProps?.text}
279
- onClick={proceedButtonProps?.onClick}
280
- />
281
- </footer>
257
+ {isWrapped && (
258
+ <div
259
+ className={'wrapped-div'}
260
+ style={{
261
+ left: `${calculatedAnchorRefLeft}px`,
262
+ width: `${wrapperWidth}px`,
263
+ zIndex: `${wrapperZIndex}`,
264
+ boxShadow:
265
+ wrapperBoxShadow ??
266
+ `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
267
+ }}
268
+ ></div>
282
269
  )}
270
+ <div
271
+ className={classNames('mini-edit-modal', {
272
+ 'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
273
+ 'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
274
+ })}
275
+ style={{
276
+ minWidth: isWrapped ? '358px' : '',
277
+ width: `${modalWidth}px`,
278
+ height: `${modalHeight}px`,
279
+ borderRadius: `${modalBorderRadius}px`,
280
+ zIndex: `${modalZIndex}`,
281
+ boxShadow: `${
282
+ modalBoxShadow ??
283
+ '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
284
+ }`,
285
+ }}
286
+ >
287
+ {headerProps ? (
288
+ <Typography as="div">{headerProps}</Typography>
289
+ ) : isIconModel ? (
290
+ <></>
291
+ ) : (
292
+ <Typography as="header">
293
+ <Typography as="h2">Header text</Typography>
294
+ <hr />
295
+ </Typography>
296
+ )}
297
+ <div>{childContent}</div>
298
+ {footerContent ? (
299
+ <Typography as="footer">{footerContent}</Typography>
300
+ ) : isIconModel ? (
301
+ <></>
302
+ ) : (
303
+ <footer className="modal-footer">
304
+ <Button
305
+ variant="primary"
306
+ className="btn-cancel"
307
+ onClick={cancelButtonProps?.onClick}
308
+ label={cancelButtonProps?.text}
309
+ />
310
+ <Button
311
+ variant="secondary"
312
+ className="btn-proceed"
313
+ label={proceedButtonProps?.text}
314
+ onClick={proceedButtonProps?.onClick}
315
+ />
316
+ </footer>
317
+ )}
318
+ </div>
283
319
  </div>
284
- </div>,
320
+ </>,
285
321
  document.body
286
322
  );
287
323
  }
@@ -4,6 +4,7 @@ interface ModalDimensions {
4
4
  height?: number;
5
5
  borderRadius?: number;
6
6
  zIndex?: number;
7
+ boxShadow?: string;
7
8
  }
8
9
  export interface MiniEditModalProps {
9
10
  /**
@@ -90,7 +91,15 @@ export interface MiniEditModalProps {
90
91
  wrapperProperties?: {
91
92
  width?: number;
92
93
  zIndex?: number;
94
+ boxShadow?: string;
93
95
  };
96
+ arrowZIndex?: number;
97
+ overlay?: {
98
+ isOverlay?: boolean;
99
+ zIndexOverlay?: number;
100
+ backgroundColorOverlay?: string;
101
+ };
102
+ outSideClick?: any;
94
103
  }
95
104
  export interface Rect {
96
105
  top: number;
@@ -130,7 +130,7 @@ export const Controlled: Story = {
130
130
  const [options, setOptions] = useState<Option[]>([]);
131
131
  const [selectedOptions, setSelectedOptions] = useState<
132
132
  { label?: string; value?: string }[]
133
- >([{ label: 'Apple', value: 'apple' }]);
133
+ >([]);
134
134
  const onChange = (options: { label?: string; value?: string }[]) => {
135
135
  setSelectedOptions(options);
136
136
  };
@@ -265,15 +265,18 @@ const MultiSelect = ({
265
265
  };
266
266
  }, [isOpen]);
267
267
  useEffect(() => {
268
- if (options?.length > 0 && selectedOptions?.length) {
269
- const initializeOptions = options.map((option) => ({
270
- ...option,
271
- isChecked: selectedOptions.some(
272
- (selectedOption) =>
273
- getValue(selectedOption, valueAccessor) ===
268
+ if (!checkEmpty(options?.length)) {
269
+ let initializeOptions=options;
270
+ if(!checkEmpty(selectedOptions?.length)){
271
+ initializeOptions = options.map((option) => ({
272
+ ...option,
273
+ isChecked: selectedOptions.some(
274
+ (selectedOption) =>
275
+ getValue(selectedOption, valueAccessor) ===
274
276
  getValue(option, valueAccessor)
275
- ),
276
- }));
277
+ ),
278
+ }));
279
+ }
277
280
  setAllOptions(initializeOptions);
278
281
  }
279
282
  }, [options, selectedOptions]);