@udixio/ui-react 2.9.13 → 2.9.14

package/src/lib/components/DatePicker.tsx

@@ -0,0 +1,432 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useDatePickerStyle } from '../styles/date-picker.style';
+import { classNames, ReactProps } from '../utils';
+import {
+  DatePickerInterface,
+  DateRange,
+} from '../interfaces/date-picker.interface';
+import {
+  faChevronDown,
+  faChevronLeft,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+import { AnimatePresence, motion } from 'motion/react';
+import { Icon } from '../icon';
+
+/**
+ * DatePickers let users select a date, or a range of dates.
+ * @status beta
+ * @category Selection
+ */
+export const DatePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  locale = 'default',
+  weekStartDay = 0,
+  className,
+  style,
+  mode = 'single',
+  ...restProps
+}: ReactProps<DatePickerInterface>) => {
+  // State for the currently displayed month (always set to the 1st of the month)
+  const [viewDate, setViewDate] = useState(() => {
+    // Try to find a valid start date from value to focus
+    const extractDate = (v: any): Date | null => {
+      if (v instanceof Date) return v;
+      if (Array.isArray(v) && v[0]) return v[0];
+      return null;
+    };
+    const start =
+      extractDate(valueProp) || extractDate(defaultValue) || new Date();
+    return new Date(start.getFullYear(), start.getMonth(), 1);
+  });
+
+  const [direction, setDirection] = useState(0);
+  const [viewMode, setViewMode] = useState<'day' | 'year'>('day');
+
+  // State for selected date
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState<Date | DateRange | null>(
+    defaultValue || null,
+  );
+  const selectedValue = isControlled ? valueProp || null : internalValue;
+
+  // Calendar generation logic
+  const daysInMonth = (year: number, month: number) =>
+    new Date(year, month + 1, 0).getDate();
+
+  const calendarDays = useMemo(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const daysCount = daysInMonth(year, month);
+    const startDay = new Date(year, month, 1).getDay(); // 0=Sun (Fixed JS getDay)
+
+    // Adjust start index based on weekStartDay
+    // shift: logic to map standard JS Day (0=Sun) to our week start
+    // If weekStart=1 (Mon): Sun(0) -> 6, Mon(1) -> 0, Tue(2) -> 1
+    const startIndex = (startDay - weekStartDay + 7) % 7;
+
+    const days: Array<{ date: Date; isCurrentMonth: boolean }> = [];
+
+    // Prev month
+    const prevMonthDaysCount = daysInMonth(year, month - 1);
+    for (let i = startIndex - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDaysCount - i),
+        isCurrentMonth: false,
+      });
+    }
+
+    // Current month
+    for (let i = 1; i <= daysCount; i++) {
+      days.push({ date: new Date(year, month, i), isCurrentMonth: true });
+    }
+
+    // Next month padding - Ensure always 42 days (6 rows) for fixed height animation
+    const currentLen = days.length;
+    const remaining = 42 - currentLen;
+    for (let i = 1; i <= remaining; i++) {
+      days.push({
+        date: new Date(year, month + 1, i),
+        isCurrentMonth: false,
+      });
+    }
+
+    return days;
+  }, [viewDate, weekStartDay]);
+
+  const years = useMemo(() => {
+    const currentYear = new Date().getFullYear();
+    const start = currentYear - 100;
+    const end = currentYear + 100;
+    const list = [];
+    for (let i = start; i <= end; i++) {
+      list.push(i);
+    }
+    return list;
+  }, []);
+
+  const yearsContainerRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to selected year when opening year view
+  useEffect(() => {
+    if (viewMode === 'year' && yearsContainerRef.current) {
+      const selectedYearBtn = yearsContainerRef.current.querySelector(
+        '[data-selected="true"]',
+      );
+      if (selectedYearBtn) {
+        selectedYearBtn.scrollIntoView({ block: 'center' });
+      }
+    }
+  }, [viewMode]);
+
+  // Formatters
+  const monthFormatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }),
+    [locale],
+  );
+  const weekDayFormatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { weekday: 'narrow' }),
+    [locale],
+  );
+
+  const weekDays = useMemo(() => {
+    const baseDate = new Date(2023, 0, 1 + weekStartDay); // Jan 1 2023 was Sun. Jan (1+1)=2 is Mon.
+    return Array.from({ length: 7 }).map((_, i) => {
+      const d = new Date(baseDate);
+      d.setDate(baseDate.getDate() + i);
+      return weekDayFormatter.format(d).charAt(0).toUpperCase();
+    });
+  }, [weekDayFormatter, weekStartDay]);
+
+  // Handlers
+  const handlePrevMonth = () => {
+    setDirection(-1);
+    setViewDate((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setDirection(1);
+    setViewDate((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+  };
+
+  const handleYearSelect = (year: number) => {
+    setViewDate((d) => new Date(year, d.getMonth(), 1));
+    setViewMode('day');
+  };
+
+  const isSameDay = (d1: Date | null | undefined, d2: Date) => {
+    if (!d1) return false;
+    return (
+      d1.getDate() === d2.getDate() &&
+      d1.getMonth() === d2.getMonth() &&
+      d1.getFullYear() === d2.getFullYear()
+    );
+  };
+
+  const isToday = (date: Date) => isSameDay(new Date(), date);
+
+  const handleDateClick = (date: Date) => {
+    let newValue: Date | DateRange | null = date;
+
+    if (mode === 'single') {
+      newValue = date;
+      // Single mode always sets date
+    } else {
+      // Range mode
+      const current = selectedValue as DateRange | null;
+      const [start, end] = Array.isArray(current) ? current : [null, null];
+
+      if (!start || (start && end)) {
+        // Start new range (if was simple date or full range)
+        newValue = [date, null];
+      } else {
+        // Complete range
+        if (date < start) {
+          newValue = [date, start];
+        } else {
+          newValue = [start, date];
+        }
+      }
+    }
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  const checkSelection = (date: Date) => {
+    if (mode === 'single') {
+      return {
+        isSelected: isSameDay(selectedValue as Date, date),
+        isStart: false,
+        isEnd: false,
+        isInRange: false,
+      };
+    }
+    const safeRange = Array.isArray(selectedValue)
+      ? selectedValue
+      : [selectedValue, null];
+    const [start, end] = safeRange as DateRange;
+    const isStart = isSameDay(start, date);
+    const isEnd = isSameDay(end, date);
+
+    // Check range
+    let isInRange = false;
+    if (start && end) {
+      // Simple range check (ignore time components for safety)
+      // Normalize to midnight for strict day comparison
+      const s = new Date(
+        start.getFullYear(),
+        start.getMonth(),
+        start.getDate(),
+      ).getTime();
+      const e = new Date(
+        end.getFullYear(),
+        end.getMonth(),
+        end.getDate(),
+      ).getTime();
+      const d = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+      ).getTime();
+      isInRange = d > s && d < e;
+    }
+
+    return { isSelected: isStart || isEnd, isStart, isEnd, isInRange };
+  };
+
+  const styles = useDatePickerStyle({
+    hasSelected: !!selectedValue,
+  });
+
+  const variants = {
+    enter: (direction: number) => ({
+      x: direction > 0 ? '100%' : '-100%',
+      opacity: 0,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+    },
+    exit: (direction: number) => ({
+      x: direction < 0 ? '100%' : '-100%',
+      opacity: 0,
+    }),
+  };
+
+  return (
+    <div
+      className={classNames(styles.datePicker, className)}
+      style={style}
+      {...(restProps as any)}
+    >
+      {/* Header */}
+      <div className={styles.header}>
+        <Button
+          variant="text"
+          disableTextMargins
+          size="small"
+          onClick={() => setViewMode((m) => (m === 'day' ? 'year' : 'day'))}
+          className="text-label-large font-bold capitalize text-on-surface hover:bg-surface-container-highest"
+        >
+          <span className="mr-2">
+            {viewMode === 'day'
+              ? monthFormatter.format(viewDate)
+              : viewDate.getFullYear()}
+          </span>
+          <Icon
+            icon={faChevronDown}
+            className={classNames(
+              'w-3 h-3 transition-transform duration-200 inline',
+              viewMode === 'year' && 'rotate-180',
+            )}
+          />
+        </Button>
+
+        {viewMode === 'day' && (
+          <div className="flex items-center">
+            <IconButton
+              size={'xSmall'}
+              allowShapeTransformation={false}
+              onClick={handlePrevMonth}
+              icon={faChevronLeft}
+              label="Previous month"
+              title={null}
+            />
+            <IconButton
+              size={'xSmall'}
+              allowShapeTransformation={false}
+              onClick={handleNextMonth}
+              icon={faChevronRight}
+              label="Next month"
+              title={null}
+            />
+          </div>
+        )}
+      </div>
+
+      {viewMode === 'year' ? (
+        <div
+          className="h-[280px] overflow-y-auto grid grid-cols-3 gap-2 p-2 scrollbar-hide"
+          ref={yearsContainerRef}
+        >
+          {years.map((year) => (
+            <Button
+              size={'small'}
+              key={year}
+              variant={year === viewDate.getFullYear() ? 'filled' : 'text'}
+              onClick={() => handleYearSelect(year)}
+              data-selected={year === viewDate.getFullYear()}
+              className={classNames('w-full', {
+                'text-on-surface': year !== viewDate.getFullYear(),
+              })}
+              label={year.toString()}
+            >
+              {year}
+            </Button>
+          ))}
+        </div>
+      ) : (
+        <>
+          {/* Week Days */}
+          <div className={styles.weekDays}>
+            {weekDays.map((day, i) => (
+              <div key={i} className={styles.weekDay}>
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* Days Grid */}
+          <div className="overflow-hidden relative min-h-[240px]">
+            <AnimatePresence
+              mode="popLayout"
+              initial={false}
+              custom={direction}
+            >
+              <motion.div
+                key={viewDate.toISOString()}
+                custom={direction}
+                variants={variants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
+                className={styles.daysGrid}
+              >
+                {calendarDays.map((item, index) => {
+                  if (!item.isCurrentMonth) {
+                    return <div key={index} className={styles.dayCell} />;
+                  }
+
+                  const { isSelected, isStart, isEnd, isInRange } =
+                    checkSelection(item.date);
+                  const isTodayDate = isToday(item.date);
+                  const isDisabled =
+                    (minDate && item.date < minDate) ||
+                    (maxDate && item.date > maxDate) ||
+                    shouldDisableDate?.(item.date);
+
+                  return (
+                    <div
+                      key={index}
+                      className={classNames(
+                        styles.dayCell,
+                        // Range background styles applied to the cell wrapper
+                        isInRange && 'bg-primary/20',
+                        isStart &&
+                          (selectedValue as DateRange)?.[1] &&
+                          'bg-gradient-to-r from-transparent to-primary/20',
+                        isEnd &&
+                          (selectedValue as DateRange)?.[0] &&
+                          'bg-gradient-to-l from-transparent to-primary/20',
+                      )}
+                    >
+                      <Button
+                        className={() => ({
+                          button: classNames('aspect-square h-[40px] p-0', {
+                            'text-on-surface': !isSelected && !isTodayDate,
+                            'opacity-50': isDisabled,
+                          }),
+                          stateLayer: classNames({
+                            '!bg-transparent': isDisabled,
+                          }),
+                        })}
+                        size="small"
+                        allowShapeTransformation={false}
+                        variant={
+                          classNames({
+                            filled: isSelected,
+                            outlined: isTodayDate,
+                            text: !isSelected && !isTodayDate,
+                          }) as any
+                        }
+                        label={item.date.getDate().toString()}
+                        onClick={() => handleDateClick(item.date)}
+                        disabled={isDisabled}
+                      >
+                        {item.date.getDate().toString()}
+                      </Button>
+                    </div>
+                  );
+                })}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+// Helper for generic check - removed unused

package/src/lib/components/FabMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useId, useRef, useState } from 'react';
 import { FabMenuInterface } from '../interfaces/fab-menu.interface';
 import { useFabMenuStyle } from '../styles/fab-menu.style';
 import { ReactProps } from '../utils/component';
@@ -9,7 +9,6 @@ import { classNames } from '../utils';
 import { IconButton } from './IconButton';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { AnimatePresence, motion } from 'motion/react';
-import { v4 } from 'uuid';
 
 /**
  * Floating action buttons (FABs) help people take primary actions
@@ -94,7 +93,7 @@ export const FabMenu = ({
     />
   );
 
-  const [uuid] = useState(v4());
+  const id = useId();
 
   return (
     <div className={styles.fabMenu} ref={resolvedRef} {...restProps}>
@@ -187,13 +186,13 @@ export const FabMenu = ({
           renderFab({
             className: '',
             layout: true,
-            layoutId: 'fab-menu' + uuid,
+            layoutId: 'fab-menu' + id,
           })}
         {open && (
           <>
             <MotionIconButton
               layout
-              layoutId={'fab-menu' + uuid}
+              layoutId={'fab-menu' + id}
               variant={'filled'}
               className={() => ({
                 iconButton: classNames('', {

package/src/lib/components/IconButton.tsx

@@ -46,7 +46,7 @@ export const IconButton = ({
       'IconButton component requires either a label prop or children content to provide an accessible aria-label',
     );
   }
-  if (!title) {
+  if (!title && title !== null) {
     title = label;
   }
 
@@ -108,11 +108,13 @@ export const IconButton = ({
       onClick={handleClick}
       ref={resolvedRef}
     >
-      <Tooltip
-        targetRef={resolvedRef}
-        trigger={disabled ? null : undefined}
-        text={title}
-      ></Tooltip>
+      {title !== null && (
+        <Tooltip
+          targetRef={resolvedRef}
+          trigger={disabled ? null : undefined}
+          text={title}
+        ></Tooltip>
+      )}
 
       <div className={styles.touchTarget} />
       <State
@@ -138,7 +140,7 @@ export const IconButton = ({
         )}
         stateClassName={'state-ripple-group-[icon-button]'}
       />
-      {icon && <Icon icon={icon} className={styles.icon} />}
+      {icon ? <Icon icon={icon} className={styles.icon} /> : children}
     </ElementType>
   );
 };

package/src/lib/components/TabGroup.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import React, { useId, useMemo, useRef, useState } from 'react';
 import { TabGroupContext, TabGroupContextValue } from './TabGroupContext';
 import { TabGroupInterface } from '../interfaces/tab-group.interface';
 import { ReactProps } from '../utils/component';
@@ -7,6 +6,7 @@ import { ReactProps } from '../utils/component';
 /**
  * TabGroup provides shared state for Tabs and TabPanels
  * @status beta
+ * @parent Tabs
  * @category Navigation
  * @devx
  * - Provides selection + slide direction for Tabs/TabPanels.
@@ -26,7 +26,9 @@ export const TabGroup = ({
 
   // Priorité : props externes > état interne
   const selectedTab =
-    externalSelectedTab !== undefined ? externalSelectedTab : internalSelectedTab;
+    externalSelectedTab !== undefined
+      ? externalSelectedTab
+      : internalSelectedTab;
 
   const setSelectedTab = externalSetSelectedTab ?? internalSetSelectedTab;
 
@@ -43,7 +45,7 @@ export const TabGroup = ({
     previousTabRef.current = selectedTab;
   }
 
-  const tabsId = useMemo(() => uuidv4(), []);
+  const id = useId();
 
   const contextValue: TabGroupContextValue = useMemo(
     () => ({
@@ -51,9 +53,9 @@ export const TabGroup = ({
       setSelectedTab,
       previousTab: previousTabRef.current,
       direction,
-      tabsId,
+      tabsId: id,
     }),
-    [selectedTab, setSelectedTab, direction, tabsId],
+    [selectedTab, setSelectedTab, direction, id],
   );
 
   return (

package/src/lib/components/TabGroupContext.tsx

@@ -2,9 +2,9 @@ import { createContext, Dispatch, SetStateAction } from 'react';
 
 /**
  * Shared state container for Tabs and TabPanels.
+ * @parent Tabs
  * @internal
  */
-
 export interface TabGroupContextValue {
   selectedTab: number | null;
   setSelectedTab: Dispatch<SetStateAction<number | null>>;

package/src/lib/components/TabPanel.tsx

@@ -7,6 +7,7 @@ import { useTabPanelStyle } from '../styles/tab-panels.style';
  * TabPanel contains the content for a single tab
  * Must be used within TabPanels
  * @status beta
+ * @parent Tabs
  * @category Navigation
  * @devx
  * - Should be rendered inside `TabPanels` for animations and aria wiring.

package/src/lib/components/TabPanels.tsx

@@ -10,6 +10,7 @@ import { TabPanel } from './TabPanel';
  * TabPanels renders the content panels with slide animation
  * Must be used within a TabGroup
  * @status beta
+ * @parent Tabs
  * @category Navigation
  * @devx
  * - Requires `TabGroup` context; otherwise it renders nothing.