@axinom/mosaic-ui 0.66.0-rc.8 → 0.66.0

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/index.ts

@@ -1,4 +1,6 @@
 /** Export all components to be included into the node package here */
+import './styles/branding.scss';
+
 export * from './components';
 export * from './helpers';
 export * from './hooks';

package/src/styles/branding.scss

@@ -0,0 +1,89 @@
+/**
+ * Branding System - CSS Custom Properties for Runtime Theming
+ *
+ * This file defines CSS custom properties (CSS variables) that enable runtime theming
+ * and branding customization throughout the component library.
+ *
+ * ## CSS Custom Properties Defined
+ *
+ * ### Primary Colors (Blues)
+ * - `--ax-primary`: Base primary color (#1478af)
+ * - `--ax-primary-dark`: Darker variant (auto-derived using HSL relative color syntax)
+ * - `--ax-primary-light`: Lighter variant (auto-derived using HSL relative color syntax)
+ *
+ * ### Neutral Colors (Grays)
+ * - `--ax-neutral`: Base neutral color (#b7b7b7)
+ * - `--ax-neutral-dark`: Darker variant (#707070)
+ * - `--ax-neutral-light`: Lighter variant (#dddddd)
+ * - `--ax-neutral-lighter`: Lightest variant (#eeeeee)
+ *
+ * ### Semantic Colors
+ * - `--ax-error`: Error/danger state color (#f06c55 - red)
+ * - `--ax-warning`: Warning state color (#ffc81a - yellow)
+ * - `--ax-success`: Success state color (#95c852 - green)
+ *
+ * ## Runtime Theming Usage
+ *
+ * The library uses CSS `@layer ax-defaults` to ensure default colors have the lowest
+ * priority in the cascade. This allows easy overriding without `!important`.
+ *
+ * ### Simple Override (Recommended)
+ *
+ * Override colors in your application's CSS/SCSS:
+ *
+ *   :root {
+ *     --ax-primary: #ff5733;  // No !important needed
+ *     --ax-neutral: #666666;
+ *   }
+ *
+ * ### Example - Purple Theme
+ *
+ *   :root {
+ *     --ax-primary: #7c3aed;
+ *   }
+ *   // --ax-primary-dark and --ax-primary-light automatically adjust!
+ *
+ * ### Dynamic Runtime Override
+ *
+ *   document.documentElement.style.setProperty('--ax-primary', '#7c3aed');
+ *
+ * ### Why This Works
+ *
+ * - Library defaults are in `@layer ax-defaults` (lowest priority)
+ * - Your overrides are in the implicit anonymous layer (higher priority)
+ * - No `!important` needed - cascade just works!
+ * - Load order doesn't matter - layers handle priority
+ *
+ * ## Browser Support
+ *
+ * - CSS Relative Color Syntax (`hsl(from var(...))`) requires:
+ *   - Chrome 119+
+ *   - Firefox 128+
+ *   - Safari 16.4+
+ * - For older browsers, colors fallback to the default hardcoded values
+ */
+
+/**
+ * Using @layer to ensure these defaults have the lowest priority in the cascade.
+ * This allows consuming applications to override colors without !important.
+ */
+@layer ax-defaults {
+  :root {
+    /* Base Primary Color - override this to change the entire primary palette */
+    --ax-primary: #1478af;
+    --ax-primary-dark: hsl(from var(--ax-primary) h calc(s + 24) calc(l - 13));
+    --ax-primary-light: hsl(
+      from var(--ax-primary) calc(h - 4) calc(s + 3) calc(l + 14)
+    );
+
+    --ax-neutral: #b7b7b7;
+    --ax-neutral-dark: #707070;
+    --ax-neutral-light: #dddddd;
+    --ax-neutral-lighter: #eeeeee;
+
+    /* Semantic Colors */
+    --ax-error: #f06c55;
+    --ax-warning: #ffc81a;
+    --ax-success: #95c852;
+  }
+}