@campxdev/react-blueprint 3.0.0-alpha.3 → 3.0.0-alpha.5

package/src/components/DataDisplay/DataTable/components/TableView.tsx

@@ -87,11 +87,13 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                       index === 0 && 'pl-4 rounded-tl-md',
                       index === headerGroup.headers.length - 1 &&
                         'rounded-tr-md',
+                      (header.column.columnDef.maxSize || header.column.columnDef.size) && 'overflow-hidden text-ellipsis whitespace-nowrap',
                       cellClassName,
                     )}
                     style={{
-                      width:
-                        header.getSize() !== 150 ? header.getSize() : undefined,
+                      width: header.column.columnDef.size ?? (header.getSize() !== 150 ? header.getSize() : undefined),
+                      maxWidth: header.column.columnDef.maxSize ?? undefined,
+                      minWidth: header.column.columnDef.minSize ?? undefined,
                     }}
                   >
                     {header.isPlaceholder ? null : (
@@ -135,10 +137,19 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                   {/* Use visible header columns count to render correct number of skeleton cells */}
                   {table
                     .getHeaderGroups()[0]
-                    ?.headers.map((_: any, cellIndex: number) => (
+                    ?.headers.map((header: any, cellIndex: number) => (
                       <TableCell
                         key={`skeleton-cell-${rowIndex}-${cellIndex}`}
-                        className={cn(cellIndex === 0 && 'pl-4', cellClassName)}
+                        className={cn(
+                          cellIndex === 0 && 'pl-4',
+                          (header.column.columnDef.maxSize || header.column.columnDef.size) && 'overflow-hidden text-ellipsis whitespace-nowrap',
+                          cellClassName
+                        )}
+                        style={{
+                          width: header.column.columnDef.size ?? (header.getSize() !== 150 ? header.getSize() : undefined),
+                          maxWidth: header.column.columnDef.maxSize ?? undefined,
+                          minWidth: header.column.columnDef.minSize ?? undefined,
+                        }}
                       >
                         <Skeleton className="h-4 w-full" />
                       </TableCell>
@@ -162,7 +173,22 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                     {row.getVisibleCells().map((cell: any, index: number) => (
                       <TableCell
                         key={cell.id}
-                        className={cn(index === 0 && 'pl-4', cellClassName)}
+                        className={cn(
+                          index === 0 && 'pl-4',
+                          (cell.column.columnDef.maxSize || cell.column.columnDef.size) && 'overflow-hidden text-ellipsis whitespace-nowrap',
+                          cellClassName
+                        )}
+                        style={{
+                          width: cell.column.columnDef.size ?? (cell.column.getSize() !== 150 ? cell.column.getSize() : undefined),
+                          maxWidth: cell.column.columnDef.maxSize ?? undefined,
+                          minWidth: cell.column.columnDef.minSize ?? undefined,
+                        }}
+                        onClick={(e) => {
+                          // Prevent row click when clicking on checkbox column
+                          if (cell.column.id === 'select') {
+                            e.stopPropagation();
+                          }
+                        }}
                       >
                         {flexRender(
                           cell.column.columnDef.cell,

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -1,6 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 
-import { Tooltip as ShadcnTooltip, TooltipContent, TooltipTrigger } from '@/shadcn-components/Feedback/Tooltip/Tooltip';
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/shadcn-components/Feedback/Tooltip/Tooltip';
 
 export type TooltipProps = {
   children: ReactNode;
@@ -22,6 +26,14 @@ export const Tooltip = ({
   onOpenChange,
   delayDuration,
 }: TooltipProps) => {
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   return (
     <ShadcnTooltip
       open={open}
@@ -29,7 +41,9 @@ export const Tooltip = ({
       onOpenChange={onOpenChange}
       delayDuration={delayDuration}
     >
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <span ref={wrapperRef}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+      </span>
       <TooltipContent side={placement}>{title}</TooltipContent>
     </ShadcnTooltip>
   );

package/src/components/Input/Button/ButtonLoader.css

@@ -4,9 +4,9 @@
   padding: 10px 20px;
   font-size: '14px';
   aspect-ratio: 2.5;
-  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #fff);
+  --_g: no-repeat radial-gradient(circle, currentColor 48%, #0000);
   background: var(--_g), var(--_g), var(--_g), var(--_g);
-  background-size: 20% 50%;
+  background-size: 15% 40%;
   animation: l44 1s infinite linear alternate;
   scale: 0.5;
 }

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -1,16 +1,5 @@
-import { cn } from '@/lib/utils';
-import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/shadcn-components/Input/Popover/Popover';
-import { format as DateFnsFormat } from 'date-fns';
-import { CalendarDays } from 'lucide-react';
-import { cloneElement, useEffect, useRef, useState } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Button } from '../Button/Button';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+import { DatePickerFilter } from './components/DatePickerFilter';
+import { DatePickerInput } from './components/DatePickerInput';
 
 type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
 
@@ -40,185 +29,17 @@ export type DatePickerProps = {
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
   fullWidth?: boolean;
+  type?: 'input' | 'filter';
   [key: string]: any;
 };
 
 export const DatePicker = ({
-  label,
-  name,
-  value,
-  onChange,
-  required = false,
-  format = 'dd/MM/yyyy',
-  helperText,
-  placeholder = 'Pick a date',
-  shortcutsItems = [],
-  openPickerIcon: Icon = <CalendarDays />,
-  containerProps,
-  error,
-  disabled = false,
-  minDate,
-  maxDate,
-  disablePast = false,
-  disableFuture = false,
-  shouldDisableDate,
-  shouldDisableMonth,
-  shouldDisableYear,
-  className,
-  onOpen,
-  onClose,
-  fullWidth,
-  ...rest
+  type = 'input',
+  ...props
 }: DatePickerProps) => {
-  const [open, setOpen] = useState(false);
-  const [date, setDate] = useState<Date | undefined>(value);
-  const wrapperRef = useRef<HTMLSpanElement>(null);
+  if (type === 'filter') {
+    return <DatePickerFilter {...props} />;
+  }
 
-  const formatDateString = (date: Date | undefined) => {
-    if (!date) return '';
-
-    try {
-      return DateFnsFormat(date, format);
-    } catch {
-      return DateFnsFormat(date, 'dd/MM/yyyy');
-    }
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    if (newOpen && onOpen) {
-      onOpen();
-    } else if (!newOpen && onClose) {
-      onClose();
-    }
-  };
-
-  const [, forceUpdate] = useState({});
-  useEffect(() => {
-    forceUpdate({});
-  }, []);
-
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={{
-        ...(fullWidth && { style: { width: '100%' } }),
-        ...containerProps,
-      }}
-    >
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <span
-            ref={wrapperRef}
-            style={{ display: fullWidth ? 'block' : 'inline-block' }}
-          >
-            <Button
-              variant="input"
-              className={cn(
-                'justify-between text-left font-normal',
-                !date && 'text-muted-foreground',
-                error && 'border-destructive',
-                fullWidth ? 'w-full' : 'w-auto',
-                className,
-              )}
-              disabled={disabled}
-              {...rest}
-            >
-              <span>{date ? formatDateString(date) : placeholder}</span>
-              {Icon &&
-                cloneElement(Icon as React.ReactElement, {
-                  className: 'ml-2 h-4 w-4',
-                })}
-            </Button>
-          </span>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <div className="flex flex-col">
-            {/* Shortcuts */}
-            {shortcutsItems.length > 0 && (
-              <div className="border-b p-2">
-                <div className="flex flex-wrap gap-1">
-                  {shortcutsItems.map((shortcut, index) => (
-                    <Button
-                      key={index}
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        const newDate = shortcut.getValue();
-                        onChange?.(newDate);
-                        setDate(newDate);
-                        setOpen(false);
-                      }}
-                    >
-                      {shortcut.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Calendar */}
-            <Calendar
-              mode="single"
-              selected={date}
-              onSelect={(date) => {
-                onChange?.(date);
-                setDate(date);
-              }}
-              disabled={(date) => {
-                // Start of today for comparison
-                const today = new Date();
-                today.setHours(0, 0, 0, 0);
-                const compareDate = new Date(date);
-                compareDate.setHours(0, 0, 0, 0);
-
-                // Check min/max dates
-                if (minDate) {
-                  const min = new Date(minDate);
-                  min.setHours(0, 0, 0, 0);
-                  if (compareDate < min) return true;
-                }
-                if (maxDate) {
-                  const max = new Date(maxDate);
-                  max.setHours(0, 0, 0, 0);
-                  if (compareDate > max) return true;
-                }
-
-                // Check disablePast
-                if (disablePast && compareDate < today) return true;
-
-                // Check disableFuture
-                if (disableFuture && compareDate > today) return true;
-
-                // Check custom date disable function
-                if (shouldDisableDate && shouldDisableDate(date)) return true;
-
-                // Check month disable function
-                if (shouldDisableMonth && shouldDisableMonth(date)) return true;
-
-                // Check year disable function
-                if (shouldDisableYear && shouldDisableYear(date)) return true;
-
-                return false;
-              }}
-              captionLayout={'dropdown'}
-              defaultMonth={date}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-
-      {/* Helper Text / Error */}
-      {(helperText || error) && (
-        <Typography
-          variant="small"
-          className={cn('ml-1 mt-1', error && 'text-destructive')}
-        >
-          {typeof error === 'string' ? error : error?.message || helperText}
-        </Typography>
-      )}
-    </LabelWrapper>
-  );
+  return <DatePickerInput {...props} />;
 };

package/src/components/Input/DatePicker/components/DatePickerFilter.tsx

@@ -0,0 +1,178 @@
+import { Separator } from '@/components/DataDisplay/Separator/Separator';
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../Button/Button';
+import { DatePickerProps } from '../DatePicker';
+
+export const DatePickerFilter = ({
+  label,
+  value,
+  onChange,
+  format = 'dd/MM/yyyy',
+  placeholder = 'Pick a date',
+  shortcutsItems = [],
+  openPickerIcon: Icon = <CalendarDays />,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  const formatDateString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const handleClear = () => {
+    onChange?.(undefined);
+    setOpen(false);
+  };
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  const hasValue = !!value;
+  const displayText = hasValue ? `${label} = ${formatDateString(value)}` : label;
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <span
+          ref={wrapperRef}
+          style={{ display: fullWidth ? 'block' : 'inline-block' }}
+        >
+          <Button
+            variant={hasValue ? 'default' : 'input'}
+            className={cn(
+              'justify-between',
+              fullWidth ? 'w-full' : '',
+              className,
+            )}
+            disabled={disabled}
+            {...rest}
+          >
+            {displayText || placeholder}
+            <CalendarDays className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </span>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col">
+          {/* Shortcuts */}
+          {shortcutsItems.length > 0 && (
+            <div className="border-b p-2">
+              <div className="flex flex-wrap gap-1">
+                {shortcutsItems.map((shortcut, index) => (
+                  <Button
+                    key={index}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newDate = shortcut.getValue();
+                      onChange?.(newDate);
+                      setOpen(false);
+                    }}
+                  >
+                    {shortcut.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Calendar */}
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={(date) => {
+              onChange?.(date);
+            }}
+            disabled={(date) => {
+              // Start of today for comparison
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              const compareDate = new Date(date);
+              compareDate.setHours(0, 0, 0, 0);
+
+              // Check min/max dates
+              if (minDate) {
+                const min = new Date(minDate);
+                min.setHours(0, 0, 0, 0);
+                if (compareDate < min) return true;
+              }
+              if (maxDate) {
+                const max = new Date(maxDate);
+                max.setHours(0, 0, 0, 0);
+                if (compareDate > max) return true;
+              }
+
+              // Check disablePast
+              if (disablePast && compareDate < today) return true;
+
+              // Check disableFuture
+              if (disableFuture && compareDate > today) return true;
+
+              // Check custom date disable function
+              if (shouldDisableDate && shouldDisableDate(date)) return true;
+
+              // Check month disable function
+              if (shouldDisableMonth && shouldDisableMonth(date)) return true;
+
+              // Check year disable function
+              if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+              return false;
+            }}
+            captionLayout={'dropdown'}
+            defaultMonth={value}
+          />
+
+          {/* Clear Button */}
+          <Separator />
+          <div className="flex flex-row items-center justify-left">
+            <Button variant="link" onClick={handleClear} className="min-w-0">
+              Clear
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/Input/DatePicker/components/DatePickerInput.tsx

@@ -0,0 +1,192 @@
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Button } from '../../Button/Button';
+import { LabelWrapper } from '../../LabelWrapper/LabelWrapper';
+import { DatePickerProps } from '../DatePicker';
+
+export const DatePickerInput = ({
+  label,
+  name,
+  value,
+  onChange,
+  required = false,
+  format = 'dd/MM/yyyy',
+  helperText,
+  placeholder = 'Pick a date',
+  shortcutsItems = [],
+  openPickerIcon: Icon = <CalendarDays />,
+  containerProps,
+  error,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  const formatDateString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant="input"
+              className={cn(
+                'justify-between text-left font-normal',
+                !value && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>{value ? formatDateString(value) : placeholder}</span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4',
+                })}
+            </Button>
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col">
+            {/* Shortcuts */}
+            {shortcutsItems.length > 0 && (
+              <div className="border-b p-2">
+                <div className="flex flex-wrap gap-1">
+                  {shortcutsItems.map((shortcut, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newDate = shortcut.getValue();
+                        onChange?.(newDate);
+                        setOpen(false);
+                      }}
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Calendar */}
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={(date) => {
+                onChange?.(date);
+              }}
+              disabled={(date) => {
+                // Start of today for comparison
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const compareDate = new Date(date);
+                compareDate.setHours(0, 0, 0, 0);
+
+                // Check min/max dates
+                if (minDate) {
+                  const min = new Date(minDate);
+                  min.setHours(0, 0, 0, 0);
+                  if (compareDate < min) return true;
+                }
+                if (maxDate) {
+                  const max = new Date(maxDate);
+                  max.setHours(0, 0, 0, 0);
+                  if (compareDate > max) return true;
+                }
+
+                // Check disablePast
+                if (disablePast && compareDate < today) return true;
+
+                // Check disableFuture
+                if (disableFuture && compareDate > today) return true;
+
+                // Check custom date disable function
+                if (shouldDisableDate && shouldDisableDate(date)) return true;
+
+                // Check month disable function
+                if (shouldDisableMonth && shouldDisableMonth(date)) return true;
+
+                // Check year disable function
+                if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+                return false;
+              }}
+              captionLayout={'dropdown'}
+              defaultMonth={value}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Helper Text / Error */}
+      {(helperText || error) && (
+        <Typography
+          variant="small"
+          className={cn('ml-1 mt-1', error && 'text-destructive')}
+        >
+          {typeof error === 'string' ? error : error?.message || helperText}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};