@udixio/ui-react 2.9.13 → 2.9.15

package/src/lib/components/TextField.tsx

@@ -1,24 +1,28 @@
-import React, { useEffect, 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 { v4 as uuidv4 } from 'uuid';
+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';
 
 /**
  * Text fields let users enter text into a UI
  * @status beta
  * @category Input
  * @devx
- * - `onChange` receives the string value (not the DOM event).
- * - `value` syncs internal state; not a fully controlled input.
+ * - Supports controlled (`value`) and uncontrolled (`defaultValue`) usage.
+ * - `multiline` switches to textarea mode.
  * @a11y
- * - Uses `label` for `aria-label`; no `aria-describedby` for supporting text.
+ * - `aria-describedby` links supporting text/error to input.
  */
 export const TextField = ({
   variant = 'filled',
@@ -33,51 +37,40 @@ export const TextField = ({
   trailingIcon,
   leadingIcon,
   type = 'text',
-  textLine = 'singleLine',
+  multiline = false,
   autoComplete = 'on',
   onChange,
-  value: defaultValue,
-  showSupportingText: defaultShowSupportingText = false,
+  value: valueProp,
+  defaultValue,
+  showSupportingText,
+  id: idProp,
+  style,
+  ref,
   ...restProps
 }: ReactProps<TextFieldInterface>) => {
-  const [value, setValue] = useState(defaultValue ?? '');
+  const generatedId = useId();
+  const id = idProp || generatedId;
+  const helperTextId = `${id}-helper`;
+
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const value = isControlled ? valueProp : internalValue;
+
   const [isFocused, setIsFocused] = useState(false);
-  const [showErrorIcon, setShowErrorIcon] = useState(false);
-  const [showSupportingText, setShowSupportingText] = useState(
-    defaultShowSupportingText,
-  );
+  const [showErrorIcon, setShowErrorIcon] = useState(!!errorText?.length);
 
-  useEffect(() => {
-    setValue(defaultValue ?? '');
-  }, [defaultValue]);
+  const internalRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const inputRef = (ref as any) || internalRef;
 
-  useEffect(() => {
-    if (errorText?.length) {
-      setShowErrorIcon(true);
-    } else {
-      setShowErrorIcon(false);
-    }
-  }, [errorText]);
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const calendarTriggerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (defaultShowSupportingText) {
-      setShowSupportingText(defaultShowSupportingText);
-    } else {
-      if (supportingText?.length) {
-        setShowSupportingText(true);
-      } else {
-        setShowSupportingText(false);
-      }
-    }
-  }, [showSupportingText, supportingText]);
+  const hasSupportingText =
+    showSupportingText ?? (!!errorText?.length || !!supportingText?.length);
 
   useEffect(() => {
-    if (isFocused) {
-      setShowErrorIcon(false);
-    }
-  }, [isFocused]);
-
-  const inputRef = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+    setShowErrorIcon(!!errorText?.length);
+  }, [errorText]);
 
   const focusInput = () => {
     if (inputRef.current && !isFocused) {
@@ -87,28 +80,82 @@ export const TextField = ({
 
   const handleOnFocus = () => {
     setIsFocused(true);
+    setShowErrorIcon(false);
   };
 
   const handleChange = (
-    event: React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>,
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const newValue = event.target.value;
-    setValue(newValue); // Update local state
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
 
     setShowErrorIcon(false);
 
-    // If external onChange prop is provided, call it with the new value
-    if (typeof onChange === 'function') {
-      onChange(newValue);
+    if (onChange) {
+      onChange(event);
     }
   };
 
   const handleBlur = () => {
     setIsFocused(false);
+    if (errorText?.length) {
+      setShowErrorIcon(true);
+    }
+  };
+
+  // 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,
+    showSupportingText: hasSupportingText,
     isFocused,
     showErrorIcon,
     disabled,
@@ -121,37 +168,31 @@ export const TextField = ({
     supportingText,
     type,
     leadingIcon,
-    trailingIcon,
+    trailingIcon: effectiveTrailingIcon,
     variant,
     errorText,
-    value,
+    value: String(value),
     suffix,
-    textLine,
+    multiline,
   });
 
-  const [uuid] = useState(uuidv4());
-
-  let textComponentProps: object;
-  let TextComponent;
-  switch (textLine) {
-    case 'multiLine':
-      TextComponent = TextareaAutosize;
-      textComponentProps = {};
-      break;
-    case 'textAreas':
-      TextComponent = 'textarea';
-      textComponentProps = {};
-      break;
-    case 'singleLine':
-    default:
-      TextComponent = 'input';
-      textComponentProps = { type: type };
-      break;
-  }
+  const TextComponent = multiline ? TextareaAutosize : 'input';
+  const textComponentProps = multiline ? {} : { type };
+
+  const isFloating =
+    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} {...restProps}>
-      <fieldset onClick={focusInput} className={styles.content}>
+    <div ref={textFieldRef} className={styles.textField} style={style}>
+      <fieldset
+        onClick={focusInput}
+        className={styles.content}
+        role="presentation"
+      >
         <div className={styles.stateLayer}></div>
         {leadingIcon && (
           <div className={styles.leadingIcon}>
@@ -163,68 +204,81 @@ export const TextField = ({
           </div>
         )}
 
-        {!((!isFocused && !value.length) || variant == 'filled') && (
-          <motion.legend
-            variants={{
-              hidden: { width: 0, padding: 0 },
-              visible: { width: 'auto', padding: '0 8px' },
-            }}
-            initial={'hidden'}
-            animate={!(!isFocused && !value.length) ? 'visible' : 'hidden'}
-            className={'max-w-full ml-2 px-2 text-body-small h-0'}
-            transition={{ duration: 0.2 }}
-          >
-            <span className={'transform inline-flex -translate-y-1/2'}>
-              <motion.span
-                className={styles.label}
-                transition={{ duration: 0.3 }}
-                layoutId={uuid}
-              >
-                {label}
-              </motion.span>
-            </span>
-          </motion.legend>
-        )}
+        <motion.legend
+          aria-hidden="true"
+          variants={{
+            hidden: { width: 0, padding: 0 },
+            visible: { width: 'auto', padding: '0 8px' },
+          }}
+          initial={showLegend ? 'visible' : 'hidden'}
+          animate={showLegend ? 'visible' : 'hidden'}
+          className={
+            'max-w-full ml-2 px-2 text-body-small h-0 overflow-hidden whitespace-nowrap'
+          }
+          transition={{ duration: 0.2 }}
+        >
+          <span className={'transform inline-flex -translate-y-1/2 opacity-0'}>
+            {label}
+          </span>
+        </motion.legend>
+
         <div className={'flex-1 relative'}>
-          {((!isFocused && !value.length) || variant == 'filled') && (
+          {showLabel && (
             <motion.label
-              htmlFor={name}
+              htmlFor={id}
               className={classNames(
-                'absolute left-4  transition-all duration-300',
+                'absolute left-4  transition-all duration-300 pointer-events-none',
                 {
-                  'text-body-small top-2':
-                    variant == 'filled' && !(!isFocused && !value.length),
+                  'text-body-small top-2': variant == 'filled' && isFloating,
                   'text-body-large top-1/2 transform -translate-y-1/2': !(
-                    variant == 'filled' && !(!isFocused && !value.length)
+                    variant == 'filled' && isFloating
                   ),
                 },
               )}
               transition={{ duration: 0.3 }}
+              layoutId={variant === 'outlined' ? `${id}-label` : undefined}
             >
-              <motion.span
-                className={styles.label}
-                transition={{ duration: 0.3 }}
-                layoutId={variant == 'outlined' ? uuid : undefined}
-              >
-                {label}
-              </motion.span>
+              <span className={styles.label}>{label}</span>
+            </motion.label>
+          )}
+
+          {showLegend && (
+            <motion.label
+              htmlFor={id}
+              className={classNames(
+                'absolute left-2 -top-3 px-1 text-body-small z-10',
+                styles.label,
+              )}
+              layoutId={`${id}-label`}
+              transition={{ duration: 0.3 }}
+            >
+              {label}
             </motion.label>
           )}
+
           <TextComponent
-            ref={inputRef}
+            ref={inputRef as any}
             value={value}
             onChange={handleChange}
-            className={styles.input}
-            id={name}
+            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}
             aria-invalid={!!errorText?.length}
-            aria-label={label}
+            aria-describedby={hasSupportingText ? helperTextId : undefined}
             {...textComponentProps}
+            {...(restProps as any)}
           />
         </div>
 
@@ -232,21 +286,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>
             )}
           </>
@@ -255,7 +319,7 @@ export const TextField = ({
         {showErrorIcon && (
           <div
             className={classNames(styles.trailingIcon, {
-              ' absolute right-0': !trailingIcon,
+              ' absolute right-0': !effectiveTrailingIcon,
             })}
           >
             <Icon
@@ -265,8 +329,9 @@ export const TextField = ({
           </div>
         )}
       </fieldset>
-      {showSupportingText && (
-        <p className={styles.supportingText}>
+
+      {hasSupportingText && (
+        <p className={styles.supportingText} id={helperTextId}>
           {errorText?.length
             ? errorText
             : supportingText?.length
@@ -274,6 +339,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,8 +1,10 @@
+export * from './AnchorPositioner';
 export * from './Button';
 export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
 export * from './CarouselItem';
+export * from './Checkbox';
 export * from './Chip';
 export * from './Chips';
 export * from './Divider';
@@ -24,3 +26,4 @@ export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';
 export * from './Tooltip';
+export * from './DatePicker';

package/src/lib/effects/State.tsx

@@ -18,6 +18,7 @@ export interface StateInterface {
       | 'state-layer';
     className?: string;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
   };
   states: { isClient: boolean };
   elements: ['stateLayer'];
@@ -27,6 +28,7 @@ export const State = ({
   style,
   colorName,
   stateClassName = 'state-ripple-group',
+  children,
   className,
 }: ReactProps<StateInterface>) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -67,6 +69,7 @@ export const State = ({
       }}
     >
       {isClient && <RippleEffect triggerRef={groupStateRef} />}
+      {children}
     </div>
   );
 };
@@ -76,8 +79,8 @@ const cardConfig: ClassNameComponent<StateInterface> = ({
   stateClassName,
 }) => ({
   stateLayer: classNames([
-    stateClassName,
     'w-full top-0 left-0 h-full absolute pointer-events-none overflow-hidden',
+    stateClassName,
   ]),
 });
 

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/card.interface.ts

@@ -4,7 +4,7 @@ export interface CardInterface {
   type: 'div';
   props: {
     variant?: 'outlined' | 'elevated' | 'filled';
-    isInteractive?: boolean;
+    interactive?: boolean;
     children: ReactNode;
   };
   elements: ['card', 'stateLayer'];