@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-RNH2I23I.mjs

@@ -0,0 +1,341 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/MarkdownEditor.tsx
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, forwardRef } from "react";
+import {
+  applyMarkdownToolbarAction,
+  classNames,
+  createDefaultMarkdownToolbar,
+  findMarkdownHotkeyMatch,
+  getMarkdownBodyClasses,
+  getMarkdownContainerClasses,
+  getMarkdownToolbarButtonClasses,
+  isMarkdownToolbarSeparator,
+  markdownEditorEmptyPreviewClasses,
+  markdownEditorPreviewClasses,
+  markdownEditorSplitDividerClasses,
+  markdownEditorTextareaClasses,
+  markdownEditorToolbarClasses,
+  markdownEditorToolbarGroupClasses,
+  markdownEditorToolbarSeparatorClasses,
+  parseMarkdownHeight,
+  renderMarkdownToHtml,
+  mergeTigerLocale,
+  getMarkdownEditorLabels,
+  handleTabKey,
+  resolveEditorTabAction,
+  nextToolbarRovingIndex,
+  getMarkdownToolbarButtons
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var modes = ["edit", "split", "preview"];
+var MarkdownEditor = forwardRef(
+  function MarkdownEditor2({
+    value,
+    defaultValue = "",
+    placeholder,
+    mode,
+    defaultMode = "split",
+    toolbar,
+    showModeSwitch = true,
+    height = 360,
+    readOnly = false,
+    disabled = false,
+    renderer,
+    locale,
+    labels: labelsOverride,
+    tabSize = 2,
+    ariaLabel,
+    name,
+    id,
+    onChange,
+    onModeChange,
+    className,
+    style,
+    onFocus,
+    onBlur,
+    ...restProps
+  }, ref) {
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const textareaRef = useRef(null);
+    const pendingSelection = useRef(null);
+    const [allowTabExit, setAllowTabExit] = useState(false);
+    const [formatToolbarIndex, setFormatToolbarIndex] = useState(0);
+    const formBoundValue = formItemControl?.value;
+    const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+    const [currentValue, commitValue] = useControlledState({
+      value: resolvedValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const [currentMode, commitMode] = useControlledState({
+      value: mode,
+      defaultValue: defaultMode,
+      onChange: onModeChange
+    });
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getMarkdownEditorLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const toolbarItems = useMemo(
+      () => toolbar === false ? [] : toolbar ?? createDefaultMarkdownToolbar(labels),
+      [toolbar, labels]
+    );
+    const toolbarButtons = useMemo(() => getMarkdownToolbarButtons(toolbarItems), [toolbarItems]);
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const canEdit = currentMode === "edit" || currentMode === "split";
+    const showFormattingToolbar = toolbar !== false && canEdit && !readOnly;
+    const showTopbar = showFormattingToolbar || showModeSwitch;
+    const showEditor = canEdit;
+    const showPreview = currentMode === "preview" || currentMode === "split";
+    useLayoutEffect(() => {
+      const pending = pendingSelection.current;
+      if (!pending || !textareaRef.current) return;
+      pendingSelection.current = null;
+      textareaRef.current.selectionStart = pending.start;
+      textareaRef.current.selectionEnd = pending.end;
+      textareaRef.current.focus();
+    });
+    const previewHtml = useMemo(
+      () => renderMarkdownToHtml(currentValue, renderer),
+      [currentValue, renderer]
+    );
+    const containerStyle = useMemo(() => {
+      const parsedHeight = parseMarkdownHeight(height);
+      return { ...parsedHeight ? { height: parsedHeight } : {}, ...style };
+    }, [height, style]);
+    const modeLabels = {
+      edit: labels.editModeLabel,
+      split: labels.splitModeLabel,
+      preview: labels.previewModeLabel
+    };
+    const applyToolbarButton = useCallback(
+      (button) => {
+        if (readOnly || effectiveDisabled || !canEdit) return;
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const selection = {
+          value: currentValue,
+          selectionStart: textarea.selectionStart,
+          selectionEnd: textarea.selectionEnd
+        };
+        const result = applyMarkdownToolbarAction(button, selection, labels);
+        pendingSelection.current = {
+          start: result.selectionStart,
+          end: result.selectionEnd
+        };
+        commitValue(result.value);
+      },
+      [canEdit, commitValue, currentValue, effectiveDisabled, labels, readOnly]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        const action = resolveEditorTabAction(event, {
+          readOnly,
+          disabled: effectiveDisabled,
+          allowTabExit
+        });
+        if (action === "arm-exit") {
+          setAllowTabExit(true);
+          return;
+        }
+        if (action === "indent" || action === "outdent") {
+          event.preventDefault();
+          setAllowTabExit(false);
+          const textarea = event.currentTarget;
+          const result = handleTabKey(
+            textarea.value,
+            textarea.selectionStart,
+            textarea.selectionEnd,
+            tabSize,
+            { shift: action === "outdent" }
+          );
+          pendingSelection.current = {
+            start: result.selectionStart,
+            end: result.selectionEnd
+          };
+          commitValue(result.value);
+          return;
+        }
+        if (event.key !== "Tab") setAllowTabExit(false);
+        if (readOnly || effectiveDisabled) return;
+        const match = findMarkdownHotkeyMatch(toolbarItems, event.nativeEvent);
+        if (match) {
+          event.preventDefault();
+          applyToolbarButton(match);
+        }
+      },
+      [
+        allowTabExit,
+        applyToolbarButton,
+        commitValue,
+        effectiveDisabled,
+        readOnly,
+        tabSize,
+        toolbarItems
+      ]
+    );
+    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;
+      }
+    }
+    const previewNode = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          markdownEditorPreviewClasses,
+          currentMode === "split" ? markdownEditorSplitDividerClasses : void 0,
+          !currentValue ? markdownEditorEmptyPreviewClasses : void 0
+        ),
+        role: "region",
+        "aria-label": labels.previewAriaLabel,
+        ...currentValue ? { dangerouslySetInnerHTML: { __html: previewHtml } } : {},
+        children: currentValue ? null : placeholder
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: getMarkdownContainerClasses(effectiveDisabled, className),
+        style: containerStyle,
+        "data-mode": currentMode,
+        ...containerRest,
+        children: [
+          showTopbar && /* @__PURE__ */ jsxs("div", { className: markdownEditorToolbarClasses, children: [
+            showFormattingToolbar ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: markdownEditorToolbarGroupClasses,
+                role: "toolbar",
+                "aria-label": labels.formattingToolbarAriaLabel,
+                onKeyDown: (event) => {
+                  const next = nextToolbarRovingIndex(
+                    formatToolbarIndex,
+                    toolbarButtons.length,
+                    event.key
+                  );
+                  if (next === null) return;
+                  event.preventDefault();
+                  setFormatToolbarIndex(next);
+                  const buttons = event.currentTarget.querySelectorAll("button");
+                  buttons[next]?.focus();
+                },
+                children: toolbarItems.map((item, index) => {
+                  if (isMarkdownToolbarSeparator(item)) {
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: markdownEditorToolbarSeparatorClasses,
+                        role: "separator",
+                        "aria-orientation": "vertical"
+                      },
+                      `separator-${index}`
+                    );
+                  }
+                  const buttonIndex = toolbarButtons.findIndex((entry) => entry.name === item.name);
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: getMarkdownToolbarButtonClasses(false),
+                      title: item.tooltip ?? item.label,
+                      "aria-label": item.tooltip ?? item.label,
+                      tabIndex: buttonIndex === formatToolbarIndex ? 0 : -1,
+                      disabled: effectiveDisabled || readOnly,
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => applyToolbarButton(item),
+                      children: item.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: item.icon } }) : item.label
+                    },
+                    item.name
+                  );
+                })
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            showModeSwitch && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: markdownEditorToolbarGroupClasses,
+                role: "toolbar",
+                "aria-label": labels.modeToolbarAriaLabel,
+                children: modes.map((item) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getMarkdownToolbarButtonClasses(currentMode === item),
+                    "aria-label": modeLabels[item],
+                    "aria-pressed": currentMode === item,
+                    disabled: effectiveDisabled,
+                    onClick: () => commitMode(item),
+                    children: modeLabels[item]
+                  },
+                  item
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: getMarkdownBodyClasses(currentMode), children: [
+            showEditor && /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: (node) => {
+                  textareaRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                className: markdownEditorTextareaClasses,
+                value: currentValue,
+                onChange: (event) => commitValue(event.target.value),
+                onKeyDown: handleKeyDown,
+                onFocus,
+                onBlur: (event) => {
+                  formItemControl?.onBlur?.();
+                  onBlur?.(event);
+                },
+                placeholder,
+                readOnly: readOnly || effectiveDisabled,
+                disabled: effectiveDisabled,
+                spellCheck: true,
+                id: effectiveId,
+                name: effectiveName,
+                "aria-label": ariaLabel ?? hostRest["aria-label"] ?? labels.editorAriaLabel,
+                "aria-labelledby": hostRest["aria-labelledby"] ?? formItemControl?.labelId,
+                "aria-multiline": true,
+                ...hostRest
+              }
+            ),
+            showPreview && previewNode
+          ] })
+        ]
+      }
+    );
+  }
+);
+var MarkdownEditor_default = MarkdownEditor;
+
+export {
+  MarkdownEditor,
+  MarkdownEditor_default
+};

package/dist/chunk-RUIFGSVN.mjs

@@ -0,0 +1,141 @@
+// src/components/ConfigProvider.tsx
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  isLazyTigerLocale,
+  getImmediateTigerLocale,
+  resolveTigerLocale,
+  resolveTigerConfig,
+  createDocumentConfigHandle,
+  devWarn
+} from "@expcat/tigercat-core";
+
+// src/utils/global-locale.ts
+import {
+  createTigerLocaleScope,
+  createGlobalTigerLocaleHandle,
+  getGlobalTigerLocale,
+  resetTigerLocaleScope
+} from "@expcat/tigercat-core";
+
+// src/components/ConfigProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var EMPTY_CONFIG = {};
+var TigerConfigContext = React.createContext(EMPTY_CONFIG);
+var ConfigProvider = ({
+  locale,
+  direction,
+  theme,
+  colorScheme,
+  children
+}) => {
+  const parent = useContext(TigerConfigContext);
+  const isDocumentOwner = parent === EMPTY_CONFIG;
+  const globalLocaleHandleRef = useRef(null);
+  const documentHandleRef = useRef(null);
+  const hydratedDocumentRef = useRef(false);
+  const isLazy = isLazyTigerLocale(locale);
+  const [lazyLocale, setLazyLocale] = useState(void 0);
+  const [localeLoading, setLocaleLoading] = useState(isLazy);
+  const [localeLoadError, setLocaleLoadError] = useState(void 0);
+  const resolvedLocale = isLazy ? lazyLocale : getImmediateTigerLocale(locale);
+  useEffect(() => {
+    if (!isLazyTigerLocale(locale)) {
+      setLazyLocale(getImmediateTigerLocale(locale));
+      setLocaleLoading(false);
+      setLocaleLoadError(void 0);
+      return;
+    }
+    let cancelled = false;
+    setLocaleLoading(true);
+    setLocaleLoadError(void 0);
+    resolveTigerLocale(locale).then(
+      (result) => {
+        if (!cancelled) {
+          setLazyLocale(result);
+          setLocaleLoading(false);
+          setLocaleLoadError(void 0);
+        }
+      },
+      (reason) => {
+        if (!cancelled) {
+          const error = reason instanceof Error ? reason : new Error(String(reason));
+          setLocaleLoading(false);
+          setLocaleLoadError(error);
+          devWarn(
+            "ConfigProvider.localeLoad",
+            "[Tigercat] ConfigProvider failed to load locale; keeping the previous locale."
+          );
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+  const value = useMemo(
+    () => resolveTigerConfig({
+      locale: resolvedLocale,
+      localeLoading,
+      localeLoadError,
+      direction,
+      theme,
+      colorScheme,
+      parent
+    }),
+    [resolvedLocale, localeLoading, localeLoadError, direction, theme, colorScheme, parent]
+  );
+  if (!globalLocaleHandleRef.current) {
+    globalLocaleHandleRef.current = createGlobalTigerLocaleHandle(value.locale);
+  } else {
+    globalLocaleHandleRef.current.update(value.locale);
+  }
+  useLayoutEffect(() => {
+    return () => {
+      globalLocaleHandleRef.current?.dispose();
+      globalLocaleHandleRef.current = null;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isDocumentOwner) return;
+    const handle = createDocumentConfigHandle();
+    documentHandleRef.current = handle;
+    return () => {
+      handle.dispose();
+      documentHandleRef.current = null;
+      hydratedDocumentRef.current = false;
+    };
+  }, [isDocumentOwner]);
+  useLayoutEffect(() => {
+    if (!documentHandleRef.current) return;
+    documentHandleRef.current.apply(
+      {
+        theme: value.theme,
+        colorScheme: value.colorScheme,
+        direction: value.direction,
+        lang: value.locale?.locale
+      },
+      { hydrateAuto: !hydratedDocumentRef.current }
+    );
+    hydratedDocumentRef.current = true;
+  }, [value.theme, value.colorScheme, value.direction, value.locale?.locale]);
+  return /* @__PURE__ */ jsx(TigerConfigContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "contents",
+      "data-tiger-config-root": "",
+      dir: value.direction,
+      lang: value.locale?.locale,
+      children
+    }
+  ) });
+};
+ConfigProvider.displayName = "TigerConfigProvider";
+function useTigerConfig() {
+  return useContext(TigerConfigContext);
+}
+
+export {
+  getGlobalTigerLocale,
+  ConfigProvider,
+  useTigerConfig
+};

package/dist/{chunk-WTHWLCRL.mjs → chunk-S37KEELR.mjs}

@@ -1,11 +1,14 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
 import {
   useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 
 // src/utils/use-popup.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
-  buildTriggerHandlerMap,
+  buildOverlayTriggerHandlerMap,
   createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
@@ -18,21 +21,23 @@ function usePopup(options) {
     placement = "top",
     offset = 8,
     multiTrigger = true,
+    arrowRef,
     onOpenChange
   } = options;
-  const isControlled = open !== void 0;
-  const [internalVisible, setInternalVisible] = useState(defaultOpen);
-  const currentVisible = isControlled ? open : internalVisible;
+  const [currentVisible, setVisibleState] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
   const setVisible = useCallback(
     (next) => {
       if (disabled && next) return;
-      if (!isControlled) setInternalVisible(next);
-      onOpenChange?.(next);
+      setVisibleState(next);
     },
-    [disabled, isControlled, onOpenChange]
+    [disabled, setVisibleState]
   );
   const setVisibleRef = useRef(setVisible);
   setVisibleRef.current = setVisible;
@@ -47,19 +52,15 @@ function usePopup(options) {
   }
   const hoverController = hoverControllerRef.current;
   const restoreTriggerFocus = useCallback(() => {
-    const trigger2 = triggerRef.current;
-    const target = trigger2?.querySelector(
-      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
-    ) ?? trigger2;
     window.setTimeout(() => {
-      restoreFocus(target, { preventScroll: true });
+      restoreFocus(triggerRef.current, { preventScroll: true });
     }, 0);
   }, []);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
   const closeAndRestoreFocus = useCallback(() => {
     hoverController.closeNow();
-    restoreTriggerFocus();
-  }, [hoverController, restoreTriggerFocus]);
-  const effectiveTrigger = multiTrigger ? trigger : "click";
+    if (effectiveTrigger !== "hover") restoreTriggerFocus();
+  }, [effectiveTrigger, hoverController, restoreTriggerFocus]);
   const handleToggle = useCallback(() => {
     if (disabled) return;
     hoverController.cancel();
@@ -74,14 +75,21 @@ function usePopup(options) {
     hoverController.cancel();
     setVisible(true);
   }, [disabled, effectiveTrigger, setVisible, hoverController]);
-  const handleHide = useCallback(() => {
-    if (disabled) return;
-    if (effectiveTrigger === "hover") {
-      hoverController.leave();
-      return;
-    }
-    hoverController.closeNow();
-  }, [disabled, effectiveTrigger, hoverController]);
+  const handleHide = useCallback(
+    (event) => {
+      if (disabled) return;
+      const related = event?.relatedTarget;
+      if (related instanceof Node && (floatingRef.current?.contains(related) || triggerRef.current?.contains(related))) {
+        return;
+      }
+      if (effectiveTrigger === "hover") {
+        hoverController.leave();
+        return;
+      }
+      hoverController.closeNow();
+    },
+    [disabled, effectiveTrigger, hoverController]
+  );
   const overlay = useAnchoredOverlay({
     enabled: currentVisible,
     referenceRef: triggerRef,
@@ -89,8 +97,9 @@ function usePopup(options) {
     containerRef,
     placement,
     offset,
-    dismissOnOutside: effectiveTrigger === "click",
+    dismissOnOutside: effectiveTrigger === "click" || effectiveTrigger === "hover",
     dismissOnEscape: effectiveTrigger !== "manual",
+    arrowRef,
     onDismiss: (reason) => {
       if (reason === "escape") {
         closeAndRestoreFocus();
@@ -117,7 +126,7 @@ function usePopup(options) {
     if (!multiTrigger) {
       return { onClick: handleToggle };
     }
-    return buildTriggerHandlerMap(
+    return buildOverlayTriggerHandlerMap(
       effectiveTrigger,
       { toggle: handleToggle, show: handleShow, hide: handleHide },
       "react"
@@ -137,7 +146,9 @@ function usePopup(options) {
     positioned: overlay.positioned,
     overlayTarget: overlay.target,
     triggerHandlers,
-    closeAndRestoreFocus
+    closeAndRestoreFocus,
+    arrowX: overlay.arrowX,
+    arrowY: overlay.arrowY
   };
 }
 

package/dist/chunk-S3B5QPUA.mjs

@@ -0,0 +1,76 @@
+import {
+  LayoutContext,
+  SidebarContext
+} from "./chunk-5J7EDMS7.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Sidebar.tsx
+import { forwardRef, useContext, useEffect, useMemo } from "react";
+import {
+  classNames,
+  getLayoutSidebarClasses,
+  getSidebarAriaLabel,
+  getSidebarStyle,
+  injectLayoutGridStyles,
+  isSidebarFullyHidden,
+  resolveSidebarAriaProps
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Sidebar = forwardRef(function Sidebar2({
+  className,
+  width,
+  collapsedWidth = "64px",
+  collapsed = false,
+  side = "start",
+  style,
+  children,
+  ...props
+}, ref) {
+  injectLayoutGridStyles();
+  const layout = useContext(LayoutContext);
+  const config = useTigerConfig();
+  const fallbackName = useMemo(() => getSidebarAriaLabel(config.locale), [config.locale]);
+  useEffect(() => {
+    layout?.setSiderCollapsed(collapsed);
+    return () => layout?.setSiderCollapsed(false);
+  }, [collapsed, layout]);
+  const fullyHidden = isSidebarFullyHidden(collapsed, collapsedWidth);
+  const sidebarClasses = classNames(
+    getLayoutSidebarClasses({
+      collapsed,
+      side,
+      widthProvided: width !== void 0
+    }),
+    className
+  );
+  const sidebarStyle = {
+    ...style,
+    ...getSidebarStyle(collapsed, width, collapsedWidth)
+  };
+  const aria = resolveSidebarAriaProps({
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    fallback: fallbackName
+  });
+  const { ["aria-label"]: _ignoredLabel, ["aria-labelledby"]: _ignoredBy, ...rest } = props;
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsx(
+    "aside",
+    {
+      ref,
+      className: sidebarClasses,
+      style: sidebarStyle,
+      inert: fullyHidden || void 0,
+      "aria-hidden": fullyHidden || void 0,
+      ...aria,
+      ...rest,
+      children
+    }
+  ) });
+});
+Sidebar.displayName = "TigerSidebar";
+
+export {
+  Sidebar
+};