@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Form/Controls/EditInPlace/EditInPlace.cjs

@@ -1,208 +1,176 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactForm = require("@radix-ui/react-form");
-const CheckIcon = require("@vector-im/compound-design-tokens/assets/web/icons/check");
-const CloseIcon = require("@vector-im/compound-design-tokens/assets/web/icons/close");
-const EditInPlace_module = require("./EditInPlace.module.css.cjs");
-const Root = require("../../Root.cjs");
-const Field = require("../../Field.cjs");
-const Label = require("../../Label.cjs");
-const Text = require("../Text/Text.cjs");
-const Tooltip = require("../../../Tooltip/Tooltip.cjs");
-const Button = require("../../../Button/Button.cjs");
-const Message = require("../../Message.cjs");
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_Button = require("../../../Button/Button.cjs");
+const require_Tooltip = require("../../../Tooltip/Tooltip.cjs");
+const require_Text = require("../Text/Text.cjs");
+const require_EditInPlace_module = require("./EditInPlace.module.cjs");
+const require_Label = require("../../Label.cjs");
+const require_Message = require("../../Message.cjs");
+const require_Root = require("../../Root.cjs");
+const require_Field = require("../../Field.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _vector_im_compound_design_tokens_assets_web_icons_close = require("@vector-im/compound-design-tokens/assets/web/icons/close");
+_vector_im_compound_design_tokens_assets_web_icons_close = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_close);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_form = require("@radix-ui/react-form");
+let _vector_im_compound_design_tokens_assets_web_icons_check = require("@vector-im/compound-design-tokens/assets/web/icons/check");
+_vector_im_compound_design_tokens_assets_web_icons_check = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check);
+//#region src/components/Form/Controls/EditInPlace/EditInPlace.tsx
+var State = /* @__PURE__ */ function(State) {
+	/** No changes on the input has been made */
+	State[State["Initial"] = 0] = "Initial";
+	/** The input has been changed */
+	State[State["Dirty"] = 1] = "Dirty";
+	/** The input is being saved */
+	State[State["Saving"] = 2] = "Saving";
+	/** The input has been saved */
+	State[State["Saved"] = 3] = "Saved";
+	return State;
+}(State || {});
+var Event = /* @__PURE__ */ function(Event) {
+	Event[Event["Touch"] = 0] = "Touch";
+	Event[Event["Save"] = 1] = "Save";
+	Event[Event["Saved"] = 2] = "Saved";
+	Event[Event["SaveError"] = 3] = "SaveError";
+	Event[Event["Cancel"] = 4] = "Cancel";
+	Event[Event["SavedTimeout"] = 5] = "SavedTimeout";
+	return Event;
+}(Event || {});
 function reducer(state, action) {
-  switch (action) {
-    case 0:
-      if (state === 0 || state === 3) return 1;
-      else return state;
-    case 1:
-      return 2;
-    case 4:
-      return 0;
-    case 2:
-      if (state === 2) return 3;
-      else return state;
-    case 3:
-      if (state === 2) return 0;
-      else return state;
-    case 5:
-      if (state === 3) return 0;
-      else return state;
-  }
-  assertNever(action);
+	switch (action) {
+		case Event.Touch: if (state === State.Initial || state === State.Saved) return State.Dirty;
+		else return state;
+		case Event.Save: return State.Saving;
+		case Event.Cancel: return State.Initial;
+		case Event.Saved: if (state === State.Saving) return State.Saved;
+		else return state;
+		case Event.SaveError: if (state === State.Saving) return State.Initial;
+		else return state;
+		case Event.SavedTimeout: if (state === State.Saved) return State.Initial;
+		else return state;
+	}
+	assertNever(action);
 }
 function assertNever(value) {
-  throw new Error(`Unreachable value: ${value}`);
+	throw new Error(`Unreachable value: ${value}`);
 }
-const EditInPlace = React.forwardRef(
-  function EditInPlace2({
-    className,
-    label,
-    onSave,
-    onCancel,
-    onInput,
-    onClearServerErrors,
-    serverInvalid,
-    saveButtonLabel,
-    cancelButtonLabel,
-    savedLabel,
-    savingLabel,
-    helpLabel,
-    disabled,
-    children,
-    ...props
-  }, ref) {
-    const [state, dispatch] = React.useReducer(
-      reducer,
-      0
-      /* Initial */
-    );
-    const isFocusWithinRef = React.useRef(false);
-    const [isFocusWithin, setFocusWithin] = React.useState(false);
-    const shouldShowSaveButton = state === 1 || state === 2 || isFocusWithin;
-    const hideTimer = React.useRef(
-      void 0
-    );
-    React.useEffect(() => {
-      if (state === 3) {
-        hideTimer.current = setTimeout(() => {
-          dispatch(
-            5
-            /* SavedTimeout */
-          );
-          hideTimer.current = void 0;
-        }, 2e3);
-      }
-      return () => {
-        if (hideTimer.current) clearTimeout(hideTimer.current);
-        hideTimer.current = void 0;
-      };
-    }, [state]);
-    const formRef = React.useRef(null);
-    const saveButtonRef = React.useRef(null);
-    const cancelButtonRef = React.useRef(null);
-    const onFocus = React.useCallback(() => {
-      if (isFocusWithinRef.current) return;
-      isFocusWithinRef.current = true;
-      setFocusWithin(true);
-    }, [isFocusWithin, setFocusWithin]);
-    const onBlur = React.useCallback(
-      (e) => {
-        if (!isFocusWithinRef.current) return;
-        if (e.currentTarget.contains(e.relatedTarget)) return;
-        isFocusWithinRef.current = false;
-        setFocusWithin(false);
-      },
-      [isFocusWithin, setFocusWithin]
-    );
-    const onInputHandler = React.useCallback(
-      (e) => {
-        dispatch(
-          0
-          /* Touch */
-        );
-        onInput?.(e);
-      },
-      [dispatch, onInput]
-    );
-    const onFormSubmit = React.useCallback(
-      async (e) => {
-        e.preventDefault();
-        if (state === 0) {
-          return;
-        }
-        try {
-          dispatch(
-            1
-            /* Save */
-          );
-          saveButtonRef.current?.blur();
-          await onSave?.(e);
-          dispatch(
-            2
-            /* Saved */
-          );
-        } catch {
-          dispatch(
-            3
-            /* SaveError */
-          );
-        }
-      },
-      [onSave, state, hideTimer]
-    );
-    const onFormReset = React.useCallback(
-      (e) => {
-        cancelButtonRef.current?.blur();
-        onCancel?.(e);
-        dispatch(
-          4
-          /* Cancel */
-        );
-      },
-      [cancelButtonRef, onCancel]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Root.Root,
-      {
-        className,
-        onSubmit: onFormSubmit,
-        onReset: onFormReset,
-        onFocus,
-        onBlur,
-        onClearServerErrors,
-        ref: formRef,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Field.Field, { name: "input", serverInvalid, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { children: label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EditInPlace_module.default.controls, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Text.TextControl,
-              {
-                ref,
-                ...props,
-                onInput: onInputHandler,
-                disabled: disabled || state === 2
-                /* Saving */
-              }
-            ),
-            shouldShowSaveButton && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EditInPlace_module.default["button-group"], children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: saveButtonLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactForm.Submit, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Button.Button,
-                {
-                  type: "submit",
-                  kind: "primary",
-                  size: "sm",
-                  ref: saveButtonRef,
-                  disabled: state !== 1,
-                  iconOnly: true,
-                  Icon: CheckIcon
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: cancelButtonLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Button.Button,
-                {
-                  type: "reset",
-                  kind: "secondary",
-                  size: "sm",
-                  ref: cancelButtonRef,
-                  className: EditInPlace_module.default.button,
-                  disabled: state === 2,
-                  iconOnly: true,
-                  Icon: CloseIcon
-                }
-              ) })
-            ] })
-          ] }),
-          state === 2 ? /* @__PURE__ */ jsxRuntime.jsx(Message.LoadingMessage, { children: savingLabel }) : children,
-          savedLabel && state === 3 && /* @__PURE__ */ jsxRuntime.jsx(Message.SuccessMessage, { children: savedLabel }),
-          helpLabel && (state === 0 || state === 1) && /* @__PURE__ */ jsxRuntime.jsx(reactForm.ValidityState, { children: (validity) => (validity === void 0 || validity.valid) && !serverInvalid && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpLabel }) })
-        ] })
-      }
-    );
-  }
-);
+/**
+* A text box with save/cancel buttons that appear when the field is active.
+* Since thios control has its own 'save' button, it should *not* appear as part
+* of a larger form: it exists as its own form that submits separately.
+*/
+var EditInPlace = (0, react.forwardRef)(function EditInPlace({ className, label, onSave, onCancel, onInput, onClearServerErrors, serverInvalid, saveButtonLabel, cancelButtonLabel, savedLabel, savingLabel, helpLabel, disabled, children, ...props }, ref) {
+	const [state, dispatch] = (0, react.useReducer)(reducer, State.Initial);
+	const isFocusWithinRef = (0, react.useRef)(false);
+	const [isFocusWithin, setFocusWithin] = (0, react.useState)(false);
+	const shouldShowSaveButton = state === State.Dirty || state === State.Saving || isFocusWithin;
+	const hideTimer = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		if (state === State.Saved) hideTimer.current = setTimeout(() => {
+			dispatch(Event.SavedTimeout);
+			hideTimer.current = void 0;
+		}, 2e3);
+		return () => {
+			if (hideTimer.current) clearTimeout(hideTimer.current);
+			hideTimer.current = void 0;
+		};
+	}, [state]);
+	const formRef = (0, react.useRef)(null);
+	const saveButtonRef = (0, react.useRef)(null);
+	const cancelButtonRef = (0, react.useRef)(null);
+	const onFocus = (0, react.useCallback)(() => {
+		if (isFocusWithinRef.current) return;
+		isFocusWithinRef.current = true;
+		setFocusWithin(true);
+	}, [isFocusWithin, setFocusWithin]);
+	const onBlur = (0, react.useCallback)((e) => {
+		if (!isFocusWithinRef.current) return;
+		if (e.currentTarget.contains(e.relatedTarget)) return;
+		isFocusWithinRef.current = false;
+		setFocusWithin(false);
+	}, [isFocusWithin, setFocusWithin]);
+	const onInputHandler = (0, react.useCallback)((e) => {
+		dispatch(Event.Touch);
+		onInput?.(e);
+	}, [dispatch, onInput]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Root.Root, {
+		className,
+		onSubmit: (0, react.useCallback)(async (e) => {
+			e.preventDefault();
+			if (state === State.Initial) return;
+			try {
+				dispatch(Event.Save);
+				saveButtonRef.current?.blur();
+				await onSave?.(e);
+				dispatch(Event.Saved);
+			} catch {
+				dispatch(Event.SaveError);
+			}
+		}, [
+			onSave,
+			state,
+			hideTimer
+		]),
+		onReset: (0, react.useCallback)((e) => {
+			cancelButtonRef.current?.blur();
+			onCancel?.(e);
+			dispatch(Event.Cancel);
+		}, [cancelButtonRef, onCancel]),
+		onFocus,
+		onBlur,
+		onClearServerErrors,
+		ref: formRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Field.Field, {
+			name: "input",
+			serverInvalid,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, { children: label }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_EditInPlace_module.default.controls,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.TextControl, {
+						ref,
+						...props,
+						onInput: onInputHandler,
+						disabled: disabled || state === State.Saving
+					}), shouldShowSaveButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_EditInPlace_module.default["button-group"],
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							label: saveButtonLabel,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Submit, {
+								asChild: true,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+									type: "submit",
+									kind: "primary",
+									size: "sm",
+									ref: saveButtonRef,
+									disabled: state !== State.Dirty,
+									iconOnly: true,
+									Icon: _vector_im_compound_design_tokens_assets_web_icons_check.default
+								})
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							label: cancelButtonLabel,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+								type: "reset",
+								kind: "secondary",
+								size: "sm",
+								ref: cancelButtonRef,
+								className: require_EditInPlace_module.default.button,
+								disabled: state === State.Saving,
+								iconOnly: true,
+								Icon: _vector_im_compound_design_tokens_assets_web_icons_close.default
+							})
+						})]
+					})]
+				}),
+				state === State.Saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.LoadingMessage, { children: savingLabel }) : children,
+				savedLabel && state === State.Saved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.SuccessMessage, { children: savedLabel }),
+				helpLabel && (state === State.Initial || state === State.Dirty) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.ValidityState, { children: (validity) => (validity === void 0 || validity.valid) && !serverInvalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.HelpMessage, { children: helpLabel }) })
+			]
+		})
+	});
+});
+//#endregion
 exports.EditInPlace = EditInPlace;
-//# sourceMappingURL=EditInPlace.cjs.map
+
+//# sourceMappingURL=EditInPlace.cjs.map

package/dist/components/Form/Controls/EditInPlace/EditInPlace.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditInPlace.cjs","sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.InputEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"names":["forwardRef","EditInPlace","useReducer","useRef","useState","useEffect","useCallback","jsx","Root","jsxs","Field","Label","styles","TextControl","Tooltip","Submit","Button","CancelIcon","LoadingMessage","SuccessMessage","ValidityState","HelpMessage"],"mappings":"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"}
+{"version":3,"file":"EditInPlace.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.InputEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"mappings":"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"}