[UIK-5337][input] rewrite component to TS

playground/entries/Input.tsx

@@ -2,7 +2,7 @@ import ArrowRightM from '@semcore/icon/ArrowRight/m';
 import CheckM from '@semcore/icon/Check/m';
 import { ButtonLink } from '@semcore/ui/button';
 import Input from '@semcore/ui/input';
-import type { InputProps } from '@semcore/ui/input';
+import type { NSInput } from '@semcore/ui/input';
 import React from 'react';
 
 import type { JSXProps } from '../types/JSXProps';
@@ -14,7 +14,7 @@ type AdditionalJSXProps = {
   after: boolean;
   readOnly: boolean;
 };
-export type InputJSXProps = JSXProps<InputProps> & AdditionalJSXProps;
+export type InputJSXProps = JSXProps<NSInput.Props> & AdditionalJSXProps;
 
 function getJSX(props: InputJSXProps) {
   return (

playground/entries/InputMask.tsx

@@ -1,4 +1,4 @@
-import type { InputProps } from '@semcore/ui/input';
+import type { NSInput } from '@semcore/ui/input';
 import type { InputMaskValueProps } from '@semcore/ui/input-mask';
 import InputMask from '@semcore/ui/input-mask';
 import React from 'react';
@@ -7,7 +7,7 @@ import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type InputMaskJSXProps = JSXProps<InputProps & InputMaskValueProps>;
+export type InputMaskJSXProps = JSXProps<NSInput.Props & InputMaskValueProps>;
 
 function getJSX(props: InputMaskJSXProps) {
   return (

playground/entries/InputTags.tsx

@@ -1,4 +1,4 @@
-import type { InputValueProps } from '@semcore/ui/input';
+import type { NSInput } from '@semcore/ui/input';
 import InputTags from '@semcore/ui/input-tags';
 import type { InputTagsProps } from '@semcore/ui/input-tags';
 import React from 'react';
@@ -16,7 +16,7 @@ type AdditionalJSXProps = {
     closable: boolean;
   };
 };
-export type InputTagsJSXProps = JSXProps<InputTagsProps & InputValueProps> & AdditionalJSXProps;
+export type InputTagsJSXProps = JSXProps<InputTagsProps & NSInput.Value.Props> & AdditionalJSXProps;
 
 function getJSX(props: InputTagsJSXProps) {
   return (

semcore/add-filter/src/components/AddFilterInput.tsx

@@ -1,7 +1,7 @@
 import { ButtonLink } from '@semcore/button';
 import { createComponent, Component, Root } from '@semcore/core';
 import Input from '@semcore/input';
-import type { InputValueProps } from '@semcore/input';
+import type { NSInput } from '@semcore/input';
 import React from 'react';
 
 import type { AddFilterInputType, AddFilterItemProps } from '../AddFilter.types';
@@ -18,7 +18,7 @@ class AddFilterInputRoot extends Component<AddFilterItemProps> {
     this.asProps.onUnmount?.();
   }
 
-  getValueProps(props: InputValueProps) {
+  getValueProps(props: NSInput.Value.Props) {
     const { value, onClear, setFocusRef } = this.asProps as AsPropsWithOnClear<typeof this.asProps>;
 
     return {

semcore/color-picker/src/PaletteManager.type.ts

@@ -1,5 +1,5 @@
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { InputProps } from '@semcore/input';
+import type { NSInput } from '@semcore/input';
 
 import type { NSColorPicker } from './ColorPicker.type';
 import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
@@ -45,7 +45,7 @@ declare namespace NSPaletteManager {
   }
 
   namespace InputColor {
-    type Props = InputProps & {
+    type Props = NSInput.Props & {
       /**
        * Text value of input
        */

semcore/date-picker/src/index.d.ts

@@ -9,7 +9,7 @@ import type { UnknownProperties, Intergalactic, PropGetterFn } from '@semcore/co
 import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import type Divider from '@semcore/divider';
 import type { DropdownProps, DropdownTriggerProps } from '@semcore/dropdown';
-import type { InputProps, InputValueProps } from '@semcore/input';
+import type { NSInput } from '@semcore/input';
 import type Input from '@semcore/input';
 import type { InputMaskValueProps } from '@semcore/input-mask';
 import type { TooltipProps } from '@semcore/tooltip';
@@ -272,7 +272,7 @@ export type DatePickerHandlers = {
   visible: (index: boolean) => void;
 };
 
-export type BaseInputTriggerProps = InputProps &
+export type BaseInputTriggerProps = NSInput.Props &
   TooltipProps & {
     /**
      * Date input placeholder characters
@@ -313,7 +313,7 @@ declare const InputTrigger: Intergalactic.Component<
 > & {
   Addon: typeof Input.Addon;
   Value: typeof Input.Value;
-  SingleDateInput: Intergalactic.Component<'div', InputProps & SingleDateInputProps> & {
+  SingleDateInput: Intergalactic.Component<'div', NSInput.Props & SingleDateInputProps> & {
     Indicator: typeof Input.Addon;
     MaskedInput: Intergalactic.Component<'input', InputMaskValueProps & DatePickerMaskedInputProps>;
   };
@@ -325,7 +325,7 @@ declare const RangeInputTrigger: Intergalactic.Component<
 > & {
   Addon: typeof Input.Addon;
   Value: typeof Input.Value;
-  DateRange: Intergalactic.Component<'div', InputValueProps & DateRangeProps> & {
+  DateRange: Intergalactic.Component<'div', NSInput.Value.Props & DateRangeProps> & {
     Indicator: typeof Input.Addon;
     RangeSep: typeof Input.Addon;
     FromMaskedInput: Intergalactic.Component<

semcore/input-mask/src/InputMask.tsx

@@ -12,7 +12,7 @@ import getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';
 import logger from '@semcore/core/lib/utils/logger';
 import { forkRef } from '@semcore/core/lib/utils/ref';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
-import Input, { type InputProps, type InputValueProps } from '@semcore/input';
+import Input, { type NSInput } from '@semcore/input';
 import React from 'react';
 import * as mask from 'text-mask-core';
 
@@ -24,7 +24,7 @@ export type InputMaskAliases = {
   [s: string]: RegExp;
 };
 
-export type InputMaskValueProps = InputValueProps & {
+export type InputMaskValueProps = NSInput.Value.Props & {
   /**
    * Mask for entering text
    */
@@ -85,7 +85,7 @@ type InputMaskCtx = {
   getValueProps: PropGetterFn;
 };
 
-type InputMaskComponent = Intergalactic.Component<'div', InputProps, InputMaskCtx> & {
+type InputMaskComponent = Intergalactic.Component<'div', NSInput.Props, InputMaskCtx> & {
   Value: Intergalactic.Component<'input', InputMaskValueProps>;
   Addon: typeof Input.Addon;
 };
@@ -106,7 +106,7 @@ export function getAfterPositionValue(value: string, mask: any = ''): number {
   return afterPotionValue;
 }
 
-class InputMask extends Component<InputProps> {
+class InputMask extends Component<NSInput.Props> {
   static displayName = 'InputMask';
   static style = style;
 

semcore/input-number/src/index.d.ts

@@ -1,11 +1,11 @@
 import type { Intergalactic, PropGetterFn } from '@semcore/core';
-import type { InputAddonProps, InputProps, InputValueProps } from '@semcore/input';
+import type { NSInput } from '@semcore/input';
 import type React from 'react';
 
 export type InputNumberValue = string;
 export type InputNumberSize = 'm' | 'l';
 
-export type InputNumberProps = InputProps & {
+export type InputNumberProps = NSInput.Props & {
   /** Input size
    * @default m
    * */
@@ -16,7 +16,7 @@ export type InputNumberProps = InputProps & {
   locale?: string;
 };
 
-export type InputNumberValueProps = InputValueProps & {
+export type InputNumberValueProps = NSInput.Value.Props & {
   /** Minimum value
    * @default Number.MIN_SAFE_INTEGER
    */
@@ -35,7 +35,7 @@ export type InputNumberValueProps = InputValueProps & {
   onChange?: (value: InputNumberValue, event?: React.SyntheticEvent<HTMLInputElement>) => void;
 };
 
-export type InputNumberControlsProps = InputAddonProps & {
+export type InputNumberControlsProps = NSInput.Addon.Props & {
   /** Always displays controls (steppers)
    * @default false
    */
@@ -51,7 +51,7 @@ export type InputNumberCtx = {
 declare const InputNumber: Intergalactic.Component<'div', InputNumberProps, InputNumberCtx> & {
   Value: Intergalactic.Component<'input', InputNumberValueProps>;
   Controls: Intergalactic.Component<'div', InputNumberControlsProps>;
-  Addon: Intergalactic.Component<'div', InputAddonProps>;
+  Addon: Intergalactic.Component<'div', NSInput.Addon.Props>;
 };
 
 export default InputNumber;

semcore/input-tags/src/InputTags.tsx

@@ -15,19 +15,19 @@ import { extractFrom, isAdvanceMode } from '@semcore/core/lib/utils/findComponen
 import fire from '@semcore/core/lib/utils/fire';
 import { getAccessibleName } from '@semcore/core/lib/utils/getAccessibleName';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
-import Input, { type InputProps, type InputValueProps } from '@semcore/input';
+import Input, { type NSInput } from '@semcore/input';
 import Tag, { type NSTag, TagContainer } from '@semcore/tag';
 import React from 'react';
 
 import style from './style/input-tag.shadow.css';
 import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 
-export type InputTagsValueProps = InputValueProps & {};
+export type InputTagsValueProps = NSInput.Value.Props & {};
 
 export type InputTagsSize = 'l' | 'm';
 
-export type InputTagsProps = Omit<InputProps, 'size'> &
+export type InputTagsProps = Omit<NSInput.Props, 'size'> &
   ScrollAreaProps & {
     /**
      * Component size

semcore/input/package.json

@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "types": "./lib/types/index.d.ts",

semcore/input/src/Input.jsx → semcore/input/src/Input.tsx

@@ -1,22 +1,31 @@
 import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root, lastInteraction } from '@semcore/core';
 import React from 'react';
 
+import type { NSInput } from './Input.type';
 import style from './style/input.shadow.css';
 
-class Input extends Component {
+class Input extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSInput.Component>,
+  [],
+  {},
+  {},
+  {},
+  NSInput.DefaultProps
+> {
   static displayName = 'Input';
 
   static defaultProps = {
     size: 'm',
     state: 'normal',
-  };
+  } as const;
 
   static style = style;
 
-  inputRef = React.createRef();
+  inputRef = React.createRef<HTMLInputElement>();
 
-  handleMouseDownAddon = (event) => {
+  handleMouseDownAddon = (event: React.MouseEvent) => {
     event.preventDefault();
     this.inputRef.current?.focus();
   };
@@ -106,12 +115,19 @@ class Input extends Component {
   }
 }
 
-class Value extends Component {
+class Value extends Component<
+  Intergalactic.InternalTypings.InferChildComponentProps<NSInput.Value.Component, typeof Input, 'Value'>,
+  [],
+  NSInput.Value.Handlers,
+  {},
+  {},
+  NSInput.Value.DefaultProps
+> {
   static defaultProps = {
     defaultValue: '',
   };
 
-  inputRef = React.createRef();
+  inputRef = React.createRef<HTMLInputElement>();
 
   componentDidMount() {
     if (this.asProps.autoFocus) {
@@ -123,7 +139,7 @@ class Value extends Component {
 
   uncontrolledProps() {
     return {
-      value: (e) => e.target.value,
+      value: (e: React.ChangeEvent<HTMLInputElement>) => e.target.value,
     };
   }
 
@@ -151,7 +167,9 @@ class Value extends Component {
   }
 }
 
-function Addon(props) {
+function Addon(
+  props: Intergalactic.InternalTypings.InferChildComponentProps<NSInput.Addon.Component, typeof Input, 'Addon'>,
+) {
   const SAddon = Root;
   const { Children, styles, neighborLocation } = props;
   return (
@@ -171,7 +189,10 @@ function Addon(props) {
  *
  * {@link https://developer.semrush.com/intergalactic/components/input/input-api/|API} | {@link https://developer.semrush.com/intergalactic/components/input/input-code/|Examples}
  */
-export default createComponent(Input, {
+export default createComponent<
+  NSInput.Component,
+  typeof Input
+>(Input, {
   Addon,
   Value,
 });