pixel-react 1.7.3 → 1.7.5

package/lib/index.js

@@ -3200,9 +3200,9 @@ const OptionCard = ({
   const optionCardRef = React.useRef(null);
   React.useEffect(() => {
     if (optionCardRef?.current) {
-      const rect = optionCardRef?.current?.getBoundingClientRect();
-      setOptionsHeight(rect?.height);
-      setOptionsWidth(rect?.width);
+      const rect = optionCardRef.current.getBoundingClientRect();
+      setOptionsHeight(rect.height);
+      setOptionsWidth(rect.width);
     }
   }, []);
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
@@ -3215,7 +3215,7 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + 20,
+          top: menuPosition.top + menuPosition.height + 7,
           left: menuPosition.left - 4
         };
       case 'left':
@@ -3226,23 +3226,25 @@ const OptionCard = ({
       case 'right':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left + 20
+          left: menuPosition.left + menuPosition.height + 20
         };
       default:
         return {
-          top: menuPosition.bottom,
-          left: menuPosition.rightSpaceAvailable + 12
+          top: menuPosition.top,
+          left: menuPosition.left
         };
     }
   })();
+  const adjustedStyle = {
+    top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
+    left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
+    zIndex
+  };
   return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
     className: classNames('ff-option-card', [{
       'ff-option-card--primary': variant === 'primary'
     }], currentTheme),
-    style: {
-      ...style,
-      zIndex
-    },
+    style: adjustedStyle,
     ref: optionCardRef,
     children: options.map(opt => jsxRuntime.jsx(Option$1, {
       option: opt,
@@ -3276,26 +3278,28 @@ const MenuOption = ({
     right: 0
   });
   const closeDropDown = () => setIsClicked(false);
-  const onIconClickHandler = () => {
-    onClick();
-    calculateDims();
-    setIsClicked(prev => !prev);
-  };
-  const handleOptionClick = option => {
-    onOptionClick(option);
-    closeDropDown();
-  };
   const calculateDims = () => {
     if (targetRef?.current) {
       const rect = targetRef.current.getBoundingClientRect();
+      const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
+      const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
       setMenuPosition({
-        top: rect.top + window.scrollY,
-        left: rect.left + window.scrollX,
+        top: rect.top + window.scrollY - containerScrollTop,
+        left: rect.left + window.scrollX - containerScrollLeft,
         height: rect.height,
         right: rect.right
       });
     }
   };
+  const onIconClickHandler = () => {
+    onClick();
+    calculateDims();
+    setIsClicked(prev => !prev);
+  };
+  const handleOptionClick = option => {
+    onOptionClick(option);
+    closeDropDown();
+  };
   return jsxRuntime.jsxs("div", {
     className: "ff-menu-option-container",
     ref: menuRef,
@@ -8002,7 +8006,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -8014,7 +8018,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!props.disabled &&
+        if (!_options.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -8030,7 +8034,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !props.disabled) {
+        if (args && method && !_options.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8094,7 +8098,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!props.disabled) {
+        if (!_options.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -8230,7 +8234,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !props.disabled &&
+    const _getDirty = (name, data) => !_options.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8546,7 +8550,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -8562,7 +8566,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : props.disabled,
+                    : _options.disabled,
                 name,
                 value: options.value,
             });
@@ -8572,7 +8576,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || props.disabled }
+                ? { disabled: options.disabled || _options.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -8656,6 +8660,12 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
+        if (_options.disabled) {
+            if (onInvalid) {
+                await onInvalid({ ..._formState.errors }, e);
+            }
+            return;
+        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -8834,7 +8844,9 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect && fieldRef.select();
+                options.shouldSelect &&
+                    isFunction$1(fieldRef.select) &&
+                    fieldRef.select();
             }
         }
     };
@@ -9035,11 +9047,6 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
-    React.useEffect(() => {
-        if (_formControl.current) {
-            _formControl.current.watch = _formControl.current.watch.bind({});
-        }
-    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -13252,6 +13259,53 @@ function setYear(date, year, options) {
   return date_;
 }
 
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function getBroadcastWeeksInMonth(month, dateLib) {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -13332,6 +13386,15 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
+    /**
+     * Returns the end of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The end of the broadcast week.
+     */
+    this.endOfBroadcastWeek = date => {
+      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -13493,6 +13556,15 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
+    /**
+     * Returns the start of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The start of the broadcast week.
+     */
+    this.startOfBroadcastWeek = date => {
+      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -14078,7 +14150,8 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -14144,7 +14217,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale = enUS) {
+locale) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -14248,7 +14321,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -14623,7 +14696,8 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone) {
+ISOWeek, timeZone, /** @since 9.4.0 */
+broadcastCalendar) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -14826,29 +14900,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
-/** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks
+    fixedWeeks,
+    broadcastCalendar
   } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
-  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -14860,9 +14935,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -14973,25 +15050,29 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    if (props.fixedWeeks && monthDates.length < 42) {
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
       const extraDates = dates.filter(date => {
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
       });
       monthDates.push(...extraDates);
     }
@@ -15429,27 +15510,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek
+    ISOWeek,
+    broadcastCalendar
   } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -15515,6 +15599,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -15523,12 +15609,19 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
+    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
   } = dateLib;
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -15537,20 +15630,18 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
-  const selectionModifiersMap = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
+    // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15579,27 +15670,16 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name];
-      selectionStates[name] = days.some(d => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -16004,7 +16084,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.weekStartsOn,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -16023,7 +16103,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
   const {
     captionLayout,
     mode,
@@ -18801,6 +18881,8 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -20093,6 +20175,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
+    if (events.cancel) {
+      this.listeners.add(events.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -20212,6 +20297,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: 'pointercancel'
+  },
   move: {
     name: 'pointermove'
   },
@@ -20284,6 +20372,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: 'touchcancel'
+  },
   move: {
     name: 'touchmove'
   },
@@ -20485,11 +20576,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo(cachedNode => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     } // In some cases, the draggable node can unmount while dragging
     // This is the case for virtualized lists. In those situations,
@@ -20697,7 +20788,26 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = React.useReducer(reducer, null);
+  const [rect, setRect] = React.useState(null);
+  function measureRect() {
+    setRect(currentRect => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+
+        // Fall back to last rect we measured if the element is
+        // no longer connected to the DOM.
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -20732,23 +20842,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-
-      // Fall back to last rect we measured if the element is
-      // no longer connected to the DOM.
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -20894,28 +20987,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
+  const [rects, setRects] = React.useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect$1(() => {
-    if (elements.length) {
-      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -21082,7 +21171,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -21354,7 +21443,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -21389,7 +21478,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -21467,6 +21556,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = React.useRef(null);
   const instantiateSensor = React.useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -21501,6 +21591,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
+          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -21519,6 +21610,8 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
+          setActiveSensor(activeSensorRef.current);
+          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -21530,10 +21623,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    reactDom.unstable_batchedUpdates(() => {
-      setActiveSensor(sensorInstance);
-      setActivatorEvent(event.nativeEvent);
-    });
+    activeSensorRef.current = sensorInstance;
     function createHandler(type) {
       return async function handler() {
         const {
@@ -21570,6 +21660,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           setOver(null);
           setActiveSensor(null);
           setActivatorEvent(null);
+          activeSensorRef.current = null;
           const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
           if (event) {
             const handler = latestProps.current[eventName];
@@ -21791,7 +21882,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Droppable';
+const ID_PREFIX$1 = 'Draggable';
 function useDraggable(_ref) {
   let {
     id,
@@ -21938,7 +22029,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$1(() => {
+  React.useEffect(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -22353,6 +22444,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
+  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -27249,7 +27341,8 @@ const Toastify = () => {
     isOpen: toastProps.isOpen,
     variant: toastProps.variant,
     toastTitle: toastProps.toastTitle,
-    toastMessage: toastProps.toastMessage
+    toastMessage: toastProps.toastMessage,
+    zIndex: 1000000000
   });
 };
 // Utility to trigger toast messages outside of the Toastify component
@@ -31384,6 +31477,7 @@ const Row = props => jsxRuntime.jsx("tr", {
 });
 
 const HeaderRow = props => jsxRuntime.jsx("tr", {
+  className: "ff-spreadsheet-row-header",
   ...props
 });
 
@@ -31403,14 +31497,17 @@ const CornerIndicator = ({
     onSelect();
   }, [onSelect]);
   return jsxRuntime.jsx("th", {
-    className: classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
-      'ff-spreadsheet-header--selected': selected
-    }),
+    className: 'ff-spreadsheet-corner-header',
     onClick: handleClick,
     tabIndex: 0,
-    children: jsxRuntime.jsx(Icon, {
-      variant: selected ? 'dark' : 'light',
-      name: "excel_corner_menu"
+    children: jsxRuntime.jsx("div", {
+      className: classNames('corner-header', {
+        'ff-spreadsheet-header--selected': selected
+      }),
+      children: jsxRuntime.jsx(Icon, {
+        variant: selected ? 'dark' : 'light',
+        name: "excel_corner_menu"
+      })
     })
   });
 };
@@ -31492,7 +31589,7 @@ const ColumnIndicator = ({
   return jsxRuntime.jsxs("th", {
     style: {
       minWidth: `${columnWidth}px`,
-      position: 'relative'
+      position: 'sticky'
     },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
@@ -32025,7 +32122,7 @@ const Copied = () => {
   });
 };
 
-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}";
+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}";
 styleInject(css_248z$n);
 
 var css_248z$m = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
@@ -33531,17 +33628,28 @@ const AttachImage = ({
   });
 };
 
-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}";
+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}";
 styleInject(css_248z$f);
 
 const StatusCard = ({
   icon,
   status,
   count,
-  text
+  text,
+  style = {
+    width: '196.4px'
+  },
+  onSelectedStatus = _status => {}
 }) => {
+  const [isToggled, setIsToggled] = React.useState(false);
+  const handleSelectStatus = status => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return jsxRuntime.jsxs("div", {
-    className: `ff-card-container ${status.toLowerCase()}`,
+    className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
+    style: style,
+    onClick: () => handleSelectStatus(status),
     children: [jsxRuntime.jsxs("div", {
       className: "ff-status-bar",
       children: [jsxRuntime.jsx("div", {
@@ -33554,7 +33662,6 @@ const StatusCard = ({
       }), jsxRuntime.jsx(Typography, {
         fontWeight: "semi-bold",
         fontSize: "10px",
-        color: "var(--ff-status-card-text-color)",
         textAlign: "center",
         lineHeight: "15px",
         className: "ff-status-text",
@@ -33568,13 +33675,14 @@ const StatusCard = ({
         fontSize: "24px",
         className: "ff-number",
         lineHeight: "36px",
+        color: isToggled ? 'var(--base-bg-color)' : '',
         children: count
       }), jsxRuntime.jsx(Typography, {
         fontWeight: "regular",
         fontSize: "10px",
         className: "ff-text",
         lineHeight: "15px",
-        color: "var(--ff-card-status-text-color)",
+        color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
         children: text
       })]
     })]
@@ -39635,7 +39743,8 @@ const BarChart = ({
   icons = [],
   iconSize,
   legendPosition = 'bottom',
-  legendGap = 5
+  legendGap = 5,
+  onSelectedBar = _label => {}
 }) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
@@ -39693,6 +39802,9 @@ const BarChart = ({
       borderColor: 'transparent'
     });
   };
+  const handleSelectLabel = label => {
+    onSelectedBar(label);
+  };
   return jsxRuntime.jsxs("div", {
     className: "ff-bar-chart-container",
     style: {
@@ -39767,7 +39879,8 @@ const BarChart = ({
               ry: barBorderRadius,
               onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
               onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleSelectLabel(item.label)
             }), showXAxisLabels && jsxRuntime.jsx("text", {
               x: barX + barWidth / 2,
               y: height + topPadding + 15,