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
@@ -21,6 +21,7 @@ type BarChartProps = {
21
21
  backgroundColor?: string;
22
22
  legendPosition?: 'top' | 'bottom';
23
23
  legendGap?: number;
24
+ onSelectedBar?: (_label: string) => void;
24
25
  };
25
26
  declare const BarChart: React.FC<BarChartProps>;
26
27
  export default BarChart;
@@ -6,8 +6,6 @@ declare const meta: Meta<typeof LabelEditTextField>;
6
6
  type Story = StoryObj<typeof LabelEditTextField>;
7
7
  export declare const textField: Story;
8
8
  export declare const textFieldWithOutLabel: Story;
9
- export declare const openTextFieldWithOutLabel: Story;
10
9
  export declare const textFieldWithDropdown: Story;
11
10
  export declare const textFieldWithHighlight: Story;
12
- export declare const openLabelEditTextField: Story;
13
11
  export default meta;
@@ -7,5 +7,4 @@ export declare const Default2: Story;
7
7
  export declare const Default3: Story;
8
8
  export declare const EmailGroup: Story;
9
9
  export declare const Controlled: Story;
10
- export declare const Labels: Story;
11
10
  export default meta;
@@ -10,5 +10,4 @@ export declare const Disable: Story;
10
10
  export declare const WithInitialValue: Story;
11
11
  export declare const OptionSelection: Story;
12
12
  export declare const CustomJSX: Story;
13
- export declare const updateOptionFromOutside: Story;
14
13
  export default meta;
@@ -2,9 +2,15 @@ export interface CardProps {
2
2
  /** The icon to display in the card */
3
3
  icon: string;
4
4
  /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
5
- status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
5
+ status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
6
6
  /** The number displayed in the card */
7
7
  count: number | string;
8
8
  /** The description text displayed at the bottom of the card */
9
9
  text: string;
10
+ /** Inline Styling */
11
+ style?: React.CSSProperties;
12
+ /** toggle update */
13
+ handleToggleStatus?: (_status: boolean) => void;
14
+ /** call back */
15
+ onSelectedStatus?: (_status: string) => void;
10
16
  }
package/lib/index.d.ts CHANGED
@@ -2471,11 +2471,17 @@ interface CardProps {
2471
2471
  /** The icon to display in the card */
2472
2472
  icon: string;
2473
2473
  /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
2474
- status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
2474
+ status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
2475
2475
  /** The number displayed in the card */
2476
2476
  count: number | string;
2477
2477
  /** The description text displayed at the bottom of the card */
2478
2478
  text: string;
2479
+ /** Inline Styling */
2480
+ style?: React.CSSProperties;
2481
+ /** toggle update */
2482
+ handleToggleStatus?: (_status: boolean) => void;
2483
+ /** call back */
2484
+ onSelectedStatus?: (_status: string) => void;
2479
2485
  }
2480
2486
 
2481
2487
  declare const StatusCard: React__default.FC<CardProps>;
@@ -2822,6 +2828,7 @@ type BarChartProps = {
2822
2828
  backgroundColor?: string;
2823
2829
  legendPosition?: 'top' | 'bottom';
2824
2830
  legendGap?: number;
2831
+ onSelectedBar?: (_label: string) => void;
2825
2832
  };
2826
2833
  declare const BarChart: React__default.FC<BarChartProps>;
2827
2834
 
package/lib/index.esm.js CHANGED
@@ -7982,7 +7982,7 @@ function createFormControl(props = {}) {
7982
7982
  timer = setTimeout(callback, wait);
7983
7983
  };
7984
7984
  const _updateValid = async (shouldUpdateValid) => {
7985
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7985
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7986
7986
  const isValid = _options.resolver
7987
7987
  ? isEmptyObject((await _executeSchema()).errors)
7988
7988
  : await executeBuiltInValidation(_fields, true);
@@ -7994,7 +7994,7 @@ function createFormControl(props = {}) {
7994
7994
  }
7995
7995
  };
7996
7996
  const _updateIsValidating = (names, isValidating) => {
7997
- if (!props.disabled &&
7997
+ if (!_options.disabled &&
7998
7998
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7999
7999
  (names || Array.from(_names.mount)).forEach((name) => {
8000
8000
  if (name) {
@@ -8010,7 +8010,7 @@ function createFormControl(props = {}) {
8010
8010
  }
8011
8011
  };
8012
8012
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
8013
- if (args && method && !props.disabled) {
8013
+ if (args && method && !_options.disabled) {
8014
8014
  _state.action = true;
8015
8015
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
8016
8016
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8074,7 +8074,7 @@ function createFormControl(props = {}) {
8074
8074
  const output = {
8075
8075
  name,
8076
8076
  };
8077
- if (!props.disabled) {
8077
+ if (!_options.disabled) {
8078
8078
  const disabledField = !!(get$1(_fields, name) &&
8079
8079
  get$1(_fields, name)._f &&
8080
8080
  get$1(_fields, name)._f.disabled);
@@ -8210,7 +8210,7 @@ function createFormControl(props = {}) {
8210
8210
  }
8211
8211
  _names.unMount = new Set();
8212
8212
  };
8213
- const _getDirty = (name, data) => !props.disabled &&
8213
+ const _getDirty = (name, data) => !_options.disabled &&
8214
8214
  (name && data && set$1(_formValues, name, data),
8215
8215
  !deepEqual(getValues(), _defaultValues));
8216
8216
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8526,7 +8526,7 @@ function createFormControl(props = {}) {
8526
8526
  };
8527
8527
  const register = (name, options = {}) => {
8528
8528
  let field = get$1(_fields, name);
8529
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8529
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8530
8530
  set$1(_fields, name, {
8531
8531
  ...(field || {}),
8532
8532
  _f: {
@@ -8542,7 +8542,7 @@ function createFormControl(props = {}) {
8542
8542
  field,
8543
8543
  disabled: isBoolean(options.disabled)
8544
8544
  ? options.disabled
8545
- : props.disabled,
8545
+ : _options.disabled,
8546
8546
  name,
8547
8547
  value: options.value,
8548
8548
  });
@@ -8552,7 +8552,7 @@ function createFormControl(props = {}) {
8552
8552
  }
8553
8553
  return {
8554
8554
  ...(disabledIsDefined
8555
- ? { disabled: options.disabled || props.disabled }
8555
+ ? { disabled: options.disabled || _options.disabled }
8556
8556
  : {}),
8557
8557
  ...(_options.progressive
8558
8558
  ? {
@@ -8636,6 +8636,12 @@ function createFormControl(props = {}) {
8636
8636
  e.preventDefault && e.preventDefault();
8637
8637
  e.persist && e.persist();
8638
8638
  }
8639
+ if (_options.disabled) {
8640
+ if (onInvalid) {
8641
+ await onInvalid({ ..._formState.errors }, e);
8642
+ }
8643
+ return;
8644
+ }
8639
8645
  let fieldValues = cloneObject(_formValues);
8640
8646
  _subjects.state.next({
8641
8647
  isSubmitting: true,
@@ -8814,7 +8820,9 @@ function createFormControl(props = {}) {
8814
8820
  : fieldReference.ref;
8815
8821
  if (fieldRef.focus) {
8816
8822
  fieldRef.focus();
8817
- options.shouldSelect && fieldRef.select();
8823
+ options.shouldSelect &&
8824
+ isFunction$1(fieldRef.select) &&
8825
+ fieldRef.select();
8818
8826
  }
8819
8827
  }
8820
8828
  };
@@ -9015,11 +9023,6 @@ function useForm(props = {}) {
9015
9023
  values: control._getWatch(),
9016
9024
  });
9017
9025
  }, [props.shouldUnregister, control]);
9018
- React__default.useEffect(() => {
9019
- if (_formControl.current) {
9020
- _formControl.current.watch = _formControl.current.watch.bind({});
9021
- }
9022
- }, [formState]);
9023
9026
  _formControl.current.formState = getProxyFormState(formState, control);
9024
9027
  return _formControl.current;
9025
9028
  }
@@ -27229,7 +27232,8 @@ const Toastify = () => {
27229
27232
  isOpen: toastProps.isOpen,
27230
27233
  variant: toastProps.variant,
27231
27234
  toastTitle: toastProps.toastTitle,
27232
- toastMessage: toastProps.toastMessage
27235
+ toastMessage: toastProps.toastMessage,
27236
+ zIndex: 1000000000
27233
27237
  });
27234
27238
  };
27235
27239
  // Utility to trigger toast messages outside of the Toastify component
@@ -31364,6 +31368,7 @@ const Row = props => jsx("tr", {
31364
31368
  });
31365
31369
 
31366
31370
  const HeaderRow = props => jsx("tr", {
31371
+ className: "ff-spreadsheet-row-header",
31367
31372
  ...props
31368
31373
  });
31369
31374
 
@@ -31383,14 +31388,17 @@ const CornerIndicator = ({
31383
31388
  onSelect();
31384
31389
  }, [onSelect]);
31385
31390
  return jsx("th", {
31386
- className: classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
31387
- 'ff-spreadsheet-header--selected': selected
31388
- }),
31391
+ className: 'ff-spreadsheet-corner-header',
31389
31392
  onClick: handleClick,
31390
31393
  tabIndex: 0,
31391
- children: jsx(Icon, {
31392
- variant: selected ? 'dark' : 'light',
31393
- name: "excel_corner_menu"
31394
+ children: jsx("div", {
31395
+ className: classNames('corner-header', {
31396
+ 'ff-spreadsheet-header--selected': selected
31397
+ }),
31398
+ children: jsx(Icon, {
31399
+ variant: selected ? 'dark' : 'light',
31400
+ name: "excel_corner_menu"
31401
+ })
31394
31402
  })
31395
31403
  });
31396
31404
  };
@@ -31472,7 +31480,7 @@ const ColumnIndicator = ({
31472
31480
  return jsxs("th", {
31473
31481
  style: {
31474
31482
  minWidth: `${columnWidth}px`,
31475
- position: 'relative'
31483
+ position: 'sticky'
31476
31484
  },
31477
31485
  className: classNames('ff-spreadsheet-header', {
31478
31486
  'ff-spreadsheet-header--selected': selected
@@ -32005,7 +32013,7 @@ const Copied = () => {
32005
32013
  });
32006
32014
  };
32007
32015
 
32008
- 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}";
32016
+ 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}";
32009
32017
  styleInject(css_248z$n);
32010
32018
 
32011
32019
  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}";
@@ -33511,17 +33519,28 @@ const AttachImage = ({
33511
33519
  });
33512
33520
  };
33513
33521
 
33514
- 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}";
33522
+ 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}";
33515
33523
  styleInject(css_248z$f);
33516
33524
 
33517
33525
  const StatusCard = ({
33518
33526
  icon,
33519
33527
  status,
33520
33528
  count,
33521
- text
33529
+ text,
33530
+ style = {
33531
+ width: '196.4px'
33532
+ },
33533
+ onSelectedStatus = _status => {}
33522
33534
  }) => {
33535
+ const [isToggled, setIsToggled] = useState(false);
33536
+ const handleSelectStatus = status => {
33537
+ setIsToggled(true);
33538
+ onSelectedStatus(status);
33539
+ };
33523
33540
  return jsxs("div", {
33524
- className: `ff-card-container ${status.toLowerCase()}`,
33541
+ className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
33542
+ style: style,
33543
+ onClick: () => handleSelectStatus(status),
33525
33544
  children: [jsxs("div", {
33526
33545
  className: "ff-status-bar",
33527
33546
  children: [jsx("div", {
@@ -33534,7 +33553,6 @@ const StatusCard = ({
33534
33553
  }), jsx(Typography, {
33535
33554
  fontWeight: "semi-bold",
33536
33555
  fontSize: "10px",
33537
- color: "var(--ff-status-card-text-color)",
33538
33556
  textAlign: "center",
33539
33557
  lineHeight: "15px",
33540
33558
  className: "ff-status-text",
@@ -33548,13 +33566,14 @@ const StatusCard = ({
33548
33566
  fontSize: "24px",
33549
33567
  className: "ff-number",
33550
33568
  lineHeight: "36px",
33569
+ color: isToggled ? 'var(--base-bg-color)' : '',
33551
33570
  children: count
33552
33571
  }), jsx(Typography, {
33553
33572
  fontWeight: "regular",
33554
33573
  fontSize: "10px",
33555
33574
  className: "ff-text",
33556
33575
  lineHeight: "15px",
33557
- color: "var(--ff-card-status-text-color)",
33576
+ color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
33558
33577
  children: text
33559
33578
  })]
33560
33579
  })]
@@ -39615,7 +39634,8 @@ const BarChart = ({
39615
39634
  icons = [],
39616
39635
  iconSize,
39617
39636
  legendPosition = 'bottom',
39618
- legendGap = 5
39637
+ legendGap = 5,
39638
+ onSelectedBar = _label => {}
39619
39639
  }) => {
39620
39640
  const [tooltip, setTooltip] = useState({
39621
39641
  visible: false,
@@ -39673,6 +39693,9 @@ const BarChart = ({
39673
39693
  borderColor: 'transparent'
39674
39694
  });
39675
39695
  };
39696
+ const handleSelectLabel = label => {
39697
+ onSelectedBar(label);
39698
+ };
39676
39699
  return jsxs("div", {
39677
39700
  className: "ff-bar-chart-container",
39678
39701
  style: {
@@ -39747,7 +39770,8 @@ const BarChart = ({
39747
39770
  ry: barBorderRadius,
39748
39771
  onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
39749
39772
  onMouseMove: handleMouseMove,
39750
- onMouseLeave: handleMouseLeave
39773
+ onMouseLeave: handleMouseLeave,
39774
+ onClick: () => handleSelectLabel(item.label)
39751
39775
  }), showXAxisLabels && jsx("text", {
39752
39776
  x: barX + barWidth / 2,
39753
39777
  y: height + topPadding + 15,