@cube-dev/ui-kit 0.136.1 → 0.137.0

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -1,100 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.136.1 | Cube Dev Team */
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
-import { useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useTextField } from "react-aria";
-
-//#region src/components/navigation/Tabs/EditableTitle.tsx
-/**
-* Inline editable title component for tab labels.
-*
-* When not editing, displays the title as a span with double-click to edit.
-* When editing, displays an auto-sizing input field.
-*/
-function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel }) {
-	const inputRef = useRef(null);
-	const measureRef = useRef(null);
-	const [inputWidth, setInputWidth] = useState(null);
-	const justEnteredEditModeRef = useRef(false);
-	const { inputProps } = useTextField({
-		"aria-label": "Edit tab title",
-		value: editValue,
-		onChange: onEditValueChange
-	}, inputRef);
-	useLayoutEffect(() => {
-		if (isEditing && inputRef.current) {
-			const input = inputRef.current;
-			justEnteredEditModeRef.current = true;
-			input.focus();
-			requestAnimationFrame(() => {
-				input.select();
-				requestAnimationFrame(() => {
-					requestAnimationFrame(() => {
-						justEnteredEditModeRef.current = false;
-					});
-				});
-			});
-		} else justEnteredEditModeRef.current = false;
-	}, [isEditing]);
-	useLayoutEffect(() => {
-		if (isEditing && measureRef.current) {
-			const width = measureRef.current.scrollWidth;
-			setInputWidth(width);
-		}
-	}, [isEditing, editValue]);
-	const handleKeyDown = useEvent((e) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			onSubmit();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			onCancel();
-		} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === " " || e.key === "Delete" || e.key === "Backspace") e.stopPropagation();
-	});
-	const handleBlur = useEvent(() => {
-		if (justEnteredEditModeRef.current) {
-			requestAnimationFrame(() => {
-				inputRef.current?.focus();
-				inputRef.current?.select();
-			});
-			return;
-		}
-		onSubmit();
-	});
-	const handleDoubleClick = useEvent((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		onStartEditing();
-	});
-	if (isEditing) {
-		const mergedProps = {
-			...inputProps,
-			onKeyDown: (e) => {
-				handleKeyDown(e);
-				inputProps.onKeyDown?.(e);
-			},
-			onBlur: (e) => {
-				handleBlur();
-				inputProps.onBlur?.(e);
-			}
-		};
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenMeasure, {
-			ref: measureRef,
-			"aria-hidden": "true",
-			children: editValue || " "
-		}), /* @__PURE__ */ jsx(EditableTitleInputElement, {
-			...mergedProps,
-			ref: inputRef,
-			tokens: { "$input-width": inputWidth ? `${inputWidth}px` : "auto" }
-		})] });
-	}
-	return /* @__PURE__ */ jsx("span", {
-		onDoubleClick: handleDoubleClick,
-		children: title
-	});
-}
-
-//#endregion
-export { EditableTitle };
-//# sourceMappingURL=EditableTitle.js.map

package/dist/components/navigation/Tabs/EditableTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableTitle.js","names":[],"sources":["../../../../src/components/navigation/Tabs/EditableTitle.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport { EditableTitleInputElement, HiddenMeasure } from './styled';\n\nimport type { FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface EditableTitleProps {\n  /** The current title to display (when not editing) */\n  title: ReactNode;\n  /** Whether the title is currently being edited */\n  isEditing: boolean;\n  /** Current edit input value */\n  editValue: string;\n  /** Callback when edit value changes */\n  onEditValueChange: (value: string) => void;\n  /** Callback to start editing (e.g., on double-click) */\n  onStartEditing: () => void;\n  /** Callback when editing is submitted (Enter or blur) */\n  onSubmit: () => void;\n  /** Callback when editing is cancelled (Escape) */\n  onCancel: () => void;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Inline editable title component for tab labels.\n *\n * When not editing, displays the title as a span with double-click to edit.\n * When editing, displays an auto-sizing input field.\n */\nexport function EditableTitle({\n  title,\n  isEditing,\n  editValue,\n  onEditValueChange,\n  onStartEditing,\n  onSubmit,\n  onCancel,\n}: EditableTitleProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const measureRef = useRef<HTMLSpanElement>(null);\n  const [inputWidth, setInputWidth] = useState<number | null>(null);\n  const justEnteredEditModeRef = useRef(false);\n\n  // React Aria text field hook\n  const { inputProps } = useTextField(\n    {\n      'aria-label': 'Edit tab title',\n      value: editValue,\n      onChange: onEditValueChange,\n    },\n    inputRef,\n  );\n\n  // Focus and select input when entering edit mode\n  useLayoutEffect(() => {\n    if (isEditing && inputRef.current) {\n      const input = inputRef.current;\n\n      // Set flag to ignore immediate blur events\n      justEnteredEditModeRef.current = true;\n\n      input.focus();\n      // Use requestAnimationFrame to ensure selection happens after focus\n      requestAnimationFrame(() => {\n        input.select();\n        // Clear the flag after focus is established (allow 2 frames for menu to fully close)\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            justEnteredEditModeRef.current = false;\n          });\n        });\n      });\n    } else {\n      justEnteredEditModeRef.current = false;\n    }\n  }, [isEditing]);\n\n  // Measure text width and update input width\n  useLayoutEffect(() => {\n    if (isEditing && measureRef.current) {\n      const width = measureRef.current.scrollWidth;\n      setInputWidth(width);\n    }\n  }, [isEditing, editValue]);\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      onSubmit();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      onCancel();\n    } else if (\n      e.key === 'ArrowLeft' ||\n      e.key === 'ArrowRight' ||\n      e.key === ' ' ||\n      e.key === 'Delete' ||\n      e.key === 'Backspace'\n    ) {\n      // Stop propagation to prevent tab navigation/deletion while editing\n      e.stopPropagation();\n    }\n  });\n\n  const handleBlur = useEvent(() => {\n    // Ignore blur events immediately after entering edit mode (menu closing causes focus loss)\n    if (justEnteredEditModeRef.current) {\n      // Re-focus the input since something else stole focus\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      });\n      return;\n    }\n    // Submit on blur\n    onSubmit();\n  });\n\n  const handleDoubleClick = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onStartEditing();\n  });\n\n  if (isEditing) {\n    // Merge our handlers with React Aria's inputProps\n    const mergedProps = {\n      ...inputProps,\n      onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {\n        handleKeyDown(e);\n        inputProps.onKeyDown?.(e);\n      },\n      onBlur: (e: FocusEvent<HTMLInputElement>) => {\n        handleBlur();\n        inputProps.onBlur?.(e);\n      },\n    };\n\n    return (\n      <>\n        <HiddenMeasure ref={measureRef} aria-hidden=\"true\">\n          {editValue || ' '}\n        </HiddenMeasure>\n        <EditableTitleInputElement\n          {...mergedProps}\n          ref={inputRef}\n          tokens={{ '$input-width': inputWidth ? `${inputWidth}px` : 'auto' }}\n        />\n      </>\n    );\n  }\n\n  return <span onDoubleClick={handleDoubleClick}>{title}</span>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAwCA,SAAgB,cAAc,EAC5B,OACA,WACA,WACA,mBACA,gBACA,UACA,YACqB;CACrB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CACjE,MAAM,yBAAyB,OAAO,MAAM;CAG5C,MAAM,EAAE,eAAe,aACrB;EACE,cAAc;EACd,OAAO;EACP,UAAU;EACX,EACD,SACD;AAGD,uBAAsB;AACpB,MAAI,aAAa,SAAS,SAAS;GACjC,MAAM,QAAQ,SAAS;AAGvB,0BAAuB,UAAU;AAEjC,SAAM,OAAO;AAEb,+BAA4B;AAC1B,UAAM,QAAQ;AAEd,gCAA4B;AAC1B,iCAA4B;AAC1B,6BAAuB,UAAU;OACjC;MACF;KACF;QAEF,wBAAuB,UAAU;IAElC,CAAC,UAAU,CAAC;AAGf,uBAAsB;AACpB,MAAI,aAAa,WAAW,SAAS;GACnC,MAAM,QAAQ,WAAW,QAAQ;AACjC,iBAAc,MAAM;;IAErB,CAAC,WAAW,UAAU,CAAC;CAE1B,MAAM,gBAAgB,UAAU,MAAqB;AACnD,MAAI,EAAE,QAAQ,SAAS;AACrB,KAAE,gBAAgB;AAClB,aAAU;aACD,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,aAAU;aAEV,EAAE,QAAQ,eACV,EAAE,QAAQ,gBACV,EAAE,QAAQ,OACV,EAAE,QAAQ,YACV,EAAE,QAAQ,YAGV,GAAE,iBAAiB;GAErB;CAEF,MAAM,aAAa,eAAe;AAEhC,MAAI,uBAAuB,SAAS;AAElC,+BAA4B;AAC1B,aAAS,SAAS,OAAO;AACzB,aAAS,SAAS,QAAQ;KAC1B;AACF;;AAGF,YAAU;GACV;CAEF,MAAM,oBAAoB,UAAU,MAAkB;AACpD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,kBAAgB;GAChB;AAEF,KAAI,WAAW;EAEb,MAAM,cAAc;GAClB,GAAG;GACH,YAAY,MAAuC;AACjD,kBAAc,EAAE;AAChB,eAAW,YAAY,EAAE;;GAE3B,SAAS,MAAoC;AAC3C,gBAAY;AACZ,eAAW,SAAS,EAAE;;GAEzB;AAED,SACE,8CACE,oBAAC;GAAc,KAAK;GAAY,eAAY;aACzC,aAAa;IACA,EAChB,oBAAC;GACC,GAAI;GACJ,KAAK;GACL,QAAQ,EAAE,gBAAgB,aAAa,GAAG,WAAW,MAAM,QAAQ;IACnE,IACD;;AAIP,QAAO,oBAAC;EAAK,eAAe;YAAoB;GAAa"}