@udixio/ui-react 2.9.14 → 2.9.16

package/src/lib/components/TextField.tsx

@@ -1,13 +1,19 @@
-import React, { useEffect, useId, useState } from 'react';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Icon } from '../icon';
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCalendarDays,
+  faCircleExclamation,
+} from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'motion/react';
+import { DatePicker } from './DatePicker';
+import { Button } from './Button';
 
 import TextareaAutosize from 'react-textarea-autosize';
 import { useTextFieldStyle } from '../styles/text-field.style';
 import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
-import { TextFieldInterface } from '../interfaces/text-field.interface';
+import { AnchorPositioner } from './AnchorPositioner';
+import { TextFieldInterface } from '../interfaces';
 
 /**
  * Text fields let users enter text into a UI
@@ -40,6 +46,7 @@ export const TextField = ({
   showSupportingText,
   id: idProp,
   style,
+  ref,
   ...restProps
 }: ReactProps<TextFieldInterface>) => {
   const generatedId = useId();
@@ -53,6 +60,12 @@ export const TextField = ({
   const [isFocused, setIsFocused] = useState(false);
   const [showErrorIcon, setShowErrorIcon] = useState(!!errorText?.length);
 
+  const internalRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const inputRef = (ref as any) || internalRef;
+
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const calendarTriggerRef = useRef<HTMLDivElement>(null);
+
   const hasSupportingText =
     showSupportingText ?? (!!errorText?.length || !!supportingText?.length);
 
@@ -60,8 +73,6 @@ export const TextField = ({
     setShowErrorIcon(!!errorText?.length);
   }, [errorText]);
 
-  const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-
   const focusInput = () => {
     if (inputRef.current && !isFocused) {
       inputRef.current.focus();
@@ -96,6 +107,54 @@ export const TextField = ({
     }
   };
 
+  // Date Picker Logic
+  const isDateInput = type === 'date';
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [tempDate, setTempDate] = useState<Date | null>(null);
+
+  const initialDateValue = useMemo(() => {
+    const val = String(value);
+    if (!val) return null;
+    const [y, m, d] = val.split('-').map(Number);
+    if (y && m && d) return new Date(y, m - 1, d);
+    return null;
+  }, [value]);
+
+  const handleDatePickerOpen = () => {
+    if (disabled) return;
+    setTempDate(initialDateValue);
+    setShowDatePicker(true);
+  };
+
+  const handleDateConfirm = () => {
+    const newValue = tempDate ? tempDate.toLocaleDateString('en-CA') : '';
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+
+    if (onChange) {
+      // Create a synthetic event
+      const event = {
+        target: {
+          value: newValue,
+          name,
+          type,
+        },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+    }
+    setShowDatePicker(false);
+  };
+
+  const effectiveTrailingIcon =
+    isDateInput && !trailingIcon ? faCalendarDays : trailingIcon;
+
+  // Enhance styles for date input
+  const inputDateClass = isDateInput
+    ? '[&::-webkit-calendar-picker-indicator]:hidden cursor-pointer'
+    : '';
+
   const styles = useTextFieldStyle({
     showSupportingText: hasSupportingText,
     isFocused,
@@ -110,7 +169,7 @@ export const TextField = ({
     supportingText,
     type,
     leadingIcon,
-    trailingIcon,
+    trailingIcon: effectiveTrailingIcon,
     variant,
     errorText,
     value: String(value),
@@ -122,12 +181,14 @@ export const TextField = ({
   const textComponentProps = multiline ? {} : { type };
 
   const isFloating =
-    isFocused || (typeof value === 'string' && value.length > 0);
+    isFocused ||
+    (typeof value === 'string' && value.length > 0) ||
+    type == 'date'; // Float label when picker open
   const showLegend = isFloating && variant === 'outlined';
   const showLabel = !showLegend;
 
   return (
-    <div className={styles.textField} style={style}>
+    <div ref={textFieldRef} className={styles.textField} style={style}>
       <fieldset
         onClick={focusInput}
         className={styles.content}
@@ -200,11 +261,18 @@ export const TextField = ({
             ref={inputRef as any}
             value={value}
             onChange={handleChange}
-            className={styles.input}
+            className={classNames(styles.input, inputDateClass)}
             id={id}
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
-            onFocus={handleOnFocus}
+            onFocus={(e) => {
+              handleOnFocus();
+              if (isDateInput) {
+                // Maybe open picker on focus? User preference.
+                // Often better on click/icon click.
+                // But let's stick to icon click for now or explicit open.
+              }
+            }}
             onBlur={handleBlur}
             disabled={disabled}
             autoComplete={autoComplete}
@@ -219,21 +287,31 @@ export const TextField = ({
 
         {!showErrorIcon && (
           <>
-            {trailingIcon && (
+            {effectiveTrailingIcon && (
               <div
+                ref={isDateInput ? calendarTriggerRef : undefined}
                 onClick={(event) => {
                   event.stopPropagation();
+                  if (isDateInput) handleDatePickerOpen();
                 }}
-                className={styles.trailingIcon}
-              >
-                {React.isValidElement(trailingIcon) ? (
-                  trailingIcon
-                ) : (
-                  <Icon className={'h-5'} icon={trailingIcon}></Icon>
+                className={classNames(
+                  styles.trailingIcon,
+                  isDateInput && 'cursor-pointer',
                 )}
+              >
+                <div className="flex items-center justify-center w-full h-full">
+                  {React.isValidElement(effectiveTrailingIcon) ? (
+                    effectiveTrailingIcon
+                  ) : (
+                    <Icon
+                      className={'h-5'}
+                      icon={effectiveTrailingIcon as any}
+                    />
+                  )}
+                </div>
               </div>
             )}
-            {!trailingIcon && suffix && (
+            {!effectiveTrailingIcon && suffix && (
               <span className={styles.suffix}>{suffix}</span>
             )}
           </>
@@ -242,7 +320,7 @@ export const TextField = ({
         {showErrorIcon && (
           <div
             className={classNames(styles.trailingIcon, {
-              ' absolute right-0': !trailingIcon,
+              ' absolute right-0': !effectiveTrailingIcon,
             })}
           >
             <Icon
@@ -252,6 +330,7 @@ export const TextField = ({
           </div>
         )}
       </fieldset>
+
       {hasSupportingText && (
         <p className={styles.supportingText} id={helperTextId}>
           {errorText?.length
@@ -261,6 +340,40 @@ export const TextField = ({
               : '\u00A0'}
         </p>
       )}
+
+      {isDateInput && showDatePicker && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-transparent"
+            onClick={() => setShowDatePicker(false)}
+          />
+          <AnchorPositioner anchorRef={textFieldRef} position="bottom">
+            <div className="z-50 shadow-xl rounded-[28px] bg-surface-container-high overflow-hidden">
+              <DatePicker
+                className={''}
+                value={tempDate}
+                onChange={setTempDate}
+              />
+              <div className="flex justify-end gap-2 p-4 pt-0">
+                <Button
+                  variant="text"
+                  size="small"
+                  onClick={() => setShowDatePicker(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="filled"
+                  size="small"
+                  onClick={handleDateConfirm}
+                >
+                  OK
+                </Button>
+              </div>
+            </div>
+          </AnchorPositioner>
+        </>
+      )}
     </div>
   );
 };

package/src/lib/components/Tooltip.tsx

@@ -1,11 +1,11 @@
 import { cloneElement, isValidElement, useEffect, useRef } from 'react';
 import { MotionProps } from '../utils';
 import { Button } from './Button';
+import { AnchorPositioner } from './AnchorPositioner';
 import { ToolTipInterface } from '../interfaces';
 import { useToolTipStyle } from '../styles';
 import { AnimatePresence, motion } from 'motion/react';
-import { SyncedFixedWrapper } from '../effects';
-import { useTooltipTrigger, useTooltipPosition } from '../hooks';
+import { useTooltipTrigger } from '../hooks';
 
 /**
  * Tooltips display brief labels or messages
@@ -36,8 +36,12 @@ export const Tooltip = ({
   defaultOpen = false,
   onOpenChange,
   id,
+  anchorRef,
   ...props
 }: MotionProps<ToolTipInterface>) => {
+  const defaultPosition = variant === 'rich' ? 'bottom-right' : 'bottom';
+  const effectivePosition = positionProp || defaultPosition;
+
   transition = { duration: 0.3, ...transition };
 
   if (!children && !targetRef) {
@@ -50,6 +54,7 @@ export const Tooltip = ({
 
   const internalRef = useRef<HTMLElement | null>(null);
   const resolvedRef = targetRef || internalRef;
+  const positioningRef = anchorRef || resolvedRef;
 
   // Use the trigger hook for state management and accessibility
   const { triggerProps, tooltipProps, isOpen } = useTooltipTrigger({
@@ -62,14 +67,6 @@ export const Tooltip = ({
     id,
   });
 
-  // Use the position hook for auto-positioning
-  const { resolvedPosition } = useTooltipPosition({
-    targetRef: resolvedRef,
-    position: positionProp,
-    variant,
-    isOpen,
-  });
-
   // Apply trigger props to the target element
   const enhancedChildren =
     !targetRef && isValidElement(children)
@@ -150,7 +147,7 @@ export const Tooltip = ({
     className,
     title,
     text,
-    position: resolvedPosition,
+    position: effectivePosition,
     trigger,
     targetRef: targetRef as any,
     children: children as any,
@@ -172,7 +169,10 @@ export const Tooltip = ({
       {enhancedChildren}
       <AnimatePresence>
         {isOpen && (
-          <SyncedFixedWrapper targetRef={resolvedRef}>
+          <AnchorPositioner
+            anchorRef={positioningRef}
+            position={effectivePosition}
+          >
             <motion.div
               initial={'close'}
               variants={variants}
@@ -209,7 +209,7 @@ export const Tooltip = ({
                 )}
               </div>
             </motion.div>
-          </SyncedFixedWrapper>
+          </AnchorPositioner>
         )}
       </AnimatePresence>
     </>

package/src/lib/components/index.ts

@@ -1,3 +1,4 @@
+export * from './AnchorPositioner';
 export * from './Button';
 export * from './Card';
 export * from './Carousel';

package/src/lib/effects/smooth-scroll.effect.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, ReactNode } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 import Lenis from 'lenis';
 
 export type SmoothScrollProps = {
@@ -36,6 +36,20 @@ export type SmoothScrollProps = {
 /**
  * SmoothScroll component using Lenis for smooth scrolling.
  * This component enables smooth scrolling at the document level.
+ *
+ * @warning **Use with caution.** Overriding native scroll behavior can cause:
+ * - **Accessibility issues**: Screen readers, keyboard navigation, and assistive technologies
+ *   may not work correctly with custom scroll implementations.
+ * - **Anchor links broken**: `scrollIntoView()`, hash navigation (`#section`), and
+ *   `window.scrollTo()` may behave unexpectedly or be ignored.
+ * - **Third-party library conflicts**: Libraries relying on native scroll events
+ *   (infinite scroll, lazy loading, scroll-triggered animations) may malfunction.
+ * - **Browser features disabled**: Find-in-page (Ctrl+F), autoscroll, and native
+ *   momentum scrolling on trackpads may not work as expected.
+ * - **Performance overhead**: The RAF loop runs continuously, which may impact
+ *   battery life and performance on low-end devices.
+ * - **Mobile issues**: Touch gestures, pull-to-refresh, and overscroll behaviors
+ *   can conflict with smooth scroll implementations.
  */
 export const SmoothScroll = ({
   transition = 1.2,

package/src/lib/hooks/index.ts

@@ -4,7 +4,6 @@ export type {
   UseTooltipTriggerReturn,
 } from './useTooltipTrigger';
 
-export { useTooltipPosition } from './useTooltipPosition';
 export type {
   UseTooltipPositionOptions,
   UseTooltipPositionReturn,

package/src/lib/interfaces/text-field.interface.ts

@@ -22,7 +22,7 @@ type Props = {
   id?: string;
   style?: React.CSSProperties;
   variant?: TextFieldVariant;
-  type?: 'text' | 'password' | 'number';
+  type?: 'text' | 'password' | 'number' | 'date';
   autoComplete?: 'on' | 'off' | string;
   multiline?: boolean;
 };

package/src/lib/interfaces/tooltip.interface.ts

@@ -38,6 +38,8 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
     onOpenChange?: (open: boolean) => void;
     /** Custom ID for accessibility linking. Auto-generated if not provided. */
     id?: string;
+    /** Custom anchor for positioning. Defaults to the trigger element. */
+    anchorRef?: RefObject<HTMLElement>;
   } & (
     | {
         children?: never;

package/src/lib/styles/date-picker.style.ts

@@ -10,7 +10,7 @@ const datePickerConfig: ClassNameComponent<DatePickerInterface> = ({
   hasSelected,
 }) => ({
   datePicker: classNames(
-    'inline-flex flex-col bg-surface-container-high rounded-[28px] p-3 shadow-sm select-none', // Using shadow-sm as placeholder for elevation
+    'inline-flex flex-col bg-surface-container-high rounded-[28px] p-3 select-none', // Using shadow-sm as placeholder for elevation
     'min-w-[320px]',
   ),
   header: classNames('flex items-center justify-between h-12 mb-2 px-2'),

package/src/lib/styles/side-sheet.style.ts

@@ -25,9 +25,9 @@ export const sideSheetConfig: ClassNameComponent<SideSheetInterface> = ({
       },
     ],
   ),
-  container: classNames('w-full overflow-hidden', {}),
-  content: classNames('w-fit '),
+  container: classNames('w-full overflow-hidden flex flex-col', {}),
   header: classNames('p-4 flex items-center gap-2'),
+  content: classNames('flex-1 overflow-y-auto'),
   title: classNames('text-on-surface-variant text-title-large'),
   closeButton: classNames('ml-auto'),
   divider: classNames({ hidden: variant == 'modal' }),

package/dist/lib/hooks/useTooltipPosition.d.ts

@@ -1,22 +0,0 @@
-import { RefObject } from 'react';
-type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type Variant = 'plain' | 'rich';
-export interface UseTooltipPositionOptions {
-    targetRef: RefObject<HTMLElement | null>;
-    position?: Position;
-    variant?: Variant;
-    isOpen: boolean;
-}
-export interface UseTooltipPositionReturn {
-    resolvedPosition: Position;
-}
-/**
- * Hook to calculate tooltip position using useLayoutEffect.
- * Auto-flips position if not enough viewport space.
- *
- * For plain variant: prefers left/right, falls back to top/bottom
- * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
- */
-export declare function useTooltipPosition({ targetRef, position: positionProp, variant, isOpen, }: UseTooltipPositionOptions): UseTooltipPositionReturn;
-export {};
-//# sourceMappingURL=useTooltipPosition.d.ts.map

package/dist/lib/hooks/useTooltipPosition.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipPosition.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,KAAK,QAAQ,GACT,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,QAAQ,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,OAAiB,EACjB,MAAM,GACP,EAAE,yBAAyB,GAAG,wBAAwB,CAyDtD"}

package/src/lib/hooks/useTooltipPosition.ts

@@ -1,95 +0,0 @@
-import { RefObject, useLayoutEffect, useState } from 'react';
-
-type Position =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
-type Variant = 'plain' | 'rich';
-
-export interface UseTooltipPositionOptions {
-  targetRef: RefObject<HTMLElement | null>;
-  position?: Position;
-  variant?: Variant;
-  isOpen: boolean;
-}
-
-export interface UseTooltipPositionReturn {
-  resolvedPosition: Position;
-}
-
-/**
- * Hook to calculate tooltip position using useLayoutEffect.
- * Auto-flips position if not enough viewport space.
- *
- * For plain variant: prefers left/right, falls back to top/bottom
- * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
- */
-export function useTooltipPosition({
-  targetRef,
-  position: positionProp,
-  variant = 'plain',
-  isOpen,
-}: UseTooltipPositionOptions): UseTooltipPositionReturn {
-  const [resolvedPosition, setResolvedPosition] = useState<Position>(
-    positionProp ?? 'bottom',
-  );
-
-  useLayoutEffect(() => {
-    // If position is explicitly set, use it
-    if (positionProp) {
-      setResolvedPosition(positionProp);
-      return;
-    }
-
-    // Only calculate if open and we have a target
-    if (!isOpen || !targetRef.current || typeof window === 'undefined') {
-      return;
-    }
-
-    const targetElement = targetRef.current;
-    const rect = targetElement.getBoundingClientRect();
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Normalized position (0-1 range)
-    const x = rect.left / viewportWidth;
-    const y = rect.top / viewportHeight;
-
-    let newPosition: Position;
-
-    if (variant === 'plain') {
-      // Plain variant: prefer horizontal positioning, fall back to vertical
-      if (x < 1 / 3) {
-        newPosition = 'right';
-      } else if (x > 2 / 3) {
-        newPosition = 'left';
-      } else {
-        newPosition = y > 0.5 ? 'top' : 'bottom';
-      }
-    } else {
-      // Rich variant: use corner positions
-      if (x < 0.5 && y < 0.5) {
-        newPosition = 'bottom-right';
-      } else if (x >= 0.5 && y < 0.5) {
-        newPosition = 'bottom-left';
-      } else if (x >= 0.5 && y >= 0.5) {
-        newPosition = 'top-left';
-      } else {
-        newPosition = 'top-right';
-      }
-    }
-
-    setResolvedPosition(newPosition);
-  }, [isOpen, targetRef, positionProp, variant]);
-
-  return {
-    resolvedPosition,
-  };
-}