Skip to content

Improves input type definitions #3025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Improves input type definitions #3025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddd0630
Adds event handler and ref types to inner input.
gburnett Apr 5, 2022
5a448db
Adds event handler and ref types to input.
gburnett Apr 5, 2022
e830f6f
Updates types for performStep.
gburnett Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions components/input.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ declare module '@salesforce/design-system-react/components/input' {
/**
* This callback exposes the input reference / DOM node to parent components. `<Parent inputRef={(inputComponent) => this.input = inputComponent} />
*/
inputRef?: (v: any) => any;
inputRef?: React.RefCallback<HTMLInputElement>;
/**
* Displays the value of the input statically. This follows the static input UX pattern.
*/
Expand All @@ -128,50 +128,53 @@ declare module '@salesforce/design-system-react/components/input' {
/**
* Triggered when focus is removed.
*/
onBlur?: (v: any) => any;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
/**
* This callback fires when the input changes. Passes in `event, { value }`.
*/
onChange?: (
e: React.KeyboardEvent<HTMLInputElement>,
value: { value: any }
e:
| React.ChangeEvent<HTMLInputElement>
| React.KeyboardEvent<HTMLButtonElement>
| React.MouseEvent<HTMLButtonElement>,
Comment on lines +137 to +139
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ChangeEvent is typical. I think that KeyboardEvent and MouseEvent will be encountered when performStep is invoked.

value: { value: string; number?: number }
) => any;
/**
* This event fires when the input is clicked.
*/
onClick?: (v: any) => any;
onClick?: React.MouseEventHandler<HTMLInputElement>;
/**
* Triggered when component is focused.
*/
onFocus?: (v: any) => any;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
/**
* Similar to `onchange`. Triggered when an element gets user input.
*/
onInput?: (v: any) => any;
onInput?: React.FormEventHandler<HTMLInputElement>;
/**
* Triggered when a submittable `<input>` element is invalid.
*/
onInvalid?: (v: any) => any;
onInvalid?: React.FormEventHandler<HTMLInputElement>;
/**
* Triggered when a key is pressed down
*/
onKeyDown?: (v: any) => any;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
/**
* Triggered when a key is pressed and released
*/
onKeyPress?: (v: any) => any;
onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
/**
* Triggered when a key is released
*/
onKeyUp?: (v: any) => any;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
/**
* Triggered after some text has been selected in an element.
*/
onSelect?: (v: any) => any;
onSelect?: React.ReactEventHandler<HTMLInputElement>;
/**
* Fires when a form is submitted.
*/
onSubmit?: (v: any) => any;
onSubmit?: React.ReactEventHandler<HTMLInputElement>;
/**
* Text that will appear in an empty input.
*/
Expand Down
24 changes: 12 additions & 12 deletions components/input/private/inner-input.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ declare module '@salesforce/design-system-react/components/input/private/inner-i
/**
* This callback exposes the input reference / DOM node to parent components. `<Parent inputRef={(inputComponent) => this.input = inputComponent} />
*/
inputRef?: (v: any) => any;
inputRef?: React.LegacyRef<HTMLInputElement>;
/**
* Displays the value of the input statically. This follows the static input UX pattern.
*/
Expand All @@ -90,23 +90,23 @@ declare module '@salesforce/design-system-react/components/input/private/inner-i
* This label appears above the input.
*/
label?: string;
onBlur?: (v: any) => any;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
/**
* This callback fires when the input changes. The synthetic React event will be the first parameter to the callback. You will probably want to reference `event.target.value` in your callback. No custom data object is provided.
*/
onChange?: (v: any) => any;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
/**
* This event fires when the input is clicked.
*/
onClick?: (v: any) => any;
onFocus?: (v: any) => any;
onInput?: (v: any) => any;
onInvalid?: (v: any) => any;
onKeyDown?: (v: any) => any;
onKeyPress?: (v: any) => any;
onKeyUp?: (v: any) => any;
onSelect?: (v: any) => any;
onSubmit?: (v: any) => any;
onClick?: React.MouseEventHandler<HTMLInputElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
onInput?: React.FormEventHandler<HTMLInputElement>;
onInvalid?: React.FormEventHandler<HTMLInputElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
onSelect?: React.ReactEventHandler<HTMLInputElement>;
onSubmit?: React.ReactEventHandler<HTMLInputElement>;
/**
* Text that will appear in an empty input.
*/
Expand Down