pixel-react 1.7.3 → 1.7.5

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 (163) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/StatusCard/types.d.ts +7 -1
  4. package/lib/components/TableTree/TableTree copy.d.ts +25 -0
  5. package/lib/index.d.ts +8 -1
  6. package/lib/index.esm.js +263 -150
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +263 -150
  9. package/lib/index.js.map +1 -1
  10. package/lib/tsconfig.tsbuildinfo +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/MenuOption/MenuOption.tsx +29 -20
  27. package/src/components/StatusCard/StatusCard.scss +47 -4
  28. package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
  29. package/src/components/StatusCard/StatusCard.tsx +28 -5
  30. package/src/components/StatusCard/types.ts +15 -10
  31. package/src/components/Toastify/Toastify.tsx +1 -0
  32. package/lib/1fb4472b34e4fe07.css +0 -1
  33. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  34. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  35. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  36. package/lib/components/AddButton/AddButton.d.ts +0 -5
  37. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  38. package/lib/components/AddButton/index.d.ts +0 -1
  39. package/lib/components/AddButton/types.d.ts +0 -4
  40. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  41. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  42. package/lib/components/AddVariables/index.d.ts +0 -1
  43. package/lib/components/AddVariables/types.d.ts +0 -35
  44. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  45. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  46. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  47. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  48. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  49. package/lib/components/Button/Button.stories.d.ts +0 -13
  50. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  51. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  52. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  53. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  54. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  55. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  56. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  57. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  58. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  59. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  60. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  61. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  62. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  63. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  64. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  65. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  66. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  67. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  68. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  69. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  70. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  71. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  72. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  73. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  74. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  75. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  76. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  77. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  78. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  79. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  80. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  81. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  82. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  83. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  84. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  85. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  86. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  87. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  88. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  89. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  90. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  91. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  92. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  93. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  94. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  95. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  96. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  97. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  98. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  99. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  100. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  101. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  102. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  103. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  104. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  105. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  106. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  107. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  108. package/lib/components/ExcelFile/Types.d.ts +0 -129
  109. package/lib/components/ExcelFile/index.d.ts +0 -1
  110. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  111. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  112. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  113. package/lib/components/Form/Form.stories.d.ts +0 -7
  114. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  115. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  116. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  117. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  118. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  119. package/lib/components/Input/Input.stories.d.ts +0 -9
  120. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  121. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  122. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  123. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  124. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  125. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  126. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  127. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  128. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  129. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  130. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  131. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  132. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  133. package/lib/components/Search/Search.stories.d.ts +0 -6
  134. package/lib/components/Select/Select.stories.d.ts +0 -14
  135. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  136. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  137. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  138. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  139. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  140. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  141. package/lib/components/Table/Table.stories.d.ts +0 -13
  142. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  143. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  144. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  145. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  146. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  147. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  148. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  149. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  150. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  151. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  152. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  153. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  154. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  155. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  156. package/lib/utils/find/findAndInsert.d.ts +0 -7
  157. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  158. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  159. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  160. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  161. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  162. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  163. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
package/lib/index.esm.js CHANGED
@@ -3180,9 +3180,9 @@ const OptionCard = ({
3180
3180
  const optionCardRef = useRef(null);
3181
3181
  useEffect(() => {
3182
3182
  if (optionCardRef?.current) {
3183
- const rect = optionCardRef?.current?.getBoundingClientRect();
3184
- setOptionsHeight(rect?.height);
3185
- setOptionsWidth(rect?.width);
3183
+ const rect = optionCardRef.current.getBoundingClientRect();
3184
+ setOptionsHeight(rect.height);
3185
+ setOptionsWidth(rect.width);
3186
3186
  }
3187
3187
  }, []);
3188
3188
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
@@ -3195,7 +3195,7 @@ const OptionCard = ({
3195
3195
  };
3196
3196
  case 'down':
3197
3197
  return {
3198
- top: menuPosition.top + 20,
3198
+ top: menuPosition.top + menuPosition.height + 7,
3199
3199
  left: menuPosition.left - 4
3200
3200
  };
3201
3201
  case 'left':
@@ -3206,23 +3206,25 @@ const OptionCard = ({
3206
3206
  case 'right':
3207
3207
  return {
3208
3208
  top: menuPosition.top - 4,
3209
- left: menuPosition.left + 20
3209
+ left: menuPosition.left + menuPosition.height + 20
3210
3210
  };
3211
3211
  default:
3212
3212
  return {
3213
- top: menuPosition.bottom,
3214
- left: menuPosition.rightSpaceAvailable + 12
3213
+ top: menuPosition.top,
3214
+ left: menuPosition.left
3215
3215
  };
3216
3216
  }
3217
3217
  })();
3218
+ const adjustedStyle = {
3219
+ top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
3220
+ left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
3221
+ zIndex
3222
+ };
3218
3223
  return /*#__PURE__*/createPortal(jsx("div", {
3219
3224
  className: classNames('ff-option-card', [{
3220
3225
  'ff-option-card--primary': variant === 'primary'
3221
3226
  }], currentTheme),
3222
- style: {
3223
- ...style,
3224
- zIndex
3225
- },
3227
+ style: adjustedStyle,
3226
3228
  ref: optionCardRef,
3227
3229
  children: options.map(opt => jsx(Option$1, {
3228
3230
  option: opt,
@@ -3256,26 +3258,28 @@ const MenuOption = ({
3256
3258
  right: 0
3257
3259
  });
3258
3260
  const closeDropDown = () => setIsClicked(false);
3259
- const onIconClickHandler = () => {
3260
- onClick();
3261
- calculateDims();
3262
- setIsClicked(prev => !prev);
3263
- };
3264
- const handleOptionClick = option => {
3265
- onOptionClick(option);
3266
- closeDropDown();
3267
- };
3268
3261
  const calculateDims = () => {
3269
3262
  if (targetRef?.current) {
3270
3263
  const rect = targetRef.current.getBoundingClientRect();
3264
+ const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
3265
+ const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
3271
3266
  setMenuPosition({
3272
- top: rect.top + window.scrollY,
3273
- left: rect.left + window.scrollX,
3267
+ top: rect.top + window.scrollY - containerScrollTop,
3268
+ left: rect.left + window.scrollX - containerScrollLeft,
3274
3269
  height: rect.height,
3275
3270
  right: rect.right
3276
3271
  });
3277
3272
  }
3278
3273
  };
3274
+ const onIconClickHandler = () => {
3275
+ onClick();
3276
+ calculateDims();
3277
+ setIsClicked(prev => !prev);
3278
+ };
3279
+ const handleOptionClick = option => {
3280
+ onOptionClick(option);
3281
+ closeDropDown();
3282
+ };
3279
3283
  return jsxs("div", {
3280
3284
  className: "ff-menu-option-container",
3281
3285
  ref: menuRef,
@@ -7982,7 +7986,7 @@ function createFormControl(props = {}) {
7982
7986
  timer = setTimeout(callback, wait);
7983
7987
  };
7984
7988
  const _updateValid = async (shouldUpdateValid) => {
7985
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7989
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7986
7990
  const isValid = _options.resolver
7987
7991
  ? isEmptyObject((await _executeSchema()).errors)
7988
7992
  : await executeBuiltInValidation(_fields, true);
@@ -7994,7 +7998,7 @@ function createFormControl(props = {}) {
7994
7998
  }
7995
7999
  };
7996
8000
  const _updateIsValidating = (names, isValidating) => {
7997
- if (!props.disabled &&
8001
+ if (!_options.disabled &&
7998
8002
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7999
8003
  (names || Array.from(_names.mount)).forEach((name) => {
8000
8004
  if (name) {
@@ -8010,7 +8014,7 @@ function createFormControl(props = {}) {
8010
8014
  }
8011
8015
  };
8012
8016
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
8013
- if (args && method && !props.disabled) {
8017
+ if (args && method && !_options.disabled) {
8014
8018
  _state.action = true;
8015
8019
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
8016
8020
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8074,7 +8078,7 @@ function createFormControl(props = {}) {
8074
8078
  const output = {
8075
8079
  name,
8076
8080
  };
8077
- if (!props.disabled) {
8081
+ if (!_options.disabled) {
8078
8082
  const disabledField = !!(get$1(_fields, name) &&
8079
8083
  get$1(_fields, name)._f &&
8080
8084
  get$1(_fields, name)._f.disabled);
@@ -8210,7 +8214,7 @@ function createFormControl(props = {}) {
8210
8214
  }
8211
8215
  _names.unMount = new Set();
8212
8216
  };
8213
- const _getDirty = (name, data) => !props.disabled &&
8217
+ const _getDirty = (name, data) => !_options.disabled &&
8214
8218
  (name && data && set$1(_formValues, name, data),
8215
8219
  !deepEqual(getValues(), _defaultValues));
8216
8220
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8526,7 +8530,7 @@ function createFormControl(props = {}) {
8526
8530
  };
8527
8531
  const register = (name, options = {}) => {
8528
8532
  let field = get$1(_fields, name);
8529
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8533
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8530
8534
  set$1(_fields, name, {
8531
8535
  ...(field || {}),
8532
8536
  _f: {
@@ -8542,7 +8546,7 @@ function createFormControl(props = {}) {
8542
8546
  field,
8543
8547
  disabled: isBoolean(options.disabled)
8544
8548
  ? options.disabled
8545
- : props.disabled,
8549
+ : _options.disabled,
8546
8550
  name,
8547
8551
  value: options.value,
8548
8552
  });
@@ -8552,7 +8556,7 @@ function createFormControl(props = {}) {
8552
8556
  }
8553
8557
  return {
8554
8558
  ...(disabledIsDefined
8555
- ? { disabled: options.disabled || props.disabled }
8559
+ ? { disabled: options.disabled || _options.disabled }
8556
8560
  : {}),
8557
8561
  ...(_options.progressive
8558
8562
  ? {
@@ -8636,6 +8640,12 @@ function createFormControl(props = {}) {
8636
8640
  e.preventDefault && e.preventDefault();
8637
8641
  e.persist && e.persist();
8638
8642
  }
8643
+ if (_options.disabled) {
8644
+ if (onInvalid) {
8645
+ await onInvalid({ ..._formState.errors }, e);
8646
+ }
8647
+ return;
8648
+ }
8639
8649
  let fieldValues = cloneObject(_formValues);
8640
8650
  _subjects.state.next({
8641
8651
  isSubmitting: true,
@@ -8814,7 +8824,9 @@ function createFormControl(props = {}) {
8814
8824
  : fieldReference.ref;
8815
8825
  if (fieldRef.focus) {
8816
8826
  fieldRef.focus();
8817
- options.shouldSelect && fieldRef.select();
8827
+ options.shouldSelect &&
8828
+ isFunction$1(fieldRef.select) &&
8829
+ fieldRef.select();
8818
8830
  }
8819
8831
  }
8820
8832
  };
@@ -9015,11 +9027,6 @@ function useForm(props = {}) {
9015
9027
  values: control._getWatch(),
9016
9028
  });
9017
9029
  }, [props.shouldUnregister, control]);
9018
- React__default.useEffect(() => {
9019
- if (_formControl.current) {
9020
- _formControl.current.watch = _formControl.current.watch.bind({});
9021
- }
9022
- }, [formState]);
9023
9030
  _formControl.current.formState = getProxyFormState(formState, control);
9024
9031
  return _formControl.current;
9025
9032
  }
@@ -13232,6 +13239,53 @@ function setYear(date, year, options) {
13232
13239
  return date_;
13233
13240
  }
13234
13241
 
13242
+ const FIVE_WEEKS = 5;
13243
+ const FOUR_WEEKS = 4;
13244
+ /**
13245
+ * Return the number of weeks to display in the broadcast calendar.
13246
+ *
13247
+ * @since 9.4.0
13248
+ */
13249
+ function getBroadcastWeeksInMonth(month, dateLib) {
13250
+ // Get the first day of the month
13251
+ const firstDayOfMonth = dateLib.startOfMonth(month);
13252
+ // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
13253
+ const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
13254
+ const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
13255
+ const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
13256
+ const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
13257
+ return numberOfWeeks;
13258
+ }
13259
+
13260
+ /**
13261
+ * Return the start date of the week in the broadcast calendar.
13262
+ *
13263
+ * @since 9.4.0
13264
+ */
13265
+ function startOfBroadcastWeek(date, dateLib) {
13266
+ const firstOfMonth = dateLib.startOfMonth(date);
13267
+ const dayOfWeek = firstOfMonth.getDay();
13268
+ if (dayOfWeek === 1) {
13269
+ return firstOfMonth;
13270
+ } else if (dayOfWeek === 0) {
13271
+ return dateLib.addDays(firstOfMonth, -1 * 6);
13272
+ } else {
13273
+ return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
13274
+ }
13275
+ }
13276
+
13277
+ /**
13278
+ * Return the end date of the week in the broadcast calendar.
13279
+ *
13280
+ * @since 9.4.0
13281
+ */
13282
+ function endOfBroadcastWeek(date, dateLib) {
13283
+ const startDate = startOfBroadcastWeek(date, dateLib);
13284
+ const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
13285
+ const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
13286
+ return endDate;
13287
+ }
13288
+
13235
13289
  /**
13236
13290
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
13237
13291
  * options. Methods of this class can be overridden using the
@@ -13312,6 +13366,15 @@ class DateLib {
13312
13366
  this.differenceInCalendarMonths = (dateLeft, dateRight) => {
13313
13367
  return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
13314
13368
  };
13369
+ /**
13370
+ * Returns the end of the broadcast week for the given date.
13371
+ *
13372
+ * @param date The original date.
13373
+ * @returns The end of the broadcast week.
13374
+ */
13375
+ this.endOfBroadcastWeek = date => {
13376
+ return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
13377
+ };
13315
13378
  /**
13316
13379
  * Returns the end of the ISO week for the given date.
13317
13380
  *
@@ -13473,6 +13536,15 @@ class DateLib {
13473
13536
  this.setYear = (date, year) => {
13474
13537
  return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
13475
13538
  };
13539
+ /**
13540
+ * Returns the start of the broadcast week for the given date.
13541
+ *
13542
+ * @param date The original date.
13543
+ * @returns The start of the broadcast week.
13544
+ */
13545
+ this.startOfBroadcastWeek = date => {
13546
+ return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
13547
+ };
13476
13548
  /**
13477
13549
  * Returns the start of the day for the given date.
13478
13550
  *
@@ -14058,7 +14130,8 @@ function getDataAttributes(props) {
14058
14130
  "data-mode": props.mode ?? undefined,
14059
14131
  "data-required": "required" in props ? props.required : undefined,
14060
14132
  "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
14061
- "data-week-numbers": props.showWeekNumber || undefined
14133
+ "data-week-numbers": props.showWeekNumber || undefined,
14134
+ "data-broadcast-calendar": props.broadcastCalendar || undefined
14062
14135
  };
14063
14136
  Object.entries(props).forEach(([key, val]) => {
14064
14137
  if (key.startsWith("data-")) {
@@ -14124,7 +14197,7 @@ function formatDay(date, options, dateLib) {
14124
14197
  */
14125
14198
  function formatMonthDropdown(/** The month number to format. */
14126
14199
  monthNumber, /** The locale to use for formatting. */
14127
- locale = enUS) {
14200
+ locale) {
14128
14201
  return locale.localize?.month(monthNumber);
14129
14202
  }
14130
14203
 
@@ -14228,7 +14301,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
14228
14301
  return a - b;
14229
14302
  });
14230
14303
  const options = sortedMonths.map(value => {
14231
- const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
14304
+ const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
14232
14305
  const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
14233
14306
  const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
14234
14307
  return {
@@ -14603,7 +14676,8 @@ function tzName(tz, date) {
14603
14676
  */
14604
14677
  function getWeekdays(/** The date library. */
14605
14678
  dateLib, /** Use ISOWeek instead of locale/ */
14606
- ISOWeek, timeZone) {
14679
+ ISOWeek, timeZone, /** @since 9.4.0 */
14680
+ broadcastCalendar) {
14607
14681
  const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
14608
14682
  const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
14609
14683
  const days = [];
@@ -14806,29 +14880,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
14806
14880
  labelYearDropdown: labelYearDropdown
14807
14881
  });
14808
14882
 
14809
- /** The number of days in a month when having 6 weeks. */
14810
- const NrOfDaysWithFixedWeeks = 42;
14811
14883
  /** Return all the dates to display in the calendar. */
14812
14884
  function getDates(displayMonths, maxDate, props, dateLib) {
14813
14885
  const firstMonth = displayMonths[0];
14814
14886
  const lastMonth = displayMonths[displayMonths.length - 1];
14815
14887
  const {
14816
14888
  ISOWeek,
14817
- fixedWeeks
14889
+ fixedWeeks,
14890
+ broadcastCalendar
14818
14891
  } = props ?? {};
14819
14892
  const {
14820
- startOfWeek,
14821
- endOfWeek,
14822
- startOfISOWeek,
14823
- endOfISOWeek,
14824
14893
  addDays,
14825
14894
  differenceInCalendarDays,
14826
14895
  differenceInCalendarMonths,
14896
+ endOfBroadcastWeek,
14897
+ endOfISOWeek,
14898
+ endOfMonth,
14899
+ endOfWeek,
14827
14900
  isAfter,
14828
- endOfMonth
14901
+ startOfBroadcastWeek,
14902
+ startOfISOWeek,
14903
+ startOfWeek
14829
14904
  } = dateLib;
14830
- const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
14831
- const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
14905
+ const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
14906
+ const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
14832
14907
  const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
14833
14908
  const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
14834
14909
  const dates = [];
@@ -14840,9 +14915,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
14840
14915
  dates.push(date);
14841
14916
  }
14842
14917
  // If fixed weeks is enabled, add the extra dates to the array
14843
- const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
14918
+ const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
14919
+ const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
14844
14920
  if (fixedWeeks && dates.length < extraDates) {
14845
- for (let i = 0; i < 7; i++) {
14921
+ const daysToAdd = extraDates - dates.length;
14922
+ for (let i = 0; i < daysToAdd; i++) {
14846
14923
  const date = addDays(dates[dates.length - 1], 1);
14847
14924
  dates.push(date);
14848
14925
  }
@@ -14953,25 +15030,29 @@ displayMonths, /** The dates to display in the calendar. */
14953
15030
  dates, /** Options from the props context. */
14954
15031
  props, dateLib) {
14955
15032
  const {
14956
- startOfWeek,
14957
- endOfWeek,
14958
- startOfISOWeek,
15033
+ addDays,
15034
+ endOfBroadcastWeek,
14959
15035
  endOfISOWeek,
14960
15036
  endOfMonth,
14961
- addDays,
15037
+ endOfWeek,
15038
+ getISOWeek,
14962
15039
  getWeek,
14963
- getISOWeek
15040
+ startOfBroadcastWeek,
15041
+ startOfISOWeek,
15042
+ startOfWeek
14964
15043
  } = dateLib;
14965
15044
  const dayPickerMonths = displayMonths.reduce((months, month) => {
14966
- const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
14967
- const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
15045
+ const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
15046
+ const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
14968
15047
  /** The dates to display in the month. */
14969
15048
  const monthDates = dates.filter(date => {
14970
15049
  return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
14971
15050
  });
14972
- if (props.fixedWeeks && monthDates.length < 42) {
15051
+ const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
15052
+ if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
14973
15053
  const extraDates = dates.filter(date => {
14974
- return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
15054
+ const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
15055
+ return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
14975
15056
  });
14976
15057
  monthDates.push(...extraDates);
14977
15058
  }
@@ -15409,27 +15490,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
15409
15490
  /** Return the next date that should be focused. */
15410
15491
  function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
15411
15492
  const {
15412
- ISOWeek
15493
+ ISOWeek,
15494
+ broadcastCalendar
15413
15495
  } = props;
15414
15496
  const {
15415
15497
  addDays,
15416
15498
  addMonths,
15417
- addYears,
15418
15499
  addWeeks,
15419
- startOfISOWeek,
15500
+ addYears,
15501
+ endOfBroadcastWeek,
15420
15502
  endOfISOWeek,
15421
- startOfWeek,
15422
15503
  endOfWeek,
15423
15504
  max,
15424
- min
15505
+ min,
15506
+ startOfBroadcastWeek,
15507
+ startOfISOWeek,
15508
+ startOfWeek
15425
15509
  } = dateLib;
15426
15510
  const moveFns = {
15427
15511
  day: addDays,
15428
15512
  week: addWeeks,
15429
15513
  month: addMonths,
15430
15514
  year: addYears,
15431
- startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
15432
- endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
15515
+ startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
15516
+ endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
15433
15517
  };
15434
15518
  let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
15435
15519
  if (moveDir === "before" && navStart) {
@@ -15495,6 +15579,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
15495
15579
  /**
15496
15580
  * Return a function to get the modifiers for a given day.
15497
15581
  *
15582
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
15583
+ *
15498
15584
  * @private
15499
15585
  */
15500
15586
  function useGetModifiers(days, props, dateLib) {
@@ -15503,12 +15589,19 @@ function useGetModifiers(days, props, dateLib) {
15503
15589
  hidden,
15504
15590
  modifiers,
15505
15591
  showOutsideDays,
15592
+ broadcastCalendar,
15506
15593
  today
15507
15594
  } = props;
15508
15595
  const {
15509
15596
  isSameDay,
15510
- isSameMonth
15597
+ isSameMonth,
15598
+ startOfMonth,
15599
+ isBefore,
15600
+ endOfMonth,
15601
+ isAfter
15511
15602
  } = dateLib;
15603
+ const startMonth = props.startMonth && startOfMonth(props.startMonth);
15604
+ const endMonth = props.endMonth && endOfMonth(props.endMonth);
15512
15605
  const internalModifiersMap = {
15513
15606
  [DayFlag.focused]: [],
15514
15607
  [DayFlag.outside]: [],
@@ -15517,20 +15610,18 @@ function useGetModifiers(days, props, dateLib) {
15517
15610
  [DayFlag.today]: []
15518
15611
  };
15519
15612
  const customModifiersMap = {};
15520
- const selectionModifiersMap = {
15521
- [SelectionState.range_end]: [],
15522
- [SelectionState.range_middle]: [],
15523
- [SelectionState.range_start]: [],
15524
- [SelectionState.selected]: []
15525
- };
15526
15613
  for (const day of days) {
15527
15614
  const {
15528
15615
  date,
15529
15616
  displayMonth
15530
15617
  } = day;
15531
15618
  const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
15619
+ const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
15620
+ const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
15532
15621
  const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
15533
- const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
15622
+ const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
15623
+ // Broadcast calendar will show outside days as default
15624
+ !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
15534
15625
  const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
15535
15626
  if (isOutside) internalModifiersMap.outside.push(day);
15536
15627
  if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15559,27 +15650,16 @@ function useGetModifiers(days, props, dateLib) {
15559
15650
  [DayFlag.outside]: false,
15560
15651
  [DayFlag.today]: false
15561
15652
  };
15562
- const selectionStates = {
15563
- [SelectionState.range_end]: false,
15564
- [SelectionState.range_middle]: false,
15565
- [SelectionState.range_start]: false,
15566
- [SelectionState.selected]: false
15567
- };
15568
15653
  const customModifiers = {};
15569
15654
  // Find the modifiers for the given day
15570
15655
  for (const name in internalModifiersMap) {
15571
15656
  const days = internalModifiersMap[name];
15572
15657
  dayFlags[name] = days.some(d => d === day);
15573
15658
  }
15574
- for (const name in selectionModifiersMap) {
15575
- const days = selectionModifiersMap[name];
15576
- selectionStates[name] = days.some(d => d === day);
15577
- }
15578
15659
  for (const name in customModifiersMap) {
15579
15660
  customModifiers[name] = customModifiersMap[name].some(d => d === day);
15580
15661
  }
15581
15662
  return {
15582
- ...selectionStates,
15583
15663
  ...dayFlags,
15584
15664
  // custom modifiers should override all the previous ones
15585
15665
  ...customModifiers
@@ -15984,7 +16064,7 @@ function DayPicker(props) {
15984
16064
  };
15985
16065
  const dateLib = new DateLib({
15986
16066
  locale,
15987
- weekStartsOn: props.weekStartsOn,
16067
+ weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
15988
16068
  firstWeekContainsDate: props.firstWeekContainsDate,
15989
16069
  useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
15990
16070
  useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -16003,7 +16083,7 @@ function DayPicker(props) {
16003
16083
  ...props.classNames
16004
16084
  }
16005
16085
  };
16006
- }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
16086
+ }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
16007
16087
  const {
16008
16088
  captionLayout,
16009
16089
  mode,
@@ -18781,6 +18861,8 @@ function LiveRegion(_ref) {
18781
18861
  // Hide element visually but keep it readable by screen readers
18782
18862
  const visuallyHidden = {
18783
18863
  position: 'fixed',
18864
+ top: 0,
18865
+ left: 0,
18784
18866
  width: 1,
18785
18867
  height: 1,
18786
18868
  margin: -1,
@@ -20073,6 +20155,9 @@ class AbstractPointerSensor {
20073
20155
  passive: false
20074
20156
  });
20075
20157
  this.listeners.add(events.end.name, this.handleEnd);
20158
+ if (events.cancel) {
20159
+ this.listeners.add(events.cancel.name, this.handleCancel);
20160
+ }
20076
20161
  this.windowListeners.add(EventName.Resize, this.handleCancel);
20077
20162
  this.windowListeners.add(EventName.DragStart, preventDefault);
20078
20163
  this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -20192,6 +20277,9 @@ class AbstractPointerSensor {
20192
20277
  }
20193
20278
  }
20194
20279
  const events = {
20280
+ cancel: {
20281
+ name: 'pointercancel'
20282
+ },
20195
20283
  move: {
20196
20284
  name: 'pointermove'
20197
20285
  },
@@ -20264,6 +20352,9 @@ MouseSensor.activators = [{
20264
20352
  }
20265
20353
  }];
20266
20354
  const events$2 = {
20355
+ cancel: {
20356
+ name: 'touchcancel'
20357
+ },
20267
20358
  move: {
20268
20359
  name: 'touchmove'
20269
20360
  },
@@ -20465,11 +20556,11 @@ function useScrollIntent(_ref2) {
20465
20556
  }, [disabled, delta, previousDelta]);
20466
20557
  }
20467
20558
  function useCachedNode(draggableNodes, id) {
20468
- const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
20559
+ const draggableNode = id != null ? draggableNodes.get(id) : undefined;
20469
20560
  const node = draggableNode ? draggableNode.node.current : null;
20470
20561
  return useLazyMemo(cachedNode => {
20471
20562
  var _ref;
20472
- if (id === null) {
20563
+ if (id == null) {
20473
20564
  return null;
20474
20565
  } // In some cases, the draggable node can unmount while dragging
20475
20566
  // This is the case for virtualized lists. In those situations,
@@ -20677,7 +20768,26 @@ function useRect(element, measure, fallbackRect) {
20677
20768
  if (measure === void 0) {
20678
20769
  measure = defaultMeasure;
20679
20770
  }
20680
- const [rect, measureRect] = useReducer(reducer, null);
20771
+ const [rect, setRect] = useState(null);
20772
+ function measureRect() {
20773
+ setRect(currentRect => {
20774
+ if (!element) {
20775
+ return null;
20776
+ }
20777
+ if (element.isConnected === false) {
20778
+ var _ref;
20779
+
20780
+ // Fall back to last rect we measured if the element is
20781
+ // no longer connected to the DOM.
20782
+ return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
20783
+ }
20784
+ const newRect = measure(element);
20785
+ if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
20786
+ return currentRect;
20787
+ }
20788
+ return newRect;
20789
+ });
20790
+ }
20681
20791
  const mutationObserver = useMutationObserver({
20682
20792
  callback(records) {
20683
20793
  if (!element) {
@@ -20712,23 +20822,6 @@ function useRect(element, measure, fallbackRect) {
20712
20822
  }
20713
20823
  }, [element]);
20714
20824
  return rect;
20715
- function reducer(currentRect) {
20716
- if (!element) {
20717
- return null;
20718
- }
20719
- if (element.isConnected === false) {
20720
- var _ref;
20721
-
20722
- // Fall back to last rect we measured if the element is
20723
- // no longer connected to the DOM.
20724
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
20725
- }
20726
- const newRect = measure(element);
20727
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
20728
- return currentRect;
20729
- }
20730
- return newRect;
20731
- }
20732
20825
  }
20733
20826
  function useRectDelta(rect) {
20734
20827
  const initialRect = useInitialValue(rect);
@@ -20874,28 +20967,24 @@ function useRects(elements, measure) {
20874
20967
  }
20875
20968
  const [firstElement] = elements;
20876
20969
  const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
20877
- const [rects, measureRects] = useReducer(reducer, defaultValue$2);
20970
+ const [rects, setRects] = useState(defaultValue$2);
20971
+ function measureRects() {
20972
+ setRects(() => {
20973
+ if (!elements.length) {
20974
+ return defaultValue$2;
20975
+ }
20976
+ return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
20977
+ });
20978
+ }
20878
20979
  const resizeObserver = useResizeObserver({
20879
20980
  callback: measureRects
20880
20981
  });
20881
- if (elements.length > 0 && rects === defaultValue$2) {
20882
- measureRects();
20883
- }
20884
20982
  useIsomorphicLayoutEffect$1(() => {
20885
- if (elements.length) {
20886
- elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
20887
- } else {
20888
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
20889
- measureRects();
20890
- }
20983
+ resizeObserver == null ? void 0 : resizeObserver.disconnect();
20984
+ measureRects();
20985
+ elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
20891
20986
  }, [elements]);
20892
20987
  return rects;
20893
- function reducer() {
20894
- if (!elements.length) {
20895
- return defaultValue$2;
20896
- }
20897
- return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
20898
- }
20899
20988
  }
20900
20989
  function getMeasurableNode(node) {
20901
20990
  if (!node) {
@@ -21062,7 +21151,7 @@ function reducer$1(state, action) {
21062
21151
  }
21063
21152
  };
21064
21153
  case Action.DragMove:
21065
- if (!state.draggable.active) {
21154
+ if (state.draggable.active == null) {
21066
21155
  return state;
21067
21156
  }
21068
21157
  return {
@@ -21334,7 +21423,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21334
21423
  containers: droppableContainers
21335
21424
  }
21336
21425
  } = state;
21337
- const node = activeId ? draggableNodes.get(activeId) : null;
21426
+ const node = activeId != null ? draggableNodes.get(activeId) : null;
21338
21427
  const activeRects = useRef({
21339
21428
  initial: null,
21340
21429
  translated: null
@@ -21369,7 +21458,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21369
21458
  const autoScrollOptions = getAutoScrollerOptions();
21370
21459
  const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
21371
21460
  useLayoutShiftScrollCompensation({
21372
- activeNode: activeId ? draggableNodes.get(activeId) : null,
21461
+ activeNode: activeId != null ? draggableNodes.get(activeId) : null,
21373
21462
  config: autoScrollOptions.layoutShiftCompensation,
21374
21463
  initialRect: initialActiveNodeRect,
21375
21464
  measure: measuringConfiguration.draggable.measure
@@ -21447,6 +21536,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21447
21536
 
21448
21537
  const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
21449
21538
  const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
21539
+ const activeSensorRef = useRef(null);
21450
21540
  const instantiateSensor = useCallback((event, _ref2) => {
21451
21541
  let {
21452
21542
  sensor: Sensor,
@@ -21481,6 +21571,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21481
21571
  onDragStart
21482
21572
  } = latestProps.current;
21483
21573
  const event = {
21574
+ activatorEvent,
21484
21575
  active: {
21485
21576
  id,
21486
21577
  data: draggableNode.data,
@@ -21499,6 +21590,8 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21499
21590
  type: 'onDragStart',
21500
21591
  event
21501
21592
  });
21593
+ setActiveSensor(activeSensorRef.current);
21594
+ setActivatorEvent(activatorEvent);
21502
21595
  });
21503
21596
  },
21504
21597
  onMove(coordinates) {
@@ -21510,10 +21603,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21510
21603
  onEnd: createHandler(Action.DragEnd),
21511
21604
  onCancel: createHandler(Action.DragCancel)
21512
21605
  });
21513
- unstable_batchedUpdates(() => {
21514
- setActiveSensor(sensorInstance);
21515
- setActivatorEvent(event.nativeEvent);
21516
- });
21606
+ activeSensorRef.current = sensorInstance;
21517
21607
  function createHandler(type) {
21518
21608
  return async function handler() {
21519
21609
  const {
@@ -21550,6 +21640,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21550
21640
  setOver(null);
21551
21641
  setActiveSensor(null);
21552
21642
  setActivatorEvent(null);
21643
+ activeSensorRef.current = null;
21553
21644
  const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
21554
21645
  if (event) {
21555
21646
  const handler = latestProps.current[eventName];
@@ -21771,7 +21862,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
21771
21862
  });
21772
21863
  const NullContext = /*#__PURE__*/createContext$1(null);
21773
21864
  const defaultRole = 'button';
21774
- const ID_PREFIX$1 = 'Droppable';
21865
+ const ID_PREFIX$1 = 'Draggable';
21775
21866
  function useDraggable(_ref) {
21776
21867
  let {
21777
21868
  id,
@@ -21918,7 +22009,7 @@ function useDroppable(_ref) {
21918
22009
  resizeObserverConnected.current = false;
21919
22010
  resizeObserver.observe(nodeRef.current);
21920
22011
  }, [nodeRef, resizeObserver]);
21921
- useIsomorphicLayoutEffect$1(() => {
22012
+ useEffect(() => {
21922
22013
  dispatch({
21923
22014
  type: Action.RegisterDroppable,
21924
22015
  element: {
@@ -22333,6 +22424,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
22333
22424
  defaultCoordinates: defaultCoordinates,
22334
22425
  defaultDropAnimation: defaultDropAnimationConfiguration,
22335
22426
  defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
22427
+ defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
22336
22428
  defaultScreenReaderInstructions: defaultScreenReaderInstructions,
22337
22429
  getClientRect: getClientRect,
22338
22430
  getFirstCollision: getFirstCollision,
@@ -27229,7 +27321,8 @@ const Toastify = () => {
27229
27321
  isOpen: toastProps.isOpen,
27230
27322
  variant: toastProps.variant,
27231
27323
  toastTitle: toastProps.toastTitle,
27232
- toastMessage: toastProps.toastMessage
27324
+ toastMessage: toastProps.toastMessage,
27325
+ zIndex: 1000000000
27233
27326
  });
27234
27327
  };
27235
27328
  // Utility to trigger toast messages outside of the Toastify component
@@ -31364,6 +31457,7 @@ const Row = props => jsx("tr", {
31364
31457
  });
31365
31458
 
31366
31459
  const HeaderRow = props => jsx("tr", {
31460
+ className: "ff-spreadsheet-row-header",
31367
31461
  ...props
31368
31462
  });
31369
31463
 
@@ -31383,14 +31477,17 @@ const CornerIndicator = ({
31383
31477
  onSelect();
31384
31478
  }, [onSelect]);
31385
31479
  return jsx("th", {
31386
- className: classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
31387
- 'ff-spreadsheet-header--selected': selected
31388
- }),
31480
+ className: 'ff-spreadsheet-corner-header',
31389
31481
  onClick: handleClick,
31390
31482
  tabIndex: 0,
31391
- children: jsx(Icon, {
31392
- variant: selected ? 'dark' : 'light',
31393
- name: "excel_corner_menu"
31483
+ children: jsx("div", {
31484
+ className: classNames('corner-header', {
31485
+ 'ff-spreadsheet-header--selected': selected
31486
+ }),
31487
+ children: jsx(Icon, {
31488
+ variant: selected ? 'dark' : 'light',
31489
+ name: "excel_corner_menu"
31490
+ })
31394
31491
  })
31395
31492
  });
31396
31493
  };
@@ -31472,7 +31569,7 @@ const ColumnIndicator = ({
31472
31569
  return jsxs("th", {
31473
31570
  style: {
31474
31571
  minWidth: `${columnWidth}px`,
31475
- position: 'relative'
31572
+ position: 'sticky'
31476
31573
  },
31477
31574
  className: classNames('ff-spreadsheet-header', {
31478
31575
  'ff-spreadsheet-header--selected': selected
@@ -32005,7 +32102,7 @@ const Copied = () => {
32005
32102
  });
32006
32103
  };
32007
32104
 
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}";
32105
+ 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
32106
  styleInject(css_248z$n);
32010
32107
 
32011
32108
  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 +33608,28 @@ const AttachImage = ({
33511
33608
  });
33512
33609
  };
33513
33610
 
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}";
33611
+ 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
33612
  styleInject(css_248z$f);
33516
33613
 
33517
33614
  const StatusCard = ({
33518
33615
  icon,
33519
33616
  status,
33520
33617
  count,
33521
- text
33618
+ text,
33619
+ style = {
33620
+ width: '196.4px'
33621
+ },
33622
+ onSelectedStatus = _status => {}
33522
33623
  }) => {
33624
+ const [isToggled, setIsToggled] = useState(false);
33625
+ const handleSelectStatus = status => {
33626
+ setIsToggled(true);
33627
+ onSelectedStatus(status);
33628
+ };
33523
33629
  return jsxs("div", {
33524
- className: `ff-card-container ${status.toLowerCase()}`,
33630
+ className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
33631
+ style: style,
33632
+ onClick: () => handleSelectStatus(status),
33525
33633
  children: [jsxs("div", {
33526
33634
  className: "ff-status-bar",
33527
33635
  children: [jsx("div", {
@@ -33534,7 +33642,6 @@ const StatusCard = ({
33534
33642
  }), jsx(Typography, {
33535
33643
  fontWeight: "semi-bold",
33536
33644
  fontSize: "10px",
33537
- color: "var(--ff-status-card-text-color)",
33538
33645
  textAlign: "center",
33539
33646
  lineHeight: "15px",
33540
33647
  className: "ff-status-text",
@@ -33548,13 +33655,14 @@ const StatusCard = ({
33548
33655
  fontSize: "24px",
33549
33656
  className: "ff-number",
33550
33657
  lineHeight: "36px",
33658
+ color: isToggled ? 'var(--base-bg-color)' : '',
33551
33659
  children: count
33552
33660
  }), jsx(Typography, {
33553
33661
  fontWeight: "regular",
33554
33662
  fontSize: "10px",
33555
33663
  className: "ff-text",
33556
33664
  lineHeight: "15px",
33557
- color: "var(--ff-card-status-text-color)",
33665
+ color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
33558
33666
  children: text
33559
33667
  })]
33560
33668
  })]
@@ -39615,7 +39723,8 @@ const BarChart = ({
39615
39723
  icons = [],
39616
39724
  iconSize,
39617
39725
  legendPosition = 'bottom',
39618
- legendGap = 5
39726
+ legendGap = 5,
39727
+ onSelectedBar = _label => {}
39619
39728
  }) => {
39620
39729
  const [tooltip, setTooltip] = useState({
39621
39730
  visible: false,
@@ -39673,6 +39782,9 @@ const BarChart = ({
39673
39782
  borderColor: 'transparent'
39674
39783
  });
39675
39784
  };
39785
+ const handleSelectLabel = label => {
39786
+ onSelectedBar(label);
39787
+ };
39676
39788
  return jsxs("div", {
39677
39789
  className: "ff-bar-chart-container",
39678
39790
  style: {
@@ -39747,7 +39859,8 @@ const BarChart = ({
39747
39859
  ry: barBorderRadius,
39748
39860
  onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
39749
39861
  onMouseMove: handleMouseMove,
39750
- onMouseLeave: handleMouseLeave
39862
+ onMouseLeave: handleMouseLeave,
39863
+ onClick: () => handleSelectLabel(item.label)
39751
39864
  }), showXAxisLabels && jsx("text", {
39752
39865
  x: barX + barWidth / 2,
39753
39866
  y: height + topPadding + 15,