diff --git a/packages/core/src/InlineEditor/InlineEditor.stories.tsx b/packages/core/src/InlineEditor/InlineEditor.stories.tsx index c2ddb79363..bc5447906d 100644 --- 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 = { +const meta: Meta> = { title: "Components/Inline Editor", component: HvInlineEditor, }; export default meta; -export const Main: StoryObj = { +export const Main: StoryObj = { args: { showIcon: false, variant: "body", @@ -31,7 +31,7 @@ export const Main: StoryObj = { }, }; -export const Disabled: StoryObj = { +export const Disabled: StoryObj> = { render: () => { return (
diff --git a/packages/core/src/InlineEditor/InlineEditor.tsx b/packages/core/src/InlineEditor/InlineEditor.tsx index 32e8412273..b7e63d36c1 100644 --- 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; -export interface HvInlineEditorProps +export interface HvInlineEditorProps extends HvBaseProps { /** 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 = ( + props: HvInlineEditorProps & + Omit, keyof HvInlineEditorProps>, +) => { const { className, classes: classesProp,