@alfalab/core-components-picker-button 11.12.3 → 11.12.4

package/modern/{typings-4bf4de6f.d.ts → typings-7f86a3f9.d.ts}

@@ -11,8 +11,8 @@ import { Color } from "./colors-facf1d2a";
 import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
 import { TitleProps } from "./index-03d088c4";
 import { TitleMobileProps } from "./index-281accb7";
-import { ContentProps } from "./typings-d6bfd5b7";
-import { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
+import { ContentProps } from "./typings-4b7234ef";
+import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { FormControlProps } from "./index-c44170fe";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { UseSelectWithApplyProps } from "./field/Component";
@@ -466,13 +466,19 @@ type InputProps = Omit<BaseInputProps, "FormControlComponent"> & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile";
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent"> & {
     breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type HeaderProps = Omit<NavigationBarPrivateProps, "size" | "view" | "parentRef">;
@@ -530,10 +536,11 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-1
     iOSLock?: boolean | undefined;
 } & {
     breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<HeaderProps>;
-    Content: React.FC<import("./typings-d6bfd5b7").ContentProps>;
+    Content: React.FC<import("./typings-4b7234ef").ContentProps>;
     Footer: React.FC<FooterProps>;
     Controls: React.FC<ControlsProps>;
 };
@@ -1404,8 +1411,13 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
@@ -1425,8 +1437,8 @@ type ClearButtonProps = {
 };
 export { BottomSheet, CLOSE_OFFSET, HEADER_OFFSET, InputProps, Input, ModalResponsive as Modal, ModalContext, getModalTestIds, FooterProps$0 as FooterProps, Footer$0 as Footer, HeaderProps$0 as HeaderProps, Header$0 as Header, SwipeableBackdropProps, SwipeableBackdrop, horizontalDirections, ShouldSkipSwipingParams, useVisibleViewportSize, Typography, typographyPresets, SwipeDirection, Content, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };
 export type { BottomSheetProps, BottomSheetTitleAlign, HeaderProps as ModalHeaderProps, FooterProps as ModalFooterProps, TextProps };
-export { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
-export type { ContentProps as ModalContentProps } from "./typings-d6bfd5b7";
+export { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
+export type { ContentProps as ModalContentProps } from "./typings-4b7234ef";
 export type { TitleProps } from "./index-03d088c4";
 export type { Color } from "./colors-facf1d2a";
 export * from "./Component.desktop-63dec22f";

package/modern/utils-34f6b81b.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings-4bf4de6f";
+import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings-7f86a3f9";
 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/moderncssm/Component-11f20b2e.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { View } from "./typings-d6bfd5b7";
+import { View } from "./typings-4b7234ef";
 declare const Modal: React.ForwardRefExoticComponent<import("./index-11f20b2e").BaseModalProps & {
     size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;

package/moderncssm/Component-7f86a3f9.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptgroupProps } from "./typings-7f86a3f9";
+declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
+export { Optgroup };

package/moderncssm/Component-c44170fe.d.ts

@@ -276,6 +276,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
      */
     FormControlComponent?: React.ElementType<Omit<import("./index-ebda875c").BaseFormControlProps, "styles" | "colorStyles"> & {
         breakpoint?: number | undefined;
+        client?: "desktop" | "mobile" | undefined;
         defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
     /**

package/moderncssm/Component.responsive.d.ts

@@ -8,8 +8,12 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
 };
-declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/shared").BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/shared").BaseSelectProps, "size" | "multiple" | "hint" | "placeholder" | "onFocus" | "selected" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
     options: ((import("@alfalab/core-components-select/shared").OptionShape | import("@alfalab/core-components-select/shared").GroupShape) & {
         icon?: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
     })[];
@@ -23,5 +27,9 @@ declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<impor
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { PickerButtonResponsiveProps, PickerButtonResponsive };

package/moderncssm/Component.responsive.js

@@ -1,15 +1,11 @@
 import React, { forwardRef } from 'react';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/moderncssm';
-import { useMedia } from '@alfalab/hooks';
+import { useIsDesktop } from '@alfalab/core-components-mq/moderncssm';
 import { PickerButtonDesktop } from './desktop/Component.desktop.js';
 import { PickerButtonMobile } from './mobile/Component.mobile.js';
 
-const PickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
-    const [view] = useMedia([
-        ['mobile', `(max-width: ${breakpoint - 1}px)`],
-        ['desktop', `(min-width: ${breakpoint}px)`],
-    ], 'desktop');
-    return view === 'desktop' ? (React.createElement(PickerButtonDesktop, { ref: ref, OptionsList: OptionsList, onScroll: onScroll, ...restProps })) : (React.createElement(PickerButtonMobile, { ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, breakpoint: breakpoint, ...restProps }));
+const PickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint, client, ...restProps }, ref) => {
+    const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
+    return isDesktop ? (React.createElement(PickerButtonDesktop, { ref: ref, OptionsList: OptionsList, onScroll: onScroll, ...restProps })) : (React.createElement(PickerButtonMobile, { ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, breakpoint: breakpoint, ...restProps }));
 });
 PickerButtonResponsive.displayName = 'PickerButtonResponsive';
 

package/moderncssm/ResponsiveContext-4b7234ef.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings-4b7234ef";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/moderncssm/component-03d088c4.d.ts

@@ -7,12 +7,16 @@ type TitleResponsiveProps = TitleProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
 };
 declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
+    view?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     color?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
-    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     font?: "styrene" | "system" | undefined;
     defaultMargins?: boolean | undefined;
     className?: string | undefined;
@@ -28,5 +32,9 @@ declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React.HTMLAt
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
 } & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
 export { TitleResponsiveProps, TitleResponsive };

package/moderncssm/component-8bdd19d3.d.ts

@@ -74,7 +74,7 @@ declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps, "colo
     /**
      * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
      */
-    view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
+    view?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     /**
      * Цвет текста
      */
@@ -82,7 +82,7 @@ declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps, "colo
     /**
      * Толщина шрифта
      */
-    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     /**
      * Шрифт текста
      */

package/moderncssm/desktop/Component.desktop.d.ts

@@ -30,7 +30,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' |
      */
     icon?: ComponentType<SVGProps<SVGSVGElement>>;
 };
-declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "multiple" | "hint" | "placeholder" | "onFocus" | "selected" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
     options: Array<BaseSelectProps['options'][0] & {
         /**
          * Иконка, отображающаяся слева от текстового представления пункта

package/moderncssm/field/Component.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ComponentType, SVGProps } from "react";
 import { ButtonProps } from "@alfalab/core-components-button";
-import { FieldProps as BaseFieldProps } from "../typings-4bf4de6f";
+import { FieldProps as BaseFieldProps } from "../typings-7f86a3f9";
 import { PickerButtonSize, PickerButtonVariant } from "../types";
 type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
     buttonSize?: PickerButtonSize;

package/moderncssm/index-03d088c4.d.ts

@@ -3,9 +3,9 @@ import React from 'react';
 import { TitleProps } from "./component-8bdd19d3";
 declare const Title: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
+    view?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     color?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
-    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     font?: "styrene" | "system" | undefined;
     defaultMargins?: boolean | undefined;
     className?: string | undefined;

package/moderncssm/index-281accb7.d.ts

@@ -2,9 +2,9 @@
 import React from "react";
 declare const TitleMobile: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
+    view?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     color?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
-    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     font?: "styrene" | "system" | undefined;
     defaultMargins?: boolean | undefined;
     className?: string | undefined;

package/moderncssm/index-c44170fe.d.ts

@@ -7,13 +7,19 @@ type FormControlProps = Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile";
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
     breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { FormControlProps, FormControl };

package/moderncssm/mobile/Component.mobile.js

@@ -1,11 +1,10 @@
 import React, { forwardRef } from 'react';
 import { SelectMobile } from '@alfalab/core-components-select/moderncssm/mobile';
 import { Optgroup } from '@alfalab/core-components-select/moderncssm/shared';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/moderncssm';
 import { Field } from '../field/Component.js';
 import { Option } from '../option/Component.js';
 
-const PickerButtonMobile = forwardRef(({ options, label, Option: Option$1 = Option, Optgroup: Optgroup$1 = Optgroup, view, loading, variant = 'default', leftAddons, rightAddons, size, bottomSheetProps, showArrow, Field: Field$1 = Field, fieldProps = {}, icon, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const PickerButtonMobile = forwardRef(({ options, label, Option: Option$1 = Option, Optgroup: Optgroup$1 = Optgroup, view, loading, variant = 'default', leftAddons, rightAddons, size, bottomSheetProps, showArrow, Field: Field$1 = Field, fieldProps = {}, icon, breakpoint, ...restProps }, ref) => {
     const fieldDefaultProps = {
         view,
         loading,

package/moderncssm/transformSize-ebda875c.d.ts

@@ -1,3 +1,3 @@
 import { IconButtonProps } from "./index-ebda875c";
-declare const transformSize: (size?: IconButtonProps['size']) => 24 | 48 | 32 | 40 | 56;
+declare const transformSize: (size?: IconButtonProps['size']) => 24 | 48 | 40 | 32 | 56;
 export { transformSize };

package/{esm/typings-d6bfd5b7.d.ts → moderncssm/typings-4b7234ef.d.ts}

@@ -34,8 +34,13 @@ type ModalResponsiveProps = ModalDesktopProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };

package/moderncssm/{typings-4bf4de6f.d.ts → typings-7f86a3f9.d.ts}

@@ -11,8 +11,8 @@ import { Color } from "./colors-facf1d2a";
 import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
 import { TitleProps } from "./index-03d088c4";
 import { TitleMobileProps } from "./index-281accb7";
-import { ContentProps } from "./typings-d6bfd5b7";
-import { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
+import { ContentProps } from "./typings-4b7234ef";
+import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { FormControlProps } from "./index-c44170fe";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { UseSelectWithApplyProps } from "./field/Component";
@@ -466,13 +466,19 @@ type InputProps = Omit<BaseInputProps, "FormControlComponent"> & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile";
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent"> & {
     breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type HeaderProps = Omit<NavigationBarPrivateProps, "size" | "view" | "parentRef">;
@@ -530,10 +536,11 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-1
     iOSLock?: boolean | undefined;
 } & {
     breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<HeaderProps>;
-    Content: React.FC<import("./typings-d6bfd5b7").ContentProps>;
+    Content: React.FC<import("./typings-4b7234ef").ContentProps>;
     Footer: React.FC<FooterProps>;
     Controls: React.FC<ControlsProps>;
 };
@@ -1404,8 +1411,13 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
@@ -1425,8 +1437,8 @@ type ClearButtonProps = {
 };
 export { BottomSheet, CLOSE_OFFSET, HEADER_OFFSET, InputProps, Input, ModalResponsive as Modal, ModalContext, getModalTestIds, FooterProps$0 as FooterProps, Footer$0 as Footer, HeaderProps$0 as HeaderProps, Header$0 as Header, SwipeableBackdropProps, SwipeableBackdrop, horizontalDirections, ShouldSkipSwipingParams, useVisibleViewportSize, Typography, typographyPresets, SwipeDirection, Content, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };
 export type { BottomSheetProps, BottomSheetTitleAlign, HeaderProps as ModalHeaderProps, FooterProps as ModalFooterProps, TextProps };
-export { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
-export type { ContentProps as ModalContentProps } from "./typings-d6bfd5b7";
+export { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
+export type { ContentProps as ModalContentProps } from "./typings-4b7234ef";
 export type { TitleProps } from "./index-03d088c4";
 export type { Color } from "./colors-facf1d2a";
 export * from "./Component.desktop-63dec22f";

package/moderncssm/utils-34f6b81b.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings-4bf4de6f";
+import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings-7f86a3f9";
 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/option/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"container":"picker-button__container_1j8un","icon":"picker-button__icon_1j8un","content":"picker-button__content_1j8un"};
+var styles = {"container":"picker-button__container_1169j","icon":"picker-button__icon_1169j","content":"picker-button__content_1169j"};
 require('./index.css')
 
 var Option = function (_a) {

package/option/index.css

@@ -1,4 +1,4 @@
-/* hash: 8a514 */
+/* hash: xwxfk */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,13 +20,13 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .picker-button__container_1j8un {
+} /* сбрасывает синюю подсветку при нажатии */ .picker-button__container_1169j {
     display: flex;
     align-items: center;
-} .picker-button__icon_1j8un {
+} .picker-button__icon_1169j {
     display: flex;
     margin-right: var(--gap-12);
-} .picker-button__content_1j8un {
+} .picker-button__content_1169j {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-picker-button",
-    "version": "11.12.3",
+    "version": "11.12.4",
     "description": "Picker button component",
     "keywords": [],
     "license": "MIT",
@@ -15,14 +15,15 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.10.0",
-        "@alfalab/core-components-select": "^17.17.1",
-        "@alfalab/core-components-popover": "^6.3.2",
+        "@alfalab/core-components-button": "^11.10.1",
+        "@alfalab/core-components-mq": "^4.3.0",
+        "@alfalab/core-components-select": "^17.17.2",
+        "@alfalab/core-components-popover": "^6.3.3",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0",
-        "@alfalab/core-components-shared": "^0.13.0"
+        "@alfalab/core-components-shared": "^0.14.0"
     },
     "themesVersion": "13.5.0",
     "varsVersion": "9.15.0"

package/src/Component.responsive.tsx

@@ -1,11 +1,10 @@
 import React, { forwardRef } from 'react';
 
+import { useIsDesktop } from '@alfalab/core-components-mq';
 import type {
     AdditionalMobileProps,
     BottomSheetSelectMobileProps,
 } from '@alfalab/core-components-select/shared';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
-import { useMedia } from '@alfalab/hooks';
 
 import { PickerButtonDesktop, PickerButtonDesktopProps } from './desktop';
 import { PickerButtonMobile } from './mobile';
@@ -18,6 +17,11 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps &
          * @default 1024
          */
         breakpoint?: number;
+
+        /**
+         * Версия, которая будет использоваться при серверном рендеринге
+         */
+        client?: 'desktop' | 'mobile';
     };
 
 export const PickerButtonResponsive = forwardRef<HTMLInputElement, PickerButtonResponsiveProps>(
@@ -28,20 +32,15 @@ export const PickerButtonResponsive = forwardRef<HTMLInputElement, PickerButtonR
             footer,
             swipeable,
             bottomSheetProps,
-            breakpoint = getComponentBreakpoint(),
+            breakpoint,
+            client,
             ...restProps
         },
         ref,
     ) => {
-        const [view] = useMedia(
-            [
-                ['mobile', `(max-width: ${breakpoint - 1}px)`],
-                ['desktop', `(min-width: ${breakpoint}px)`],
-            ],
-            'desktop',
-        );
+        const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
 
-        return view === 'desktop' ? (
+        return isDesktop ? (
             <PickerButtonDesktop
                 ref={ref}
                 OptionsList={OptionsList}

package/src/mobile/Component.mobile.tsx

@@ -6,7 +6,6 @@ import {
     BottomSheetSelectMobileProps,
     Optgroup as DefaultOptgroup,
 } from '@alfalab/core-components-select/shared';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
 
 import type { PickerButtonDesktopProps } from '../desktop';
 import { Field as DefaultField } from '../field';
@@ -43,7 +42,7 @@ export const PickerButtonMobile = forwardRef<HTMLInputElement, PickerButtonMobil
             Field = DefaultField,
             fieldProps = {},
             icon,
-            breakpoint = getComponentBreakpoint(),
+            breakpoint,
             ...restProps
         },
         ref,

package/transformSize-ebda875c.d.ts

@@ -1,3 +1,3 @@
 import { IconButtonProps } from "./index-ebda875c";
-declare const transformSize: (size?: IconButtonProps['size']) => 24 | 48 | 32 | 40 | 56;
+declare const transformSize: (size?: IconButtonProps['size']) => 24 | 48 | 40 | 32 | 56;
 export { transformSize };