@alfalab/core-components-select 15.2.3 → 16.0.0

package/esm/Component.responsive.js

@@ -1,18 +1,20 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq/esm';
 import { SelectDesktop } from './Component.desktop.js';
 import { SelectMobile } from './Component.mobile.js';
 import '@alfalab/core-components-form-control/esm/desktop';
+import '@alfalab/core-components-popover/esm';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import './components/base-select/Component.js';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'compute-scroll-into-view';
 import 'downshift';
-import '@alfalab/core-components-popover/esm';
 import '@alfalab/core-components-shared/esm';
+import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
 import './components/field/Component.js';
@@ -30,27 +32,23 @@ import './consts.js';
 import './components/search/Component.js';
 import '@alfalab/core-components-input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
-import '@alfalab/core-components-form-control/esm/mobile';
-import './components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
-import './components/base-select-mobile/footer/Component.js';
+import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-modal/esm/Component.mobile';
+import './components/footer/Component.js';
 import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-e63a15d0.js';
+import './hook-8209d0d1.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '@alfalab/core-components-button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 
 var SelectResponsive = forwardRef(function (_a, ref) {
-    var footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, OptionsList = _a.OptionsList, onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["footer", "swipeable", "bottomSheetProps", "OptionsList", "onScroll", "fieldProps", "breakpoint"]);
-    var view = useMedia([
-        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
-        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
-    ], 'desktop')[0];
-    return view === 'desktop' ? (React.createElement(SelectDesktop, __assign({ OptionsList: OptionsList, onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps }))) : (React.createElement(SelectMobile, __assign({ footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, fieldProps: fieldProps }, restProps, { ref: ref })));
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return isDesktop ? (React.createElement(SelectDesktop, __assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps }))) : (React.createElement(SelectMobile, __assign({ fieldProps: fieldProps }, restProps, { ref: ref })));
 });
 
 export { SelectResponsive };

package/esm/components/arrow/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 
-var styles = {"arrow":"select__arrow_19zoj","open":"select__open_19zoj"};
+var styles = {"arrow":"select__arrow_1ebp2","open":"select__open_1ebp2"};
 require('./index.css')
 
 var Arrow = function (_a) {

package/esm/components/arrow/index.css

@@ -1,7 +1,7 @@
-/* hash: 1eyum */
+/* hash: 15tds */
 :root {
 } /* deprecated */ :root {
-    --color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {
@@ -17,7 +17,7 @@
 } :root {
     --arrow-transform: rotate(180deg);
 } :root {
-    --select-arrow-color: var(--color-light-graphic-primary);
+    --select-arrow-color: var(--color-light-neutral-translucent-700);
 
     /* options list */
 
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_19zoj {
+} .select__arrow_1ebp2 {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_19zoj {
+} .select__open_1ebp2 {
     transform: var(--arrow-transform);
 }

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/esm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_wvptr","single":"select__single_wvptr","selected":"select__selected_wvptr"};
+var styles = {"checkmark":"select__checkmark_zhqdw","single":"select__single_zhqdw","selected":"select__selected_zhqdw"};
 require('./index.css')
 
 var BaseCheckmark = function (_a) {

package/esm/components/base-checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ul90 */
+/* hash: 12xla */
 :root {
 } /* 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 */
 } :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 */
@@ -23,14 +23,14 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_wvptr {
+} .select__checkmark_zhqdw {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__single_wvptr {
+} .select__single_zhqdw {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_wvptr.select__selected_wvptr {
+} .select__single_zhqdw.select__selected_zhqdw {
         opacity: 1;
     }

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

@@ -5,7 +5,7 @@ import { BaseCheckmark } from '../base-checkmark/Component.js';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"option":"select__option_fidy5","disabled":"select__disabled_fidy5","checkmarkBefore":"select__checkmarkBefore_fidy5","mobile":"select__mobile_fidy5","checkmarkAfter":"select__checkmarkAfter_fidy5","textContent":"select__textContent_fidy5","selected":"select__selected_fidy5","highlighted":"select__highlighted_fidy5","content":"select__content_fidy5"};
+var styles = {"option":"select__option_110ot","disabled":"select__disabled_110ot","checkmarkBefore":"select__checkmarkBefore_110ot","mobile":"select__mobile_110ot","checkmarkAfter":"select__checkmarkAfter_110ot","textContent":"select__textContent_110ot","selected":"select__selected_110ot","highlighted":"select__highlighted_110ot","content":"select__content_110ot"};
 require('./index.css')
 
 var BaseOption = function (_a) {

package/esm/components/base-option/index.css

@@ -1,11 +1,11 @@
-/* hash: 1t3jg */
+/* hash: 12nsu */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
-    --color-light-bg-secondary: #f3f4f5;
-    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-bg-secondary: #f2f3f5;
+    --color-light-bg-tertiary: #e7e8ea;
     --color-light-text-primary: #0e0e0e;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {
@@ -43,7 +43,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_fidy5 {
+} .select__option_110ot {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -60,32 +60,32 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_fidy5:not(.select__disabled_fidy5):active {
+} .select__option_110ot:not(.select__disabled_110ot):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_fidy5.select__checkmarkBefore_fidy5 {
+    } .select__option_110ot.select__checkmarkBefore_110ot {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_fidy5.select__checkmarkBefore_fidy5.select__mobile_fidy5 {
+    } .select__option_110ot.select__checkmarkBefore_110ot.select__mobile_110ot {
             padding-left: var(--gap-m);
-        } .select__option_fidy5.select__checkmarkAfter_fidy5 {
+        } .select__option_110ot.select__checkmarkAfter_110ot {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_fidy5.select__checkmarkAfter_fidy5.select__mobile_fidy5 {
+    } .select__option_110ot.select__checkmarkAfter_110ot.select__mobile_110ot {
             padding-right: var(--gap-l);
-        } .select__option_fidy5.select__textContent_fidy5 {
+        } .select__option_110ot.select__textContent_110ot {
         padding: var(--gap-s)
-    } .select__option_fidy5.select__textContent_fidy5.select__mobile_fidy5 {
+    } .select__option_110ot.select__textContent_110ot.select__mobile_110ot {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_fidy5 {
+        } .select__selected_110ot {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_fidy5 {
+} .select__highlighted_110ot {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_fidy5 {
+} .select__disabled_110ot {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_fidy5 {
+} .select__content_110ot {
     flex: 1;
 }

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

@@ -1,5 +1,20 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseSelectProps } from "../../typings";
-declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<unknown>>;
+import { FC } from "react";
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { ModalMobileProps } from "@alfalab/core-components-modal/mobile";
+import { ModalContentProps, ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
+import { PopoverProps } from "@alfalab/core-components-popover";
+import { AdditionalMobileProps, BaseSelectProps, BottomSheetSelectMobileProps, ModalSelectMobileProps } from "../../typings";
+declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & AdditionalMobileProps & BottomSheetSelectMobileProps & ModalSelectMobileProps & {
+    isBottomSheet?: boolean | undefined;
+    view: 'desktop' | 'mobile';
+    Popover?: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    BottomSheet?: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    ModalMobile?: (React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+        Header: FC<ModalHeaderProps>;
+        Footer: FC<ModalFooterProps>;
+        Content: FC<ModalContentProps>;
+    }) | undefined;
+} & React.RefAttributes<unknown>>;
 export { BaseSelect };