@alfalab/core-components 48.8.0-beta.0 → 48.8.0

package/select/components/field/Component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select__component_kthbq","field":"select__field_kthbq","disabled":"select__disabled_kthbq","arrow":"select__arrow_kthbq","placeholder":"select__placeholder_kthbq","show-placeholder":"select__show-placeholder_kthbq","focused":"select__focused_kthbq","contentWrapper":"select__contentWrapper_kthbq","value":"select__value_kthbq","focusVisible":"select__focusVisible_kthbq"};
+var styles = {"component":"select__component_kthbq","field":"select__field_kthbq","disabled":"select__disabled_kthbq","arrow":"select__arrow_kthbq","placeholder":"select__placeholder_kthbq","show-placeholder":"select__show-placeholder_kthbq","focused":"select__focused_kthbq","contentWrapper":"select__contentWrapper_kthbq","size-40":"select__size-40_kthbq","value":"select__value_kthbq","focusVisible":"select__focusVisible_kthbq"};
 require('./index.css');
 
 var Field = function (_a) {
@@ -33,15 +33,15 @@ var Field = function (_a) {
             _b[styles.focusVisible] = focusVisible,
             _b)), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: (Arrow || rightAddons) && (React__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
-            clear && filled ? (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })) : null,
+            clear && filled ? (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })) : null,
             Arrow
                 ? React__default.default.cloneElement(Arrow, { className: styles.arrow })
                 : null)), "data-test-id": dataTestId }, restProps, innerProps),
-        React__default.default.createElement("div", { className: styles.contentWrapper },
+        React__default.default.createElement("div", { className: cn__default.default(styles.contentWrapper, styles["size-".concat(size)]) },
             showPlaceholder && (React__default.default.createElement("span", { className: cn__default.default(styles.placeholder, (_c = {},
                     _c[styles.focused] = focused || open,
                     _c)) }, placeholder)),
-            filled && React__default.default.createElement("div", { className: styles.value }, value)))) : null));
+            filled && (React__default.default.createElement("div", { className: cn__default.default(styles.value, styles["size-".concat(size)]) }, value))))) : null));
 };
 
 exports.Field = Field;

package/select/components/field/index.css

@@ -69,12 +69,20 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100%;
-} .select__value_kthbq {
+    width: 100%
+} .select__contentWrapper_kthbq.select__size-40_kthbq {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    } .select__value_kthbq {
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left;
-} .select__focusVisible_kthbq {
+    text-align: left
+} .select__value_kthbq.select__size-40_kthbq {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    } .select__focusVisible_kthbq {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } @keyframes select__show-placeholder_kthbq {

package/select/consts.d.ts

@@ -4,6 +4,7 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     m: string;
     l: string;
     xl: string;
+    40: string;
     48: string;
     56: string;
     64: string;

package/select/consts.js

@@ -6,6 +6,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',

package/select/cssm/components/arrow/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { ArrowProps } from "../../typings";
-declare const Arrow: ({ open, disabled, className }: ArrowProps) => React.JSX.Element;
+declare const Arrow: ({ open, disabled, className, size }: ArrowProps) => React.JSX.Element;
 export { Arrow };

package/select/cssm/components/arrow/Component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
+var ChevronDownSIcon = require('@alfalab/icons-glyph/ChevronDownSIcon');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -13,8 +14,9 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Arrow = function (_a) {
     var _b;
-    var open = _a.open, disabled = _a.disabled, className = _a.className;
-    return (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, { className: cn__default.default(styles__default.default.arrow, className, (_b = {},
+    var open = _a.open, disabled = _a.disabled, className = _a.className, size = _a.size;
+    var ChevronComponent = size === 40 ? ChevronDownSIcon.ChevronDownSIcon : ChevronDownMIcon.ChevronDownMIcon;
+    return (React__default.default.createElement(ChevronComponent, { className: cn__default.default(styles__default.default.arrow, styles__default.default["size-".concat(size)], className, (_b = {},
             _b[styles__default.default.open] = open,
             _b[styles__default.default.disabled] = disabled,
             _b)) }));

package/select/cssm/components/arrow/index.module.css

@@ -40,6 +40,9 @@
     transition: transform 0.15s ease-in-out, opacity 0.2s ease
 } .arrow.disabled {
         color: var(--select-arrow-disabled-color);
+    } .arrow.size-40 {
+        width: unset;
+        height: unset;
     } .open {
     transform: var(--arrow-transform);
 }

package/select/cssm/components/base-select/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 declare const BaseSelect: React.ForwardRefExoticComponent<import("../../typings").BaseSelectProps & import("../../typings").AdditionalMobileProps & import("../../typings").BottomSheetSelectMobileProps & import("../../typings").ModalSelectMobileProps & {
     isBottomSheet?: boolean | undefined;
     view: "desktop" | "mobile";
-    Popover?: React.ForwardRefExoticComponent<import("../../../../popover").PopoverProps<HTMLElement> & React.RefAttributes<HTMLDivElement>> | undefined;
+    Popover?: React.ForwardRefExoticComponent<import("../../../../popover").PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
     BottomSheet?: React.ForwardRefExoticComponent<import("../../../../bottom-sheet").BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
     ModalMobile?: (React.ForwardRefExoticComponent<import("./types/component-types").ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
         Header: React.FC<import("../../../../modal/shared").ModalHeaderProps>;

package/select/cssm/components/base-select/Component.js

@@ -404,7 +404,7 @@ function (props, ref) {
     };
     return (React__default.default.createElement("div", tslib.__assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn__default.default(styles__default.default.component, (_a = {}, _a[styles__default.default.block] = block, _a), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
-        React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
+        React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open, size: size, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
                 onBlur: handleFieldBlur,
                 onFocus: disabled ? undefined : handleFieldFocus,
                 onClick: disabled ? undefined : handleFieldClick,
@@ -418,7 +418,7 @@ function (props, ref) {
                     : undefined,
             }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
-        view === 'desktop' && !nativeSelect && (React__default.default.createElement(components_baseSelect_components_listDesktop_listPopoverDesktop.ListPopoverDesktop, tslib.__assign({}, components_baseSelect_components_listDesktop_helpers_getListPopoverDesktopProps.getListPopoverDesktopProps(props), { open: open, anchorElement: fieldRef, renderOptionsList: renderOptionsList }))),
+        view === 'desktop' && !nativeSelect && (React__default.default.createElement(components_baseSelect_components_listDesktop_listPopoverDesktop.ListPopoverDesktop, tslib.__assign({}, components_baseSelect_components_listDesktop_helpers_getListPopoverDesktopProps.getListPopoverDesktopProps(props), { open: open, fieldRef: fieldRef, renderOptionsList: renderOptionsList }))),
         view === 'mobile' && (React__default.default.createElement(components_baseSelect_components_listMobile_listMobile.ListMobile, { baseProps: isBottomSheet
                 ? components_baseSelect_components_listMobile_helpers_getListBottomSheetMobileProps.getListBottomSheetMobileProps(props)
                 : components_baseSelect_components_listMobile_helpers_getListModalMobileProps.getListModalMobileProps(props), open: open, menuRef: menuRef, scrollableContainerRef: scrollableContainerRef, flatOptions: flatOptions, renderOptionsList: renderOptionsList, renderSearch: renderSearch, closeMenu: closeMenu, handleEntered: handleEntered }))));

package/select/cssm/components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../../types/component-types";
 declare const getListPopoverDesktopProps: (props: ComponentProps) => {
-    Popover: import("react").ForwardRefExoticComponent<import("../../../../../../../popover").PopoverProps<HTMLElement> & import("react").RefAttributes<HTMLDivElement>> | undefined;
-    popoverProps: Omit<import("../../../../../../../popover").PopoverProps<HTMLElement>, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "zIndex" | "update"> | undefined;
-    popoverPosition: import("@floating-ui/react-dom").Placement;
+    Popover: import("react").ForwardRefExoticComponent<import("../../../../../../../popover").PopoverProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    popoverProps: Omit<import("../../../../../../../popover").PopoverProps, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "update" | "zIndex"> | undefined;
+    popoverPosition: import("../../../../../../../popover").Position;
     preventFlip: boolean;
     popperClassName: string | undefined;
     updatePopover: import("react").MutableRefObject<(() => void) | undefined> | undefined;

package/select/cssm/components/base-select/components/list-desktop/list-popover-desktop.d.ts

@@ -1,8 +1,9 @@
-import { FC, ReactNode } from 'react';
-import { PopoverProps } from "../../../../../../popover";
+import { FC, ReactNode, RefObject } from 'react';
 import { ListPopoverDesktopRestProps } from "./types/types";
-interface ListPopoverDesktopProps extends ListPopoverDesktopRestProps, Pick<PopoverProps, 'open' | 'anchorElement'> {
+type ListPopoverDesktopProps = {
+    open: boolean;
+    fieldRef: RefObject<HTMLInputElement>;
     renderOptionsList: () => ReactNode;
-}
+} & ListPopoverDesktopRestProps;
 declare const ListPopoverDesktop: FC<ListPopoverDesktopProps>;
 export { ListPopoverDesktop };

package/select/cssm/components/base-select/components/list-desktop/list-popover-desktop.js

@@ -12,9 +12,9 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var ListPopoverDesktop = function (props) {
-    var Popover = props.Popover, open = props.open, popoverProps = props.popoverProps, anchorElement = props.anchorElement, _a = props.popoverPosition, popoverPosition = _a === void 0 ? 'bottom-start' : _a, _b = props.preventFlip, preventFlip = _b === void 0 ? true : _b, popperClassName = props.popperClassName, updatePopover = props.updatePopover, zIndexPopover = props.zIndexPopover, renderOptionsList = props.renderOptionsList;
+    var Popover = props.Popover, open = props.open, popoverProps = props.popoverProps, fieldRef = props.fieldRef, _a = props.popoverPosition, popoverPosition = _a === void 0 ? 'bottom-start' : _a, _b = props.preventFlip, preventFlip = _b === void 0 ? true : _b, popperClassName = props.popperClassName, updatePopover = props.updatePopover, zIndexPopover = props.zIndexPopover, renderOptionsList = props.renderOptionsList;
     if (Popover) {
-        return (React__default.default.createElement(Popover, tslib.__assign({}, popoverProps, { open: open, withTransition: false, anchorElement: anchorElement, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }), renderOptionsList()));
+        return (React__default.default.createElement(Popover, tslib.__assign({}, popoverProps, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }), renderOptionsList()));
     }
     return null;
 };

package/select/cssm/components/clear-button/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { ClearButtonProps } from "../../typings";
-declare const ClearButton: ({ disabled, onClick, dataTestId }: ClearButtonProps) => React.JSX.Element;
+declare const ClearButton: ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => React.JSX.Element;
 export { ClearButton };

package/select/cssm/components/clear-button/Component.js

@@ -1,19 +1,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');
 var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+var CrossCircleSIcon = require('@alfalab/icons-glyph/CrossCircleSIcon');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var ClearButton = function (_a) {
-    var disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles__default.default.clearButton, onClick: onClick, tabIndex: -1, dataTestId: dataTestId },
-        React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: styles__default.default.clearIcon })));
+    var disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId, size = _a.size;
+    var IconComponent = size === 40 ? CrossCircleSIcon.CrossCircleSIcon : CrossCircleMIcon.CrossCircleMIcon;
+    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: cn__default.default(styles__default.default.clearButton, styles__default.default["size-".concat(size)]), onClick: onClick, tabIndex: -1, dataTestId: dataTestId },
+        React__default.default.createElement(IconComponent, { className: styles__default.default.clearIcon })));
 };
 
 exports.ClearButton = ClearButton;

package/select/cssm/components/clear-button/index.module.css

@@ -54,4 +54,6 @@
     display: var(--input-error-icon-display);
 } .clearButton + * {
     margin-left: var(--gap-4);
-}
+} .clearButton.size-40 + * {
+            margin-left: 6px;
+        }

package/select/cssm/components/field/Component.js

@@ -32,15 +32,15 @@ var Field = function (_a) {
             _b[styles__default.default.focusVisible] = focusVisible,
             _b)), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: (Arrow || rightAddons) && (React__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
-            clear && filled ? (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })) : null,
+            clear && filled ? (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })) : null,
             Arrow
                 ? React__default.default.cloneElement(Arrow, { className: styles__default.default.arrow })
                 : null)), "data-test-id": dataTestId }, restProps, innerProps),
-        React__default.default.createElement("div", { className: styles__default.default.contentWrapper },
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.contentWrapper, styles__default.default["size-".concat(size)]) },
             showPlaceholder && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.placeholder, (_c = {},
                     _c[styles__default.default.focused] = focused || open,
                     _c)) }, placeholder)),
-            filled && React__default.default.createElement("div", { className: styles__default.default.value }, value)))) : null));
+            filled && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.value, styles__default.default["size-".concat(size)]) }, value))))) : null));
 };
 
 exports.Field = Field;

package/select/cssm/components/field/index.module.css

@@ -68,12 +68,20 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100%;
-} .value {
+    width: 100%
+} .contentWrapper.size-40 {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    } .value {
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left;
-} .focusVisible {
+    text-align: left
+} .value.size-40 {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    } .focusVisible {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } @keyframes show-placeholder {

package/select/cssm/consts.d.ts

@@ -4,6 +4,7 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     m: string;
     l: string;
     xl: string;
+    40: string;
     48: string;
     56: string;
     64: string;

package/select/cssm/consts.js

@@ -6,6 +6,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',

package/select/cssm/typings.d.ts

@@ -110,12 +110,12 @@ type BaseSelectProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Размер пунктов меню
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    optionsSize?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    optionsSize?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -390,6 +390,11 @@ type ArrowProps = {
      * Флаг блокировки select'а
      */
     disabled?: boolean;
+    /**
+     * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
+     */
+    size?: BaseSelectProps['size'];
 };
 type OptionsListProps = {
     /**
@@ -412,7 +417,7 @@ type OptionsListProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Компонент пункта меню
      */
@@ -532,7 +537,7 @@ type OptgroupProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Заголовок группы
      */
@@ -571,7 +576,7 @@ type OptionProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Контент пункта меню
      */
@@ -757,5 +762,10 @@ type ClearButtonProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
+     */
+    size?: FormControlProps['size'];
 };
 export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };

package/select/esm/Component.responsive.js

@@ -9,6 +9,7 @@ import '../../popover/esm';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
 import './components/base-select/Component.js';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
@@ -19,17 +20,18 @@ import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
 import './components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import './list-popover-desktop-9e6592fe.js';
+import './list-popover-desktop-3f111509.js';
 import './components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import './components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import './components/base-select/components/list-mobile/list-mobile.js';
 import './components/base-select/components/list-mobile/list-bottom-sheet-mobile.js';
-import './mobile.module-a8e356c7.js';
+import './mobile.module-8b1bdca7.js';
 import './components/base-select/components/list-mobile/list-modal-mobile.js';
 import './components/field/Component.js';
 import './components/clear-button/Component.js';
 import '../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import './components/optgroup/Component.js';
 import './consts.js';
 import './components/option/Component.js';
@@ -52,7 +54,7 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-30e0cad9.js';
+import './hook-1ba9fd0a.js';
 import 'react-fast-compare';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';

package/select/esm/components/arrow/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { ArrowProps } from "../../typings";
-declare const Arrow: ({ open, disabled, className }: ArrowProps) => React.JSX.Element;
+declare const Arrow: ({ open, disabled, className, size }: ArrowProps) => React.JSX.Element;
 export { Arrow };

package/select/esm/components/arrow/Component.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
+import { ChevronDownSIcon } from '@alfalab/icons-glyph/ChevronDownSIcon';
 
-var styles = {"arrow":"select__arrow_1ixfi","disabled":"select__disabled_1ixfi","open":"select__open_1ixfi"};
+var styles = {"arrow":"select__arrow_1ixfi","disabled":"select__disabled_1ixfi","size-40":"select__size-40_1ixfi","open":"select__open_1ixfi"};
 require('./index.css');
 
 var Arrow = function (_a) {
     var _b;
-    var open = _a.open, disabled = _a.disabled, className = _a.className;
-    return (React.createElement(ChevronDownMIcon, { className: cn(styles.arrow, className, (_b = {},
+    var open = _a.open, disabled = _a.disabled, className = _a.className, size = _a.size;
+    var ChevronComponent = size === 40 ? ChevronDownSIcon : ChevronDownMIcon;
+    return (React.createElement(ChevronComponent, { className: cn(styles.arrow, styles["size-".concat(size)], className, (_b = {},
             _b[styles.open] = open,
             _b[styles.disabled] = disabled,
             _b)) }));

package/select/esm/components/arrow/index.css

@@ -41,6 +41,9 @@
     transition: transform 0.15s ease-in-out, opacity 0.2s ease
 } .select__arrow_1ixfi.select__disabled_1ixfi {
         color: var(--select-arrow-disabled-color);
+    } .select__arrow_1ixfi.select__size-40_1ixfi {
+        width: unset;
+        height: unset;
     } .select__open_1ixfi {
     transform: var(--arrow-transform);
 }

package/select/esm/components/arrow/index.js

@@ -2,3 +2,4 @@ export { Arrow } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';

package/select/esm/components/base-select/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 declare const BaseSelect: React.ForwardRefExoticComponent<import("../../typings").BaseSelectProps & import("../../typings").AdditionalMobileProps & import("../../typings").BottomSheetSelectMobileProps & import("../../typings").ModalSelectMobileProps & {
     isBottomSheet?: boolean | undefined;
     view: "desktop" | "mobile";
-    Popover?: React.ForwardRefExoticComponent<import("../../../../popover").PopoverProps<HTMLElement> & React.RefAttributes<HTMLDivElement>> | undefined;
+    Popover?: React.ForwardRefExoticComponent<import("../../../../popover").PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
     BottomSheet?: React.ForwardRefExoticComponent<import("../../../../bottom-sheet").BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
     ModalMobile?: (React.ForwardRefExoticComponent<import("./types/component-types").ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
         Header: React.FC<import("../../../../modal/shared").ModalHeaderProps>;

package/select/esm/components/base-select/Component.js

@@ -10,11 +10,11 @@ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 import { getListPopoverDesktopProps } from './components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import { s as styles, L as ListPopoverDesktop } from '../../list-popover-desktop-9e6592fe.js';
+import { s as styles, L as ListPopoverDesktop } from '../../list-popover-desktop-3f111509.js';
 import { getListModalMobileProps } from './components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import { getListBottomSheetMobileProps } from './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import { ListMobile } from './components/list-mobile/list-mobile.js';
-import { m as mobileStyles } from '../../mobile.module-a8e356c7.js';
+import { m as mobileStyles } from '../../mobile.module-8b1bdca7.js';
 import './components/list-mobile/list-bottom-sheet-mobile.js';
 import './components/list-mobile/list-modal-mobile.js';
 
@@ -395,7 +395,7 @@ function (props, ref) {
     };
     return (React.createElement("div", __assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, (_a = {}, _a[styles.block] = block, _a), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
-        React.createElement(Field, __assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
+        React.createElement(Field, __assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open, size: size, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
                 onBlur: handleFieldBlur,
                 onFocus: disabled ? undefined : handleFieldFocus,
                 onClick: disabled ? undefined : handleFieldClick,
@@ -409,7 +409,7 @@ function (props, ref) {
                     : undefined,
             }, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
-        view === 'desktop' && !nativeSelect && (React.createElement(ListPopoverDesktop, __assign({}, getListPopoverDesktopProps(props), { open: open, anchorElement: fieldRef, renderOptionsList: renderOptionsList }))),
+        view === 'desktop' && !nativeSelect && (React.createElement(ListPopoverDesktop, __assign({}, getListPopoverDesktopProps(props), { open: open, fieldRef: fieldRef, renderOptionsList: renderOptionsList }))),
         view === 'mobile' && (React.createElement(ListMobile, { baseProps: isBottomSheet
                 ? getListBottomSheetMobileProps(props)
                 : getListModalMobileProps(props), open: open, menuRef: menuRef, scrollableContainerRef: scrollableContainerRef, flatOptions: flatOptions, renderOptionsList: renderOptionsList, renderSearch: renderSearch, closeMenu: closeMenu, handleEntered: handleEntered }))));

package/select/esm/components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../../types/component-types";
 declare const getListPopoverDesktopProps: (props: ComponentProps) => {
-    Popover: import("react").ForwardRefExoticComponent<import("../../../../../../../popover").PopoverProps<HTMLElement> & import("react").RefAttributes<HTMLDivElement>> | undefined;
-    popoverProps: Omit<import("../../../../../../../popover").PopoverProps<HTMLElement>, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "zIndex" | "update"> | undefined;
-    popoverPosition: import("@floating-ui/react-dom").Placement;
+    Popover: import("react").ForwardRefExoticComponent<import("../../../../../../../popover").PopoverProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    popoverProps: Omit<import("../../../../../../../popover").PopoverProps, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "update" | "zIndex"> | undefined;
+    popoverPosition: import("../../../../../../../popover").Position;
     preventFlip: boolean;
     popperClassName: string | undefined;
     updatePopover: import("react").MutableRefObject<(() => void) | undefined> | undefined;

package/select/esm/components/base-select/components/list-desktop/list-popover-desktop.js

@@ -1,4 +1,4 @@
 import 'tslib';
 import 'react';
 import 'classnames';
-export { L as ListPopoverDesktop } from '../../../../list-popover-desktop-9e6592fe.js';
+export { L as ListPopoverDesktop } from '../../../../list-popover-desktop-3f111509.js';

package/select/esm/components/base-select/components/list-mobile/list-bottom-sheet-mobile.js

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { getDataTestId } from '../../../../../../shared/esm';
-import { m as mobileStyles } from '../../../../mobile.module-a8e356c7.js';
+import { m as mobileStyles } from '../../../../mobile.module-8b1bdca7.js';
 
 var ListBottomSheetMobile = function (props) {
     var BottomSheet = props.BottomSheet, dataTestId = props.dataTestId, open = props.open, label = props.label, placeholder = props.placeholder, footer = props.footer, swipeable = props.swipeable, showSearch = props.showSearch, bottomSheetProps = props.bottomSheetProps, menuRef = props.menuRef, scrollableContainerRef = props.scrollableContainerRef, onScroll = props.onScroll, flatOptions = props.flatOptions, closeMenu = props.closeMenu, handleEntered = props.handleEntered, renderSearch = props.renderSearch, renderOptionsList = props.renderOptionsList;

package/select/esm/components/base-select/components/list-mobile/list-mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { ListBottomSheetMobile } from './list-bottom-sheet-mobile.js';
 import { ListModalMobile } from './list-modal-mobile.js';
 import '../../../../../../shared/esm';
-import '../../../../mobile.module-a8e356c7.js';
+import '../../../../mobile.module-8b1bdca7.js';
 import 'react-merge-refs';
 import 'classnames';
 

package/select/esm/components/base-select/components/list-mobile/list-modal-mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../../../shared/esm';
-import { m as mobileStyles } from '../../../../mobile.module-a8e356c7.js';
+import { m as mobileStyles } from '../../../../mobile.module-8b1bdca7.js';
 
 var ListModalMobile = function (props) {
     var ModalMobile = props.ModalMobile, dataTestId = props.dataTestId, open = props.open, modalProps = props.modalProps, modalHeaderProps = props.modalHeaderProps, modalFooterProps = props.modalFooterProps, menuRef = props.menuRef, scrollableContainerRef = props.scrollableContainerRef, label = props.label, placeholder = props.placeholder, onScroll = props.onScroll, flatOptions = props.flatOptions, closeMenu = props.closeMenu, handleEntered = props.handleEntered, renderSearch = props.renderSearch, renderOptionsList = props.renderOptionsList;

package/select/esm/components/base-select/index.js

@@ -11,10 +11,10 @@ import '@alfalab/hooks';
 import '../../utils.js';
 import '../native-select/Component.js';
 import './components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import '../../list-popover-desktop-9e6592fe.js';
+import '../../list-popover-desktop-3f111509.js';
 import './components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import './components/list-mobile/list-mobile.js';
 import './components/list-mobile/list-bottom-sheet-mobile.js';
-import '../../mobile.module-a8e356c7.js';
+import '../../mobile.module-8b1bdca7.js';
 import './components/list-mobile/list-modal-mobile.js';

package/select/esm/components/clear-button/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { ClearButtonProps } from "../../typings";
-declare const ClearButton: ({ disabled, onClick, dataTestId }: ClearButtonProps) => React.JSX.Element;
+declare const ClearButton: ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => React.JSX.Element;
 export { ClearButton };

package/select/esm/components/clear-button/Component.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import cn from 'classnames';
 import { Button } from '../../../../button/esm';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
+import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
 
-var styles = {"clearIcon":"select__clearIcon_1epxr","clearButton":"select__clearButton_1epxr"};
+var styles = {"clearIcon":"select__clearIcon_1epxr","clearButton":"select__clearButton_1epxr","size-40":"select__size-40_1epxr"};
 require('./index.css');
 
 var ClearButton = function (_a) {
-    var disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, dataTestId: dataTestId },
-        React.createElement(CrossCircleMIcon, { className: styles.clearIcon })));
+    var disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId, size = _a.size;
+    var IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon;
+    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: cn(styles.clearButton, styles["size-".concat(size)]), onClick: onClick, tabIndex: -1, dataTestId: dataTestId },
+        React.createElement(IconComponent, { className: styles.clearIcon })));
 };
 
 export { ClearButton };