pixel-react 1.7.3 → 1.7.4

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 (56) hide show
  1. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  2. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  3. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  4. package/lib/components/Select/Select.stories.d.ts +0 -1
  5. package/lib/components/StatusCard/types.d.ts +7 -1
  6. package/lib/index.d.ts +8 -1
  7. package/lib/index.esm.js +54 -30
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +54 -30
  10. package/lib/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/assets/icons/approval_pending.svg +8 -8
  13. package/src/assets/icons/configuration.svg +3 -3
  14. package/src/assets/icons/defects.svg +8 -8
  15. package/src/assets/icons/element.svg +4 -4
  16. package/src/assets/icons/project_element.svg +4 -4
  17. package/src/assets/icons/step_group.svg +10 -10
  18. package/src/assets/icons/variable.svg +3 -3
  19. package/src/assets/icons/web_service_icon.svg +3 -3
  20. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -0
  21. package/src/components/Charts/BarChart/BarChart.tsx +7 -0
  22. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +1 -1
  23. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +8 -7
  24. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +3 -1
  25. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +21 -2
  26. package/src/components/StatusCard/StatusCard.scss +47 -4
  27. package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
  28. package/src/components/StatusCard/StatusCard.tsx +28 -5
  29. package/src/components/StatusCard/types.ts +15 -10
  30. package/src/components/Toastify/Toastify.tsx +1 -0
  31. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  32. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  33. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  34. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  35. package/lib/components/AddButton/AddButton.d.ts +0 -5
  36. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  37. package/lib/components/AddButton/index.d.ts +0 -1
  38. package/lib/components/AddButton/types.d.ts +0 -4
  39. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  40. package/lib/components/AddVariables/index.d.ts +0 -1
  41. package/lib/components/AddVariables/types.d.ts +0 -35
  42. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  43. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  44. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  45. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  46. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  47. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  48. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  49. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  50. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  51. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  52. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  53. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  54. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  55. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  56. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
package/lib/index.js CHANGED
@@ -8002,7 +8002,7 @@ function createFormControl(props = {}) {
8002
8002
  timer = setTimeout(callback, wait);
8003
8003
  };
8004
8004
  const _updateValid = async (shouldUpdateValid) => {
8005
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
8005
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
8006
8006
  const isValid = _options.resolver
8007
8007
  ? isEmptyObject((await _executeSchema()).errors)
8008
8008
  : await executeBuiltInValidation(_fields, true);
@@ -8014,7 +8014,7 @@ function createFormControl(props = {}) {
8014
8014
  }
8015
8015
  };
8016
8016
  const _updateIsValidating = (names, isValidating) => {
8017
- if (!props.disabled &&
8017
+ if (!_options.disabled &&
8018
8018
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
8019
8019
  (names || Array.from(_names.mount)).forEach((name) => {
8020
8020
  if (name) {
@@ -8030,7 +8030,7 @@ function createFormControl(props = {}) {
8030
8030
  }
8031
8031
  };
8032
8032
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
8033
- if (args && method && !props.disabled) {
8033
+ if (args && method && !_options.disabled) {
8034
8034
  _state.action = true;
8035
8035
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
8036
8036
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8094,7 +8094,7 @@ function createFormControl(props = {}) {
8094
8094
  const output = {
8095
8095
  name,
8096
8096
  };
8097
- if (!props.disabled) {
8097
+ if (!_options.disabled) {
8098
8098
  const disabledField = !!(get$1(_fields, name) &&
8099
8099
  get$1(_fields, name)._f &&
8100
8100
  get$1(_fields, name)._f.disabled);
@@ -8230,7 +8230,7 @@ function createFormControl(props = {}) {
8230
8230
  }
8231
8231
  _names.unMount = new Set();
8232
8232
  };
8233
- const _getDirty = (name, data) => !props.disabled &&
8233
+ const _getDirty = (name, data) => !_options.disabled &&
8234
8234
  (name && data && set$1(_formValues, name, data),
8235
8235
  !deepEqual(getValues(), _defaultValues));
8236
8236
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8546,7 +8546,7 @@ function createFormControl(props = {}) {
8546
8546
  };
8547
8547
  const register = (name, options = {}) => {
8548
8548
  let field = get$1(_fields, name);
8549
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8549
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8550
8550
  set$1(_fields, name, {
8551
8551
  ...(field || {}),
8552
8552
  _f: {
@@ -8562,7 +8562,7 @@ function createFormControl(props = {}) {
8562
8562
  field,
8563
8563
  disabled: isBoolean(options.disabled)
8564
8564
  ? options.disabled
8565
- : props.disabled,
8565
+ : _options.disabled,
8566
8566
  name,
8567
8567
  value: options.value,
8568
8568
  });
@@ -8572,7 +8572,7 @@ function createFormControl(props = {}) {
8572
8572
  }
8573
8573
  return {
8574
8574
  ...(disabledIsDefined
8575
- ? { disabled: options.disabled || props.disabled }
8575
+ ? { disabled: options.disabled || _options.disabled }
8576
8576
  : {}),
8577
8577
  ...(_options.progressive
8578
8578
  ? {
@@ -8656,6 +8656,12 @@ function createFormControl(props = {}) {
8656
8656
  e.preventDefault && e.preventDefault();
8657
8657
  e.persist && e.persist();
8658
8658
  }
8659
+ if (_options.disabled) {
8660
+ if (onInvalid) {
8661
+ await onInvalid({ ..._formState.errors }, e);
8662
+ }
8663
+ return;
8664
+ }
8659
8665
  let fieldValues = cloneObject(_formValues);
8660
8666
  _subjects.state.next({
8661
8667
  isSubmitting: true,
@@ -8834,7 +8840,9 @@ function createFormControl(props = {}) {
8834
8840
  : fieldReference.ref;
8835
8841
  if (fieldRef.focus) {
8836
8842
  fieldRef.focus();
8837
- options.shouldSelect && fieldRef.select();
8843
+ options.shouldSelect &&
8844
+ isFunction$1(fieldRef.select) &&
8845
+ fieldRef.select();
8838
8846
  }
8839
8847
  }
8840
8848
  };
@@ -9035,11 +9043,6 @@ function useForm(props = {}) {
9035
9043
  values: control._getWatch(),
9036
9044
  });
9037
9045
  }, [props.shouldUnregister, control]);
9038
- React.useEffect(() => {
9039
- if (_formControl.current) {
9040
- _formControl.current.watch = _formControl.current.watch.bind({});
9041
- }
9042
- }, [formState]);
9043
9046
  _formControl.current.formState = getProxyFormState(formState, control);
9044
9047
  return _formControl.current;
9045
9048
  }
@@ -27249,7 +27252,8 @@ const Toastify = () => {
27249
27252
  isOpen: toastProps.isOpen,
27250
27253
  variant: toastProps.variant,
27251
27254
  toastTitle: toastProps.toastTitle,
27252
- toastMessage: toastProps.toastMessage
27255
+ toastMessage: toastProps.toastMessage,
27256
+ zIndex: 1000000000
27253
27257
  });
27254
27258
  };
27255
27259
  // Utility to trigger toast messages outside of the Toastify component
@@ -31384,6 +31388,7 @@ const Row = props => jsxRuntime.jsx("tr", {
31384
31388
  });
31385
31389
 
31386
31390
  const HeaderRow = props => jsxRuntime.jsx("tr", {
31391
+ className: "ff-spreadsheet-row-header",
31387
31392
  ...props
31388
31393
  });
31389
31394
 
@@ -31403,14 +31408,17 @@ const CornerIndicator = ({
31403
31408
  onSelect();
31404
31409
  }, [onSelect]);
31405
31410
  return jsxRuntime.jsx("th", {
31406
- className: classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
31407
- 'ff-spreadsheet-header--selected': selected
31408
- }),
31411
+ className: 'ff-spreadsheet-corner-header',
31409
31412
  onClick: handleClick,
31410
31413
  tabIndex: 0,
31411
- children: jsxRuntime.jsx(Icon, {
31412
- variant: selected ? 'dark' : 'light',
31413
- name: "excel_corner_menu"
31414
+ children: jsxRuntime.jsx("div", {
31415
+ className: classNames('corner-header', {
31416
+ 'ff-spreadsheet-header--selected': selected
31417
+ }),
31418
+ children: jsxRuntime.jsx(Icon, {
31419
+ variant: selected ? 'dark' : 'light',
31420
+ name: "excel_corner_menu"
31421
+ })
31414
31422
  })
31415
31423
  });
31416
31424
  };
@@ -31492,7 +31500,7 @@ const ColumnIndicator = ({
31492
31500
  return jsxRuntime.jsxs("th", {
31493
31501
  style: {
31494
31502
  minWidth: `${columnWidth}px`,
31495
- position: 'relative'
31503
+ position: 'sticky'
31496
31504
  },
31497
31505
  className: classNames('ff-spreadsheet-header', {
31498
31506
  'ff-spreadsheet-header--selected': selected
@@ -32025,7 +32033,7 @@ const Copied = () => {
32025
32033
  });
32026
32034
  };
32027
32035
 
32028
- var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n top: 0;\n left: 0;\n margin: 0;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n padding-left: 20px;\n z-index: 1100;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
32036
+ var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n top: 0;\n left: 0;\n margin: 0;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n position: sticky;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n position: fixed;\n z-index: 2000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n height: 34px;\n}\n.ff-excel .corner-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1100;\n top: -1px;\n width: 60px;\n height: 34px;\n left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
32029
32037
  styleInject(css_248z$n);
32030
32038
 
32031
32039
  var css_248z$m = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
@@ -33531,17 +33539,28 @@ const AttachImage = ({
33531
33539
  });
33532
33540
  };
33533
33541
 
33534
- var css_248z$f = ".ff-card-container {\n width: 120px;\n height: 93px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 24px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}";
33542
+ var css_248z$f = ".ff-card-container {\n height: 78px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 12%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 17px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-content {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-content {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-content {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-content {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-content {\n background-color: var(--ff-card-flaky-status-bg-color);\n}";
33535
33543
  styleInject(css_248z$f);
33536
33544
 
33537
33545
  const StatusCard = ({
33538
33546
  icon,
33539
33547
  status,
33540
33548
  count,
33541
- text
33549
+ text,
33550
+ style = {
33551
+ width: '196.4px'
33552
+ },
33553
+ onSelectedStatus = _status => {}
33542
33554
  }) => {
33555
+ const [isToggled, setIsToggled] = React.useState(false);
33556
+ const handleSelectStatus = status => {
33557
+ setIsToggled(true);
33558
+ onSelectedStatus(status);
33559
+ };
33543
33560
  return jsxRuntime.jsxs("div", {
33544
- className: `ff-card-container ${status.toLowerCase()}`,
33561
+ className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
33562
+ style: style,
33563
+ onClick: () => handleSelectStatus(status),
33545
33564
  children: [jsxRuntime.jsxs("div", {
33546
33565
  className: "ff-status-bar",
33547
33566
  children: [jsxRuntime.jsx("div", {
@@ -33554,7 +33573,6 @@ const StatusCard = ({
33554
33573
  }), jsxRuntime.jsx(Typography, {
33555
33574
  fontWeight: "semi-bold",
33556
33575
  fontSize: "10px",
33557
- color: "var(--ff-status-card-text-color)",
33558
33576
  textAlign: "center",
33559
33577
  lineHeight: "15px",
33560
33578
  className: "ff-status-text",
@@ -33568,13 +33586,14 @@ const StatusCard = ({
33568
33586
  fontSize: "24px",
33569
33587
  className: "ff-number",
33570
33588
  lineHeight: "36px",
33589
+ color: isToggled ? 'var(--base-bg-color)' : '',
33571
33590
  children: count
33572
33591
  }), jsxRuntime.jsx(Typography, {
33573
33592
  fontWeight: "regular",
33574
33593
  fontSize: "10px",
33575
33594
  className: "ff-text",
33576
33595
  lineHeight: "15px",
33577
- color: "var(--ff-card-status-text-color)",
33596
+ color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
33578
33597
  children: text
33579
33598
  })]
33580
33599
  })]
@@ -39635,7 +39654,8 @@ const BarChart = ({
39635
39654
  icons = [],
39636
39655
  iconSize,
39637
39656
  legendPosition = 'bottom',
39638
- legendGap = 5
39657
+ legendGap = 5,
39658
+ onSelectedBar = _label => {}
39639
39659
  }) => {
39640
39660
  const [tooltip, setTooltip] = React.useState({
39641
39661
  visible: false,
@@ -39693,6 +39713,9 @@ const BarChart = ({
39693
39713
  borderColor: 'transparent'
39694
39714
  });
39695
39715
  };
39716
+ const handleSelectLabel = label => {
39717
+ onSelectedBar(label);
39718
+ };
39696
39719
  return jsxRuntime.jsxs("div", {
39697
39720
  className: "ff-bar-chart-container",
39698
39721
  style: {
@@ -39767,7 +39790,8 @@ const BarChart = ({
39767
39790
  ry: barBorderRadius,
39768
39791
  onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
39769
39792
  onMouseMove: handleMouseMove,
39770
- onMouseLeave: handleMouseLeave
39793
+ onMouseLeave: handleMouseLeave,
39794
+ onClick: () => handleSelectLabel(item.label)
39771
39795
  }), showXAxisLabels && jsxRuntime.jsx("text", {
39772
39796
  x: barX + barWidth / 2,
39773
39797
  y: height + topPadding + 15,