@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-CMOSTUC3.mjs

@@ -0,0 +1,296 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/RichTextEditor.tsx
+import {
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import {
+  classNames,
+  getRichTextContainerClasses,
+  getToolbarButtonClasses,
+  getEditorAreaClasses,
+  richTextToolbarClasses,
+  richTextToolbarSeparatorClasses,
+  richTextPlaceholderClasses,
+  createDefaultRichTextToolbar,
+  findHotkeyMatch,
+  isContentEmpty,
+  parseHeight,
+  builtinRichTextEngine,
+  isToolbarSeparator,
+  mergeTigerLocale,
+  getRichTextEditorLabels,
+  getToolbarButtons,
+  nextToolbarRovingIndex
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RichTextEditor = forwardRef(
+  function RichTextEditor2({
+    value,
+    defaultValue = "",
+    placeholder,
+    mode = "html",
+    toolbar,
+    height = 300,
+    readOnly = false,
+    disabled = false,
+    onChange,
+    locale,
+    labels: labelsOverride,
+    className,
+    engine,
+    ariaLabel,
+    name,
+    id,
+    onRequestUrl,
+    onFocus,
+    onBlur,
+    ...restProps
+  }, ref) {
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const editorRef = useRef(null);
+    const engineRef = useRef(null);
+    const formBoundValue = formItemControl?.value;
+    const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+    const [currentContent, setContent] = useControlledState({
+      value: resolvedValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const isControlled = value !== void 0;
+    const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
+    const [toolbarIndex, setToolbarIndex] = useState(0);
+    const empty = isContentEmpty(currentContent);
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getRichTextEditorLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const toolbarItems = useMemo(
+      () => mode === "plain" ? [] : toolbar ?? createDefaultRichTextToolbar(labels),
+      [toolbar, labels, mode]
+    );
+    const toolbarButtons = useMemo(() => getToolbarButtons(toolbarItems), [toolbarItems]);
+    useImperativeHandle(ref, () => editorRef.current);
+    const createOptionsRef = useRef({
+      isControlled,
+      value,
+      defaultValue,
+      mode,
+      readOnly,
+      effectiveDisabled,
+      placeholder,
+      toolbarItems,
+      onRequestUrl,
+      setContent
+    });
+    createOptionsRef.current = {
+      isControlled,
+      value,
+      defaultValue,
+      mode,
+      readOnly,
+      effectiveDisabled,
+      placeholder,
+      toolbarItems,
+      onRequestUrl,
+      setContent
+    };
+    useEffect(() => {
+      if (!editorRef.current) return;
+      const options = createOptionsRef.current;
+      const factory = engine ?? builtinRichTextEngine;
+      const instance = factory.create({
+        element: editorRef.current,
+        initialValue: options.isControlled ? options.value : options.defaultValue,
+        mode: options.mode,
+        readOnly: options.readOnly,
+        disabled: options.effectiveDisabled,
+        placeholder: options.placeholder,
+        toolbar: options.toolbarItems,
+        requestUrl: options.onRequestUrl,
+        notifyChange(html) {
+          createOptionsRef.current.setContent(html);
+        },
+        notifyActiveFormats(next) {
+          setActiveFormats(next);
+        }
+      });
+      engineRef.current = instance;
+      return () => {
+        instance.destroy();
+        engineRef.current = null;
+      };
+    }, [engine]);
+    useEffect(() => {
+      if (isControlled && engineRef.current && value !== void 0) {
+        engineRef.current.setValue(value);
+      }
+    }, [value, isControlled]);
+    useEffect(() => {
+      engineRef.current?.setReadOnly(readOnly, effectiveDisabled);
+    }, [readOnly, effectiveDisabled]);
+    useEffect(() => {
+      engineRef.current?.setMode(mode);
+    }, [mode]);
+    useEffect(() => {
+      engineRef.current?.setToolbar(toolbarItems);
+    }, [toolbarItems]);
+    const execButtonAction = useCallback(
+      (btn) => {
+        if (readOnly || effectiveDisabled) return;
+        engineRef.current?.exec(btn.name);
+      },
+      [readOnly, effectiveDisabled]
+    );
+    const handleKeydown = useCallback(
+      (e) => {
+        if (readOnly || effectiveDisabled) return;
+        const match = findHotkeyMatch(toolbarItems, e.nativeEvent);
+        if (match) {
+          e.preventDefault();
+          execButtonAction(match);
+        }
+      },
+      [toolbarItems, execButtonAction, readOnly, effectiveDisabled]
+    );
+    const handleToolbarKeydown = useCallback(
+      (e) => {
+        const next = nextToolbarRovingIndex(toolbarIndex, toolbarButtons.length, e.key);
+        if (next === null) return;
+        e.preventDefault();
+        setToolbarIndex(next);
+        const root = e.currentTarget.querySelectorAll("button");
+        root[next]?.focus();
+      },
+      [toolbarIndex, toolbarButtons.length]
+    );
+    const containerClasses = useMemo(
+      () => classNames(getRichTextContainerClasses(effectiveDisabled, className)),
+      [effectiveDisabled, className]
+    );
+    const editorAreaClasses = useMemo(() => getEditorAreaClasses(readOnly), [readOnly]);
+    const containerStyle = useMemo(() => {
+      const ht = parseHeight(height);
+      if (!ht) return void 0;
+      return { height: ht };
+    }, [height]);
+    const hostRest = {};
+    const containerRest = {};
+    for (const [key, val] of Object.entries(restProps)) {
+      if (key === "id" || key === "name" || key.startsWith("data-") || key.startsWith("aria-") || key === "onFocus" || key === "onBlur") {
+        hostRest[key] = val;
+      } else {
+        containerRest[key] = val;
+      }
+    }
+    return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, "data-tiger-rte": "", ...containerRest, children: [
+      toolbarItems.length > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: richTextToolbarClasses,
+          role: "toolbar",
+          "aria-label": labels.formattingToolbarAriaLabel,
+          onKeyDown: handleToolbarKeydown,
+          children: toolbarItems.map((item, idx) => {
+            if (isToolbarSeparator(item)) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: richTextToolbarSeparatorClasses,
+                  role: "separator",
+                  "aria-orientation": "vertical"
+                },
+                `sep-${idx}`
+              );
+            }
+            const btn = item;
+            const buttonIndex = toolbarButtons.findIndex((entry) => entry.name === btn.name);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getToolbarButtonClasses(activeFormats.has(btn.name)),
+                title: btn.tooltip ?? btn.label,
+                "aria-label": btn.label,
+                "aria-pressed": activeFormats.has(btn.name),
+                tabIndex: buttonIndex === toolbarIndex ? 0 : -1,
+                disabled: effectiveDisabled || readOnly,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => execButtonAction(btn),
+                children: btn.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: btn.icon } }) : btn.label
+              },
+              btn.name
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: editorRef,
+            className: editorAreaClasses,
+            role: "textbox",
+            id: effectiveId,
+            "aria-label": ariaLabel ?? hostRest["aria-label"] ?? labels.editorAriaLabel,
+            "aria-labelledby": hostRest["aria-labelledby"] ?? formItemControl?.labelId,
+            "aria-multiline": true,
+            "aria-readonly": readOnly || void 0,
+            "aria-disabled": effectiveDisabled || void 0,
+            "aria-placeholder": placeholder,
+            "data-placeholder": placeholder,
+            "data-name": effectiveName,
+            tabIndex: readOnly && !effectiveDisabled ? 0 : void 0,
+            onKeyDown: handleKeydown,
+            onFocus,
+            onBlur: (event) => {
+              formItemControl?.onBlur?.();
+              onBlur?.(event);
+            },
+            suppressContentEditableWarning: true,
+            ...hostRest
+          }
+        ),
+        empty && placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${richTextPlaceholderClasses} absolute top-0 start-0 p-4 pointer-events-none text-sm`,
+            "aria-hidden": true,
+            children: placeholder
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};

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

@@ -1,24 +1,30 @@
 import {
   usePopup
-} from "./chunk-WTHWLCRL.mjs";
+} from "./chunk-S37KEELR.mjs";
 import {
-  renderOverlayPortal
-} from "./chunk-HKAZXG74.mjs";
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  renderOverlayPortal,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.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