@godxjp/ui 31.6.0 → 31.8.0

package/dist/components/data-entry/color-picker.js

@@ -1,10 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { resolveFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlIconClass } from "../../lib/control-styles.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Input } from "./input.js";
 const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const NATIVE_COLOR_FALLBACK = "#000000";
@@ -12,6 +16,68 @@ function normalizeHex(value) {
   if (!value.startsWith("#")) return `#${value}`;
   return value;
 }
+function colorKey(value) {
+  const hex = normalizeHex(value.trim()).toLowerCase();
+  if (!HEX_PATTERN.test(hex)) return hex;
+  if (hex.length === 4) return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  return hex;
+}
+const ColorPickerPartsContext = React.createContext(null);
+function ColorPickerPickerPart() {
+  return /* @__PURE__ */ jsx(Fragment, { children: React.useContext(ColorPickerPartsContext)?.picker });
+}
+function ColorPickerPresetsPart() {
+  return /* @__PURE__ */ jsx(Fragment, { children: React.useContext(ColorPickerPartsContext)?.presets });
+}
+const PANEL_COMPONENTS = { Picker: ColorPickerPickerPart, Presets: ColorPickerPresetsPart };
+function ColorPickerPresetGroup({
+  preset,
+  value,
+  disabled,
+  onSelect
+}) {
+  const { t } = useTranslation();
+  const labelId = React.useId();
+  const currentKey = colorKey(value);
+  const checked = preset.colors.find((color) => colorKey(color) === currentKey) ?? null;
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      defaultOpen: preset.defaultOpen ?? true,
+      className: "ui-color-picker-presets-group",
+      "data-slot": "color-picker-presets-group",
+      children: [
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "ui-color-picker-presets-trigger ui-focus-ring", children: [
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ui-color-picker-presets-chevron", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-color-picker-presets-label", children: preset.label })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "ui-color-picker-presets-content", children: preset.colors.length > 0 ? /* @__PURE__ */ jsx(
+          AriaRadioGroup,
+          {
+            "aria-labelledby": labelId,
+            orientation: "horizontal",
+            value: checked,
+            onChange: onSelect,
+            isDisabled: disabled,
+            className: "ui-color-picker-presets-items",
+            "data-slot": "color-picker-presets-items",
+            children: preset.colors.map((color, index) => /* @__PURE__ */ jsx(
+              AriaRadio,
+              {
+                value: color,
+                "aria-label": color,
+                className: "ui-color-picker-presets-color ui-focus-ring",
+                "data-slot": "color-picker-preset",
+                style: { ["--color-picker-preset-color"]: color }
+              },
+              `${index}-${color}`
+            ))
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "ui-color-picker-presets-empty", children: t("dataEntry.colorPicker.presetEmpty") }) })
+      ]
+    }
+  );
+}
 function ColorPicker({
   value: valueProp,
   defaultValue,
@@ -21,6 +87,8 @@ function ColorPicker({
   className,
   id,
   showHexInput = true,
+  presets,
+  panelRender,
   ...ariaProps
 }) {
   const { t } = useTranslation();
@@ -43,48 +111,93 @@ function ColorPicker({
     if (!isControlled) setInternalValue(normalized);
     onValueChange?.(normalized);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [
+  const swatch = /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ui-color-picker-preview",
+        style: { backgroundColor: swatchValue },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "color",
+        value: swatchValue,
+        disabled,
+        onChange: (event) => commit(event.target.value),
+        className: "ui-color-picker-input",
+        "data-field": ariaProps["data-field"] ?? identity["data-field"],
+        ...swatchA11y
+      }
+    )
+  ] });
+  const hexInput = showHexInput ? /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: id ? `${id}-hex` : void 0,
+      value: display,
+      disabled,
+      "aria-label": t("dataEntry.colorPicker.hexLabel"),
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => commit(display),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && !isImeComposing(event)) commit(display);
+      },
+      className: "ui-color-picker-hex",
+      spellCheck: false
+    }
+  ) : null;
+  const hiddenInput = resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null;
+  if (!presets && !panelRender) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
+      swatch,
+      hexInput,
+      hiddenInput
+    ] });
+  }
+  const presetsNamed = Boolean(ariaProps["aria-labelledby"] ?? ariaProps["aria-label"]);
+  const parts = {
+    picker: /* @__PURE__ */ jsxs("div", { className: "ui-color-picker-picker", "data-slot": "color-picker-picker", children: [
+      swatch,
+      hexInput
+    ] }),
+    presets: presets?.length ? (
+      // The FormField name/description also reach the palette as a GROUP, so presets-only mode
+      // (no native swatch to carry them) still announces which field these swatches fill.
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "ui-color-picker-preview",
-          style: { backgroundColor: swatchValue },
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id,
-          type: "color",
-          value: swatchValue,
-          disabled,
-          onChange: (event) => commit(event.target.value),
-          className: "ui-color-picker-input",
-          "data-field": ariaProps["data-field"] ?? identity["data-field"],
-          ...swatchA11y
+          className: "ui-color-picker-presets",
+          "data-slot": "color-picker-presets",
+          role: presetsNamed ? "group" : void 0,
+          "aria-labelledby": ariaProps["aria-labelledby"],
+          "aria-label": ariaProps["aria-labelledby"] ? void 0 : ariaProps["aria-label"],
+          "aria-describedby": ariaProps["aria-describedby"],
+          children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+            ColorPickerPresetGroup,
+            {
+              preset,
+              value,
+              disabled,
+              onSelect: commit
+            },
+            preset.key ?? index
+          ))
         }
       )
-    ] }),
-    showHexInput && /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: id ? `${id}-hex` : void 0,
-        value: display,
-        disabled,
-        "aria-label": t("dataEntry.colorPicker.hexLabel"),
-        onChange: (event) => setDraft(event.target.value),
-        onBlur: () => commit(display),
-        onKeyDown: (event) => {
-          if (event.key === "Enter") commit(display);
-        },
-        className: "ui-color-picker-hex",
-        spellCheck: false
-      }
-    ),
-    resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null
+    ) : null
+  };
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    parts.picker,
+    parts.presets
   ] });
+  return /* @__PURE__ */ jsx(ColorPickerPartsContext.Provider, { value: parts, children: /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), "data-panel": "", children: [
+    panelRender ? panelRender(panel, { components: PANEL_COMPONENTS }) : panel,
+    hiddenInput
+  ] }) });
 }
 export {
   ColorPicker

package/dist/components/data-entry/command-palette.js

@@ -12,6 +12,7 @@ import {
   CommandItem,
   CommandList
 } from "./command.js";
+import { isImeComposing } from "../../lib/ime.js";
 function CommandPalette({
   groups,
   labels,
@@ -61,7 +62,7 @@ function CommandPalette({
   React.useEffect(() => {
     if (!shortcut) return;
     const handleKeyDown = (event) => {
-      if (!event.isComposing && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+      if (!isImeComposing(event) && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         if (!open && document.activeElement instanceof HTMLElement) {
           shortcutRestoreFocusRef.current = document.activeElement;

package/dist/components/data-entry/date-picker.js

@@ -23,6 +23,7 @@ import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
 import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
+import { isImeComposing } from "../../lib/ime.js";
 const ISO_HINT = "yyyy-mm-dd";
 const PERIOD_PICKERS = /* @__PURE__ */ new Set(["month", "quarter", "year"]);
 const PERIOD_COLUMNS = 3;
@@ -236,6 +237,7 @@ function DatePicker(props) {
   };
   const keyHandlers = (onEnter) => ({
     onKeyDown: (event) => {
+      if (isImeComposing(event)) return;
       if (event.key === "ArrowDown") {
         event.preventDefault();
         setOpen(true);

package/dist/components/data-entry/index.d.ts

@@ -39,7 +39,7 @@ export type { DatePickerProps } from "./date-picker.js";
 export { TimePicker } from "./time-picker.js";
 export type { TimePickerProps } from "./time-picker.js";
 export { ColorPicker } from "./color-picker.js";
-export type { ColorPickerProps } from "./color-picker.js";
+export type { ColorPickerProps, ColorPickerPresetProps } from "./color-picker.js";
 export type { SelectProp, SelectProp as SelectProps } from "./select.js";
 export type { SearchSelectOptionProp as SelectOption, SearchSelectLoadParamsProp as SelectLoadParams, SearchSelectLoadResultProp as SelectLoadResult, } from "./search-select.js";
 export { UPLOAD_LIST_IGNORE, Upload, collectUploadCommitActions, createUploadItem, useUploadDraft, } from "./upload.js";

package/dist/components/data-entry/number-input.js

@@ -8,6 +8,7 @@ import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
 import { numberFormat } from "../../lib/intl-cache.js";
+import { isImeComposing } from "../../lib/ime.js";
 function decimalsOf(n) {
   if (!Number.isFinite(n)) return 0;
   const s = String(n);
@@ -165,7 +166,7 @@ const NumberInput = React.forwardRef(
     };
     const handleKeyDown = (event) => {
       if (!interactive) return;
-      if (composing.current || event.nativeEvent.isComposing) return;
+      if (composing.current || isImeComposing(event)) return;
       if (keyboard && event.key === "ArrowUp") {
         event.preventDefault();
         stepBy(1, event.shiftKey ? 10 : 1);

package/dist/components/data-entry/search-select.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { cn } from "../../lib/utils.js";
 import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
 import {
@@ -54,6 +55,7 @@ function SearchSelect(props) {
     onSearchChange,
     filterOption,
     optionFilterProp,
+    caseSensitive = false,
     filterSort,
     autoClearSearchValue = true,
     optionRender,
@@ -91,6 +93,18 @@ function SearchSelect(props) {
   const maxTagTextLength = props.mode !== void 0 ? props.maxTagTextLength : void 0;
   const tokenSeparators = props.mode !== void 0 ? props.tokenSeparators : void 0;
   const tagRender = props.mode !== void 0 ? props.tagRender : void 0;
+  const allowCreate = props.mode !== void 0 ? props.allowCreate : void 0;
+  const createLabel = props.mode !== void 0 ? props.createLabel : void 0;
+  const onCreate = props.mode !== void 0 ? props.onCreate : void 0;
+  const fold = React.useCallback(
+    (text) => caseSensitive ? text : text.toLowerCase(),
+    [caseSensitive]
+  );
+  const canCreate = React.useCallback(
+    (text) => tagsMode && (typeof allowCreate === "function" ? allowCreate(text) : allowCreate !== false),
+    [tagsMode, allowCreate]
+  );
+  const composingRef = React.useRef(false);
   const { t } = useTranslation();
   const nameFallback = useFieldNameFallback({
     "aria-label": ariaLabel,
@@ -154,9 +168,7 @@ function SearchSelect(props) {
       const matches = (option) => {
         if (filterOption) return filterOption(option, needle);
         const haystack = optionFilterProp ? [String(option[optionFilterProp] ?? "")] : [option.label, option.value];
-        return haystack.some(
-          (field) => String(field).toLowerCase().includes(needle.toLowerCase())
-        );
+        return haystack.some((field) => fold(String(field)).includes(fold(needle)));
       };
       const kept = needle ? list.filter(matches) : list;
       return {
@@ -164,7 +176,7 @@ function SearchSelect(props) {
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort]
+    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort, fold]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -201,8 +213,9 @@ function SearchSelect(props) {
     setActiveIndex(0);
     void fetchPage(1, debouncedQuery, false);
   }, [open, debouncedQuery, fetchPage]);
-  const displayOptions = React.useMemo(() => {
-    if (!tagsMode) return loaded;
+  const typedText = query.trim();
+  const { displayOptions, createOption } = React.useMemo(() => {
+    if (!tagsMode) return { displayOptions: loaded, createOption: void 0 };
     const known = new Set(loaded.map((option) => option.value));
     const extras = [];
     for (const entry of values) {
@@ -210,11 +223,16 @@ function SearchSelect(props) {
       known.add(entry);
       extras.push(pickedOptions[entry] ?? { value: entry, label: entry });
     }
-    const needle = query.trim();
-    const exists = known.has(needle) || loaded.some((option) => option.label === needle);
-    const create = needle && !exists ? [{ value: needle, label: needle }] : [];
-    return create.length || extras.length ? [...create, ...extras, ...loaded] : loaded;
-  }, [tagsMode, loaded, values, query, pickedOptions]);
+    const typed = fold(typedText);
+    const exists = [...known].some((entry) => fold(entry) === typed) || [...staticOptions ?? [], ...loaded].some(
+      (option) => fold(option.value) === typed || fold(option.label) === typed
+    );
+    const create = typedText && !exists && canCreate(typedText) ? { value: typedText, label: typedText } : void 0;
+    return {
+      displayOptions: create || extras.length ? [...create ? [create] : [], ...extras, ...loaded] : loaded,
+      createOption: create
+    };
+  }, [tagsMode, loaded, values, typedText, pickedOptions, staticOptions, fold, canCreate]);
   const grouped = React.useMemo(() => {
     const order = [];
     const buckets = /* @__PURE__ */ new Map();
@@ -258,6 +276,7 @@ function SearchSelect(props) {
   const maxCount = props.mode !== void 0 ? props.maxCount : void 0;
   const atMaxCount = maxCount !== void 0 && values.length >= maxCount;
   const remember = (option) => setPickedOptions((prev) => ({ ...prev, [option.value]: option }));
+  const isInvented = (entry) => tagsMode && !(staticOptions ?? []).some((option) => option.value === entry) && !loaded.some((option) => option.value === entry);
   const select = (option) => {
     if (option.disabled) return;
     if (props.mode !== void 0) {
@@ -271,7 +290,10 @@ function SearchSelect(props) {
         next.map((entry) => entry === option.value ? option : optionFor(entry)).filter((entry) => entry !== null)
       );
       if (already) props.onDeselect?.(option.value, option);
-      else props.onSelect?.(option.value, option);
+      else {
+        props.onSelect?.(option.value, option);
+        if (isInvented(option.value)) onCreate?.(option.value);
+      }
       if (autoClearSearchValue) setQuery("");
       return;
     }
@@ -289,8 +311,10 @@ function SearchSelect(props) {
     for (const raw of splitByTokenSeparators(text, tokenSeparators ?? [])) {
       const token = raw.trim();
       if (!token) continue;
-      const match = flatOrdered.find((option2) => option2.value === token || option2.label === token);
-      const option = match ?? (tagsMode ? { value: token, label: token } : void 0);
+      const match = flatOrdered.find((option2) => option2.value === token || option2.label === token) ?? flatOrdered.find(
+        (option2) => option2 !== createOption && (fold(option2.value) === fold(token) || fold(option2.label) === fold(token))
+      );
+      const option = match ?? (canCreate(token) ? { value: token, label: token } : void 0);
       if (!option || option.disabled) continue;
       if (next.includes(option.value)) continue;
       if (maxCount !== void 0 && next.length >= maxCount) break;
@@ -304,7 +328,10 @@ function SearchSelect(props) {
       next,
       next.map((entry) => picked.find((option) => option.value === entry) ?? optionFor(entry)).filter((entry) => entry != null)
     );
-    for (const option of picked) props.onSelect?.(option.value, option);
+    for (const option of picked) {
+      props.onSelect?.(option.value, option);
+      if (isInvented(option.value)) onCreate?.(option.value);
+    }
   };
   const deselect = (chipValue) => {
     select(optionFor(chipValue) ?? { value: chipValue, label: chipValue });
@@ -344,6 +371,7 @@ function SearchSelect(props) {
     if (next !== void 0) setActiveIndex(next);
   };
   const onKeyDown = (event) => {
+    if (isImeComposing(event)) return;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       moveActive(1);
@@ -530,7 +558,7 @@ function SearchSelect(props) {
                         value: query,
                         onChange: (event) => {
                           const next = event.target.value;
-                          if (multiple && tokenSeparators?.length && tokenSeparators.some((separator) => next.includes(separator))) {
+                          if (multiple && !composingRef.current && tokenSeparators?.length && tokenSeparators.some((separator) => next.includes(separator))) {
                             selectTokens(next);
                             setQuery("");
                             return;
@@ -546,6 +574,12 @@ function SearchSelect(props) {
                           setQuery("");
                         },
                         onKeyDown,
+                        onCompositionStart: () => {
+                          composingRef.current = true;
+                        },
+                        onCompositionEnd: () => {
+                          composingRef.current = false;
+                        },
                         placeholder: searchPlaceholder ?? t("dataEntry.searchSelect.search"),
                         className: "ui-search-select-search-input"
                       }
@@ -588,7 +622,11 @@ function SearchSelect(props) {
                                 onMouseDown: (event) => event.preventDefault(),
                                 onClick: () => select(option),
                                 children: [
-                                  optionRender ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: optionRender(option, { index }) }) : renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
+                                  option === createOption ? (
+                                    // gh#1052: the create row SAYS it creates — antd shows the bare text, which
+                                    // reads like an existing option.
+                                    /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-body", "data-slot": "select-create", children: /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: createLabel ? createLabel(option.value) : t("dataEntry.searchSelect.create", { value: option.value }) }) })
+                                  ) : optionRender ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: optionRender(option, { index }) }) : renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
                                     option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: option.icon }) : null,
                                     /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-text", children: [
                                       /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: option.label }),

package/dist/components/data-entry/select.js

@@ -646,7 +646,7 @@ function DataSelect(props) {
           props.onSearchChange?.(query);
         } : void 0,
         autoClearSearchValue: showSearchConfig?.autoClearSearchValue ?? props.autoClearSearchValue,
-        disabled: props.disabled || !props.loadOptions && !hasOptions,
+        disabled: props.disabled || !props.loadOptions && !hasOptions && props.mode !== "tags",
         name: resolvedName,
         "data-field": resolvedField
       }

package/dist/components/data-entry/time-picker.js

@@ -11,6 +11,7 @@ import { resolveAllowClear } from "./control-surface.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
+import { isImeComposing } from "../../lib/ime.js";
 function pad2(n) {
   return String(n).padStart(2, "0");
 }
@@ -326,6 +327,7 @@ function TimePickerPanel({
           "aria-label": t("dataEntry.timePicker.typeLabel"),
           className: "text-center tabular-nums",
           onKeyDown: (e) => {
+            if (isImeComposing(e)) return;
             if (e.key === "Enter") {
               e.preventDefault();
               commitDraft();
@@ -482,6 +484,7 @@ function TimePicker({
           if (!disabled) setOpen(true);
         },
         onKeyDown: (event) => {
+          if (isImeComposing(event)) return;
           if (event.key === "ArrowDown") {
             event.preventDefault();
             setOpen(true);

package/dist/components/feedback/non-modal-layer.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { useExitAnimation } from "@react-aria/utils";
 import { FocusScope } from "react-aria";
+import { isImeComposing } from "../../lib/ime.js";
 function useNonModalPortal(isOpen, enabled) {
   const contentRef = React.useRef(null);
   const isExiting = useExitAnimation(contentRef, enabled && isOpen);
@@ -11,7 +12,7 @@ function useNonModalPortal(isOpen, enabled) {
 }
 function closeOnEscape(close) {
   return (event) => {
-    if (event.key === "Escape" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+    if (event.key === "Escape" && !event.defaultPrevented && !isImeComposing(event)) {
       event.preventDefault();
       event.stopPropagation();
       close();

package/dist/components/feedback/tooltip.d.ts

@@ -51,4 +51,25 @@ interface TooltipContentProps extends React.ComponentPropsWithRef<"div"> {
     forceMount?: true;
 }
 export declare function TooltipContent({ className, style, children, ref, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, ...props }: TooltipContentProps): React.JSX.Element;
+/**
+ * antd's ellipsis tooltip (`Base/Ellipsis` + `useTooltipProps`), ported for gh#1045 / gh#1046.
+ * Module-internal (not in the public index): `Text`/`Paragraph`/`Title` `ellipsis.tooltip` and
+ * `BreadcrumbItemProp.ellipsis` render it. It lives here, not in typography, so Breadcrumb does not
+ * pull the Typography module (and its Textarea) into its bundle and stylesheet layers.
+ *
+ * Open while the anchor is ACTUALLY clipping — measured at the moment of the pointer or the focus,
+ * so a box that fits never shows one — on pointer hover of the anchor, and on keyboard focus of the
+ * anchor itself (`Text asChild` link, a breadcrumb link) or of the nearest focusable ANCESTOR that is
+ * a control (`treeitem`, a sort `button`, a link). The anchor never becomes focusable, so a Text in
+ * a treeitem stays inside that item's single tab stop, and the accessible name stays the full text
+ * node — the truncation is paint only. Escape dismisses (WCAG 1.4.13); hovering the tooltip keeps
+ * it open.
+ *
+ * When the focus host is ALREADY a tooltip trigger (a DataTable sort button carries the sort hint on
+ * top), this one opens underneath so the two never cover each other.
+ */
+export declare function EllipsisTooltip({ anchorRef, title, }: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    title: React.ReactNode;
+}): React.JSX.Element;
 export {};

package/dist/components/feedback/tooltip.js

@@ -12,6 +12,7 @@ import {
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 const DEFAULT_DELAY_DURATION = 200;
+const TooltipAnchorContext = React.createContext(null);
 function toPlacement(side, align) {
   if (align === "center") return side;
   if (side === "top" || side === "bottom") return `${side} ${align}`;
@@ -76,9 +77,11 @@ function TooltipContent({
   ...props
 }) {
   const overlayPortalContainer = useOverlayPortalContainer();
+  const anchorRef = React.useContext(TooltipAnchorContext);
   return /* @__PURE__ */ jsx(
     AriaTooltip,
     {
+      ...anchorRef ? { triggerRef: anchorRef } : null,
       UNSTABLE_portalContainer: overlayPortalContainer,
       placement: toPlacement(side, align),
       offset: sideOffset,
@@ -119,7 +122,105 @@ function TooltipContent({
     }
   );
 }
+const FOCUS_HOST = 'a[href], button, input, select, textarea, summary, [tabindex]:is([role="treeitem"], [role="gridcell"], [role="row"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="link"], [role="button"], [role="checkbox"], [role="radio"], [role="switch"])';
+function isClipping(node) {
+  const box = node.querySelector(':scope > [data-slot="typography-content"]') ?? node;
+  return box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight;
+}
+function isFocusVisible(node) {
+  try {
+    return node.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+function EllipsisTooltip({
+  anchorRef,
+  title
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [side, setSide] = React.useState("top");
+  const timer = React.useRef(void 0);
+  React.useEffect(() => {
+    const node = anchorRef.current;
+    if (!node) return void 0;
+    const host = node.matches(FOCUS_HOST) ? node : node.parentElement?.closest(FOCUS_HOST);
+    const schedule = (next, delay) => {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        setOpen(next);
+      }, delay);
+    };
+    const show = (delay) => {
+      if (!isClipping(node)) return;
+      setSide(host && host !== node && host.hasAttribute("data-state") ? "bottom" : "top");
+      schedule(true, delay);
+    };
+    const hide = () => {
+      schedule(false, 100);
+    };
+    const onPointerEnter = () => {
+      show(DEFAULT_DELAY_DURATION);
+    };
+    const onFocusIn = () => {
+      const active = document.activeElement;
+      if (active && (active === host || node.contains(active)) && isFocusVisible(active)) show(0);
+    };
+    node.addEventListener("pointerenter", onPointerEnter);
+    node.addEventListener("pointerleave", hide);
+    node.addEventListener("focusin", onFocusIn);
+    node.addEventListener("focusout", hide);
+    host?.addEventListener("focusin", onFocusIn);
+    host?.addEventListener("focusout", hide);
+    return () => {
+      clearTimeout(timer.current);
+      node.removeEventListener("pointerenter", onPointerEnter);
+      node.removeEventListener("pointerleave", hide);
+      node.removeEventListener("focusin", onFocusIn);
+      node.removeEventListener("focusout", hide);
+      host?.removeEventListener("focusin", onFocusIn);
+      host?.removeEventListener("focusout", hide);
+    };
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (!open) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        clearTimeout(timer.current);
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) setOpen(false);
+      },
+      children: /* @__PURE__ */ jsx(TooltipAnchorContext.Provider, { value: anchorRef, children: /* @__PURE__ */ jsx(
+        TooltipContent,
+        {
+          side,
+          "data-ellipsis-tooltip": "",
+          onPointerEnter: () => {
+            clearTimeout(timer.current);
+          },
+          onPointerLeave: () => {
+            setOpen(false);
+          },
+          children: title
+        }
+      ) })
+    }
+  );
+}
 export {
+  EllipsisTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,