@godxjp/ui 31.7.0 → 31.8.0

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/general/typography.js

@@ -7,6 +7,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { EllipsisTooltip, Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Textarea } from "../data-entry/textarea.js";
 import { isDevelopment } from "../../lib/dev.js";
+import { isImeComposing } from "../../lib/ime.js";
 const COPIED_RESET_MS = 3e3;
 const DECORATION_ELEMENTS = [
   ["strong", "strong"],
@@ -133,7 +134,10 @@ function TypographyEditor({
           inComposition.current = false;
         },
         onKeyDown: (event) => {
-          if (inComposition.current) return;
+          if (inComposition.current || isImeComposing(event)) {
+            lastKey.current = null;
+            return;
+          }
           lastKey.current = event.key;
         },
         onKeyUp: (event) => {

package/dist/components/navigation/pagination.js

@@ -17,6 +17,7 @@ import {
   SelectValue
 } from "../data-entry/select.js";
 import { buildPageRange } from "./pagination-utils.js";
+import { isImeComposing } from "../../lib/ime.js";
 const PaginationContent = React.forwardRef(({ className, ...props }, ref) => {
   const [scrollRegion, setScrollRegion] = React.useState(null);
   const setListElement = React.useCallback(
@@ -171,7 +172,7 @@ function Pagination({
             value: jumperDraft,
             onChange: (event) => setJumperDraft(event.target.value),
             onKeyDown: (event) => {
-              if (event.key !== "Enter") return;
+              if (event.key !== "Enter" || isImeComposing(event)) return;
               event.preventDefault();
               commitJump();
             }

package/dist/components/ui/tag-input.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { cn } from "../../lib/utils.js";
 import {
   applyMaxTagCount,
@@ -62,7 +63,7 @@ const TagInput = React.forwardRef(
     const removeAt = (i) => commit(tags.filter((_, idx) => idx !== i));
     const onKeyDown = (e) => {
       if (readOnly) return;
-      if (e.nativeEvent.isComposing) return;
+      if (isImeComposing(e)) return;
       if (e.key === "Enter" || tokenSeparators.includes(e.key)) {
         e.preventDefault();
         add(draft);

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.7.0",
+  "version": "31.8.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "Pick color",
-      "hexLabel": "Hex color value"
+      "hexLabel": "Hex color value",
+      "presetEmpty": "Empty"
     },
     "upload": {
       "dropzoneLabel": "Upload files",
@@ -123,7 +124,8 @@
       "clear": "Clear selection",
       "loading": "Loading…",
       "empty": "No results",
-      "error": "Couldn’t load options"
+      "error": "Couldn’t load options",
+      "create": "Create “{value}”"
     },
     "selection": {
       "overflow": "+{count}"

package/dist/i18n/messages/ja.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "色を選択",
-      "hexLabel": "カラーコード（HEX）"
+      "hexLabel": "カラーコード（HEX）",
+      "presetEmpty": "空"
     },
     "upload": {
       "dropzoneLabel": "ファイルをアップロード",
@@ -123,7 +124,8 @@
       "clear": "選択をクリア",
       "loading": "読み込み中…",
       "empty": "該当なし",
-      "error": "選択肢を読み込めませんでした"
+      "error": "選択肢を読み込めませんでした",
+      "create": "「{value}」を作成"
     },
     "selection": {
       "overflow": "他{count}件"

package/dist/i18n/messages/vi.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "Chọn màu",
-      "hexLabel": "Mã màu hex"
+      "hexLabel": "Mã màu hex",
+      "presetEmpty": "Trống"
     },
     "upload": {
       "dropzoneLabel": "Tải file lên",
@@ -123,7 +124,8 @@
       "clear": "Xóa lựa chọn",
       "loading": "Đang tải…",
       "empty": "Không có kết quả",
-      "error": "Không tải được lựa chọn"
+      "error": "Không tải được lựa chọn",
+      "create": "Tạo “{value}”"
     },
     "selection": {
       "overflow": "+{count}"

package/dist/lib/ime.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+/**
+ * TRUE WHILE AN IME IS COMPOSING (gh#1054). Between `compositionstart` and `compositionend` a
+ * Japanese / Chinese / Korean IME holds a CANDIDATE, and the Enter that confirms the conversion is
+ * delivered as an ordinary `keydown` — acting on it creates a tag, submits a form or picks an option
+ * from a half-typed reading. Every Enter (and Escape/Tab) handler in the kit asks this first.
+ *
+ * `isComposing` is the standards answer; `keyCode === 229` is the legacy one some browsers
+ * (Safari after `compositionend`, older Chromium on Windows) still report instead. Accepts a React
+ * synthetic event or a native `KeyboardEvent`.
+ */
+export declare function isImeComposing(event: React.KeyboardEvent | KeyboardEvent): boolean;

package/dist/lib/ime.js

@@ -0,0 +1,7 @@
+function isImeComposing(event) {
+  const native = "nativeEvent" in event ? event.nativeEvent : event;
+  return native.isComposing || native.keyCode === 229;
+}
+export {
+  isImeComposing
+};

package/dist/props/components/data-entry.prop.d.ts

@@ -1114,6 +1114,39 @@ export type ColorPickerProp = FieldA11yProps & {
     className?: ClassNameProp;
     id?: IdProp;
     showHexInput?: boolean;
+    /**
+     * antd `presets` (gh#1055) — named groups of fixed swatches under the picker. Each group is a
+     * collapsible section (antd renders a ghost `Collapse`); `defaultOpen` (default `true`) is its
+     * initial state and `key` its stable identity (falls back to the index). Each swatch is a radio
+     * named by its hex; the one equal to `value` (case- and shorthand-insensitive) is checked.
+     * Colours are hex strings (`#rgb`/`#rrggbb`) because the value is — antd also takes a colour
+     * object or a gradient, which this picker has no model for.
+     */
+    presets?: ColorPickerPresetProp[];
+    /**
+     * antd `panelRender` — replace the picker's body. `panel` is the default body (the swatch + hex
+     * row, then the presets); `extra.components` hands back each part on its own, so
+     * `panelRender={(_, { components: { Presets } }) => <Presets />}` is the PRESETS-ONLY mode —
+     * the palette with no free-colour entry (antd's own recipe for it). The hidden `name` input
+     * is outside the panel and always submits.
+     */
+    panelRender?: (panel: React.ReactNode, extra: {
+        components: {
+            Picker: React.FC;
+            Presets: React.FC;
+        };
+    }) => React.ReactNode;
+};
+/** One `ColorPicker presets` group — antd `PresetsItem` (gh#1055). */
+export type ColorPickerPresetProp = {
+    /** Group heading; also names the group's radiogroup. */
+    label: LabelProp;
+    /** Hex colours (`#rgb` / `#rrggbb`), in display order. Empty → antd's "Empty" line. */
+    colors: string[];
+    /** Initial expanded state of the group (antd default `true`). */
+    defaultOpen?: DefaultOpenProp;
+    /** Stable identity of the group (antd `key`); defaults to its index. */
+    key?: React.Key;
 };
 /** A SearchSelect option row. `group` buckets it under an optgroup-style heading. */
 export type SearchSelectOptionProp = {
@@ -1503,6 +1536,14 @@ export type SearchSelectBaseProp = {
      * every call site that has ever relied on the default expects a label search.
      */
     optionFilterProp?: "label" | "value" | "sublabel";
+    /**
+     * Match typed text case-SENSITIVELY (gh#1053). Default `false`: the built-in filter, the
+     * `mode="tags"` create row and a `tokenSeparators` run all compare case-folded, so typing "bug"
+     * when "Bug" exists finds "Bug" and never offers a duplicate. antd's filter folds case too; its
+     * create row compares exactly, which is the deviation `true` restores. A custom `filterOption`
+     * owns its own comparison and is not affected.
+     */
+    caseSensitive?: boolean;
 };
 /**
  * Single-select (the default): one `string` in, one `string` out — `""` means nothing selected.
@@ -1578,7 +1619,7 @@ export type SearchSelectMultipleProp = {
      * a token only counts when it matches a row; in `mode="tags"` it is accepted as it stands.
      */
     tokenSeparators?: string[];
-};
+} & SelectTagsCreateProp;
 /**
  * antd `labelInValue`, single. The value carries its own label, so a screen that never sees the
  * option list can still render what was picked.
@@ -1612,6 +1653,30 @@ export type SelectLabelInValueMultipleProp = {
         index: number;
         disabled: boolean;
     }) => React.ReactNode;
+} & SelectTagsCreateProp;
+/**
+ * `mode="tags"` — how typed text becomes a NEW value (gh#1052). antd has no equivalent of these
+ * three: its create row is the bare text and nothing reports that a value was invented. Ignored in
+ * `mode="multiple"`, which never creates.
+ */
+export type SelectTagsCreateProp = {
+    /**
+     * Whether typed text may become a new value. `false` (or a predicate returning `false` for the
+     * text) hides the create row and drops unknown `tokenSeparators` tokens — values already held
+     * stay listed so they can still be removed. Default `true`.
+     */
+    allowCreate?: boolean | ((text: string) => boolean);
+    /**
+     * The create row's content. Default: the localised `Create "{text}"` (「{text}」を作成). The
+     * value committed is the text itself either way; this only changes what the row says.
+     */
+    createLabel?: (text: string) => React.ReactNode;
+    /**
+     * Fired when a value that is NOT one of the options joins the selection — from the create row,
+     * Enter on it, or a `tokenSeparators` run. Fires beside `onSelect`/`onValueChange`, so a consumer
+     * can tell invented text apart from an option id.
+     */
+    onCreate?: (text: string) => void;
 };
 /** @see Select — the searchable engine. Single by default; `mode="multiple"` switches the shape. */
 export type SearchSelectProp = SearchSelectBaseProp & (SearchSelectSingleProp | SearchSelectMultipleProp);

package/dist/props/components/index.d.ts

@@ -1,6 +1,6 @@
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerExtraProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
-export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
+export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";

package/dist/props/registry.d.ts

@@ -1744,6 +1744,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp"];
     };
+    readonly ColorPickerPresetProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DefaultOpenProp"];
+    };
     readonly SearchSelectBaseProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -1762,6 +1767,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "MaxTagCountProp", "MaxTagPlaceholderProp"];
         readonly note: 'Internal — the `mode="multiple"` value shape of `<Select options>`; use Select.';
     };
+    readonly SelectTagsCreateProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "onCreate";
+            readonly local: true;
+            readonly reason: "An EVENT, not a value channel: fires once per invented text as it joins the selection, beside onSelect/onValueChange, so a consumer can tell typed-new text from an option id (antd has no equivalent, gh#1052).";
+        }];
+        readonly note: 'Internal — `mode="tags"` create-row knobs (allowCreate / createLabel / onCreate, gh#1052) shared by both multi-value shapes of `<Select options>`.';
+    };
     readonly SearchSelectProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";

package/dist/props/registry.js

@@ -2013,6 +2013,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp"]
   },
+  ColorPickerPresetProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["LabelProp", "DefaultOpenProp"]
+  },
   SearchSelectBaseProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2054,6 +2059,18 @@ const COMPONENT_PROP_REGISTRY = {
     ],
     note: 'Internal \u2014 the `mode="multiple"` value shape of `<Select options>`; use Select.'
   },
+  SelectTagsCreateProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "onCreate",
+        local: true,
+        reason: "An EVENT, not a value channel: fires once per invented text as it joins the selection, beside onSelect/onValueChange, so a consumer can tell typed-new text from an option id (antd has no equivalent, gh#1052)."
+      }
+    ],
+    note: 'Internal \u2014 `mode="tags"` create-row knobs (allowCreate / createLabel / onCreate, gh#1052) shared by both multi-value shapes of `<Select options>`.'
+  },
   SearchSelectProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",