@alfalab/core-components-international-phone-input 1.3.3 → 2.0.0

package/src/components/base-international-phone-input/Component.tsx

@@ -1,4 +1,12 @@
-import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+    ChangeEvent,
+    forwardRef,
+    MouseEvent,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
@@ -37,7 +45,7 @@ export const BaseInternationalPhoneInput = forwardRef<
             defaultIso2,
             disabled,
             options,
-            size = 'm',
+            size = 56,
             Input,
             InputAutocomplete,
             SelectComponent,
@@ -69,17 +77,17 @@ export const BaseInternationalPhoneInput = forwardRef<
 
         const maskRef = useMaskito({ options: maskOptions });
 
-        const changeNumber = (e: ChangeEvent<HTMLInputElement> | null, phone: string) => {
-            onChange?.(e, { value: phone });
+        const changeNumber = (phone: string) => {
+            onChange?.(phone);
         };
 
-        const updatePhoneData = (phone: string, e: ChangeEvent<HTMLInputElement> | null) => {
+        const updatePhoneData = (phone: string) => {
             const { nextCountry, nextPhone } = getPhoneData(phone, countriesData, defaultIso2);
 
             if (nextCountry !== country) {
                 handleCountryChange?.(nextCountry);
             }
-            changeNumber(e, nextPhone);
+            changeNumber(nextPhone);
         };
 
         const handleSelectCountry = ({ selected }: BaseSelectChangePayload) => {
@@ -88,7 +96,7 @@ export const BaseInternationalPhoneInput = forwardRef<
             handleCountryChange?.(nextCountry);
 
             if (nextCountry) {
-                changeNumber(null, `+${nextCountry.dialCode}`);
+                changeNumber(`+${nextCountry.dialCode}`);
             }
 
             requestAnimationFrame(() => inputRef.current?.focus());
@@ -100,20 +108,19 @@ export const BaseInternationalPhoneInput = forwardRef<
                     typeof payload === 'string' ? payload : payload.selected?.key || '',
                     maskOptions,
                 ),
-                null,
             );
         };
 
         const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-            updatePhoneData(e.target.value, e);
+            updatePhoneData(e.target.value);
         };
 
-        const handleClear = () => {
-            if (clearableCountryCode) {
-                changeNumber(null, '');
-            } else {
-                changeNumber(null, `+${country?.countryCode}` || '');
-            }
+        const handleClear = (event: MouseEvent<HTMLButtonElement>) => {
+            restProps.inputProps?.onClear?.(event);
+
+            const countryCode = country?.countryCode || '';
+
+            changeNumber(clearableCountryCode ? '' : `+${countryCode}`);
         };
 
         useEffect(() => {
@@ -121,7 +128,7 @@ export const BaseInternationalPhoneInput = forwardRef<
                 const newValue = maskitoTransform(value, maskOptions);
 
                 if (value !== newValue) {
-                    updatePhoneData(newValue, null);
+                    updatePhoneData(newValue);
                 }
             }
             // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -161,7 +168,7 @@ export const BaseInternationalPhoneInput = forwardRef<
                 options={filteredOptions}
                 value={value}
                 onChange={handleOptionSelect}
-                onInput={(event, { value: phone }) => updatePhoneData(phone, event)}
+                onInput={(phone) => updatePhoneData(phone)}
                 inputProps={{
                     ...inputProps,
                     onClear: handleClear,

package/src/components/select-field/component.tsx

@@ -15,7 +15,22 @@ export const EMPTY_COUNTRY_SELECT_FIELD = {
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
 
-export const SelectField: FC<FieldProps> = ({
+type SelectFieldProps = FieldProps & {
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+};
+
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+
+export const SelectField: FC<SelectFieldProps> = ({
     selected,
     Arrow,
     size,
@@ -31,7 +46,7 @@ export const SelectField: FC<FieldProps> = ({
     return (
         <div
             ref={ref}
-            className={cn(styles.component, size && styles[size], {
+            className={cn(styles.component, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {
                 [styles.focusVisible]: focusVisible,
                 [styles.disabled]: disabled,
             })}

package/src/components/select-field/index.module.css

@@ -33,8 +33,8 @@
     outline: none;
 }
 
-.l .inner,
-.xl .inner {
+.size-64 .inner,
+.size-72 .inner {
     padding-left: var(--gap-m);
 }
 

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, ElementType, FC } from 'react';
+import type { ElementType, FC } from 'react';
 import { FocusEvent } from 'react';
 
 import type { InputProps } from '@alfalab/core-components-input';
@@ -71,7 +71,7 @@ type CommonPhoneInputProps = {
     /**
      *  Обработчик изменения номера
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: { value: string }) => void;
+    onChange?: (phone: string) => void;
 
     /**
      * Обработчик блюра поля

package/types.d.ts

@@ -1,11 +1,11 @@
-import { ChangeEvent, ElementType, FC, FocusEvent } from 'react';
+import { ElementType, FC, FocusEvent } from 'react';
 import { InputProps } from "@alfalab/core-components-input";
 import { InputDesktopProps } from "@alfalab/core-components-input/desktop";
 import { InputMobileProps } from "@alfalab/core-components-input/mobile";
 import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
-import { OptionShape } from "./typings-c29389e5";
+import { OptionShape } from "./typings-70284312";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 type Country = {
     name: string;
@@ -57,9 +57,7 @@ type CommonPhoneInputProps = {
     /**
      *  Обработчик изменения номера
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void;
+    onChange?: (phone: string) => void;
     /**
      * Обработчик блюра поля
      */

package/{esm/typings-c241b310.d.ts → typings-61e2321e.d.ts}

@@ -37,9 +37,10 @@ type ComponentProps = {
     rightAddons?: ReactNode;
     /**
      * Размер компонента
-     * @default m
+     * @default 56
+     * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 32 | 40 | 48 | 56 | 64 | 72;
     /**
      * Растягивает компонент на ширину контейнера
      * @default false

package/{typings-c29389e5.d.ts → typings-70284312.d.ts}

@@ -10,15 +10,15 @@ import { CSSTransitionProps } from "react-transition-group/CSSTransition";
 import { BasePlacement, VariationPlacement } from "@popperjs/core";
 import { SwipeableHandlers } from "react-swipeable";
 import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
-import { ButtonProps } from "./index-c241b310";
-import { ContentProps } from "./typings-8a2a8ad1";
-import { ModalResponsiveProps as ModalProps } from "./typings-8a2a8ad1";
+import { ButtonProps } from "./index-61e2321e";
+import { ContentProps } from "./typings-88b743b5";
+import { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
 import { InputProps } from "@alfalab/core-components-input";
 interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Текст после иконки
      */
-    text?: string;
+    text?: string | null;
     /**
      * Дополнительный класс
      */
@@ -512,7 +512,7 @@ interface ControlsProps {
     gap?: 16 | 24 | 32;
 }
 declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
@@ -521,7 +521,7 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-b
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<HeaderProps>;
-    Content: React.FC<import("./typings-8a2a8ad1").ContentProps>;
+    Content: React.FC<import("./typings-88b743b5").ContentProps>;
     Footer: React.FC<FooterProps>;
     Controls: React.FC<ControlsProps>;
 };
@@ -879,7 +879,7 @@ declare const IconButton: React.ForwardRefExoticComponent<{
         className?: string;
     }> | ReactElement;
     view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
-    size?: "s" | "xs" | 24 | 32 | 40 | 48 | "xxs" | 56 | undefined;
+    size?: "s" | "xs" | 48 | 56 | 24 | 32 | 40 | "xxs" | undefined;
     className?: string | undefined;
     alignIcon?: "center" | "right" | "left" | undefined;
     dataTestId?: string | undefined;
@@ -1029,12 +1029,14 @@ type BaseSelectProps = {
     multiple?: boolean;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Размер пунктов меню
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    optionsSize?: 's' | 'm' | 'l' | 'xl';
+    optionsSize?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -1299,8 +1301,9 @@ type OptionsListProps = {
     scrollbarClassName?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Компонент пункта меню
      */
@@ -1402,8 +1405,9 @@ type OptgroupProps = {
     className?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Заголовок группы
      */
@@ -1420,8 +1424,9 @@ type OptionProps = {
     className?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Контент пункта меню
      */
@@ -1579,8 +1584,8 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
 };
 export { BottomSheet, CLOSE_OFFSET, HEADER_OFFSET, FormControlProps, FormControl, ModalResponsive as Modal, ModalContext, getModalTestIds, Position, PopoverProps, Popover, FooterProps$0 as FooterProps, Footer$0 as Footer, HeaderProps$0 as HeaderProps, Header$0 as Header, SwipeableBackdropProps, SwipeableBackdrop, Typography, typographyPresets, TitleResponsive, getDefaultWeight, IconButtonProps, IconButton, Content, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };
 export type { BottomSheetProps, BottomSheetTitleAlign, HeaderProps as ModalHeaderProps, FooterProps as ModalFooterProps, TitleProps, TextProps, Color };
-export { ModalResponsiveProps as ModalProps } from "./typings-8a2a8ad1";
-export type { ContentProps as ModalContentProps } from "./typings-8a2a8ad1";
+export { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
+export type { ContentProps as ModalContentProps } from "./typings-88b743b5";
 export * from "./use-skeleton-1328ead9";
 export * from "./Component.desktop-ebda875c";
 export * from "./Component.mobile-ebda875c";

package/{typings-8a2a8ad1.d.ts → typings-88b743b5.d.ts}

@@ -3,9 +3,10 @@ import { BaseModalProps } from "./index-bdb4c6b9";
 type ModalDesktopProps = BaseModalProps & {
     /**
      * Ширина модального окна
-     * @default "m"
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
     /**
      * Растягивает модальное окно на весь экран
      * @deprecated Используйте размер fullscreen

package/utils-89376c31.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-c29389e5";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-70284312";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/consts-f777ba1a.d.ts

@@ -1,2 +0,0 @@
-declare const DEFAULT_VISIBLE_OPTIONS = 5;
-export { DEFAULT_VISIBLE_OPTIONS };

package/cssm/consts-f777ba1a.d.ts

@@ -1,2 +0,0 @@
-declare const DEFAULT_VISIBLE_OPTIONS = 5;
-export { DEFAULT_VISIBLE_OPTIONS };

package/esm/consts-f777ba1a.d.ts

@@ -1,2 +0,0 @@
-declare const DEFAULT_VISIBLE_OPTIONS = 5;
-export { DEFAULT_VISIBLE_OPTIONS };

package/modern/consts-f777ba1a.d.ts

@@ -1,2 +0,0 @@
-declare const DEFAULT_VISIBLE_OPTIONS = 5;
-export { DEFAULT_VISIBLE_OPTIONS };