@true-engineering/true-react-common-ui-kit 3.1.1 → 3.4.0

package/src/components/Input/Input.tsx

@@ -6,8 +6,6 @@ import {
   FormEvent,
   FocusEvent,
   MouseEvent,
-  KeyboardEvent,
-  ClipboardEvent,
   InputHTMLAttributes,
   ReactNode,
 } from 'react';
@@ -24,31 +22,30 @@ import { ICommonProps } from '../../types';
 import { renderIcon, Icon, IIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_SIZE } from './constants';
-import { IReactInputMaskProps } from './types';
+import { IInputHTMLBaseProps, IReactInputMaskProps } from './types';
 import { useStyles, IInputStyles } from './Input.styles';
 
-export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMaskProps {
+export interface IInputProps
+  extends ICommonProps<IInputStyles>,
+    IReactInputMaskProps,
+    IInputHTMLBaseProps {
   value?: string;
   label?: ReactNode;
-  placeholder?: string;
-  /**
-   * @default `text`
-   */
-  type?: 'text' | 'password' | 'email' | 'number';
+  /** @default false */
   isDisabled?: boolean;
-  /**
-   * @default true
-   */
+  /** @default true */
   hasFloatingLabel?: boolean;
+  /** @default false */
   isReadonly?: boolean;
+  /** @default false */
   isInvalid?: boolean;
+  /** @default false */
   isActive?: boolean;
+  /** @default false */
   isClearable?: boolean;
   infoMessage?: string;
   errorMessage?: string;
-  /**
-   * @default `bottom`
-   */
+  /** @default 'bottom' */
   errorPosition?: 'top' | 'bottom';
   inlineStyle?:
     | 'top'
@@ -61,7 +58,9 @@ export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMask
     | 'right'
     | 'middle';
   border?: 'top' | 'bottom' | 'left' | 'right';
+  /** @default false */
   isRequired?: boolean;
+  /** @default false */
   isLoading?: boolean;
   /**
    * Должна ли ширина input'а подстраиваться под ширину контента
@@ -75,18 +74,14 @@ export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMask
   defaultSize?: number;
   iconType?: IIcon;
   units?: string;
-  name?: string;
+  /** @default false */
   hasRequiredLabel?: boolean;
+  /** @default false */
   shouldFocusOnMount?: boolean;
-  maxLength?: number;
-  tabIndex?: number;
+  /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange(value: string, event: FormEvent<HTMLInputElement>): void;
-  onFocus?(event: FocusEvent<HTMLInputElement>): void;
-  onBlur?(event: FocusEvent<HTMLInputElement>): void;
-  onPaste?(event: ClipboardEvent<HTMLInputElement>): void;
-  onIconClick?(): void;
-  onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
+  onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
+  onIconClick?: () => void;
 }
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(
@@ -97,7 +92,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       placeholder,
       type = 'text',
       isDisabled,
-      isReadonly,
+      isReadonly = false,
       hasFloatingLabel = true,
       isInvalid = false,
       isActive = false,
@@ -107,32 +102,28 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       errorPosition = 'bottom',
       inlineStyle,
       border,
-      isRequired,
-      isLoading,
-      isAutoSizeable,
+      isRequired = false,
+      isLoading = false,
+      isAutoSizeable = false,
       defaultSize = DEFAULT_SIZE,
       iconType,
-      name,
       hasRequiredLabel,
       data,
       tweakStyles,
-      maxLength,
-      shouldFocusOnMount,
+      shouldFocusOnMount = false,
       units,
       testId,
-      tabIndex,
       onChange,
-      onPaste,
       onFocus,
       onBlur,
       onIconClick,
-      onKeyDown,
       // Пропсы react-input-mask
       mask,
       maskPlaceholder,
       alwaysShowMask,
-      shouldAlwaysShowPlaceholder,
+      shouldAlwaysShowPlaceholder = false,
       beforeMaskedStateChange,
+      ...inputProps
     },
     ref,
   ) => {
@@ -181,6 +172,8 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const shouldShowUnits = (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
 
     const props: InputHTMLAttributes<HTMLInputElement> = {
+      ...inputProps,
+      ...addDataTestId(testId),
       className: clsx(classes.input, {
         [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
         [classes.withIcons]: hasControls,
@@ -191,19 +184,13 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange,
-      onKeyDown,
-      onPaste,
       value,
       type,
       disabled: isDisabled,
       placeholder: hasPlaceholder ? placeholder : undefined,
-      name,
-      maxLength,
       autoFocus: shouldFocusOnMount,
       readOnly: isReadonly,
       size: isAutoSizeable ? defaultSize : undefined,
-      tabIndex,
-      ...addDataTestId(testId),
     };
 
     return (

package/src/components/Input/types.ts

@@ -1,6 +1,32 @@
+import { InputHTMLAttributes } from 'react';
 import { Props as ReactInputMaskBaseProps } from 'react-input-mask';
 
 export type IReactInputMaskProps = Pick<
   Partial<ReactInputMaskBaseProps>,
   'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'
 >;
+
+export type IInputHTMLBaseProps = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
+  | 'maxLength'
+  | 'name'
+  | 'tabIndex'
+  | 'placeholder'
+  | 'type'
+  | 'onBlur'
+  | 'onFocus'
+  | 'onInput'
+  | 'onKeyDown'
+  | 'onPaste'
+>;
+// Возможно это лучше заменить на
+// Omit< InputHTMLAttributes<HTMLInputElement>,
+// | 'className'
+// | 'value'
+// | 'onChange'
+// | 'disabled'
+// | 'required'
+// | 'autoFocus'
+// | 'readOnly'
+// | 'size'
+// >

package/src/components/List/List.tsx

@@ -7,7 +7,7 @@ import { useStyles, IListStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
-  onClick?(event: MouseEvent | KeyboardEvent): void;
+  onClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {

package/src/components/List/components/ListItem/ListItem.tsx

@@ -18,7 +18,7 @@ export interface IListItemProps extends ICommonProps<IListItemStyles> {
   shouldDrawSpacerAbove?: boolean;
   shouldDrawSpacerBelow?: boolean;
   withIconGap?: boolean;
-  onClick(event: MouseEvent | KeyboardEvent): void;
+  onClick: (event: MouseEvent | KeyboardEvent) => void;
 }
 
 export const ListItem: FC<IListItemProps> = ({

package/src/components/Modal/Modal.tsx

@@ -16,20 +16,30 @@ import { useStyles, IModalStyles } from './Modal.styles';
 
 export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
+  /** @default 'l */
   size?: 'l' | 'm' | 's';
+  /** @default false */
   isFooterSticky?: boolean;
   buttons?: ReactNode[];
+  /** @default 'right' */
   buttonsAlign?: 'left' | 'center' | 'right';
   children?: ReactNode | ReactNode[];
+  /** @default 'center' */
   position?: IModalPosition;
+  /** @default true */
   hasCloseButton?: boolean;
+  /** @default true */
   hasOverlay?: boolean;
+  /** @default true */
   shouldCloseOnOverlayClick?: boolean;
+  /** @default true */
   shouldCloseOnEsc?: boolean;
+  /** @default true */
   shouldBlockScroll?: boolean;
+  /** @default false */
   isOpen?: boolean;
   zIndex?: number;
-  onClose?(): void;
+  onClose?: () => void;
 }
 
 export const Modal: FC<IModalProps> = ({
@@ -37,7 +47,7 @@ export const Modal: FC<IModalProps> = ({
   tweakStyles,
   title,
   size = 'l',
-  isFooterSticky,
+  isFooterSticky = false,
   buttons,
   buttonsAlign = 'right',
   hasCloseButton = true,

package/src/components/MoreMenu/MoreMenu.tsx

@@ -10,18 +10,17 @@ import { useStyles, IMoreMenuStyles } from './MoreMenu.styles';
 
 export interface IMoreMenuProps extends ICommonProps<IMoreMenuStyles> {
   items: IListItem[];
+  /** @default false */
   isDisabled?: boolean;
-  /**
-   * @default true
-   */
+  /** @default true */
   hasDefaultStateBackground?: boolean;
-  onMenuOpen?(): void;
-  onMenuClose?(): void;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
 }
 
 export const MoreMenu: FC<IMoreMenuProps> = ({
   items,
-  isDisabled,
+  isDisabled = false,
   hasDefaultStateBackground = true,
   data,
   testId,

package/src/components/MultiSelect/MultiSelect.tsx

@@ -16,22 +16,27 @@ import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSel
 
 export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
   value?: IMultiSelectListValues<Value>;
+  /** @default 'full' */
   corners?: IHorizontalCornerConnection;
+  /** @default false */
   isInvalid?: boolean;
+  /** @default false */
   isRequired?: boolean;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default '' */
   placeholder?: string;
   localeKey?: IMultiSelectLocaleKey;
   locale?: IMultiSelectLocale;
-  onChange(value?: IMultiSelectListValues<Value>): void;
-  fetchOptions(value?: string, page?: number): Promise<Value[]>;
+  onChange: (value?: IMultiSelectListValues<Value>) => void;
+  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
 }
 
 export function MultiSelect<Value = string>({
   value,
   corners = 'full',
-  isInvalid,
-  isRequired,
+  isInvalid = false,
+  isRequired = false,
   isDisabled = false,
   placeholder = '',
   localeKey,

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -11,7 +11,7 @@ export interface IMultiSelectInputProps<Value>
   isOpen: boolean;
   isDisabled: boolean;
   placeholder: string;
-  onToggle(state: boolean): void;
+  onToggle: (state: boolean) => void;
 }
 
 export function MultiSelectInput<Value>({

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -21,6 +21,7 @@ import {
 
 export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
   value?: Value;
+  /** @default false */
   isSearchEnabled?: boolean;
   localeKey?: IMultiSelectLocaleKey;
   locale?: Partial<IMultiSelectLocale>;
@@ -31,7 +32,9 @@ export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMult
   getValueView?: (val: Option) => ReactNode;
   getValueId?: (val: Option) => string;
   getValueString?: (val: Option) => string;
+  /** @default по умолчанию значение совпадает с isSearchEnabled */
   isGroupingEnabled?: boolean;
+  /** @default 'left' */
   checkboxPosition?: 'left' | 'right';
   pageSize?: number;
   searchMaxLength?: number;

package/src/components/Notification/Notification.tsx

@@ -13,15 +13,11 @@ import { useStyles, INotificationStyles } from './Notification.styles';
 
 export interface INotificationProps extends ICommonProps<INotificationStyles> {
   type: INotificationType;
-  /**
-   * @default true
-   */
+  /** @default true */
   isFullWidth?: boolean;
   text?: string;
   title?: string;
-  /**
-   * @default `s`
-   */
+  /** @default 's' */
   size?: 's' | 'm' | 'l';
   children?: ReactNode;
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -14,14 +14,18 @@ import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from '.
 
 export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
   value?: number;
+  /** @default 3 */
   precision?: number;
+  /** @default 7 */
   intPartPrecision?: number;
   defaultValue?: number;
+  /** @default false */
   canBeFloat?: boolean;
+  /** @default false */
   canBeNegative?: boolean;
   min?: number;
   max?: number;
-  onChange(value: number | undefined, event?: FormEvent<HTMLInputElement>): void;
+  onChange: (value: number | undefined, event?: FormEvent<HTMLInputElement>) => void;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(

package/src/components/PhoneInput/PhoneInput.tsx

@@ -25,14 +25,18 @@ export interface IPhoneInputProps
       'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
     >,
     ICommonProps<IPhoneInputStyles> {
+  /** @default 'ru' */
   locale?: string;
+  /** @default 'Поиск' */
   codeSearchPlaceholder?: string;
+  /** @default 'Ничего не найдено' */
   noMatchesLabel?: string;
+  /** @default { phoneNumber: '', dialCode: '' } */
   value?: IPhoneValue;
-  onChange(
+  onChange: (
     phone: IPhoneValue,
     event: MouseEvent | KeyboardEvent | FormEvent<HTMLInputElement>,
-  ): void;
+  ) => void;
 }
 
 export const PhoneInput: FC<IPhoneInputProps> = ({

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -26,8 +26,8 @@ export interface IPhoneInputCountryListProps
   locale: string;
   placeholder: string;
   noMatchesLabel: string;
-  closeList(): void;
-  onChange(country: IPhoneInfo, event: MouseEvent | KeyboardEvent): void;
+  closeList: () => void;
+  onChange: (country: IPhoneInfo, event: MouseEvent | KeyboardEvent) => void;
 }
 
 export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({

package/src/components/RadioButton/RadioButton.tsx

@@ -10,9 +10,11 @@ export interface IRadioButtonProps<Value extends string> extends ICommonProps<IR
   value: Value;
   groupName: string;
   isChecked?: boolean;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default false */
   isInvalid?: boolean;
-  onChange(value: Value): void | Promise<void>;
+  onChange: (value: Value) => void | Promise<void>;
 }
 
 export function RadioButton<Value extends string>({
@@ -20,8 +22,8 @@ export function RadioButton<Value extends string>({
   value,
   groupName,
   isChecked,
-  isDisabled,
-  isInvalid,
+  isDisabled = false,
+  isInvalid = false,
   data,
   testId,
   tweakStyles,

package/src/components/Select/Select.tsx

@@ -45,39 +45,44 @@ export interface ISelectProps<Value>
   allOptionsLabel?: string;
   noMatchesLabel?: string;
   loadingLabel?: ReactNode;
+  /** @default 'normal' */
   optionsMode?: 'search' | 'dynamic' | 'normal';
+  /** @default 400 */
   debounceTime?: number;
+  /** @default 0 */
   minSymbolsCountToOpenList?: number;
   dropdownOptions?: IDropdownWithPopperOptions;
+  /** @default 'chevron-down' */
   dropdownIcon?: IIcon;
   options: Value[];
   value: Value | undefined;
+  /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: boolean;
   searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
-  isOptionDisabled?(option: Value): boolean;
-  onChange(value?: Value): void; // подумать как возвращать индекс
-  onBlur?(event: Event | SyntheticEvent): void;
-  onType?(value: string): Promise<void>;
-  optionsFilter?(options: Value[], query: string): Value[];
-  onOpen?(): void;
-  compareValuesOnChange?(v1?: Value, v2?: Value): boolean;
+  isOptionDisabled?: (option: Value) => boolean;
+  onChange: (value?: Value) => void; // подумать как возвращать индекс
+  onBlur?: (event: Event | SyntheticEvent) => void;
+  onType?: (value: string) => Promise<void>;
+  optionsFilter?: (options: Value[], query: string) => Value[];
+  onOpen?: () => void;
+  compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
-  convertValueToString?(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId?(value: Value): string | undefined;
+  convertValueToString?: (value: Value) => string | undefined;
+  convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
+  convertValueToId?: (value: Value) => string | undefined;
 }
 
 export interface IMultipleSelectProps<Value>
   extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
-  onChange(value?: IMultipleSelectValue<Value>): void;
-  compareValuesOnChange?(
+  onChange: (value?: IMultipleSelectValue<Value>) => void;
+  compareValuesOnChange?: (
     v1?: IMultipleSelectValue<Value>,
     v2?: IMultipleSelectValue<Value>,
-  ): boolean;
+  ) => boolean;
 }
 
 export function Select<Value>(

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -25,12 +25,12 @@ export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
   customListHeader?: ReactNode;
-  onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
-  onToggleCheckbox?(index: number, isSelected: boolean): void;
-  isOptionDisabled(value: Value): boolean;
-  convertValueToString(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId(value: Value): string | undefined;
+  onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
+  onToggleCheckbox?: (index: number, isSelected: boolean) => void;
+  isOptionDisabled: (value: Value) => boolean;
+  convertValueToString: (value: Value) => string | undefined;
+  convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
+  convertValueToId: (value: Value) => string | undefined;
 }
 
 export function SelectList<Value>({

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -15,8 +15,8 @@ export interface ISelectListItemProps {
   isFocused?: boolean;
   children: ReactNode;
   classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
-  onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
-  onToggleCheckbox?(index: number, isSelected: boolean): void;
+  onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
+  onToggleCheckbox?: (index: number, isSelected: boolean) => void;
 }
 
 export const SelectListItem: FC<ISelectListItemProps> = ({

package/src/components/SmartInput/SmartInput.tsx

@@ -5,7 +5,9 @@ import { transformCaseSensitive } from './helpers';
 import { ISmartType } from './types';
 
 export interface ISmartInputProps extends IInputProps {
+  /** @default false */
   isUpperCase?: boolean;
+  /** @default 'default' */
   smartType?: ISmartType;
   regExp?: RegExp;
   onChange: (value: string) => void;
@@ -13,7 +15,15 @@ export interface ISmartInputProps extends IInputProps {
 
 export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
   (
-    { onChange, isUpperCase, smartType = 'default', regExp, value = '', maxLength, ...rest },
+    {
+      onChange,
+      isUpperCase = false,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
     ref,
   ) => {
     const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));

package/src/components/Switch/Switch.tsx

@@ -9,24 +9,23 @@ import { useStyles, ISwitchStyles } from './Switch.styles';
 export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
   children?: ReactNode;
   value: V;
+  /** @default false */
   isChecked: boolean | undefined;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default false */
   isInvalid?: boolean;
-  /**
-   * @default `right`
-   */
+  /** @default 'right' */
   labelPosition?: 'left' | 'right';
-  /**
-   * @default `primary`
-   */
+  /** @default 'primary' */
   color?: 'primary' | 'secondary';
-  onChange(state: ISwitchState<V>): void;
+  onChange: (state: ISwitchState<V>) => void;
 }
 
 export const Switch = <V extends string>({
-  isDisabled,
+  isDisabled = false,
   isChecked = false,
-  isInvalid,
+  isInvalid = false,
   value,
   children,
   labelPosition = 'right',

package/src/components/TextArea/TextArea.tsx

@@ -17,24 +17,33 @@ export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
   value?: string;
   label?: string;
   placeholder?: string;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default true */
   hasFloatingLabel?: boolean;
+  /** @default false */
   isInvalid?: boolean;
+  /** @default false */
   isActive?: boolean;
   infoMessage?: string;
   errorMessage?: string;
+  /** @default false */
   isRequired?: boolean;
   name?: string;
+  /** @default false */
   hasRequiredLabel?: boolean;
+  /** @default false */
   shouldFocusOnMount?: boolean;
+  /** @default true */
   hasCounter?: boolean;
+  /** @default false */
   shouldTrimAfterMaxLength?: boolean;
   maxLength?: number;
   rows?: number;
-  onChange(value: string, event?: FormEvent<HTMLTextAreaElement>): void;
-  onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
-  onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
-  onPaste?(event: ClipboardEvent<HTMLTextAreaElement>): void;
+  onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
 }
 
 const DEFAULT_VALUE = '';
@@ -49,10 +58,10 @@ export const TextArea: FC<ITextAreaProps> = ({
   isActive = false,
   infoMessage,
   errorMessage,
-  isRequired,
+  isRequired = false,
   name,
-  hasRequiredLabel,
-  shouldFocusOnMount,
+  hasRequiredLabel = false,
+  shouldFocusOnMount = false,
   hasCounter = true,
   shouldTrimAfterMaxLength = false,
   maxLength,

package/src/components/TextButton/TextButton.tsx

@@ -31,7 +31,7 @@ export interface ITextButtonProps
   size?: 'l' | 'xl';
   /** @default 'left' */
   iconPosition?: 'left' | 'right';
-  /** @default `dots` */
+  /** @default 'dots' */
   preloaderType?: IThemedPreloaderProps['type'];
 }