@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-53RDSFKZ.mjs

@@ -0,0 +1,320 @@
+import {
+  useFormContext
+} from "./chunk-6NJMDDL6.mjs";
+import {
+  FormItemControlProvider
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+
+// src/components/FormItem.tsx
+import React, { useMemo, useEffect, useState, useCallback, useId, useRef } from "react";
+import {
+  classNames,
+  devWarn,
+  extractFormChangeValue,
+  getFormItemAsteriskClasses,
+  getFormItemClasses,
+  getFormItemContentClasses,
+  getFormItemErrorBlockClasses,
+  getFormItemErrorClasses,
+  getFormItemErrorPopupClasses,
+  getFormItemFieldClasses,
+  getFormItemLabelClasses,
+  hasRequiredRule,
+  isFormItemGroupControl,
+  mergeAriaDescribedBy
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELD_CLASSES = getFormItemFieldClasses();
+var ASTERISK_CLASSES = getFormItemAsteriskClasses();
+var FormItem = ({
+  name,
+  label,
+  labelWidth,
+  required,
+  rules,
+  error: controlledError,
+  showMessage = true,
+  errorDisplayMode = "inline",
+  size,
+  children,
+  className,
+  style,
+  condition,
+  ...rest
+}) => {
+  const formContext = useFormContext();
+  const [shakeTrigger, setShakeTrigger] = useState(0);
+  const [popupActive, setPopupActive] = useState(false);
+  const prevFormErrorRef = useRef("");
+  const contentRef = useRef(null);
+  const errorRef = useRef(null);
+  const reactId = useId();
+  const baseId = `tiger-form-item-${reactId}`;
+  const labelId = `${baseId}-label`;
+  const fieldId = `${baseId}-field`;
+  const errorId = `${baseId}-error`;
+  const actualSize = size || formContext?.size || "md";
+  const labelPosition = formContext?.labelPosition || "left";
+  const labelAlign = formContext?.labelAlign;
+  const conditionState = useMemo(() => {
+    if (!name || !formContext) {
+      return { shown: true, disabled: false, required: false };
+    }
+    return formContext.getFieldConditionState(name, condition);
+  }, [name, formContext, condition]);
+  const actualLabelWidth = useMemo(() => {
+    const width = labelWidth || formContext?.labelWidth;
+    if (typeof width === "number") {
+      return `${width}px`;
+    }
+    return width;
+  }, [labelWidth, formContext?.labelWidth]);
+  const fieldIsRequired = useMemo(() => {
+    if (required !== void 0) return required;
+    if (hasRequiredRule(rules)) return true;
+    if (name && hasRequiredRule(formContext?.rules?.[name])) return true;
+    return conditionState.required;
+  }, [required, rules, name, formContext?.rules, conditionState.required]);
+  const showAsterisk = fieldIsRequired && (formContext?.showRequiredAsterisk ?? true);
+  const formError = name ? formContext?.errorsByField[name] : void 0;
+  const errorMessage = controlledError !== void 0 ? controlledError : formError ?? "";
+  const hasError = !!errorMessage;
+  useEffect(() => {
+    if (errorMessage && errorMessage !== prevFormErrorRef.current) {
+      setShakeTrigger((prev) => prev + 1);
+    }
+    prevFormErrorRef.current = errorMessage;
+  }, [errorMessage]);
+  useEffect(() => {
+    if (!name || !formContext) {
+      return;
+    }
+    formContext.registerFieldRules(name, rules);
+    formContext.registerFieldCondition(name, condition);
+    return () => {
+      formContext.registerFieldRules(name, void 0);
+      formContext.registerFieldCondition(name, void 0);
+    };
+  }, [name, rules, condition, formContext]);
+  const handleBlur = useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "blur");
+    }
+  }, [name, formContext, rules]);
+  const handleValueChange = useCallback(
+    (next) => {
+      if (!name || !formContext) return;
+      formContext.updateValue(name, next);
+      formContext.validateField(name, rules, "change");
+    },
+    [name, formContext, rules]
+  );
+  const handleNativeChange = useCallback(
+    (argument) => {
+      const extracted = extractFormChangeValue(argument);
+      if (extracted.found) {
+        handleValueChange(extracted.value);
+      } else if (name && formContext) {
+        formContext.validateField(name, rules, "change");
+      }
+    },
+    [handleValueChange, name, formContext, rules]
+  );
+  const effectiveShowMessage = showMessage && (formContext?.inlineMessage ?? true);
+  const popupErrorVisible = effectiveShowMessage && hasError && errorDisplayMode === "popup" && popupActive;
+  const overlay = useAnchoredOverlay({
+    enabled: popupErrorVisible,
+    referenceRef: contentRef,
+    floatingRef: errorRef,
+    placement: "bottom-start",
+    offset: 4
+  });
+  const describedById = effectiveShowMessage && hasError ? errorId : void 0;
+  const fieldValue = name ? formContext?.getFieldValue(name) : void 0;
+  const controlDisabled = Boolean(
+    formContext?.disabled || formContext?.loading || conditionState.disabled
+  );
+  const childArray = React.Children.toArray(children);
+  const onlyChild = childArray.length === 1 ? childArray[0] : null;
+  const isNativeElement = React.isValidElement(onlyChild) && typeof onlyChild.type === "string";
+  const nativeId = isNativeElement ? onlyChild.props.id : void 0;
+  const effectiveFieldId = nativeId ?? fieldId;
+  const useGroup = childArray.length !== 1;
+  const isGroupControl = React.isValidElement(onlyChild) && isFormItemGroupControl(onlyChild.type);
+  const enhancedChild = useMemo(() => {
+    if (!isNativeElement || !React.isValidElement(onlyChild)) {
+      return children;
+    }
+    const nativeType = typeof onlyChild.props.type === "string" ? onlyChild.props.type.toLowerCase() : "";
+    const nextProps = {
+      id: effectiveFieldId,
+      name: onlyChild.props.name ?? name,
+      "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
+      "aria-required": fieldIsRequired ? true : onlyChild.props["aria-required"],
+      disabled: controlDisabled ? true : onlyChild.props.disabled,
+      "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
+      onBlur: (event) => {
+        onlyChild.props.onBlur?.(event);
+        handleBlur();
+      },
+      onChange: (event) => {
+        onlyChild.props.onChange?.(event);
+        handleNativeChange(event);
+      }
+    };
+    if (nativeType === "checkbox") {
+      nextProps.checked = Boolean(fieldValue);
+    } else if (nativeType === "radio") {
+      nextProps.checked = onlyChild.props.value === fieldValue;
+    } else if (fieldValue !== void 0) {
+      nextProps.value = fieldValue;
+    } else {
+      nextProps.value = onlyChild.props.value ?? "";
+    }
+    return React.cloneElement(onlyChild, nextProps);
+  }, [
+    isNativeElement,
+    onlyChild,
+    children,
+    effectiveFieldId,
+    name,
+    hasError,
+    fieldIsRequired,
+    controlDisabled,
+    describedById,
+    handleBlur,
+    handleNativeChange,
+    fieldValue
+  ]);
+  useEffect(() => {
+    if (useGroup && name) {
+      devWarn(
+        "FormItem.multipleControls",
+        "FormItem supports a single field control. Extra children do not receive value or validation bindings."
+      );
+    }
+  }, [useGroup, name]);
+  const controlValue = useMemo(
+    () => ({
+      id: effectiveFieldId,
+      labelId: label ? labelId : void 0,
+      name,
+      status: hasError ? "error" : void 0,
+      shakeTrigger: hasError ? shakeTrigger : void 0,
+      disabled: controlDisabled,
+      describedBy: describedById,
+      required: fieldIsRequired,
+      value: name ? fieldValue ?? "" : fieldValue,
+      onChange: handleValueChange,
+      onBlur: handleBlur
+    }),
+    [
+      effectiveFieldId,
+      label,
+      labelId,
+      name,
+      hasError,
+      shakeTrigger,
+      controlDisabled,
+      describedById,
+      fieldIsRequired,
+      fieldValue,
+      handleValueChange,
+      handleBlur
+    ]
+  );
+  const formItemClasses = classNames(
+    getFormItemClasses({
+      size: actualSize,
+      labelPosition,
+      hasError,
+      disabled: controlDisabled
+    }),
+    className
+  );
+  const labelClasses = getFormItemLabelClasses({
+    size: actualSize,
+    labelAlign,
+    labelPosition,
+    isRequired: showAsterisk
+  });
+  const labelStyles = labelPosition === "top" ? {} : actualLabelWidth ? { width: actualLabelWidth } : {};
+  const errorNode = (() => {
+    if (!effectiveShowMessage) return null;
+    if (errorDisplayMode === "block" && !hasError) return null;
+    if (errorDisplayMode === "popup" && !hasError) return null;
+    const errorClass = errorDisplayMode === "block" ? getFormItemErrorBlockClasses(actualSize) : errorDisplayMode === "popup" ? classNames(getFormItemErrorPopupClasses(), overlay.floatingClasses) : getFormItemErrorClasses(actualSize, { visible: hasError });
+    return renderOverlayPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: errorRef,
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClass,
+          style: errorDisplayMode === "popup" ? overlay.floatingStyles : void 0,
+          "data-positioned": errorDisplayMode === "popup" ? overlay.positioned : void 0,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      ),
+      overlay.target,
+      errorDisplayMode !== "popup"
+    );
+  })();
+  if (!conditionState.shown) {
+    return null;
+  }
+  const fieldWrapperProps = useGroup ? {
+    role: "group",
+    "aria-labelledby": label ? labelId : void 0,
+    "aria-describedby": describedById,
+    "aria-invalid": hasError ? true : void 0
+  } : {};
+  return /* @__PURE__ */ jsxs("div", { className: formItemClasses, style, ...rest, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: labelId,
+        className: labelClasses,
+        style: labelStyles,
+        htmlFor: isGroupControl ? void 0 : effectiveFieldId,
+        children: [
+          showAsterisk && /* @__PURE__ */ jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: contentRef,
+        className: classNames(
+          getFormItemContentClasses(labelPosition),
+          errorDisplayMode === "popup" && "relative"
+        ),
+        onMouseEnter: () => setPopupActive(true),
+        onMouseLeave: () => setPopupActive(false),
+        onFocus: () => setPopupActive(true),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setPopupActive(false);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: FIELD_CLASSES, ...fieldWrapperProps, children: /* @__PURE__ */ jsx(FormItemControlProvider, { value: controlValue, children: enhancedChild }) }),
+          errorNode
+        ]
+      }
+    )
+  ] });
+};
+FormItem.displayName = "TigerFormItem";
+
+export {
+  FormItem
+};

package/dist/{chunk-TQ6RIFWR.mjs → chunk-57IHCV62.mjs}

@@ -1,16 +1,19 @@
 // src/components/Marquee.tsx
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef, useCallback, useLayoutEffect, useState } from "react";
 import {
+  getMarqueeCloneAttributes,
   getMarqueeContentClasses,
+  getMarqueeContentStyle,
   getMarqueeRootClasses,
   getMarqueeTrackClasses,
   getMarqueeTrackStyle,
   injectMarqueeStyles,
   isMarqueeFocusInside,
   isMarqueePaused,
-  resolveMarqueeAriaLabel,
   resolveMarqueeDirection,
+  resolveMarqueePauseOnFocus,
   resolveMarqueePauseOnHover,
+  resolveMarqueeRegion,
   resolveMarqueeRepeat
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
@@ -19,6 +22,8 @@ var Marquee = forwardRef(
     direction,
     duration,
     pauseOnHover,
+    pauseOnFocus,
+    paused: pausedProp,
     gap,
     repeat,
     ariaLabel,
@@ -31,21 +36,27 @@ var Marquee = forwardRef(
     onBlur,
     ...rest
   }, ref) => {
-    injectMarqueeStyles();
+    useLayoutEffect(() => {
+      injectMarqueeStyles();
+    }, []);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
     const resolvedDirection = resolveMarqueeDirection(direction);
     const resolvedPauseOnHover = resolveMarqueePauseOnHover(pauseOnHover);
+    const resolvedPauseOnFocus = resolveMarqueePauseOnFocus(pauseOnFocus);
     const copies = resolveMarqueeRepeat(repeat);
     const paused = isMarqueePaused({
+      paused: pausedProp,
       pauseOnHover: resolvedPauseOnHover,
+      pauseOnFocus: resolvedPauseOnFocus,
       hovered,
       focused
     });
-    const { "aria-label": ariaLabelAttr, ...domProps } = rest;
-    const resolvedAriaLabel = resolveMarqueeAriaLabel(
-      typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
-    );
+    const { "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledByAttr, ...domProps } = rest;
+    const region = resolveMarqueeRegion({
+      ariaLabel: typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel,
+      labelledBy: typeof ariaLabelledByAttr === "string" ? ariaLabelledByAttr : void 0
+    });
     const handleMouseEnter = useCallback(
       (event) => {
         if (resolvedPauseOnHover) setHovered(true);
@@ -62,34 +73,38 @@ var Marquee = forwardRef(
     );
     const handleFocus = useCallback(
       (event) => {
-        if (resolvedPauseOnHover) setFocused(true);
+        if (resolvedPauseOnFocus) setFocused(true);
         onFocus?.(event);
       },
-      [onFocus, resolvedPauseOnHover]
+      [onFocus, resolvedPauseOnFocus]
     );
     const handleBlur = useCallback(
       (event) => {
-        if (resolvedPauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+        if (resolvedPauseOnFocus && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
           setFocused(false);
         }
         onBlur?.(event);
       },
-      [onBlur, resolvedPauseOnHover]
+      [onBlur, resolvedPauseOnFocus]
     );
     return /* @__PURE__ */ jsx(
       "div",
       {
         ...domProps,
         ref,
-        role: "region",
-        "aria-label": resolvedAriaLabel,
+        role: region.role,
+        "aria-label": region.ariaLabel,
+        "aria-labelledby": typeof ariaLabelledByAttr === "string" ? ariaLabelledByAttr : void 0,
         "data-marquee": "",
         "data-marquee-direction": resolvedDirection,
         "data-marquee-paused": paused ? "true" : "false",
         "data-marquee-pause-on-hover": resolvedPauseOnHover ? "true" : "false",
+        "data-marquee-pause-on-focus": resolvedPauseOnFocus ? "true" : "false",
         className: getMarqueeRootClasses({
           direction: resolvedDirection,
           pauseOnHover: resolvedPauseOnHover,
+          pauseOnFocus: resolvedPauseOnFocus,
+          paused: pausedProp,
           repeat: copies,
           className
         }),
@@ -114,7 +129,8 @@ var Marquee = forwardRef(
                     clone
                   }),
                   "data-marquee-content": "",
-                  ...clone ? { "data-marquee-clone": "", "aria-hidden": true } : {},
+                  style: getMarqueeContentStyle({ clone, index }),
+                  ...clone ? getMarqueeCloneAttributes() : {},
                   children
                 },
                 clone ? `clone-${index}` : "content"

package/dist/chunk-5D6BOIZB.mjs

@@ -0,0 +1,104 @@
+// src/components/Affix.tsx
+import { forwardRef, useLayoutEffect, useRef, useState, useMemo } from "react";
+import {
+  classNames,
+  createAffixController,
+  getAffixSentinelStyle,
+  resolveScrollRoot,
+  AFFIX_UNPINNED_STATE
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Affix = forwardRef(function Affix2({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  style,
+  children,
+  onChange,
+  ...props
+}, ref) {
+  const wrapperRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const placeholderRef = useRef(null);
+  const [state, setState] = useState({ ...AFFIX_UNPINNED_STATE });
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const targetRef = useRef(target);
+  targetRef.current = target;
+  const offsetTopRef = useRef(offsetTop);
+  offsetTopRef.current = offsetTop;
+  const offsetBottomRef = useRef(offsetBottom);
+  offsetBottomRef.current = offsetBottom;
+  const zIndexRef = useRef(zIndex);
+  zIndexRef.current = zIndex;
+  const controllerRef = useRef(null);
+  if (controllerRef.current === null) {
+    controllerRef.current = createAffixController({
+      getSentinel: () => sentinelRef.current,
+      getPlaceholder: () => placeholderRef.current,
+      getContent: () => wrapperRef.current,
+      getTarget: () => targetRef.current,
+      getOffsetTop: () => offsetTopRef.current,
+      getOffsetBottom: () => offsetBottomRef.current,
+      getZIndex: () => zIndexRef.current,
+      onState: setState,
+      onChange: (affixed) => onChangeRef.current?.(affixed)
+    });
+  }
+  const resolved = resolveScrollRoot(target);
+  const resolvedKey = resolved.isWindow ? "window" : resolved.target;
+  useLayoutEffect(() => {
+    controllerRef.current?.bind();
+    return () => {
+      controllerRef.current?.unbind();
+    };
+  }, [resolvedKey, offsetTop, offsetBottom]);
+  useLayoutEffect(() => {
+    controllerRef.current?.updateStyle();
+  }, [zIndex]);
+  useLayoutEffect(() => {
+    controllerRef.current?.observeFlow();
+  });
+  const setContentRef = (node) => {
+    wrapperRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const wrapperClasses = useMemo(() => classNames(className), [className]);
+  const wrapperStyle = useMemo(
+    () => state.affixed ? { ...style, ...state.style } : style,
+    [state.affixed, state.style, style]
+  );
+  const sentinel = /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: getAffixSentinelStyle() });
+  const content = /* @__PURE__ */ jsx("div", { ref: setContentRef, className: wrapperClasses, style: wrapperStyle, ...props, children });
+  const placeholder = state.affixed ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: placeholderRef,
+      "aria-hidden": "true",
+      style: {
+        width: state.placeholder.width,
+        height: state.placeholder.height
+      }
+    }
+  ) : null;
+  if (offsetBottom !== void 0) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+      placeholder,
+      content,
+      sentinel
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+    sentinel,
+    placeholder,
+    content
+  ] });
+});
+Affix.displayName = "Affix";
+
+export {
+  Affix
+};