@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-MADQ6KHD.mjs

@@ -0,0 +1,116 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+
+// src/components/RadioGroup.tsx
+import React, { useCallback, useId, useMemo } from "react";
+import {
+  collectRadioGroupInputs,
+  getChoiceGroupClasses,
+  getElementTextDirection,
+  getRadioGroupKeyboardNextIndex,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var RadioGroupContext = React.createContext(null);
+var RadioGroupInner = ({
+  value,
+  defaultValue,
+  name,
+  disabled = false,
+  size = "md",
+  direction = "vertical",
+  status: statusProp,
+  onChange,
+  children,
+  className,
+  onKeyDown,
+  ...props
+}) => {
+  const formItemControl = useFormItemControlContext();
+  const [currentValue, setValue] = useControlledState({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next === void 0) return;
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const reactId = useId();
+  const groupName = name || `tiger-radio-${reactId}`;
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"].trim() : formItemControl?.labelId;
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const role = "radiogroup";
+  const handleChange = useCallback(
+    (newValue) => {
+      if (effectiveDisabled) return;
+      setValue(newValue);
+    },
+    [effectiveDisabled, setValue]
+  );
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || effectiveDisabled) return;
+    const target = event.target;
+    const currentInput = target.closest('input[type="radio"]');
+    if (!currentInput) return;
+    const container = event.currentTarget;
+    const enabledInputs = collectRadioGroupInputs(container).filter((input) => !input.disabled);
+    if (enabledInputs.length === 0) return;
+    const currentIndex = enabledInputs.indexOf(currentInput);
+    if (currentIndex === -1) return;
+    const rtl = getElementTextDirection(container) === "rtl";
+    const nextIndex = getRadioGroupKeyboardNextIndex(
+      event.key,
+      currentIndex,
+      enabledInputs.length,
+      rtl
+    );
+    if (nextIndex === null) return;
+    event.preventDefault();
+    const nextInput = enabledInputs[nextIndex];
+    nextInput.focus();
+    nextInput.click();
+  };
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      name: groupName,
+      disabled: effectiveDisabled,
+      size,
+      onChange: handleChange
+    }),
+    [currentValue, groupName, effectiveDisabled, size, handleChange]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: getChoiceGroupClasses({ direction, className }),
+      role,
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" ? true : props["aria-invalid"],
+      "aria-disabled": effectiveDisabled || void 0,
+      onKeyDown: handleKeyDown,
+      children
+    }
+  ) });
+};
+var RadioGroup = markFormItemGroupControl(RadioGroupInner);
+RadioGroup.displayName = "RadioGroup";
+
+export {
+  RadioGroupContext,
+  RadioGroup
+};

package/dist/{chunk-FNK2VWPP.mjs → chunk-N53N6H54.mjs}

@@ -1,24 +1,30 @@
 import {
   usePopup
-} from "./chunk-WTHWLCRL.mjs";
+} from "./chunk-XKB7ECPU.mjs";
 import {
-  renderOverlayPortal
-} from "./chunk-HKAZXG74.mjs";
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  renderOverlayPortal,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.mjs";
 
 // src/components/Popover.tsx
-import { useMemo, useRef } from "react";
+import { forwardRef, useEffect, useId, useMemo } from "react";
 import {
   classNames,
-  createFloatingIdFactory,
+  getFocusableElements,
+  getOverlayTriggerAria,
   getPopoverContainerClasses,
-  getPopoverTriggerClasses,
   getPopoverContentClasses,
+  getPopoverContentStyle,
+  getPopoverTriggerClasses,
   POPOVER_TITLE_CLASSES,
   POPOVER_TEXT_CLASSES
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var createPopoverId = createFloatingIdFactory("popover");
-var Popover = ({
+var Popover = forwardRef(function Popover2({
   open,
   defaultOpen = false,
   title,
@@ -28,6 +34,7 @@ var Popover = ({
   disabled = false,
   width,
   offset = 8,
+  asChild = false,
   className,
   style,
   children,
@@ -35,10 +42,8 @@ var Popover = ({
   contentContent,
   onOpenChange,
   ...divProps
-}) => {
-  const popoverIdRef = useRef(null);
-  if (!popoverIdRef.current) popoverIdRef.current = createPopoverId();
-  const popoverId = popoverIdRef.current;
+}, forwardedRef) {
+  const popoverId = `tiger-popover-${useId()}`;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
   const {
@@ -52,28 +57,53 @@ var Popover = ({
     overlayTarget,
     triggerHandlers
   } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const trapEnabled = Boolean(currentVisible && trigger === "click");
+  useFocusTrap({ enabled: trapEnabled, containerRef: floatingRef });
+  useEffect(() => {
+    if (!currentVisible || trigger !== "click") return;
+    const frame = requestAnimationFrame(() => {
+      const root = floatingRef.current;
+      if (!root) return;
+      const dialog = root.querySelector('[role="dialog"]') ?? root;
+      const first = getFocusableElements(dialog)[0] ?? dialog;
+      first.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [currentVisible, trigger, floatingRef]);
   const containerClasses = useMemo(
     () => classNames(getPopoverContainerClasses(), className),
     [className]
   );
   const triggerClasses = useMemo(() => getPopoverTriggerClasses(disabled), [disabled]);
-  const contentClasses = useMemo(() => getPopoverContentClasses(width), [width]);
+  const hasCustomWidth = Boolean(getPopoverContentStyle(width));
+  const contentClasses = useMemo(() => getPopoverContentClasses(hasCustomWidth), [hasCustomWidth]);
+  const contentStyle = useMemo(() => getPopoverContentStyle(width), [width]);
   if (!children) return null;
+  const resolvedChildren = typeof children === "function" ? children({ open: Boolean(currentVisible) }) : children;
   const hasTitle = Boolean(title || titleContent);
   const hasContent = Boolean(content || contentContent);
+  const triggerAria = getOverlayTriggerAria({
+    kind: "dialog",
+    open: Boolean(currentVisible),
+    controlsId: popoverId,
+    disabled
+  });
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: triggerRef,
-        className: triggerClasses,
-        "aria-haspopup": "dialog",
-        "aria-disabled": disabled ? "true" : void 0,
-        "data-state": currentVisible ? "open" : "closed",
-        ...triggerHandlers,
-        children: typeof children === "function" ? children({ open: Boolean(currentVisible) }) : children
+    renderOverlayTrigger({
+      asChild,
+      child: resolvedChildren,
+      triggerRef: composeRefs(forwardedRef, triggerRef),
+      className: asChild ? void 0 : triggerClasses,
+      disabled,
+      aria: triggerAria,
+      handlers: {
+        onClick: triggerHandlers.onClick,
+        onMouseEnter: triggerHandlers.onMouseEnter,
+        onMouseLeave: triggerHandlers.onMouseLeave,
+        onFocus: triggerHandlers.onFocus,
+        onBlur: triggerHandlers.onBlur
       }
-    ),
+    }),
     currentVisible && renderOverlayPortal(
       /* @__PURE__ */ jsx(
         "div",
@@ -89,9 +119,12 @@ var Popover = ({
               id: popoverId,
               role: "dialog",
               "aria-modal": "false",
+              tabIndex: -1,
+              "aria-label": hasTitle ? void 0 : title || content || void 0,
               "aria-labelledby": hasTitle ? titleId : void 0,
               "aria-describedby": hasContent ? contentId : void 0,
               className: contentClasses,
+              style: contentStyle,
               children: [
                 hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
                 hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
@@ -103,7 +136,8 @@ var Popover = ({
       overlayTarget
     )
   ] });
-};
+});
+Popover.displayName = "Popover";
 
 export {
   Popover