fix(HvInlineEditor): typescript attribute recognition

lumada-design · Aug 9, 2024 · 2647c11 · 2647c11
1 parent 300095c
commit 2647c11
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/core/src/InlineEditor/InlineEditor.stories.tsx b/packages/core/src/InlineEditor/InlineEditor.stories.tsx
@@ -4,17 +4,17 @@ import {
   HvContainer,
   HvGrid,
   HvInlineEditor,
-  HvInlineEditorProps,
+  HvInput,
   HvTypographyVariants,
 } from "@hitachivantara/uikit-react-core";
 
-const meta: Meta<typeof HvInlineEditor> = {
+const meta: Meta<typeof HvInlineEditor<typeof HvInput>> = {
   title: "Components/Inline Editor",
   component: HvInlineEditor,
 };
 export default meta;
 
-export const Main: StoryObj<HvInlineEditorProps> = {
+export const Main: StoryObj<typeof HvInlineEditor> = {
   args: {
     showIcon: false,
     variant: "body",
@@ -31,7 +31,7 @@ export const Main: StoryObj<HvInlineEditorProps> = {
   },
 };
 
-export const Disabled: StoryObj<HvInlineEditorProps> = {
+export const Disabled: StoryObj<typeof HvInlineEditor<typeof HvInput>> = {
   render: () => {
     return (
       <div style={{ width: 300 }}>

diff --git a/packages/core/src/InlineEditor/InlineEditor.tsx b/packages/core/src/InlineEditor/InlineEditor.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 import { useTheme } from "@hitachivantara/uikit-react-shared";
 
@@ -20,7 +20,7 @@ export { staticClasses as inlineEditorClasses };
 
 export type HvInlineEditorClasses = ExtractNames<typeof useClasses>;
 
-export interface HvInlineEditorProps
+export interface HvInlineEditorProps<T extends React.ElementType>
   extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
   /** The value of the form element. */
   value?: string;
@@ -29,7 +29,7 @@ export interface HvInlineEditorProps
   /** Whether the Edit icon should always be visible */
   showIcon?: boolean;
   /** Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */
-  component?: React.ElementType;
+  component?: T;
   /** Variant of the HvTypography to display */
   variant?: HvTypographyVariants;
   /** Called when the input is blurred. */
@@ -55,7 +55,10 @@ export interface HvInlineEditorProps
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
  */
-export const HvInlineEditor = (props: HvInlineEditorProps) => {
+export const HvInlineEditor = <T extends React.ElementType>(
+  props: HvInlineEditorProps<T> &
+    Omit<React.ComponentProps<T>, keyof HvInlineEditorProps<T>>,
+) => {
   const {
     className,
     classes: classesProp,