@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.21

package/src/helpers/idleCallbackHelpers.ts

@@ -0,0 +1,66 @@
+/**
+ * Type for the callback handle returned by scheduleIdleCallback.
+ * Can be either a number (from requestIdleCallback) or a NodeJS.Timeout (from setTimeout).
+ */
+export type IdleCallbackHandle = number | NodeJS.Timeout;
+
+/**
+ * Safely schedules a callback to be executed when the browser is idle.
+ * Falls back to setTimeout if requestIdleCallback is not available.
+ *
+ * @param callback - The function to execute during idle time
+ * @param options - Optional configuration (timeout in ms)
+ * @returns A handle that can be passed to cancelScheduledCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('Running during idle time');
+ * });
+ *
+ * // Later, if needed:
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function scheduleIdleCallback(
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions,
+): IdleCallbackHandle {
+  if (typeof requestIdleCallback !== 'undefined') {
+    return requestIdleCallback(callback, options);
+  }
+
+  // Fallback to setTimeout for browsers that don't support requestIdleCallback
+  // Use a short timeout to approximate idle behavior
+  const timeout = options?.timeout ?? 1;
+  return setTimeout(() => {
+    const deadline: IdleDeadline = {
+      didTimeout: false,
+      timeRemaining: () => 50, // Approximate 50ms of available time
+    };
+    callback(deadline);
+  }, timeout);
+}
+
+/**
+ * Cancels a callback scheduled with scheduleIdleCallback.
+ * Works with both requestIdleCallback and setTimeout fallback.
+ *
+ * @param handle - The handle returned by scheduleIdleCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('This might not run');
+ * });
+ *
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function cancelScheduledCallback(handle: IdleCallbackHandle): void {
+  if (typeof cancelIdleCallback !== 'undefined' && typeof handle === 'number') {
+    cancelIdleCallback(handle);
+  } else {
+    clearTimeout(handle as NodeJS.Timeout);
+  }
+}

package/src/helpers/index.ts

@@ -1 +1,6 @@
+export {
+  cancelScheduledCallback,
+  scheduleIdleCallback,
+  type IdleCallbackHandle,
+} from './idleCallbackHelpers';
 export { Nullable } from './utils';

package/src/hooks/useResize/ResizeIndicator.scss

@@ -0,0 +1,7 @@
+.resizeIndicator {
+  position: fixed;
+  width: 1px;
+  background-color: var(--explorer-list-row-border, #dddddd);
+  pointer-events: none;
+  z-index: 10;
+}

package/src/hooks/useResize/ResizeIndicator.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from './ResizeIndicator.scss';
+
+interface ResizeIndicatorProps {
+  resizePosition: number | undefined;
+  isResizing: boolean;
+}
+
+export const ResizeIndicator: React.FC<ResizeIndicatorProps> = ({
+  resizePosition,
+  isResizing,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const getResizeIndicatorBounds = (): React.CSSProperties => {
+    if (containerRef.current) {
+      const listWrapper = containerRef.current.parentElement;
+      if (listWrapper) {
+        const rect = listWrapper.getBoundingClientRect();
+        return {
+          left: `${resizePosition}px`,
+          top: `${rect.top}px`,
+          height: `${rect.height}px`,
+        };
+      }
+    }
+    return { left: `${resizePosition}px` };
+  };
+
+  return (
+    <div ref={containerRef}>
+      {isResizing && resizePosition !== undefined && (
+        <div
+          className={classes.resizeIndicator}
+          style={getResizeIndicatorBounds()}
+        />
+      )}
+    </div>
+  );
+};

package/src/hooks/useResize/{useResize.ts → useResize.tsx}

@@ -2,13 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DynamicListColumn } from '../../components';
 import { Column } from '../../components/List/List.model';
 import { Data } from '../../types';
+import { ResizeIndicator } from './ResizeIndicator';
 
 /**
  * Handles the resizing logic of the columns
  * @param columns The list of column definitions
  * @param onColumnSizesChanged Callback that will be called when the column sizes change
- * @returns an object containing the refs to the columns (add these to all column header elements)
- *          and the mouseDown handler (add this to the element that should be used to resize the column)
+ * @returns an object containing the refs to the columns (add these to all column header elements),
+ *          the mouseDown handler (add this to the element that should be used to resize the column),
+ *          and the ResizeIndicator element (render this to show the resize indicator)
  */
 export const useResize = <T extends Data>(
   columns: Column<T>[] | DynamicListColumn<T>[],
@@ -19,7 +21,10 @@ export const useResize = <T extends Data>(
     orgSize: string | undefined;
   }[];
   mouseDown: (index: number) => void;
+  ResizeIndicator: JSX.Element;
 } => {
+  const currentGridColumns = React.useRef<string | undefined>(undefined);
+
   const minCellWidth = 50;
 
   const cols = useMemo(
@@ -35,6 +40,9 @@ export const useResize = <T extends Data>(
   );
 
   const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+  const [resizePosition, setResizePosition] = useState<number | undefined>(
+    undefined,
+  );
   const resizeStart = React.useRef<
     { mouse: number; width: number } | undefined
   >(undefined);
@@ -59,6 +67,10 @@ export const useResize = <T extends Data>(
           return;
         }
 
+        // Calculate position (clientX gives viewport position for fixed positioning)
+
+        setResizePosition(e.clientX);
+
         const gridColumns = cols.map((col, i) => {
           if (!col.ref.current) {
             return col.orgSize;
@@ -68,15 +80,17 @@ export const useResize = <T extends Data>(
             const width = start.width + e.clientX - start.mouse;
             if (width >= minCellWidth) {
               return `${width}px`;
+            } else {
+              return `${minCellWidth}px`;
             }
           }
           return `${col.ref.current.offsetWidth}px`;
         });
 
-        onColumnSizesChanged(gridColumns.join(' '));
+        currentGridColumns.current = gridColumns.join(' ');
       }
     },
-    [activeIndex, cols, onColumnSizesChanged],
+    [activeIndex, cols],
   );
 
   const mouseDown = (index: number): void => {
@@ -89,10 +103,19 @@ export const useResize = <T extends Data>(
   }, [mouseMove]);
 
   const mouseUp = useCallback(() => {
+    // Apply the new column sizes only if a resize actually happened
+    if (resizeStart.current !== undefined) {
+      onColumnSizesChanged(
+        currentGridColumns.current || cols.map((col) => col.orgSize).join(' '),
+      );
+    }
+
     setActiveIndex(undefined);
+    setResizePosition(undefined);
     resizeStart.current = undefined;
+    currentGridColumns.current = undefined;
     removeListeners();
-  }, [setActiveIndex, removeListeners]);
+  }, [removeListeners, onColumnSizesChanged, cols]);
 
   useEffect(() => {
     if (activeIndex !== undefined) {
@@ -105,5 +128,14 @@ export const useResize = <T extends Data>(
     };
   }, [activeIndex, mouseMove, mouseUp, removeListeners]);
 
-  return { cols, mouseDown };
+  return {
+    cols,
+    mouseDown,
+    ResizeIndicator: (
+      <ResizeIndicator
+        resizePosition={resizePosition}
+        isResizing={activeIndex !== undefined}
+      />
+    ),
+  };
 };

package/src/styles/variables.scss

@@ -71,8 +71,8 @@ $filter-light-font-color: $dark-gray;
 $filter-option-background-color: #d7e9f1;
 $filter-context-button-color: $blue;
 $filter-title-color: $blue;
-$filter-font-size: 16px;
-$filter-width: 360px;
+$filter-font-size: 14px;
+$filter-width: 330px;
 $filter-controller-background-color: $light-gray-2;
 $filter-border-color: $blue;
 $multi-option-checbox-border: $blue;
@@ -320,7 +320,8 @@ $icon-button-hover-color: $blue;
 /* Autocomplete */
 $popper-border-color: $blue;
 $popper-trigger-button-color: $blue;
-$popper-background-color: $light-gray-2;
-$popper-item-font-size: 16px;
-$popper-text-color: $blue;
-$popper-background-selected-color: rgba($blue, 0.15);
+$popper-item-font-size: 14px;
+$popper-text-color: $dark-gray;
+$popper-background-selected-color: $light-gray-2;
+$popper-item-hover-color: rgba($blue, 0.1);
+$popper-item-selected-color: rgba($blue, 0.2);