@launchpad-ui/inline-edit 0.1.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2022 Catamorphic, Co.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,14 @@
+# @launchpad-ui/inline-edit
+
+> An element used to display and allow inline editing of a form element value.
+
+[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/inline-edit?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/inline-edit)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/inline-edit?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/inline-edit)
+
+## Installation
+
+```sh
+$ yarn add @launchpad-ui/inline-edit
+# or
+$ npm install @launchpad-ui/inline-edit
+```

package/dist/InlineEdit.d.ts

@@ -0,0 +1,19 @@
+import type { InlineVariants } from './styles/InlineEdit.css';
+import type { TextAreaProps, TextFieldProps } from '@launchpad-ui/form';
+import type { ComponentProps, Dispatch, ReactElement, SetStateAction } from 'react';
+type InlineEditProps = ComponentProps<'div'> & InlineVariants & Pick<ComponentProps<'input'>, 'defaultValue'> & {
+    'data-test-id'?: string;
+    onConfirm: Dispatch<SetStateAction<string>>;
+    hideEdit?: boolean;
+    renderInput?: ReactElement<TextFieldProps | TextAreaProps>;
+    isEditing?: boolean;
+    onCancel?: () => void;
+    onEdit?: () => void;
+    cancelButtonLabel?: string;
+    editButtonLabel?: string;
+    confirmButtonLabel?: string;
+};
+declare const InlineEdit: ({ "data-test-id": testId, layout, children, defaultValue, onConfirm, hideEdit, renderInput, "aria-label": ariaLabel, isEditing: isEditingProp, onCancel, onEdit, cancelButtonLabel, editButtonLabel, confirmButtonLabel, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+export { InlineEdit };
+export type { InlineEditProps };
+//# sourceMappingURL=InlineEdit.d.ts.map

package/dist/InlineEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../src/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EACV,cAAc,EACd,QAAQ,EAER,YAAY,EACZ,cAAc,EACf,MAAM,OAAO,CAAC;AAcf,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAC1C,cAAc,GACd,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,GAAG;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,CAAC,cAAc,GAAG,aAAa,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEJ,QAAA,MAAM,UAAU,+NAeb,eAAe,4CA+GjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { InlineEditProps } from './InlineEdit';
+export { InlineEdit } from './InlineEdit';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,133 @@
+import './style.css';
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { IconButton, ButtonGroup } from "@launchpad-ui/button";
+import { TextField } from "@launchpad-ui/form";
+import { Icon } from "@launchpad-ui/icons";
+import { useButton } from "@react-aria/button";
+import { focusSafely } from "@react-aria/focus";
+import { useFocusWithin } from "@react-aria/interactions";
+import { useUpdateEffect, mergeProps } from "@react-aria/utils";
+import { cx } from "classix";
+import { useState, useRef, cloneElement } from "react";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+const InlineEdit_css_ts_vanilla = "";
+var cancelButton = "_1oig0624";
+var container = "_1oig0620";
+var inline = createRuntimeFn({ defaultClassName: "_1oig0621", variantClassNames: { layout: { vertical: "_1oig0622", horizontal: "_1oig0623" } }, defaultVariants: {}, compoundVariants: [] });
+var readButton = "_1oig0625";
+const InlineEdit = ({
+  "data-test-id": testId = "inline-edit",
+  layout = "horizontal",
+  children,
+  defaultValue,
+  onConfirm,
+  hideEdit = false,
+  renderInput = /* @__PURE__ */ jsx(TextField, {}),
+  "aria-label": ariaLabel,
+  isEditing: isEditingProp,
+  onCancel,
+  onEdit,
+  cancelButtonLabel = "cancel",
+  editButtonLabel = "edit",
+  confirmButtonLabel = "confirm"
+}) => {
+  const [isEditing, setEditing] = useState(isEditingProp ?? false);
+  const [isFocusWithin, setFocusWithin] = useState(false);
+  const inputRef = useRef(null);
+  const editRef = useRef(null);
+  const controlled = isEditingProp !== void 0;
+  useUpdateEffect(() => {
+    if (controlled) {
+      setEditing(isEditingProp);
+    }
+  }, [isEditingProp]);
+  useUpdateEffect(() => {
+    if (isFocusWithin) {
+      isEditing ? inputRef.current && focusSafely(inputRef.current) : editRef.current && focusSafely(editRef.current);
+    }
+  }, [isEditing]);
+  const handleEdit = () => {
+    !controlled && setEditing(true);
+    onEdit == null ? void 0 : onEdit();
+  };
+  const handleCancel = () => {
+    !controlled && setEditing(false);
+    onCancel == null ? void 0 : onCancel();
+  };
+  const handleConfirm = () => {
+    var _a;
+    onConfirm(((_a = inputRef.current) == null ? void 0 : _a.value) || "");
+    !controlled && setEditing(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleConfirm();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      handleCancel();
+    }
+  };
+  const { focusWithinProps } = useFocusWithin({
+    onBlurWithin: () => isEditing && handleCancel(),
+    onFocusWithinChange: (isFocusWithin2) => setFocusWithin(isFocusWithin2)
+  });
+  const { buttonProps } = useButton(
+    {
+      "aria-label": editButtonLabel,
+      elementType: "span",
+      onPress: handleEdit
+    },
+    editRef
+  );
+  const renderReadContent = hideEdit ? /* @__PURE__ */ jsx("span", { ref: editRef, ...buttonProps, className: readButton, children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref: editRef,
+        icon: /* @__PURE__ */ jsx(Icon, { name: "edit" }),
+        "aria-label": editButtonLabel,
+        size: "small",
+        onClick: handleEdit
+      }
+    )
+  ] });
+  const input = cloneElement(
+    renderInput,
+    mergeProps(renderInput.props, {
+      ref: inputRef,
+      defaultValue,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel
+    })
+  );
+  return isEditing ? /* @__PURE__ */ jsxs("div", { className: cx(container, inline({ layout })), "data-test-id": testId, ...focusWithinProps, children: [
+    input,
+    /* @__PURE__ */ jsxs(ButtonGroup, { spacing: "compact", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          kind: "primary",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "check" }),
+          "aria-label": confirmButtonLabel,
+          onClick: handleConfirm
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          kind: "default",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "close" }),
+          "aria-label": cancelButtonLabel,
+          className: cancelButton,
+          onClick: handleCancel
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsx("div", { className: cx(!hideEdit && container), "data-test-id": testId, ...focusWithinProps, children: renderReadContent });
+};
+export {
+  InlineEdit
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { InlineVariants } from './styles/InlineEdit.css';\nimport type { TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type {\n  ComponentProps,\n  Dispatch,\n  KeyboardEventHandler,\n  ReactElement,\n  SetStateAction,\n} from 'react';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextField } from '@launchpad-ui/form';\nimport { Icon } from '@launchpad-ui/icons';\nimport { useButton } from '@react-aria/button';\nimport { focusSafely } from '@react-aria/focus';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { mergeProps, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { cloneElement, useRef, useState } from 'react';\n\nimport { container, cancelButton, inline, readButton } from './styles/InlineEdit.css';\n\ntype InlineEditProps = ComponentProps<'div'> &\n  InlineVariants &\n  Pick<ComponentProps<'input'>, 'defaultValue'> & {\n    'data-test-id'?: string;\n    onConfirm: Dispatch<SetStateAction<string>>;\n    hideEdit?: boolean;\n    renderInput?: ReactElement<TextFieldProps | TextAreaProps>;\n    isEditing?: boolean;\n    onCancel?: () => void;\n    onEdit?: () => void;\n    cancelButtonLabel?: string;\n    editButtonLabel?: string;\n    confirmButtonLabel?: string;\n  };\n\nconst InlineEdit = ({\n  'data-test-id': testId = 'inline-edit',\n  layout = 'horizontal',\n  children,\n  defaultValue,\n  onConfirm,\n  hideEdit = false,\n  renderInput = <TextField />,\n  'aria-label': ariaLabel,\n  isEditing: isEditingProp,\n  onCancel,\n  onEdit,\n  cancelButtonLabel = 'cancel',\n  editButtonLabel = 'edit',\n  confirmButtonLabel = 'confirm',\n}: InlineEditProps) => {\n  const [isEditing, setEditing] = useState(isEditingProp ?? false);\n  const [isFocusWithin, setFocusWithin] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const editRef = useRef<HTMLButtonElement>(null);\n  const controlled = isEditingProp !== undefined;\n\n  useUpdateEffect(() => {\n    if (controlled) {\n      setEditing(isEditingProp);\n    }\n  }, [isEditingProp]);\n\n  useUpdateEffect(() => {\n    if (isFocusWithin) {\n      isEditing\n        ? inputRef.current && focusSafely(inputRef.current)\n        : editRef.current && focusSafely(editRef.current);\n    }\n  }, [isEditing]);\n\n  const handleEdit = () => {\n    !controlled && setEditing(true);\n    onEdit?.();\n  };\n\n  const handleCancel = () => {\n    !controlled && setEditing(false);\n    onCancel?.();\n  };\n\n  const handleConfirm = () => {\n    onConfirm(inputRef.current?.value || '');\n    !controlled && setEditing(false);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleConfirm();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      handleCancel();\n    }\n  };\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => isEditing && handleCancel(),\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  const { buttonProps } = useButton(\n    {\n      'aria-label': editButtonLabel,\n      elementType: 'span',\n      onPress: handleEdit,\n    },\n    editRef\n  );\n\n  const renderReadContent = hideEdit ? (\n    <span ref={editRef} {...buttonProps} className={readButton}>\n      {children}\n    </span>\n  ) : (\n    <>\n      {children}\n      <IconButton\n        ref={editRef}\n        icon={<Icon name=\"edit\" />}\n        aria-label={editButtonLabel}\n        size=\"small\"\n        onClick={handleEdit}\n      />\n    </>\n  );\n\n  const input = cloneElement(\n    renderInput,\n    mergeProps(renderInput.props, {\n      ref: inputRef,\n      defaultValue,\n      onKeyDown: handleKeyDown,\n      'aria-label': ariaLabel,\n    })\n  );\n\n  return isEditing ? (\n    <div className={cx(container, inline({ layout }))} data-test-id={testId} {...focusWithinProps}>\n      {input}\n      <ButtonGroup spacing=\"compact\">\n        <IconButton\n          kind=\"primary\"\n          icon={<Icon name=\"check\" />}\n          aria-label={confirmButtonLabel}\n          onClick={handleConfirm}\n        />\n        <IconButton\n          kind=\"default\"\n          icon={<Icon name=\"close\" />}\n          aria-label={cancelButtonLabel}\n          className={cancelButton}\n          onClick={handleCancel}\n        />\n      </ButtonGroup>\n    </div>\n  ) : (\n    <div className={cx(!hideEdit && container)} data-test-id={testId} {...focusWithinProps}>\n      {renderReadContent}\n    </div>\n  );\n};\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["isFocusWithin"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,133 @@
+require('./style.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const button$1 = require("@launchpad-ui/button");
+const form = require("@launchpad-ui/form");
+const icons = require("@launchpad-ui/icons");
+const button = require("@react-aria/button");
+const focus = require("@react-aria/focus");
+const interactions = require("@react-aria/interactions");
+const utils = require("@react-aria/utils");
+const classix = require("classix");
+const react = require("react");
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+const InlineEdit_css_ts_vanilla = "";
+var cancelButton = "_1oig0624";
+var container = "_1oig0620";
+var inline = createRuntimeFn.createRuntimeFn({ defaultClassName: "_1oig0621", variantClassNames: { layout: { vertical: "_1oig0622", horizontal: "_1oig0623" } }, defaultVariants: {}, compoundVariants: [] });
+var readButton = "_1oig0625";
+const InlineEdit = ({
+  "data-test-id": testId = "inline-edit",
+  layout = "horizontal",
+  children,
+  defaultValue,
+  onConfirm,
+  hideEdit = false,
+  renderInput = /* @__PURE__ */ jsxRuntime.jsx(form.TextField, {}),
+  "aria-label": ariaLabel,
+  isEditing: isEditingProp,
+  onCancel,
+  onEdit,
+  cancelButtonLabel = "cancel",
+  editButtonLabel = "edit",
+  confirmButtonLabel = "confirm"
+}) => {
+  const [isEditing, setEditing] = react.useState(isEditingProp ?? false);
+  const [isFocusWithin, setFocusWithin] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const editRef = react.useRef(null);
+  const controlled = isEditingProp !== void 0;
+  utils.useUpdateEffect(() => {
+    if (controlled) {
+      setEditing(isEditingProp);
+    }
+  }, [isEditingProp]);
+  utils.useUpdateEffect(() => {
+    if (isFocusWithin) {
+      isEditing ? inputRef.current && focus.focusSafely(inputRef.current) : editRef.current && focus.focusSafely(editRef.current);
+    }
+  }, [isEditing]);
+  const handleEdit = () => {
+    !controlled && setEditing(true);
+    onEdit == null ? void 0 : onEdit();
+  };
+  const handleCancel = () => {
+    !controlled && setEditing(false);
+    onCancel == null ? void 0 : onCancel();
+  };
+  const handleConfirm = () => {
+    var _a;
+    onConfirm(((_a = inputRef.current) == null ? void 0 : _a.value) || "");
+    !controlled && setEditing(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleConfirm();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      handleCancel();
+    }
+  };
+  const { focusWithinProps } = interactions.useFocusWithin({
+    onBlurWithin: () => isEditing && handleCancel(),
+    onFocusWithinChange: (isFocusWithin2) => setFocusWithin(isFocusWithin2)
+  });
+  const { buttonProps } = button.useButton(
+    {
+      "aria-label": editButtonLabel,
+      elementType: "span",
+      onPress: handleEdit
+    },
+    editRef
+  );
+  const renderReadContent = hideEdit ? /* @__PURE__ */ jsxRuntime.jsx("span", { ref: editRef, ...buttonProps, className: readButton, children }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button$1.IconButton,
+      {
+        ref: editRef,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "edit" }),
+        "aria-label": editButtonLabel,
+        size: "small",
+        onClick: handleEdit
+      }
+    )
+  ] });
+  const input = react.cloneElement(
+    renderInput,
+    utils.mergeProps(renderInput.props, {
+      ref: inputRef,
+      defaultValue,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel
+    })
+  );
+  return isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classix.cx(container, inline({ layout })), "data-test-id": testId, ...focusWithinProps, children: [
+    input,
+    /* @__PURE__ */ jsxRuntime.jsxs(button$1.ButtonGroup, { spacing: "compact", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button$1.IconButton,
+        {
+          kind: "primary",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "check" }),
+          "aria-label": confirmButtonLabel,
+          onClick: handleConfirm
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button$1.IconButton,
+        {
+          kind: "default",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "close" }),
+          "aria-label": cancelButtonLabel,
+          className: cancelButton,
+          onClick: handleCancel
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classix.cx(!hideEdit && container), "data-test-id": testId, ...focusWithinProps, children: renderReadContent });
+};
+exports.InlineEdit = InlineEdit;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { InlineVariants } from './styles/InlineEdit.css';\nimport type { TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type {\n  ComponentProps,\n  Dispatch,\n  KeyboardEventHandler,\n  ReactElement,\n  SetStateAction,\n} from 'react';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextField } from '@launchpad-ui/form';\nimport { Icon } from '@launchpad-ui/icons';\nimport { useButton } from '@react-aria/button';\nimport { focusSafely } from '@react-aria/focus';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { mergeProps, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { cloneElement, useRef, useState } from 'react';\n\nimport { container, cancelButton, inline, readButton } from './styles/InlineEdit.css';\n\ntype InlineEditProps = ComponentProps<'div'> &\n  InlineVariants &\n  Pick<ComponentProps<'input'>, 'defaultValue'> & {\n    'data-test-id'?: string;\n    onConfirm: Dispatch<SetStateAction<string>>;\n    hideEdit?: boolean;\n    renderInput?: ReactElement<TextFieldProps | TextAreaProps>;\n    isEditing?: boolean;\n    onCancel?: () => void;\n    onEdit?: () => void;\n    cancelButtonLabel?: string;\n    editButtonLabel?: string;\n    confirmButtonLabel?: string;\n  };\n\nconst InlineEdit = ({\n  'data-test-id': testId = 'inline-edit',\n  layout = 'horizontal',\n  children,\n  defaultValue,\n  onConfirm,\n  hideEdit = false,\n  renderInput = <TextField />,\n  'aria-label': ariaLabel,\n  isEditing: isEditingProp,\n  onCancel,\n  onEdit,\n  cancelButtonLabel = 'cancel',\n  editButtonLabel = 'edit',\n  confirmButtonLabel = 'confirm',\n}: InlineEditProps) => {\n  const [isEditing, setEditing] = useState(isEditingProp ?? false);\n  const [isFocusWithin, setFocusWithin] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const editRef = useRef<HTMLButtonElement>(null);\n  const controlled = isEditingProp !== undefined;\n\n  useUpdateEffect(() => {\n    if (controlled) {\n      setEditing(isEditingProp);\n    }\n  }, [isEditingProp]);\n\n  useUpdateEffect(() => {\n    if (isFocusWithin) {\n      isEditing\n        ? inputRef.current && focusSafely(inputRef.current)\n        : editRef.current && focusSafely(editRef.current);\n    }\n  }, [isEditing]);\n\n  const handleEdit = () => {\n    !controlled && setEditing(true);\n    onEdit?.();\n  };\n\n  const handleCancel = () => {\n    !controlled && setEditing(false);\n    onCancel?.();\n  };\n\n  const handleConfirm = () => {\n    onConfirm(inputRef.current?.value || '');\n    !controlled && setEditing(false);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleConfirm();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      handleCancel();\n    }\n  };\n\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: () => isEditing && handleCancel(),\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  const { buttonProps } = useButton(\n    {\n      'aria-label': editButtonLabel,\n      elementType: 'span',\n      onPress: handleEdit,\n    },\n    editRef\n  );\n\n  const renderReadContent = hideEdit ? (\n    <span ref={editRef} {...buttonProps} className={readButton}>\n      {children}\n    </span>\n  ) : (\n    <>\n      {children}\n      <IconButton\n        ref={editRef}\n        icon={<Icon name=\"edit\" />}\n        aria-label={editButtonLabel}\n        size=\"small\"\n        onClick={handleEdit}\n      />\n    </>\n  );\n\n  const input = cloneElement(\n    renderInput,\n    mergeProps(renderInput.props, {\n      ref: inputRef,\n      defaultValue,\n      onKeyDown: handleKeyDown,\n      'aria-label': ariaLabel,\n    })\n  );\n\n  return isEditing ? (\n    <div className={cx(container, inline({ layout }))} data-test-id={testId} {...focusWithinProps}>\n      {input}\n      <ButtonGroup spacing=\"compact\">\n        <IconButton\n          kind=\"primary\"\n          icon={<Icon name=\"check\" />}\n          aria-label={confirmButtonLabel}\n          onClick={handleConfirm}\n        />\n        <IconButton\n          kind=\"default\"\n          icon={<Icon name=\"close\" />}\n          aria-label={cancelButtonLabel}\n          className={cancelButton}\n          onClick={handleCancel}\n        />\n      </ButtonGroup>\n    </div>\n  ) : (\n    <div className={cx(!hideEdit && container)} data-test-id={testId} {...focusWithinProps}>\n      {renderReadContent}\n    </div>\n  );\n};\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["TextField","useState","useRef","useUpdateEffect","focusSafely","useFocusWithin","isFocusWithin","useButton","jsx","jsxs","Fragment","IconButton","Icon","cloneElement","mergeProps","cx","ButtonGroup"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAM,aAAa,CAAC;AAAA,EAClB,gBAAgB,SAAS;AAAA,EACzB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,6CAAeA,KAAU,WAAA,EAAA;AAAA,EACzB,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB,MAAuB;AACrB,QAAM,CAAC,WAAW,UAAU,IAAIC,MAAAA,SAAS,iBAAiB,KAAK;AAC/D,QAAM,CAAC,eAAe,cAAc,IAAIA,eAAS,KAAK;AAChD,QAAA,WAAWC,aAAyB,IAAI;AACxC,QAAA,UAAUA,aAA0B,IAAI;AAC9C,QAAM,aAAa,kBAAkB;AAErCC,QAAAA,gBAAgB,MAAM;AACpB,QAAI,YAAY;AACd,iBAAW,aAAa;AAAA,IAC1B;AAAA,EAAA,GACC,CAAC,aAAa,CAAC;AAElBA,QAAAA,gBAAgB,MAAM;AACpB,QAAI,eAAe;AAEb,kBAAA,SAAS,WAAWC,MAAAA,YAAY,SAAS,OAAO,IAChD,QAAQ,WAAWA,MAAAA,YAAY,QAAQ,OAAO;AAAA,IACpD;AAAA,EAAA,GACC,CAAC,SAAS,CAAC;AAEd,QAAM,aAAa,MAAM;AACtB,KAAA,cAAc,WAAW,IAAI;AACrB;AAAA,EAAA;AAGX,QAAM,eAAe,MAAM;AACxB,KAAA,cAAc,WAAW,KAAK;AACpB;AAAA,EAAA;AAGb,QAAM,gBAAgB,MAAM;;AAChB,gBAAA,cAAS,YAAT,mBAAkB,UAAS,EAAE;AACtC,KAAA,cAAc,WAAW,KAAK;AAAA,EAAA;AAG3B,QAAA,gBAAwD,CAAC,UAAU;AACnE,QAAA,MAAM,QAAQ,SAAS;AACzB,YAAM,eAAe;AACP;IAAA,WACL,MAAM,QAAQ,UAAU;AACjC,YAAM,eAAe;AACR;IACf;AAAA,EAAA;AAGI,QAAA,EAAE,iBAAiB,IAAIC,4BAAe;AAAA,IAC1C,cAAc,MAAM,aAAa,aAAa;AAAA,IAC9C,qBAAqB,CAACC,mBAAkB,eAAeA,cAAa;AAAA,EAAA,CACrE;AAEK,QAAA,EAAE,gBAAgBC,OAAA;AAAA,IACtB;AAAA,MACE,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,oBAAoB,WACvBC,2BAAAA,IAAA,QAAA,EAAK,KAAK,SAAU,GAAG,aAAa,WAAW,YAC7C,SACH,CAAA,IAGGC,2BAAAA,KAAAC,WAAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,IACDF,2BAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QACxB,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,EAAA,CAAA;AAGF,QAAM,QAAQC,MAAA;AAAA,IACZ;AAAA,IACAC,MAAA,WAAW,YAAY,OAAO;AAAA,MAC5B,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX,cAAc;AAAA,IAAA,CACf;AAAA,EAAA;AAGH,SAAO,YACLL,2BAAAA,KAAC,OAAI,EAAA,WAAWM,WAAG,WAAW,OAAO,EAAE,OAAA,CAAQ,CAAC,GAAG,gBAAc,QAAS,GAAG,kBAC1E,UAAA;AAAA,IAAA;AAAA,IACDN,2BAAAA,KAACO,SAAAA,aAAY,EAAA,SAAQ,WACnB,UAAA;AAAA,MAAAR,2BAAA;AAAA,QAACG,SAAA;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,UACzB,cAAY;AAAA,UACZ,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAJ,2BAAA;AAAA,QAACG,SAAA;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,UACzB,cAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,IAEAJ,2BAAAA,IAAC,OAAI,EAAA,WAAWO,QAAG,GAAA,CAAC,YAAY,SAAS,GAAG,gBAAc,QAAS,GAAG,kBACnE,UACH,kBAAA,CAAA;AAEJ;;"}

package/dist/style.css

@@ -0,0 +1,31 @@
+._1oig0620 {
+  display: flex;
+  gap: var(--lp-spacing-300);
+  align-items: center;
+}
+._1oig0622 {
+  flex-direction: column;
+  align-items: flex-start;
+}
+._1oig0623 {
+  flex-direction: row;
+}
+.Button--icon._1oig0624 {
+  height: 3rem;
+  width: 3rem;
+}
+._1oig0625 {
+  display: inline-block;
+  padding: var(--lp-spacing-200) var(--lp-spacing-300);
+  border-radius: var(--lp-border-radius-regular);
+}
+._1oig0625:hover {
+  background: var(--lp-color-bg-interactive-tertiary-hover);
+  cursor: pointer;
+}
+._1oig0625:focus-visible {
+  border-radius: var(--lp-border-radius-medium);
+  box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary), 0 0 0 4px var(--lp-color-shadow-interactive-focus);
+  outline: 0;
+  z-index: 2;
+}

package/dist/styles/InlineEdit.css.d.ts

@@ -0,0 +1,19 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+declare const container: string;
+declare const inline: import("@vanilla-extract/recipes").RuntimeFn<{
+    layout: {
+        vertical: {
+            flexDirection: "column";
+            alignItems: "flex-start";
+        };
+        horizontal: {
+            flexDirection: "row";
+        };
+    };
+}>;
+declare const cancelButton: string;
+declare const readButton: string;
+type InlineVariants = RecipeVariants<typeof inline>;
+export { container, cancelButton, inline, readButton };
+export type { InlineVariants };
+//# sourceMappingURL=InlineEdit.css.d.ts.map

package/dist/styles/InlineEdit.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit.css.d.ts","sourceRoot":"","sources":["../../src/styles/InlineEdit.css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAM/D,QAAA,MAAM,SAAS,QAIb,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;EAOV,CAAC;AAEH,QAAA,MAAM,YAAY,QAOhB,CAAC;AAEH,QAAA,MAAM,UAAU,QAcd,CAAC;AAEH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@launchpad-ui/inline-edit",
+  "version": "0.1.0",
+  "status": "alpha",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "An element used to display and allow inline editing of a form element value.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
+  },
+  "source": "src/index.ts",
+  "dependencies": {
+    "@react-aria/button": "3.8.0",
+    "@react-aria/focus": "3.13.0",
+    "@react-aria/interactions": "3.16.0",
+    "@react-aria/utils": "3.18.0",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "classix": "2.1.17",
+    "@launchpad-ui/button": "~0.9.2",
+    "@launchpad-ui/form": "~0.9.2",
+    "@launchpad-ui/icons": "~0.9.2",
+    "@launchpad-ui/tokens": "~0.6.0",
+    "@launchpad-ui/vars": "~0.2.0"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "^1.12.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "scripts": {
+    "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "lint": "eslint '**/*.{ts,tsx,js}'",
+    "test": "vitest run --coverage"
+  }
+}