@launchpad-ui/inline-edit 0.3.3 → 0.3.5

package/dist/InlineEdit.d.ts

@@ -1,6 +1,6 @@
-import type { InlineVariants } from './styles/InlineEdit.css';
 import type { IconFieldProps, TextAreaProps, TextFieldProps } from '@launchpad-ui/form';
 import type { ComponentProps, ReactElement } from 'react';
+import type { InlineVariants } from './styles/InlineEdit.css';
 type InlineEditProps = ComponentProps<'div'> & InlineVariants & Pick<ComponentProps<'input'>, 'defaultValue'> & {
     'data-test-id'?: string;
     onConfirm: (value: string) => void;

package/dist/InlineEdit.d.ts.map

@@ -1 +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,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,KAAK,EAAE,cAAc,EAAwB,YAAY,EAAE,MAAM,OAAO,CAAC;AAchF,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,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,CAAC,cAAc,GAAG,cAAc,GAAG,aAAa,CAAC,CAAC;IAC5E,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;;;;uBAXO,MAAM,KAAK,IAAI;;;;sBAIjB,IAAI;oBACN,IAAI;;;;4DA+JtB,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../src/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,KAAK,EAAE,cAAc,EAAwB,YAAY,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAc9D,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,cAAc,GACd,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,GAAG;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,CAAC,cAAc,GAAG,cAAc,GAAG,aAAa,CAAC,CAAC;IAC5E,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;CAC5B,CAAC;AAEH,QAAA,MAAM,UAAU;;;;uBAXK,MAAM,KAAK,IAAI;;;;sBAIjB,IAAI;oBACN,IAAI;;;;4DA+JpB,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { InlineVariants } from './styles/InlineEdit.css';\nimport type { IconFieldProps, TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type { ComponentProps, KeyboardEventHandler, ReactElement } from 'react';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextField, TextArea } 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, mergeRefs, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, forwardRef, 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: (value: string) => void;\n    hideEdit?: boolean;\n    renderInput?: ReactElement<IconFieldProps | TextFieldProps | TextAreaProps>;\n    isEditing?: boolean;\n    onCancel?: () => void;\n    onEdit?: () => void;\n    cancelButtonLabel?: string;\n    editButtonLabel?: string;\n    confirmButtonLabel?: string;\n  };\n\nconst InlineEdit = forwardRef<HTMLInputElement, InlineEditProps>(\n  (\n    {\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      className,\n      ...rest\n    },\n    ref\n  ) => {\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 inputProps = {\n      ref: mergeRefs(inputRef, ref),\n      defaultValue,\n      onKeyDown: handleKeyDown,\n      'aria-label': ariaLabel,\n    };\n\n    const inputChildren = renderInput.props.children;\n\n    const input = cloneElement(\n      renderInput,\n      mergeProps(renderInput.props, inputChildren ? {} : inputProps),\n      inputChildren &&\n        Children.map(inputChildren, (child) =>\n          child.type === TextField || child.type === TextArea\n            ? cloneElement(child, mergeProps(child.props, inputProps))\n            : child\n        )\n    );\n\n    return isEditing ? (\n      <div\n        {...rest}\n        className={cx(container, inline({ layout }), className)}\n        data-test-id={testId}\n        {...focusWithinProps}\n      >\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=\"cancel\" />}\n            aria-label={cancelButtonLabel}\n            className={cancelButton}\n            onClick={handleCancel}\n          />\n        </ButtonGroup>\n      </div>\n    ) : (\n      <div\n        {...rest}\n        className={cx(!hideEdit && container, className)}\n        data-test-id={testId}\n        {...focusWithinProps}\n      >\n        {renderReadContent}\n      </div>\n    );\n  }\n);\n\nInlineEdit.displayName = 'InlineEdit';\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["isFocusWithin"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { IconFieldProps, TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type { ComponentProps, KeyboardEventHandler, ReactElement } from 'react';\nimport type { InlineVariants } from './styles/InlineEdit.css';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextArea, 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, mergeRefs, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, forwardRef, useRef, useState } from 'react';\n\nimport { cancelButton, container, inline, readButton } from './styles/InlineEdit.css';\n\ntype InlineEditProps = ComponentProps<'div'> &\n\tInlineVariants &\n\tPick<ComponentProps<'input'>, 'defaultValue'> & {\n\t\t'data-test-id'?: string;\n\t\tonConfirm: (value: string) => void;\n\t\thideEdit?: boolean;\n\t\trenderInput?: ReactElement<IconFieldProps | TextFieldProps | TextAreaProps>;\n\t\tisEditing?: boolean;\n\t\tonCancel?: () => void;\n\t\tonEdit?: () => void;\n\t\tcancelButtonLabel?: string;\n\t\teditButtonLabel?: string;\n\t\tconfirmButtonLabel?: string;\n\t};\n\nconst InlineEdit = forwardRef<HTMLInputElement, InlineEditProps>(\n\t(\n\t\t{\n\t\t\t'data-test-id': testId = 'inline-edit',\n\t\t\tlayout = 'horizontal',\n\t\t\tchildren,\n\t\t\tdefaultValue,\n\t\t\tonConfirm,\n\t\t\thideEdit = false,\n\t\t\trenderInput = <TextField />,\n\t\t\t'aria-label': ariaLabel,\n\t\t\tisEditing: isEditingProp,\n\t\t\tonCancel,\n\t\t\tonEdit,\n\t\t\tcancelButtonLabel = 'cancel',\n\t\t\teditButtonLabel = 'edit',\n\t\t\tconfirmButtonLabel = 'confirm',\n\t\t\tclassName,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [isEditing, setEditing] = useState(isEditingProp ?? false);\n\t\tconst [isFocusWithin, setFocusWithin] = useState(false);\n\t\tconst inputRef = useRef<HTMLInputElement>(null);\n\t\tconst editRef = useRef<HTMLButtonElement>(null);\n\t\tconst controlled = isEditingProp !== undefined;\n\n\t\tuseUpdateEffect(() => {\n\t\t\tif (controlled) {\n\t\t\t\tsetEditing(isEditingProp);\n\t\t\t}\n\t\t}, [isEditingProp]);\n\n\t\tuseUpdateEffect(() => {\n\t\t\tif (isFocusWithin) {\n\t\t\t\tisEditing\n\t\t\t\t\t? inputRef.current && focusSafely(inputRef.current)\n\t\t\t\t\t: editRef.current && focusSafely(editRef.current);\n\t\t\t}\n\t\t}, [isEditing]);\n\n\t\tconst handleEdit = () => {\n\t\t\t!controlled && setEditing(true);\n\t\t\tonEdit?.();\n\t\t};\n\n\t\tconst handleCancel = () => {\n\t\t\t!controlled && setEditing(false);\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tconst handleConfirm = () => {\n\t\t\tonConfirm(inputRef.current?.value || '');\n\t\t\t!controlled && setEditing(false);\n\t\t};\n\n\t\tconst handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\thandleConfirm();\n\t\t\t} else if (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\thandleCancel();\n\t\t\t}\n\t\t};\n\n\t\tconst { focusWithinProps } = useFocusWithin({\n\t\t\tonBlurWithin: () => isEditing && handleCancel(),\n\t\t\tonFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n\t\t});\n\n\t\tconst { buttonProps } = useButton(\n\t\t\t{\n\t\t\t\t'aria-label': editButtonLabel,\n\t\t\t\telementType: 'span',\n\t\t\t\tonPress: handleEdit,\n\t\t\t},\n\t\t\teditRef,\n\t\t);\n\n\t\tconst renderReadContent = hideEdit ? (\n\t\t\t<span ref={editRef} {...buttonProps} className={readButton}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t) : (\n\t\t\t<>\n\t\t\t\t{children}\n\t\t\t\t<IconButton\n\t\t\t\t\tref={editRef}\n\t\t\t\t\ticon={<Icon name=\"edit\" />}\n\t\t\t\t\taria-label={editButtonLabel}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={handleEdit}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\n\t\tconst inputProps = {\n\t\t\tref: mergeRefs(inputRef, ref),\n\t\t\tdefaultValue,\n\t\t\tonKeyDown: handleKeyDown,\n\t\t\t'aria-label': ariaLabel,\n\t\t};\n\n\t\tconst inputChildren = renderInput.props.children;\n\n\t\tconst input = cloneElement(\n\t\t\trenderInput,\n\t\t\tmergeProps(renderInput.props, inputChildren ? {} : inputProps),\n\t\t\tinputChildren &&\n\t\t\t\tChildren.map(inputChildren, (child) =>\n\t\t\t\t\tchild.type === TextField || child.type === TextArea\n\t\t\t\t\t\t? cloneElement(child, mergeProps(child.props, inputProps))\n\t\t\t\t\t\t: child,\n\t\t\t\t),\n\t\t);\n\n\t\treturn isEditing ? (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={cx(container, inline({ layout }), className)}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\t{...focusWithinProps}\n\t\t\t>\n\t\t\t\t{input}\n\t\t\t\t<ButtonGroup spacing=\"compact\">\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\ticon={<Icon name=\"check\" />}\n\t\t\t\t\t\taria-label={confirmButtonLabel}\n\t\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t\t/>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tkind=\"default\"\n\t\t\t\t\t\ticon={<Icon name=\"cancel\" />}\n\t\t\t\t\t\taria-label={cancelButtonLabel}\n\t\t\t\t\t\tclassName={cancelButton}\n\t\t\t\t\t\tonClick={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t</ButtonGroup>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={cx(!hideEdit && container, className)}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\t{...focusWithinProps}\n\t\t\t>\n\t\t\t\t{renderReadContent}\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nInlineEdit.displayName = 'InlineEdit';\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["isFocusWithin"],"mappings":"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"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { InlineVariants } from './styles/InlineEdit.css';\nimport type { IconFieldProps, TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type { ComponentProps, KeyboardEventHandler, ReactElement } from 'react';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextField, TextArea } 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, mergeRefs, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, forwardRef, 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: (value: string) => void;\n    hideEdit?: boolean;\n    renderInput?: ReactElement<IconFieldProps | TextFieldProps | TextAreaProps>;\n    isEditing?: boolean;\n    onCancel?: () => void;\n    onEdit?: () => void;\n    cancelButtonLabel?: string;\n    editButtonLabel?: string;\n    confirmButtonLabel?: string;\n  };\n\nconst InlineEdit = forwardRef<HTMLInputElement, InlineEditProps>(\n  (\n    {\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      className,\n      ...rest\n    },\n    ref\n  ) => {\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 inputProps = {\n      ref: mergeRefs(inputRef, ref),\n      defaultValue,\n      onKeyDown: handleKeyDown,\n      'aria-label': ariaLabel,\n    };\n\n    const inputChildren = renderInput.props.children;\n\n    const input = cloneElement(\n      renderInput,\n      mergeProps(renderInput.props, inputChildren ? {} : inputProps),\n      inputChildren &&\n        Children.map(inputChildren, (child) =>\n          child.type === TextField || child.type === TextArea\n            ? cloneElement(child, mergeProps(child.props, inputProps))\n            : child\n        )\n    );\n\n    return isEditing ? (\n      <div\n        {...rest}\n        className={cx(container, inline({ layout }), className)}\n        data-test-id={testId}\n        {...focusWithinProps}\n      >\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=\"cancel\" />}\n            aria-label={cancelButtonLabel}\n            className={cancelButton}\n            onClick={handleCancel}\n          />\n        </ButtonGroup>\n      </div>\n    ) : (\n      <div\n        {...rest}\n        className={cx(!hideEdit && container, className)}\n        data-test-id={testId}\n        {...focusWithinProps}\n      >\n        {renderReadContent}\n      </div>\n    );\n  }\n);\n\nInlineEdit.displayName = 'InlineEdit';\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["forwardRef","TextField","useState","useRef","useUpdateEffect","focusSafely","useFocusWithin","isFocusWithin","useButton","jsx","jsxs","Fragment","IconButton","Icon","mergeRefs","cloneElement","mergeProps","Children","TextArea","cx","ButtonGroup"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAM,aAAaA,sBAAA;AAAA,EACjB,CACE;AAAA,IACE,gBAAgB,SAAS;AAAA,IACzB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,6CAAeC,KAAU,WAAA,EAAA;AAAA,IACzB,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,CAAC,WAAW,UAAU,IAAIC,MAAAA,SAAS,iBAAiB,KAAK;AAC/D,UAAM,CAAC,eAAe,cAAc,IAAIA,eAAS,KAAK;AAChD,UAAA,WAAWC,aAAyB,IAAI;AACxC,UAAA,UAAUA,aAA0B,IAAI;AAC9C,UAAM,aAAa,kBAAkB;AAErCC,UAAAA,gBAAgB,MAAM;AACpB,UAAI,YAAY;AACd,mBAAW,aAAa;AAAA,MAC1B;AAAA,IAAA,GACC,CAAC,aAAa,CAAC;AAElBA,UAAAA,gBAAgB,MAAM;AACpB,UAAI,eAAe;AAEb,oBAAA,SAAS,WAAWC,MAAAA,YAAY,SAAS,OAAO,IAChD,QAAQ,WAAWA,MAAAA,YAAY,QAAQ,OAAO;AAAA,MACpD;AAAA,IAAA,GACC,CAAC,SAAS,CAAC;AAEd,UAAM,aAAa,MAAM;AACtB,OAAA,cAAc,WAAW,IAAI;AACrB;AAAA,IAAA;AAGX,UAAM,eAAe,MAAM;AACxB,OAAA,cAAc,WAAW,KAAK;AACpB;AAAA,IAAA;AAGb,UAAM,gBAAgB,MAAM;;AAChB,kBAAA,cAAS,YAAT,mBAAkB,UAAS,EAAE;AACtC,OAAA,cAAc,WAAW,KAAK;AAAA,IAAA;AAG3B,UAAA,gBAAwD,CAAC,UAAU;AACnE,UAAA,MAAM,QAAQ,SAAS;AACzB,cAAM,eAAe;AACP;MAAA,WACL,MAAM,QAAQ,UAAU;AACjC,cAAM,eAAe;AACR;MACf;AAAA,IAAA;AAGI,UAAA,EAAE,iBAAiB,IAAIC,4BAAe;AAAA,MAC1C,cAAc,MAAM,aAAa,aAAa;AAAA,MAC9C,qBAAqB,CAACC,mBAAkB,eAAeA,cAAa;AAAA,IAAA,CACrE;AAEK,UAAA,EAAE,gBAAgBC,OAAA;AAAA,MACtB;AAAA,QACE,cAAc;AAAA,QACd,aAAa;AAAA,QACb,SAAS;AAAA,MACX;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,oBAAoB,WACvBC,2BAAAA,IAAA,QAAA,EAAK,KAAK,SAAU,GAAG,aAAa,WAAW,YAC7C,SACH,CAAA,IAGGC,2BAAAA,KAAAC,WAAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACDF,2BAAA;AAAA,QAACG,SAAA;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,UACxB,cAAY;AAAA,UACZ,MAAK;AAAA,UACL,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF,EAAA,CAAA;AAGF,UAAM,aAAa;AAAA,MACjB,KAAKC,MAAAA,UAAU,UAAU,GAAG;AAAA,MAC5B;AAAA,MACA,WAAW;AAAA,MACX,cAAc;AAAA,IAAA;AAGV,UAAA,gBAAgB,YAAY,MAAM;AAExC,UAAM,QAAQC,sBAAA;AAAA,MACZ;AAAA,MACAC,MAAAA,WAAW,YAAY,OAAO,gBAAgB,CAAA,IAAK,UAAU;AAAA,MAC7D,iBACEC,MAAS,SAAA;AAAA,QAAI;AAAA,QAAe,CAAC,UAC3B,MAAM,SAAShB,KAAAA,aAAa,MAAM,SAASiB,KAAAA,WACvCH,sBAAAA,aAAa,OAAOC,MAAAA,WAAW,MAAM,OAAO,UAAU,CAAC,IACvD;AAAA,MACN;AAAA,IAAA;AAGJ,WAAO,YACLN,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAWS,WAAG,WAAW,OAAO,EAAE,OAAO,CAAC,GAAG,SAAS;AAAA,QACtD,gBAAc;AAAA,QACb,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACDT,2BAAAA,KAACU,SAAAA,aAAY,EAAA,SAAQ,WACnB,UAAA;AAAA,YAAAX,2BAAA;AAAA,cAACG,SAAA;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,gBACzB,cAAY;AAAA,gBACZ,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YACAJ,2BAAA;AAAA,cAACG,SAAA;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAMH,2BAAAA,IAACI,MAAAA,MAAK,EAAA,MAAK,SAAS,CAAA;AAAA,gBAC1B,cAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGFJ,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAWU,QAAAA,GAAG,CAAC,YAAY,WAAW,SAAS;AAAA,QAC/C,gBAAc;AAAA,QACb,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"index.js","sources":["../src/InlineEdit.tsx"],"sourcesContent":["import type { IconFieldProps, TextAreaProps, TextFieldProps } from '@launchpad-ui/form';\nimport type { ComponentProps, KeyboardEventHandler, ReactElement } from 'react';\nimport type { InlineVariants } from './styles/InlineEdit.css';\n\nimport { ButtonGroup, IconButton } from '@launchpad-ui/button';\nimport { TextArea, 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, mergeRefs, useUpdateEffect } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, forwardRef, useRef, useState } from 'react';\n\nimport { cancelButton, container, inline, readButton } from './styles/InlineEdit.css';\n\ntype InlineEditProps = ComponentProps<'div'> &\n\tInlineVariants &\n\tPick<ComponentProps<'input'>, 'defaultValue'> & {\n\t\t'data-test-id'?: string;\n\t\tonConfirm: (value: string) => void;\n\t\thideEdit?: boolean;\n\t\trenderInput?: ReactElement<IconFieldProps | TextFieldProps | TextAreaProps>;\n\t\tisEditing?: boolean;\n\t\tonCancel?: () => void;\n\t\tonEdit?: () => void;\n\t\tcancelButtonLabel?: string;\n\t\teditButtonLabel?: string;\n\t\tconfirmButtonLabel?: string;\n\t};\n\nconst InlineEdit = forwardRef<HTMLInputElement, InlineEditProps>(\n\t(\n\t\t{\n\t\t\t'data-test-id': testId = 'inline-edit',\n\t\t\tlayout = 'horizontal',\n\t\t\tchildren,\n\t\t\tdefaultValue,\n\t\t\tonConfirm,\n\t\t\thideEdit = false,\n\t\t\trenderInput = <TextField />,\n\t\t\t'aria-label': ariaLabel,\n\t\t\tisEditing: isEditingProp,\n\t\t\tonCancel,\n\t\t\tonEdit,\n\t\t\tcancelButtonLabel = 'cancel',\n\t\t\teditButtonLabel = 'edit',\n\t\t\tconfirmButtonLabel = 'confirm',\n\t\t\tclassName,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [isEditing, setEditing] = useState(isEditingProp ?? false);\n\t\tconst [isFocusWithin, setFocusWithin] = useState(false);\n\t\tconst inputRef = useRef<HTMLInputElement>(null);\n\t\tconst editRef = useRef<HTMLButtonElement>(null);\n\t\tconst controlled = isEditingProp !== undefined;\n\n\t\tuseUpdateEffect(() => {\n\t\t\tif (controlled) {\n\t\t\t\tsetEditing(isEditingProp);\n\t\t\t}\n\t\t}, [isEditingProp]);\n\n\t\tuseUpdateEffect(() => {\n\t\t\tif (isFocusWithin) {\n\t\t\t\tisEditing\n\t\t\t\t\t? inputRef.current && focusSafely(inputRef.current)\n\t\t\t\t\t: editRef.current && focusSafely(editRef.current);\n\t\t\t}\n\t\t}, [isEditing]);\n\n\t\tconst handleEdit = () => {\n\t\t\t!controlled && setEditing(true);\n\t\t\tonEdit?.();\n\t\t};\n\n\t\tconst handleCancel = () => {\n\t\t\t!controlled && setEditing(false);\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tconst handleConfirm = () => {\n\t\t\tonConfirm(inputRef.current?.value || '');\n\t\t\t!controlled && setEditing(false);\n\t\t};\n\n\t\tconst handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\thandleConfirm();\n\t\t\t} else if (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\thandleCancel();\n\t\t\t}\n\t\t};\n\n\t\tconst { focusWithinProps } = useFocusWithin({\n\t\t\tonBlurWithin: () => isEditing && handleCancel(),\n\t\t\tonFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n\t\t});\n\n\t\tconst { buttonProps } = useButton(\n\t\t\t{\n\t\t\t\t'aria-label': editButtonLabel,\n\t\t\t\telementType: 'span',\n\t\t\t\tonPress: handleEdit,\n\t\t\t},\n\t\t\teditRef,\n\t\t);\n\n\t\tconst renderReadContent = hideEdit ? (\n\t\t\t<span ref={editRef} {...buttonProps} className={readButton}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t) : (\n\t\t\t<>\n\t\t\t\t{children}\n\t\t\t\t<IconButton\n\t\t\t\t\tref={editRef}\n\t\t\t\t\ticon={<Icon name=\"edit\" />}\n\t\t\t\t\taria-label={editButtonLabel}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={handleEdit}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\n\t\tconst inputProps = {\n\t\t\tref: mergeRefs(inputRef, ref),\n\t\t\tdefaultValue,\n\t\t\tonKeyDown: handleKeyDown,\n\t\t\t'aria-label': ariaLabel,\n\t\t};\n\n\t\tconst inputChildren = renderInput.props.children;\n\n\t\tconst input = cloneElement(\n\t\t\trenderInput,\n\t\t\tmergeProps(renderInput.props, inputChildren ? {} : inputProps),\n\t\t\tinputChildren &&\n\t\t\t\tChildren.map(inputChildren, (child) =>\n\t\t\t\t\tchild.type === TextField || child.type === TextArea\n\t\t\t\t\t\t? cloneElement(child, mergeProps(child.props, inputProps))\n\t\t\t\t\t\t: child,\n\t\t\t\t),\n\t\t);\n\n\t\treturn isEditing ? (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={cx(container, inline({ layout }), className)}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\t{...focusWithinProps}\n\t\t\t>\n\t\t\t\t{input}\n\t\t\t\t<ButtonGroup spacing=\"compact\">\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\ticon={<Icon name=\"check\" />}\n\t\t\t\t\t\taria-label={confirmButtonLabel}\n\t\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t\t/>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tkind=\"default\"\n\t\t\t\t\t\ticon={<Icon name=\"cancel\" />}\n\t\t\t\t\t\taria-label={cancelButtonLabel}\n\t\t\t\t\t\tclassName={cancelButton}\n\t\t\t\t\t\tonClick={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t</ButtonGroup>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={cx(!hideEdit && container, className)}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\t{...focusWithinProps}\n\t\t\t>\n\t\t\t\t{renderReadContent}\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nInlineEdit.displayName = 'InlineEdit';\n\nexport { InlineEdit };\nexport type { InlineEditProps };\n"],"names":["forwardRef","TextField","useState","useRef","useUpdateEffect","focusSafely","useFocusWithin","isFocusWithin","useButton","jsx","jsxs","Fragment","IconButton","Icon","mergeRefs","cloneElement","mergeProps","Children","TextArea","cx","ButtonGroup"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/inline-edit",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "status": "alpha",
   "publishConfig": {
     "access": "public"
@@ -26,17 +26,17 @@
   },
   "source": "src/index.ts",
   "dependencies": {
-    "@react-aria/button": "3.9.2",
-    "@react-aria/focus": "3.16.1",
-    "@react-aria/interactions": "3.21.0",
-    "@react-aria/utils": "3.23.1",
+    "@react-aria/button": "3.9.3",
+    "@react-aria/focus": "3.16.2",
+    "@react-aria/interactions": "3.21.1",
+    "@react-aria/utils": "3.23.2",
     "@vanilla-extract/recipes": "^0.5.0",
     "classix": "2.1.17",
-    "@launchpad-ui/button": "~0.12.2",
-    "@launchpad-ui/form": "~0.11.3",
-    "@launchpad-ui/icons": "~0.16.2",
-    "@launchpad-ui/tokens": "~0.9.5",
-    "@launchpad-ui/vars": "~0.2.12"
+    "@launchpad-ui/button": "~0.12.4",
+    "@launchpad-ui/form": "~0.11.5",
+    "@launchpad-ui/icons": "~0.16.4",
+    "@launchpad-ui/tokens": "~0.9.7",
+    "@launchpad-ui/vars": "~0.2.14"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.14.0",
@@ -50,7 +50,7 @@
   "scripts": {
     "build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
-    "lint": "eslint '**/*.{ts,tsx,js}'",
+    "lint": "exit 0",
     "test": "vitest run --coverage"
   }
 }