@neo4j-ndl/react 4.0.10 → 4.0.11

package/lib/cjs/inline-edit/InlineEdit.js

@@ -60,8 +60,11 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
      * This ref is used to prevent the blur behavior from being triggered on mouse down events
      * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.
      * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.
+     *
+     * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.
+     * This bug caused the handler to be called when something was focused after confirming.
      */
-    const clickButtonRef = (0, react_1.useRef)(false);
+    const blurWithinRef = (0, react_1.useRef)(false);
     // Validate controlled mode requirements
     (0, react_1.useEffect)(() => {
         if (value !== undefined && onChange === undefined) {
@@ -70,7 +73,7 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
     }, [value, onChange]);
     const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
         onBlurWithin: () => {
-            if (clickButtonRef.current) {
+            if (blurWithinRef.current) {
                 return;
             }
             if (blurBehavior === 'confirm') {
@@ -91,12 +94,14 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
         }
         // Only reset edit mode if isEditing is not controlled (undefined)
         if (isEditing === undefined) {
+            blurWithinRef.current = true;
             setEditMode(false);
         }
     }, [previousConfirmedValue, isEditing, setCurrentValue, value]);
     const resetEditState = (0, react_1.useCallback)(() => {
         // Only reset edit mode if isEditing is not controlled (undefined)
         if (isEditing === undefined) {
+            blurWithinRef.current = true;
             setEditMode(false);
         }
     }, [isEditing]);
@@ -104,12 +109,10 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
         setPreviousConfirmedValue(currentValue);
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(currentValue, event);
         resetEditState();
-        clickButtonRef.current = false;
     }), [onConfirm, currentValue, resetEditState]);
     const onCancelHandler = (0, react_1.useCallback)((event) => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
         resetToDefaults();
-        clickButtonRef.current = false;
     }, [onCancel, resetToDefaults]);
     const inputID = (0, react_1.useMemo)(() => {
         var _a;
@@ -134,9 +137,10 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
     const isInEditMode = isEditing !== null && isEditing !== void 0 ? isEditing : hasEditMode;
     const handleEditClick = (0, react_1.useCallback)(() => {
         if (isDisabled === false) {
-            setEditMode(!hasEditMode);
+            setEditMode(true);
+            blurWithinRef.current = false;
         }
-    }, [isDisabled, hasEditMode]);
+    }, [isDisabled]);
     const updateInputWidth = (0, react_1.useCallback)(() => {
         if (mirrorRef.current && containerRef.current && !isFluid) {
             const mirrorWidth = mirrorRef.current.offsetWidth;
@@ -149,30 +153,30 @@ const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label, onChan
         updateInputWidth();
     }, [updateInputWidth, isInEditMode, currentValue]);
     const displayText = currentValue || placeholder;
-    return ((0, jsx_runtime_1.jsxs)(typography_1.Typography, Object.assign({ as: as !== null && as !== void 0 ? as : 'div', variant: typographyVariant, className: (0, classnames_1.default)('ndl-inline-edit', className, {
+    return ((0, jsx_runtime_1.jsxs)(typography_1.Typography, { as: as !== null && as !== void 0 ? as : 'div', variant: typographyVariant, className: (0, classnames_1.default)('ndl-inline-edit', className, {
             'ndl-disabled': isDisabled,
             'ndl-fluid': isFluid,
-        }), style: style, ref: ref, htmlAttributes: htmlAttributes }, focusWithinProps, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)("label", { htmlFor: inputID, children: label }), isInEditMode === true ? ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-inline-edit-container", ref: containerRef, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: "ndl-inline-edit-mirror", ref: mirrorRef, children: displayText }), (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps, { 
+        }), style: style, ref: ref, htmlAttributes: htmlAttributes, children: [Boolean(label) && (0, jsx_runtime_1.jsx)("label", { htmlFor: inputID, children: label }), isInEditMode === true ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-inline-edit-container", ref: containerRef }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: "ndl-inline-edit-mirror", ref: mirrorRef, children: displayText }), (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps, { 
                         // eslint-disable-next-line jsx-a11y/no-autofocus
                         autoFocus: true, "aria-label": typeof label === 'string' ? label : 'Inline edit input', className: (0, classnames_1.default)('ndl-inline-edit-input', inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), id: inputID, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-inline-edit-buttons", children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { description: "Accept", tooltipProps: {
                                     root: { placement: 'bottom' },
                                 }, onClick: onConfirmHandler, size: "small", isFloating: true, htmlAttributes: {
                                     onMouseDown: () => {
-                                        clickButtonRef.current = true;
+                                        blurWithinRef.current = true;
                                     },
                                 }, children: (0, jsx_runtime_1.jsx)(icons_1.CheckIconOutline, {}) }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { description: "Cancel", tooltipProps: {
                                     root: { placement: 'bottom' },
                                 }, onClick: (event) => onCancelHandler(event), size: "small", isFloating: true, htmlAttributes: {
                                     onMouseDown: () => {
-                                        clickButtonRef.current = true;
+                                        blurWithinRef.current = true;
                                     },
-                                }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)('ndl-inline-idle-container', {
+                                }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] })] }))) : ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)('ndl-inline-idle-container', {
                     'n-text-neutral-text-weaker': displayText === placeholder,
                     'ndl-disabled': isDisabled,
                     'ndl-has-edit-icon': hasEditIcon,
                 }), "aria-disabled": isDisabled, disabled: isDisabled, onClick: handleEditClick, style: {
                     minHeight: (0, utils_2.getMinHeight)(typographyVariant),
-                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-inline-edit-text", children: displayText }), hasEditIcon && ((0, jsx_runtime_1.jsx)(icons_1.PencilIconOutline, { className: "ndl-inline-edit-pencil-icon", style: (0, utils_2.getIconStyle)(typographyVariant) }))] }))] })));
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-inline-edit-text", children: displayText }), hasEditIcon && ((0, jsx_runtime_1.jsx)(icons_1.PencilIconOutline, { className: "ndl-inline-edit-pencil-icon", style: (0, utils_2.getIconStyle)(typographyVariant) }))] }))] }));
 };
 exports.InlineEdit = InlineEdit;
 //# sourceMappingURL=InlineEdit.js.map

package/lib/cjs/inline-edit/InlineEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n  CheckIconOutline,\n  PencilIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n  /** Label text */\n  label?: ReactNode;\n\n  /**\n   * The typographyVariant of the component applied to Typography as its variant.\n   * @default subheading-medium\n   */\n  typographyVariant?: TypographyVariants;\n\n  /**\n   * The default input value. Use for an uncontrolled component.\n   */\n  defaultValue?: string;\n\n  /**\n   * The input value. Makes the component controlled.\n   */\n  value?: string;\n\n  /**\n   * Callback when the input value changes. Must be used when the component is controlled.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Placeholder text displayed when the input is empty.\n   */\n  placeholder: string;\n\n  /**\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * If edit pencil icon should be visible on hover\n   * @default false\n   */\n  hasEditIcon?: boolean;\n\n  /**\n   * If the input is in editing mode\n   * Used in a stateless inline edit\n   * @default undefined\n   */\n  isEditing?: boolean;\n\n  /** Callback when confirm icon button is pressed */\n  onConfirm?: (\n    value: string,\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /** Callback when cancel icon button is pressed */\n  onCancel?: (\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /**\n   * What the input should do on blur\n   * - \"confirm\" will confirm the value\n   * - \"cancel\" will cancel the value\n   * - \"none\" will do nothing\n   * @default \"confirm\"\n   */\n  blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n  /** props applied to the internal input element */\n  inputProps?: HtmlAttributes<'input'>;\n\n  /**\n   * If the input is fluid\n   * @default false\n   */\n  isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  defaultValue,\n  htmlAttributes,\n  label,\n  onChange,\n  onCancel,\n  onConfirm,\n  ref,\n  style,\n  value,\n  hasEditIcon = false,\n  inputProps,\n  isDisabled = false,\n  isEditing,\n  blurBehavior = 'confirm',\n  isFluid = false,\n  typographyVariant = 'subheading-medium',\n  placeholder,\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n  const [hasEditMode, setEditMode] = useState(false);\n\n  const [currentValue, setCurrentValue] = useSemicontrolledState({\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? defaultValue ?? '',\n  });\n  const [previousConfirmedValue, setPreviousConfirmedValue] =\n    useState(currentValue);\n\n  const mirrorRef = useRef<HTMLSpanElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  /**\n   * This ref is used to prevent the blur behavior from being triggered on mouse down events\n   * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n   * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n   */\n  const clickButtonRef = useRef(false);\n\n  // Validate controlled mode requirements\n  useEffect(() => {\n    if (value !== undefined && onChange === undefined) {\n      needleWarningMessage(\n        'onChange prop should be supplied when using controlled mode (value prop is provided).',\n      );\n    }\n  }, [value, onChange]);\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => {\n      if (clickButtonRef.current) {\n        return;\n      }\n\n      if (blurBehavior === 'confirm') {\n        onConfirmHandler();\n        return;\n      }\n      if (blurBehavior === 'cancel') {\n        onCancelHandler();\n        return;\n      }\n    },\n  });\n\n  const resetToDefaults = useCallback(() => {\n    // In controlled mode, don't reset the value - let the parent manage it\n    // In uncontrolled mode, reset to default value\n    if (value === undefined) {\n      setCurrentValue(previousConfirmedValue ?? '');\n    }\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      setEditMode(false);\n    }\n  }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n  const resetEditState = useCallback(() => {\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      setEditMode(false);\n    }\n  }, [isEditing]);\n\n  const onConfirmHandler = useCallback(\n    async (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      setPreviousConfirmedValue(currentValue);\n      onConfirm?.(currentValue, event);\n      resetEditState();\n      clickButtonRef.current = false;\n    },\n    [onConfirm, currentValue, resetEditState],\n  );\n\n  const onCancelHandler = useCallback(\n    (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      onCancel?.(event);\n      resetToDefaults();\n      clickButtonRef.current = false;\n    },\n    [onCancel, resetToDefaults],\n  );\n\n  const inputID = useMemo(() => {\n    return inputProps?.id ?? randomId(12);\n  }, [inputProps?.id]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Escape'].includes(e.key)) {\n        if (e.key === 'Enter') {\n          onConfirmHandler();\n        }\n        if (e.key === 'Escape') {\n          onCancelHandler();\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [onConfirmHandler, onCancelHandler],\n  );\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setCurrentValue(newValue);\n    },\n    [setCurrentValue],\n  );\n\n  const isInEditMode = isEditing ?? hasEditMode;\n\n  const handleEditClick = useCallback(() => {\n    if (isDisabled === false) {\n      setEditMode(!hasEditMode);\n    }\n  }, [isDisabled, hasEditMode]);\n\n  const updateInputWidth = useCallback(() => {\n    if (mirrorRef.current && containerRef.current && !isFluid) {\n      const mirrorWidth = mirrorRef.current.offsetWidth;\n      const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n      containerRef.current.style.maxWidth = `${newWidth}px`;\n    }\n  }, [mirrorRef, containerRef, isFluid]);\n\n  // Width calculation effect\n  useLayoutEffect(() => {\n    updateInputWidth();\n  }, [updateInputWidth, isInEditMode, currentValue]);\n\n  const displayText = currentValue || placeholder;\n\n  return (\n    <Typography\n      as={as ?? 'div'}\n      variant={typographyVariant}\n      className={classNames('ndl-inline-edit', className, {\n        'ndl-disabled': isDisabled,\n        'ndl-fluid': isFluid,\n      })}\n      style={style}\n      ref={ref}\n      htmlAttributes={htmlAttributes}\n      {...focusWithinProps}\n    >\n      {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n      {isInEditMode === true ? (\n        <div className=\"ndl-inline-edit-container\" ref={containerRef}>\n          {/* Mirror span for measuring width */}\n          <span\n            aria-hidden={true}\n            className=\"ndl-inline-edit-mirror\"\n            ref={mirrorRef}\n          >\n            {displayText}\n          </span>\n          <input\n            {...inputProps}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus\n            aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n            className={classNames(\n              'ndl-inline-edit-input',\n              inputProps?.className,\n            )}\n            id={inputID}\n            value={currentValue}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n          />\n          <div className=\"ndl-inline-edit-buttons\">\n            <IconButton\n              description=\"Accept\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={onConfirmHandler}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  clickButtonRef.current = true;\n                },\n              }}\n            >\n              <CheckIconOutline />\n            </IconButton>\n            <IconButton\n              description=\"Cancel\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={(event) => onCancelHandler(event)}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  clickButtonRef.current = true;\n                },\n              }}\n            >\n              <XMarkIconOutline />\n            </IconButton>\n          </div>\n        </div>\n      ) : (\n        <button\n          className={classNames('ndl-inline-idle-container', {\n            'n-text-neutral-text-weaker': displayText === placeholder,\n            'ndl-disabled': isDisabled,\n            'ndl-has-edit-icon': hasEditIcon,\n          })}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={handleEditClick}\n          style={{\n            minHeight: getMinHeight(typographyVariant),\n          }}\n        >\n          <span className=\"ndl-inline-edit-text\">{displayText}</span>\n          {hasEditIcon && (\n            <PencilIconOutline\n              className=\"ndl-inline-edit-pencil-icon\"\n              style={getIconStyle(typographyVariant)}\n            />\n          )}\n        </button>\n      )}\n    </Typography>\n  );\n};\n"]}
+{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n  CheckIconOutline,\n  PencilIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n  /** Label text */\n  label?: ReactNode;\n\n  /**\n   * The typographyVariant of the component applied to Typography as its variant.\n   * @default subheading-medium\n   */\n  typographyVariant?: TypographyVariants;\n\n  /**\n   * The default input value. Use for an uncontrolled component.\n   */\n  defaultValue?: string;\n\n  /**\n   * The input value. Makes the component controlled.\n   */\n  value?: string;\n\n  /**\n   * Callback when the input value changes. Must be used when the component is controlled.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Placeholder text displayed when the input is empty.\n   */\n  placeholder: string;\n\n  /**\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * If edit pencil icon should be visible on hover\n   * @default false\n   */\n  hasEditIcon?: boolean;\n\n  /**\n   * If the input is in editing mode\n   * Used in a stateless inline edit\n   * @default undefined\n   */\n  isEditing?: boolean;\n\n  /** Callback when confirm icon button is pressed */\n  onConfirm?: (\n    value: string,\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /** Callback when cancel icon button is pressed */\n  onCancel?: (\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /**\n   * What the input should do on blur\n   * - \"confirm\" will confirm the value\n   * - \"cancel\" will cancel the value\n   * - \"none\" will do nothing\n   * @default \"confirm\"\n   */\n  blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n  /** props applied to the internal input element */\n  inputProps?: HtmlAttributes<'input'>;\n\n  /**\n   * If the input is fluid\n   * @default false\n   */\n  isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  defaultValue,\n  htmlAttributes,\n  label,\n  onChange,\n  onCancel,\n  onConfirm,\n  ref,\n  style,\n  value,\n  hasEditIcon = false,\n  inputProps,\n  isDisabled = false,\n  isEditing,\n  blurBehavior = 'confirm',\n  isFluid = false,\n  typographyVariant = 'subheading-medium',\n  placeholder,\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n  const [hasEditMode, setEditMode] = useState(false);\n\n  const [currentValue, setCurrentValue] = useSemicontrolledState({\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? defaultValue ?? '',\n  });\n  const [previousConfirmedValue, setPreviousConfirmedValue] =\n    useState(currentValue);\n\n  const mirrorRef = useRef<HTMLSpanElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  /**\n   * This ref is used to prevent the blur behavior from being triggered on mouse down events\n   * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n   * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n   *\n   * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.\n   * This bug caused the handler to be called when something was focused after confirming.\n   */\n  const blurWithinRef = useRef(false);\n\n  // Validate controlled mode requirements\n  useEffect(() => {\n    if (value !== undefined && onChange === undefined) {\n      needleWarningMessage(\n        'onChange prop should be supplied when using controlled mode (value prop is provided).',\n      );\n    }\n  }, [value, onChange]);\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => {\n      if (blurWithinRef.current) {\n        return;\n      }\n\n      if (blurBehavior === 'confirm') {\n        onConfirmHandler();\n        return;\n      }\n      if (blurBehavior === 'cancel') {\n        onCancelHandler();\n        return;\n      }\n    },\n  });\n\n  const resetToDefaults = useCallback(() => {\n    // In controlled mode, don't reset the value - let the parent manage it\n    // In uncontrolled mode, reset to default value\n    if (value === undefined) {\n      setCurrentValue(previousConfirmedValue ?? '');\n    }\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      blurWithinRef.current = true;\n      setEditMode(false);\n    }\n  }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n  const resetEditState = useCallback(() => {\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      blurWithinRef.current = true;\n      setEditMode(false);\n    }\n  }, [isEditing]);\n\n  const onConfirmHandler = useCallback(\n    async (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      setPreviousConfirmedValue(currentValue);\n      onConfirm?.(currentValue, event);\n      resetEditState();\n    },\n    [onConfirm, currentValue, resetEditState],\n  );\n\n  const onCancelHandler = useCallback(\n    (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      onCancel?.(event);\n      resetToDefaults();\n    },\n    [onCancel, resetToDefaults],\n  );\n\n  const inputID = useMemo(() => {\n    return inputProps?.id ?? randomId(12);\n  }, [inputProps?.id]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Escape'].includes(e.key)) {\n        if (e.key === 'Enter') {\n          onConfirmHandler();\n        }\n        if (e.key === 'Escape') {\n          onCancelHandler();\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [onConfirmHandler, onCancelHandler],\n  );\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setCurrentValue(newValue);\n    },\n    [setCurrentValue],\n  );\n\n  const isInEditMode = isEditing ?? hasEditMode;\n\n  const handleEditClick = useCallback(() => {\n    if (isDisabled === false) {\n      setEditMode(true);\n      blurWithinRef.current = false;\n    }\n  }, [isDisabled]);\n\n  const updateInputWidth = useCallback(() => {\n    if (mirrorRef.current && containerRef.current && !isFluid) {\n      const mirrorWidth = mirrorRef.current.offsetWidth;\n      const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n      containerRef.current.style.maxWidth = `${newWidth}px`;\n    }\n  }, [mirrorRef, containerRef, isFluid]);\n\n  // Width calculation effect\n  useLayoutEffect(() => {\n    updateInputWidth();\n  }, [updateInputWidth, isInEditMode, currentValue]);\n\n  const displayText = currentValue || placeholder;\n\n  return (\n    <Typography\n      as={as ?? 'div'}\n      variant={typographyVariant}\n      className={classNames('ndl-inline-edit', className, {\n        'ndl-disabled': isDisabled,\n        'ndl-fluid': isFluid,\n      })}\n      style={style}\n      ref={ref}\n      htmlAttributes={htmlAttributes}\n    >\n      {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n      {isInEditMode === true ? (\n        <div\n          className=\"ndl-inline-edit-container\"\n          ref={containerRef}\n          {...focusWithinProps}\n        >\n          {/* Mirror span for measuring width */}\n          <span\n            aria-hidden={true}\n            className=\"ndl-inline-edit-mirror\"\n            ref={mirrorRef}\n          >\n            {displayText}\n          </span>\n          <input\n            {...inputProps}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus\n            aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n            className={classNames(\n              'ndl-inline-edit-input',\n              inputProps?.className,\n            )}\n            id={inputID}\n            value={currentValue}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n          />\n          <div className=\"ndl-inline-edit-buttons\">\n            <IconButton\n              description=\"Accept\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={onConfirmHandler}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  blurWithinRef.current = true;\n                },\n              }}\n            >\n              <CheckIconOutline />\n            </IconButton>\n            <IconButton\n              description=\"Cancel\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={(event) => onCancelHandler(event)}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  blurWithinRef.current = true;\n                },\n              }}\n            >\n              <XMarkIconOutline />\n            </IconButton>\n          </div>\n        </div>\n      ) : (\n        <button\n          className={classNames('ndl-inline-idle-container', {\n            'n-text-neutral-text-weaker': displayText === placeholder,\n            'ndl-disabled': isDisabled,\n            'ndl-has-edit-icon': hasEditIcon,\n          })}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={handleEditClick}\n          style={{\n            minHeight: getMinHeight(typographyVariant),\n          }}\n        >\n          <span className=\"ndl-inline-edit-text\">{displayText}</span>\n          {hasEditIcon && (\n            <PencilIconOutline\n              className=\"ndl-inline-edit-pencil-icon\"\n              style={getIconStyle(typographyVariant)}\n            />\n          )}\n        </button>\n      )}\n    </Typography>\n  );\n};\n"]}

package/lib/esm/inline-edit/InlineEdit.js

@@ -54,8 +54,11 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
      * This ref is used to prevent the blur behavior from being triggered on mouse down events
      * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.
      * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.
+     *
+     * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.
+     * This bug caused the handler to be called when something was focused after confirming.
      */
-    const clickButtonRef = useRef(false);
+    const blurWithinRef = useRef(false);
     // Validate controlled mode requirements
     useEffect(() => {
         if (value !== undefined && onChange === undefined) {
@@ -64,7 +67,7 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
     }, [value, onChange]);
     const { focusWithinProps } = useFocusWithin({
         onBlurWithin: () => {
-            if (clickButtonRef.current) {
+            if (blurWithinRef.current) {
                 return;
             }
             if (blurBehavior === 'confirm') {
@@ -85,12 +88,14 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
         }
         // Only reset edit mode if isEditing is not controlled (undefined)
         if (isEditing === undefined) {
+            blurWithinRef.current = true;
             setEditMode(false);
         }
     }, [previousConfirmedValue, isEditing, setCurrentValue, value]);
     const resetEditState = useCallback(() => {
         // Only reset edit mode if isEditing is not controlled (undefined)
         if (isEditing === undefined) {
+            blurWithinRef.current = true;
             setEditMode(false);
         }
     }, [isEditing]);
@@ -98,12 +103,10 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
         setPreviousConfirmedValue(currentValue);
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(currentValue, event);
         resetEditState();
-        clickButtonRef.current = false;
     }), [onConfirm, currentValue, resetEditState]);
     const onCancelHandler = useCallback((event) => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
         resetToDefaults();
-        clickButtonRef.current = false;
     }, [onCancel, resetToDefaults]);
     const inputID = useMemo(() => {
         var _a;
@@ -128,9 +131,10 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
     const isInEditMode = isEditing !== null && isEditing !== void 0 ? isEditing : hasEditMode;
     const handleEditClick = useCallback(() => {
         if (isDisabled === false) {
-            setEditMode(!hasEditMode);
+            setEditMode(true);
+            blurWithinRef.current = false;
         }
-    }, [isDisabled, hasEditMode]);
+    }, [isDisabled]);
     const updateInputWidth = useCallback(() => {
         if (mirrorRef.current && containerRef.current && !isFluid) {
             const mirrorWidth = mirrorRef.current.offsetWidth;
@@ -143,29 +147,29 @@ export const InlineEdit = ({ as, className, defaultValue, htmlAttributes, label,
         updateInputWidth();
     }, [updateInputWidth, isInEditMode, currentValue]);
     const displayText = currentValue || placeholder;
-    return (_jsxs(Typography, Object.assign({ as: as !== null && as !== void 0 ? as : 'div', variant: typographyVariant, className: classNames('ndl-inline-edit', className, {
+    return (_jsxs(Typography, { as: as !== null && as !== void 0 ? as : 'div', variant: typographyVariant, className: classNames('ndl-inline-edit', className, {
             'ndl-disabled': isDisabled,
             'ndl-fluid': isFluid,
-        }), style: style, ref: ref, htmlAttributes: htmlAttributes }, focusWithinProps, { children: [Boolean(label) && _jsx("label", { htmlFor: inputID, children: label }), isInEditMode === true ? (_jsxs("div", { className: "ndl-inline-edit-container", ref: containerRef, children: [_jsx("span", { "aria-hidden": true, className: "ndl-inline-edit-mirror", ref: mirrorRef, children: displayText }), _jsx("input", Object.assign({}, inputProps, { 
+        }), style: style, ref: ref, htmlAttributes: htmlAttributes, children: [Boolean(label) && _jsx("label", { htmlFor: inputID, children: label }), isInEditMode === true ? (_jsxs("div", Object.assign({ className: "ndl-inline-edit-container", ref: containerRef }, focusWithinProps, { children: [_jsx("span", { "aria-hidden": true, className: "ndl-inline-edit-mirror", ref: mirrorRef, children: displayText }), _jsx("input", Object.assign({}, inputProps, { 
                         // eslint-disable-next-line jsx-a11y/no-autofocus
                         autoFocus: true, "aria-label": typeof label === 'string' ? label : 'Inline edit input', className: classNames('ndl-inline-edit-input', inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), id: inputID, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder })), _jsxs("div", { className: "ndl-inline-edit-buttons", children: [_jsx(IconButton, { description: "Accept", tooltipProps: {
                                     root: { placement: 'bottom' },
                                 }, onClick: onConfirmHandler, size: "small", isFloating: true, htmlAttributes: {
                                     onMouseDown: () => {
-                                        clickButtonRef.current = true;
+                                        blurWithinRef.current = true;
                                     },
                                 }, children: _jsx(CheckIconOutline, {}) }), _jsx(IconButton, { description: "Cancel", tooltipProps: {
                                     root: { placement: 'bottom' },
                                 }, onClick: (event) => onCancelHandler(event), size: "small", isFloating: true, htmlAttributes: {
                                     onMouseDown: () => {
-                                        clickButtonRef.current = true;
+                                        blurWithinRef.current = true;
                                     },
-                                }, children: _jsx(XMarkIconOutline, {}) })] })] })) : (_jsxs("button", { className: classNames('ndl-inline-idle-container', {
+                                }, children: _jsx(XMarkIconOutline, {}) })] })] }))) : (_jsxs("button", { className: classNames('ndl-inline-idle-container', {
                     'n-text-neutral-text-weaker': displayText === placeholder,
                     'ndl-disabled': isDisabled,
                     'ndl-has-edit-icon': hasEditIcon,
                 }), "aria-disabled": isDisabled, disabled: isDisabled, onClick: handleEditClick, style: {
                     minHeight: getMinHeight(typographyVariant),
-                }, children: [_jsx("span", { className: "ndl-inline-edit-text", children: displayText }), hasEditIcon && (_jsx(PencilIconOutline, { className: "ndl-inline-edit-pencil-icon", style: getIconStyle(typographyVariant) }))] }))] })));
+                }, children: [_jsx("span", { className: "ndl-inline-edit-text", children: displayText }), hasEditIcon && (_jsx(PencilIconOutline, { className: "ndl-inline-edit-pencil-icon", style: getIconStyle(typographyVariant) }))] }))] }));
 };
 //# sourceMappingURL=InlineEdit.js.map

package/lib/esm/inline-edit/InlineEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n  CheckIconOutline,\n  PencilIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n  /** Label text */\n  label?: ReactNode;\n\n  /**\n   * The typographyVariant of the component applied to Typography as its variant.\n   * @default subheading-medium\n   */\n  typographyVariant?: TypographyVariants;\n\n  /**\n   * The default input value. Use for an uncontrolled component.\n   */\n  defaultValue?: string;\n\n  /**\n   * The input value. Makes the component controlled.\n   */\n  value?: string;\n\n  /**\n   * Callback when the input value changes. Must be used when the component is controlled.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Placeholder text displayed when the input is empty.\n   */\n  placeholder: string;\n\n  /**\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * If edit pencil icon should be visible on hover\n   * @default false\n   */\n  hasEditIcon?: boolean;\n\n  /**\n   * If the input is in editing mode\n   * Used in a stateless inline edit\n   * @default undefined\n   */\n  isEditing?: boolean;\n\n  /** Callback when confirm icon button is pressed */\n  onConfirm?: (\n    value: string,\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /** Callback when cancel icon button is pressed */\n  onCancel?: (\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /**\n   * What the input should do on blur\n   * - \"confirm\" will confirm the value\n   * - \"cancel\" will cancel the value\n   * - \"none\" will do nothing\n   * @default \"confirm\"\n   */\n  blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n  /** props applied to the internal input element */\n  inputProps?: HtmlAttributes<'input'>;\n\n  /**\n   * If the input is fluid\n   * @default false\n   */\n  isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  defaultValue,\n  htmlAttributes,\n  label,\n  onChange,\n  onCancel,\n  onConfirm,\n  ref,\n  style,\n  value,\n  hasEditIcon = false,\n  inputProps,\n  isDisabled = false,\n  isEditing,\n  blurBehavior = 'confirm',\n  isFluid = false,\n  typographyVariant = 'subheading-medium',\n  placeholder,\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n  const [hasEditMode, setEditMode] = useState(false);\n\n  const [currentValue, setCurrentValue] = useSemicontrolledState({\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? defaultValue ?? '',\n  });\n  const [previousConfirmedValue, setPreviousConfirmedValue] =\n    useState(currentValue);\n\n  const mirrorRef = useRef<HTMLSpanElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  /**\n   * This ref is used to prevent the blur behavior from being triggered on mouse down events\n   * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n   * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n   */\n  const clickButtonRef = useRef(false);\n\n  // Validate controlled mode requirements\n  useEffect(() => {\n    if (value !== undefined && onChange === undefined) {\n      needleWarningMessage(\n        'onChange prop should be supplied when using controlled mode (value prop is provided).',\n      );\n    }\n  }, [value, onChange]);\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => {\n      if (clickButtonRef.current) {\n        return;\n      }\n\n      if (blurBehavior === 'confirm') {\n        onConfirmHandler();\n        return;\n      }\n      if (blurBehavior === 'cancel') {\n        onCancelHandler();\n        return;\n      }\n    },\n  });\n\n  const resetToDefaults = useCallback(() => {\n    // In controlled mode, don't reset the value - let the parent manage it\n    // In uncontrolled mode, reset to default value\n    if (value === undefined) {\n      setCurrentValue(previousConfirmedValue ?? '');\n    }\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      setEditMode(false);\n    }\n  }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n  const resetEditState = useCallback(() => {\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      setEditMode(false);\n    }\n  }, [isEditing]);\n\n  const onConfirmHandler = useCallback(\n    async (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      setPreviousConfirmedValue(currentValue);\n      onConfirm?.(currentValue, event);\n      resetEditState();\n      clickButtonRef.current = false;\n    },\n    [onConfirm, currentValue, resetEditState],\n  );\n\n  const onCancelHandler = useCallback(\n    (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      onCancel?.(event);\n      resetToDefaults();\n      clickButtonRef.current = false;\n    },\n    [onCancel, resetToDefaults],\n  );\n\n  const inputID = useMemo(() => {\n    return inputProps?.id ?? randomId(12);\n  }, [inputProps?.id]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Escape'].includes(e.key)) {\n        if (e.key === 'Enter') {\n          onConfirmHandler();\n        }\n        if (e.key === 'Escape') {\n          onCancelHandler();\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [onConfirmHandler, onCancelHandler],\n  );\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setCurrentValue(newValue);\n    },\n    [setCurrentValue],\n  );\n\n  const isInEditMode = isEditing ?? hasEditMode;\n\n  const handleEditClick = useCallback(() => {\n    if (isDisabled === false) {\n      setEditMode(!hasEditMode);\n    }\n  }, [isDisabled, hasEditMode]);\n\n  const updateInputWidth = useCallback(() => {\n    if (mirrorRef.current && containerRef.current && !isFluid) {\n      const mirrorWidth = mirrorRef.current.offsetWidth;\n      const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n      containerRef.current.style.maxWidth = `${newWidth}px`;\n    }\n  }, [mirrorRef, containerRef, isFluid]);\n\n  // Width calculation effect\n  useLayoutEffect(() => {\n    updateInputWidth();\n  }, [updateInputWidth, isInEditMode, currentValue]);\n\n  const displayText = currentValue || placeholder;\n\n  return (\n    <Typography\n      as={as ?? 'div'}\n      variant={typographyVariant}\n      className={classNames('ndl-inline-edit', className, {\n        'ndl-disabled': isDisabled,\n        'ndl-fluid': isFluid,\n      })}\n      style={style}\n      ref={ref}\n      htmlAttributes={htmlAttributes}\n      {...focusWithinProps}\n    >\n      {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n      {isInEditMode === true ? (\n        <div className=\"ndl-inline-edit-container\" ref={containerRef}>\n          {/* Mirror span for measuring width */}\n          <span\n            aria-hidden={true}\n            className=\"ndl-inline-edit-mirror\"\n            ref={mirrorRef}\n          >\n            {displayText}\n          </span>\n          <input\n            {...inputProps}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus\n            aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n            className={classNames(\n              'ndl-inline-edit-input',\n              inputProps?.className,\n            )}\n            id={inputID}\n            value={currentValue}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n          />\n          <div className=\"ndl-inline-edit-buttons\">\n            <IconButton\n              description=\"Accept\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={onConfirmHandler}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  clickButtonRef.current = true;\n                },\n              }}\n            >\n              <CheckIconOutline />\n            </IconButton>\n            <IconButton\n              description=\"Cancel\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={(event) => onCancelHandler(event)}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  clickButtonRef.current = true;\n                },\n              }}\n            >\n              <XMarkIconOutline />\n            </IconButton>\n          </div>\n        </div>\n      ) : (\n        <button\n          className={classNames('ndl-inline-idle-container', {\n            'n-text-neutral-text-weaker': displayText === placeholder,\n            'ndl-disabled': isDisabled,\n            'ndl-has-edit-icon': hasEditIcon,\n          })}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={handleEditClick}\n          style={{\n            minHeight: getMinHeight(typographyVariant),\n          }}\n        >\n          <span className=\"ndl-inline-edit-text\">{displayText}</span>\n          {hasEditIcon && (\n            <PencilIconOutline\n              className=\"ndl-inline-edit-pencil-icon\"\n              style={getIconStyle(typographyVariant)}\n            />\n          )}\n        </button>\n      )}\n    </Typography>\n  );\n};\n"]}
+{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n  CheckIconOutline,\n  PencilIconOutline,\n  XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n  /** Label text */\n  label?: ReactNode;\n\n  /**\n   * The typographyVariant of the component applied to Typography as its variant.\n   * @default subheading-medium\n   */\n  typographyVariant?: TypographyVariants;\n\n  /**\n   * The default input value. Use for an uncontrolled component.\n   */\n  defaultValue?: string;\n\n  /**\n   * The input value. Makes the component controlled.\n   */\n  value?: string;\n\n  /**\n   * Callback when the input value changes. Must be used when the component is controlled.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Placeholder text displayed when the input is empty.\n   */\n  placeholder: string;\n\n  /**\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * If edit pencil icon should be visible on hover\n   * @default false\n   */\n  hasEditIcon?: boolean;\n\n  /**\n   * If the input is in editing mode\n   * Used in a stateless inline edit\n   * @default undefined\n   */\n  isEditing?: boolean;\n\n  /** Callback when confirm icon button is pressed */\n  onConfirm?: (\n    value: string,\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /** Callback when cancel icon button is pressed */\n  onCancel?: (\n    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => void;\n\n  /**\n   * What the input should do on blur\n   * - \"confirm\" will confirm the value\n   * - \"cancel\" will cancel the value\n   * - \"none\" will do nothing\n   * @default \"confirm\"\n   */\n  blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n  /** props applied to the internal input element */\n  inputProps?: HtmlAttributes<'input'>;\n\n  /**\n   * If the input is fluid\n   * @default false\n   */\n  isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  defaultValue,\n  htmlAttributes,\n  label,\n  onChange,\n  onCancel,\n  onConfirm,\n  ref,\n  style,\n  value,\n  hasEditIcon = false,\n  inputProps,\n  isDisabled = false,\n  isEditing,\n  blurBehavior = 'confirm',\n  isFluid = false,\n  typographyVariant = 'subheading-medium',\n  placeholder,\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n  const [hasEditMode, setEditMode] = useState(false);\n\n  const [currentValue, setCurrentValue] = useSemicontrolledState({\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? defaultValue ?? '',\n  });\n  const [previousConfirmedValue, setPreviousConfirmedValue] =\n    useState(currentValue);\n\n  const mirrorRef = useRef<HTMLSpanElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  /**\n   * This ref is used to prevent the blur behavior from being triggered on mouse down events\n   * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n   * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n   *\n   * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.\n   * This bug caused the handler to be called when something was focused after confirming.\n   */\n  const blurWithinRef = useRef(false);\n\n  // Validate controlled mode requirements\n  useEffect(() => {\n    if (value !== undefined && onChange === undefined) {\n      needleWarningMessage(\n        'onChange prop should be supplied when using controlled mode (value prop is provided).',\n      );\n    }\n  }, [value, onChange]);\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => {\n      if (blurWithinRef.current) {\n        return;\n      }\n\n      if (blurBehavior === 'confirm') {\n        onConfirmHandler();\n        return;\n      }\n      if (blurBehavior === 'cancel') {\n        onCancelHandler();\n        return;\n      }\n    },\n  });\n\n  const resetToDefaults = useCallback(() => {\n    // In controlled mode, don't reset the value - let the parent manage it\n    // In uncontrolled mode, reset to default value\n    if (value === undefined) {\n      setCurrentValue(previousConfirmedValue ?? '');\n    }\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      blurWithinRef.current = true;\n      setEditMode(false);\n    }\n  }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n  const resetEditState = useCallback(() => {\n    // Only reset edit mode if isEditing is not controlled (undefined)\n    if (isEditing === undefined) {\n      blurWithinRef.current = true;\n      setEditMode(false);\n    }\n  }, [isEditing]);\n\n  const onConfirmHandler = useCallback(\n    async (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      setPreviousConfirmedValue(currentValue);\n      onConfirm?.(currentValue, event);\n      resetEditState();\n    },\n    [onConfirm, currentValue, resetEditState],\n  );\n\n  const onCancelHandler = useCallback(\n    (\n      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => {\n      onCancel?.(event);\n      resetToDefaults();\n    },\n    [onCancel, resetToDefaults],\n  );\n\n  const inputID = useMemo(() => {\n    return inputProps?.id ?? randomId(12);\n  }, [inputProps?.id]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Escape'].includes(e.key)) {\n        if (e.key === 'Enter') {\n          onConfirmHandler();\n        }\n        if (e.key === 'Escape') {\n          onCancelHandler();\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [onConfirmHandler, onCancelHandler],\n  );\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setCurrentValue(newValue);\n    },\n    [setCurrentValue],\n  );\n\n  const isInEditMode = isEditing ?? hasEditMode;\n\n  const handleEditClick = useCallback(() => {\n    if (isDisabled === false) {\n      setEditMode(true);\n      blurWithinRef.current = false;\n    }\n  }, [isDisabled]);\n\n  const updateInputWidth = useCallback(() => {\n    if (mirrorRef.current && containerRef.current && !isFluid) {\n      const mirrorWidth = mirrorRef.current.offsetWidth;\n      const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n      containerRef.current.style.maxWidth = `${newWidth}px`;\n    }\n  }, [mirrorRef, containerRef, isFluid]);\n\n  // Width calculation effect\n  useLayoutEffect(() => {\n    updateInputWidth();\n  }, [updateInputWidth, isInEditMode, currentValue]);\n\n  const displayText = currentValue || placeholder;\n\n  return (\n    <Typography\n      as={as ?? 'div'}\n      variant={typographyVariant}\n      className={classNames('ndl-inline-edit', className, {\n        'ndl-disabled': isDisabled,\n        'ndl-fluid': isFluid,\n      })}\n      style={style}\n      ref={ref}\n      htmlAttributes={htmlAttributes}\n    >\n      {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n      {isInEditMode === true ? (\n        <div\n          className=\"ndl-inline-edit-container\"\n          ref={containerRef}\n          {...focusWithinProps}\n        >\n          {/* Mirror span for measuring width */}\n          <span\n            aria-hidden={true}\n            className=\"ndl-inline-edit-mirror\"\n            ref={mirrorRef}\n          >\n            {displayText}\n          </span>\n          <input\n            {...inputProps}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus\n            aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n            className={classNames(\n              'ndl-inline-edit-input',\n              inputProps?.className,\n            )}\n            id={inputID}\n            value={currentValue}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n          />\n          <div className=\"ndl-inline-edit-buttons\">\n            <IconButton\n              description=\"Accept\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={onConfirmHandler}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  blurWithinRef.current = true;\n                },\n              }}\n            >\n              <CheckIconOutline />\n            </IconButton>\n            <IconButton\n              description=\"Cancel\"\n              tooltipProps={{\n                root: { placement: 'bottom' },\n              }}\n              onClick={(event) => onCancelHandler(event)}\n              size=\"small\"\n              isFloating={true}\n              htmlAttributes={{\n                onMouseDown: () => {\n                  blurWithinRef.current = true;\n                },\n              }}\n            >\n              <XMarkIconOutline />\n            </IconButton>\n          </div>\n        </div>\n      ) : (\n        <button\n          className={classNames('ndl-inline-idle-container', {\n            'n-text-neutral-text-weaker': displayText === placeholder,\n            'ndl-disabled': isDisabled,\n            'ndl-has-edit-icon': hasEditIcon,\n          })}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={handleEditClick}\n          style={{\n            minHeight: getMinHeight(typographyVariant),\n          }}\n        >\n          <span className=\"ndl-inline-edit-text\">{displayText}</span>\n          {hasEditIcon && (\n            <PencilIconOutline\n              className=\"ndl-inline-edit-pencil-icon\"\n              style={getIconStyle(typographyVariant)}\n            />\n          )}\n        </button>\n      )}\n    </Typography>\n  );\n};\n"]}

package/lib/types/inline-edit/InlineEdit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,KAAK,eAAe,GAAG;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KACrE,IAAI,CAAC;IAEV,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KACrE,IAAI,CAAC;IAEV;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAE7C,kDAAkD;IAClD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAErC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAKF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,kNAoB7D,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,4CA8O5C,CAAC"}
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,KAAK,eAAe,GAAG;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KACrE,IAAI,CAAC;IAEV,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KACrE,IAAI,CAAC;IAEV;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAE7C,kDAAkD;IAClD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAErC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAKF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,kNAoB7D,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,4CAqP5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -86,7 +86,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.0.3"
+    "@neo4j-ndl/base": "^4.0.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",