@udixio/ui-react 2.10.12 → 2.10.14

package/src/lib/components/ContextMenu.tsx

@@ -1,109 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { AnchorPositioner } from './AnchorPositioner';
-import { Menu } from './Menu';
-// import { MenuProps } from '../interfaces/menu.interface'; // MenuProps is not exported from interface file usually, check file content
-import { MenuInterface } from '../interfaces';
-import { ReactProps } from '../utils';
-
-// MenuInterface has props: MenuProps.
-// But MenuProps might not be exported directly from the package index, so accessing it via MenuInterface['props'] is safer if we can't import it.
-// Actually checking Step 1271, MenuProps IS exported.
-
-export type ContextMenuProps = {
-  props: { trigger: React.ReactNode } & MenuInterface['props'];
-  type: 'div';
-  states: {
-    hasGroups: boolean;
-  };
-  elements: [''];
-};
-
-export const ContextMenu = ({
-  trigger,
-  children,
-  ...menuProps
-}: ReactProps<ContextMenuProps>) => {
-  const [contextMenu, setContextMenu] = useState<{
-    mouseX: number;
-    mouseY: number;
-  } | null>(null);
-  const anchorRef = useRef<HTMLDivElement>(null);
-
-  const handleContextMenu = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setContextMenu({
-      mouseX: event.clientX,
-      mouseY: event.clientY,
-    });
-  };
-
-  const handleClose = () => {
-    setContextMenu(null);
-  };
-
-  const handleSelect = () => {
-    handleClose();
-  };
-
-  useEffect(() => {
-    if (!contextMenu) return;
-    const handleOutsideInteraction = () => setContextMenu(null);
-    window.addEventListener('click', handleOutsideInteraction);
-    window.addEventListener('scroll', handleOutsideInteraction, true);
-
-    return () => {
-      window.removeEventListener('click', handleOutsideInteraction);
-      window.removeEventListener('scroll', handleOutsideInteraction, true);
-    };
-  }, [contextMenu]);
-
-  // Clone trigger if valid element to attach onContextMenu, otherwise wrap
-  const triggerElement = React.isValidElement(trigger) ? (
-    React.cloneElement(
-      trigger as React.ReactElement,
-      {
-        onContextMenu: (e: React.MouseEvent) => {
-          handleContextMenu(e);
-          // Call original handler if exists
-          (trigger as React.ReactElement).props.onContextMenu?.(e);
-        },
-      } as any,
-    )
-  ) : (
-    <div onContextMenu={handleContextMenu} className="inline-block">
-      {trigger}
-    </div>
-  );
-
-  return (
-    <>
-      {triggerElement}
-
-      {/* Invisible anchor element positioned at cursor */}
-      <div
-        ref={anchorRef}
-        style={{
-          position: 'fixed',
-          top: contextMenu?.mouseY ?? 0,
-          left: contextMenu?.mouseX ?? 0,
-          width: 1,
-          height: 1,
-          pointerEvents: 'none',
-          visibility: 'hidden',
-        }}
-      />
-
-      {contextMenu && (
-        <AnchorPositioner
-          anchorRef={anchorRef}
-          position="bottom right"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Menu onClick={handleSelect} {...menuProps}>
-            {children}
-          </Menu>
-        </AnchorPositioner>
-      )}
-    </>
-  );
-};

package/src/lib/components/DatePicker.tsx

@@ -1,432 +0,0 @@
-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/Divider.tsx

@@ -1,20 +0,0 @@
-import { useDividerStyle } from '../styles';
-import { DividerInterface } from '../interfaces';
-import { ReactProps } from '../utils';
-
-/**
- * Dividers are thin lines that group content in lists or other containers
- * @status beta
- * @category Layout
- * @devx
- * - Renders a semantic `<hr>`; use `orientation` for vertical dividers.
- */
-export const Divider = ({
-  orientation = 'horizontal',
-  className,
-  ...restProps
-}: ReactProps<DividerInterface>) => {
-  const styles = useDividerStyle({ orientation, className });
-
-  return <hr className={styles.divider} {...restProps} />;
-};

package/src/lib/components/Fab.tsx

@@ -1,127 +0,0 @@
-import React, { useRef } from 'react';
-import { Icon } from '../icon';
-import { AnimatePresence, motion } from 'motion/react';
-import { FabInterface } from '../interfaces/fab.interface';
-import { useFabStyle } from '../styles/fab.style';
-import { classNames } from '../utils';
-import { ReactProps } from '../utils/component';
-import { Tooltip } from './Tooltip';
-import { State } from '../effects';
-
-/**
- * Floating action buttons (FABs) help people take primary actions
- * @status beta
- * @category Action
- * @devx
- * - Requires `label` or children; icon-only still needs a label for a11y.
- * @limitations
- * - No built-in positioning; placement is handled by the layout.
- */
-export const Fab = ({
-  className,
-  label,
-  variant = 'primary',
-  size = 'medium',
-  href,
-  type,
-  icon,
-  extended = false,
-  ref,
-  transition,
-  children,
-  ...restProps
-}: ReactProps<FabInterface>) => {
-  if (children) label = children;
-  if (!label) {
-    throw new Error(
-      'FAB component requires either a label prop or children content',
-    );
-  }
-  const ElementType = href ? 'a' : 'button';
-
-  const styles = useFabStyle({
-    href,
-    icon,
-    extended,
-    label,
-    size,
-    variant,
-    className,
-    transition,
-    children: label,
-  });
-
-  transition = { duration: 0.3, ...transition };
-
-  const defaultRef = useRef(null);
-  const resolvedRef = ref || defaultRef;
-
-  const labelVariants = {
-    visible: {
-      width: 'auto',
-      marginLeft: 12,
-      opacity: 1,
-      transition: {
-        ...transition,
-        opacity: {
-          duration: transition.duration! / 2,
-          delay: transition.duration! - transition.duration! / 2,
-        },
-      },
-    },
-    hidden: {
-      width: 0,
-      marginLeft: 0,
-      opacity: 0,
-      transition: {
-        ...transition,
-        marginLeft: {
-          duration: transition.duration! / 2,
-          delay: transition.duration! - transition.duration! / 2,
-        },
-      },
-    },
-  };
-  return (
-    <ElementType
-      {...(restProps as any)}
-      ref={resolvedRef}
-      href={href}
-      aria-label={extended ? undefined : label}
-      className={styles.fab}
-    >
-      <Tooltip
-        trigger={extended ? null : undefined}
-        text={label}
-        targetRef={resolvedRef}
-      />
-      <State
-        style={{ transition: transition.duration + 's' }}
-        className={styles.stateLayer}
-        colorName={classNames({
-          'on-primary': variant == 'primary',
-          'on-secondary': variant == 'secondary',
-          'on-tertiary': variant == 'tertiary',
-          'on-primary-container': variant == 'primaryContainer',
-          'on-secondary-container': variant == 'secondaryContainer',
-          'on-tertiary-container': variant == 'tertiaryContainer',
-        })}
-        stateClassName={'state-ripple-group-[fab]'}
-      />
-      <Icon icon={icon} className={styles.icon} />
-      <AnimatePresence>
-        {extended && (
-          <motion.span
-            variants={labelVariants}
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
-            className={styles.label}
-          >
-            {label}
-          </motion.span>
-        )}
-      </AnimatePresence>
-    </ElementType>
-  );
-};