@alfalab/core-components-select 16.0.2 → 17.0.0

package/src/{Component.mobile.tsx → mobile/Component.mobile.tsx}

@@ -2,25 +2,25 @@ import React, { forwardRef } from 'react';
 
 import { BottomSheet } from '@alfalab/core-components-bottom-sheet';
 import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
-import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/mobile';
 
-import { Arrow as DefaultArrow } from './components/arrow';
-import { BaseSelect } from './components/base-select';
-import { Field as DefaultField } from './components/field';
-import { Footer } from './components/footer';
-import { Optgroup as DefaultOptgroup } from './components/optgroup';
-import { Option as DefaultOption } from './components/option';
-import { OptionsList as DefaultOptionsList } from './components/options-list';
-import { Search as DefaultSearch } from './components/search';
-import { VirtualOptionsList as DefaultVirtualOptionsList } from './components/virtual-options-list';
-import { useSelectWithApply } from './presets/useSelectWithApply/hook';
-import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component';
+import { Arrow as DefaultArrow } from '../components/arrow';
+import { BaseSelect } from '../components/base-select';
+import { Field as DefaultField } from '../components/field';
+import { Footer } from '../components/footer';
+import { Optgroup as DefaultOptgroup } from '../components/optgroup';
+import { Option as DefaultOption } from '../components/option';
+import { OptionsList as DefaultOptionsList } from '../components/options-list';
+import { Search as DefaultSearch } from '../components/search';
+import { VirtualOptionsList as DefaultVirtualOptionsList } from '../components/virtual-options-list';
+import { useSelectWithApply } from '../presets/useSelectWithApply/hook';
+import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component';
 import {
     AnyObject,
     BottomSheetSelectMobileProps,
     ModalSelectMobileProps,
     SelectMobileProps,
-} from './typings';
+} from '../typings';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 

package/src/{Component.modal.mobile.tsx → mobile/Component.modal.mobile.tsx}

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 
+import { SelectModalMobileProps } from '../typings';
+
 import { SelectMobile } from './Component.mobile';
-import { SelectModalMobileProps } from './typings';
 
 export const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => (
     <SelectMobile {...props} isBottomSheet={false} ref={ref} />

package/src/mobile/index.ts

@@ -1,4 +1,4 @@
-export { SelectMobile } from '../Component.mobile';
-export { SelectModalMobile } from '../Component.modal.mobile';
+export { SelectMobile } from './Component.mobile';
+export { SelectModalMobile } from './Component.modal.mobile';
 
 export type { SelectMobileProps, SelectModalMobileProps } from '../typings';

package/src/shared/index.ts

@@ -11,3 +11,4 @@ export * from '../components/arrow';
 export * from '../components/base-select';
 export * from '../components/optgroup';
 export * from '../components/footer';
+export * from '../components/search';

package/src/typings.ts

@@ -70,7 +70,10 @@ export type BaseSelectChangePayload = {
 
 export type BaseSelectProps = {
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для пункта меню используется модификатор -option, компонента поиска -search,
+     * компонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,
+     * компонента поля -field, компонета FormControl -field-form-control
      */
     dataTestId?: string;
 
@@ -314,12 +317,12 @@ export type BaseSelectProps = {
     onOpen?: (payload: { open?: boolean; name?: string }) => void;
 
     /**
-     * Обработчик фокуса поля
+     * Обработчик блюра поля
      */
     onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
 
     /**
-     * Обработчик блюра поля
+     * Обработчик фокуса поля
      */
     onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
 

package/src/vars.css

@@ -20,11 +20,11 @@
     --select-option-right-padding: var(--gap-s);
     --select-option-l-left-padding: var(--gap-m);
     --select-option-l-right-padding: var(--gap-m);
-    --select-option-background: var(--color-light-bg-primary);
-    --select-option-selected-background: var(--color-light-bg-primary);
-    --select-option-hover-background: var(--color-light-bg-secondary);
-    --select-option-active-background: var(--color-light-bg-tertiary);
-    --select-option-disabled-background: var(--color-light-bg-primary);
+    --select-option-background: var(--color-light-modal-bg-primary);
+    --select-option-selected-background: var(--color-light-modal-bg-primary);
+    --select-option-hover-background: var(--color-light-transparent-default-hover);
+    --select-option-active-background: var(--color-light-transparent-default-press);
+    --select-option-disabled-background: var(--color-light-modal-bg-primary);
     --select-option-color: var(--color-light-text-primary);
     --select-option-selected-color: var(--color-light-text-primary);
     --select-option-hover-color: var(--color-light-text-primary);
@@ -41,7 +41,7 @@
     --select-checkmark-before-display-multiple: block;
     --select-checkmark-after-display-single: none;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-graphic-primary);
+    --select-checkmark-background: var(--color-light-neutral-1500);
     --select-checkmark-border-radius: var(--border-radius-circle);
     --select-mobile-checkmark-display-icon: block;
     --select-mobile-checkmark-display-badge: none;
@@ -49,7 +49,7 @@
     /* optgroup */
 
     --select-optgroup-color: var(--color-light-text-secondary);
-    --select-optgroup-background: var(--color-light-bg-primary);
+    --select-optgroup-background: var(--color-light-modal-bg-primary);
     --select-optgroup-left-padding: var(--gap-s);
     --select-optgroup-right-padding: var(--gap-s);
     --select-optgroup-l-left-padding: var(--gap-m);

package/typings.d.ts

@@ -47,7 +47,10 @@ type BaseSelectChangePayload = {
 };
 type BaseSelectProps = {
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для пункта меню используется модификатор -option, компонента поиска -search,
+     * компонента выпадающего меню -options-list, компонента BottomSheet -bottom-sheet,
+     * компонента поля -field, компонета FormControl -field-form-control
      */
     dataTestId?: string;
     /**
@@ -245,11 +248,11 @@ type BaseSelectProps = {
         name?: string;
     }) => void;
     /**
-     * Обработчик фокуса поля
+     * Обработчик блюра поля
      */
     onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
     /**
-     * Обработчик блюра поля
+     * Обработчик фокуса поля
      */
     onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
     /**

package/Component.modal.mobile.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<import("./typings").BaseSelectProps, "Checkmark"> & import("./typings").AdditionalMobileProps & import("./typings").ModalSelectMobileProps & React.RefAttributes<unknown>>;
-export { SelectModalMobile };

package/cssm/Component.modal.mobile.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<import("./typings").BaseSelectProps, "Checkmark"> & import("./typings").AdditionalMobileProps & import("./typings").ModalSelectMobileProps & React.RefAttributes<unknown>>;
-export { SelectModalMobile };

package/cssm/Component.modal.mobile.js

@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var Component_mobile = require('./Component.mobile.js');
-require('@alfalab/core-components-bottom-sheet/cssm');
-require('@alfalab/core-components-form-control/cssm/mobile');
-require('@alfalab/core-components-modal/cssm/Component.mobile');
-require('./components/arrow/Component.js');
-require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('./components/arrow/index.module.css');
-require('./components/base-select/Component.js');
-require('react-merge-refs');
-require('@juggle/resize-observer');
-require('compute-scroll-into-view');
-require('downshift');
-require('@alfalab/core-components-shared/cssm');
-require('@alfalab/hooks');
-require('./utils.js');
-require('./components/native-select/Component.js');
-require('./components/base-select/index.module.css');
-require('./components/base-select/mobile.module.css');
-require('./components/field/Component.js');
-require('./components/field/index.module.css');
-require('./components/footer/Component.js');
-require('@alfalab/core-components-base-modal/cssm');
-require('@alfalab/core-components-button/cssm/mobile');
-require('./components/footer/index.module.css');
-require('./components/optgroup/Component.js');
-require('./components/optgroup/index.module.css');
-require('./components/option/Component.js');
-require('./components/checkmark/Component.js');
-require('@alfalab/core-components-badge/cssm');
-require('@alfalab/core-components-checkbox/cssm');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
-require('./components/checkmark/index.module.css');
-require('./components/checkmark-mobile/Component.js');
-require('./components/checkmark-mobile/index.module.css');
-require('./components/option/index.module.css');
-require('./components/options-list/Component.js');
-require('@alfalab/core-components-mq/cssm');
-require('@alfalab/core-components-scrollbar/cssm');
-require('./consts.js');
-require('./components/options-list/index.module.css');
-require('./components/search/Component.js');
-require('@alfalab/core-components-input/cssm');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-require('./components/search/index.module.css');
-require('./components/virtual-options-list/Component.js');
-require('react-virtual');
-require('./components/virtual-options-list/index.module.css');
-require('./hook-2f9ec939.js');
-require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
-require('@alfalab/core-components-button/cssm/desktop');
-require('./presets/useSelectWithApply/options-list-with-apply/footer/index.module.css');
-require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
-require('./presets/useSelectWithApply/options-list-with-apply/header/index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var SelectModalMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(Component_mobile.SelectMobile, tslib.__assign({}, props, { isBottomSheet: false, ref: ref }))); });
-
-exports.SelectModalMobile = SelectModalMobile;

package/cssm/types-1b036d4b.d.ts

@@ -1,13 +0,0 @@
-type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
-type WidthUnit = number | string;
-type TextSkeletonProps = {
-    /**
-     *  Кол-во строк текста
-     */
-    rows?: number;
-    /**
-     * Ширина строки
-     */
-    width?: WidthUnit | WidthUnit[];
-};
-export { TextElementType, TextSkeletonProps };

package/cssm/useSkeleton-1b036d4b.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { TextSkeletonProps } from "./types-1b036d4b";
-type SkeletonProps = {
-    wrapperClassName?: string;
-    dataTestId?: string;
-};
-declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
-    renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
-    textRef: React.RefObject<HTMLElement>;
-};
-export { useSkeleton };

package/esm/Component.modal.mobile.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<import("./typings").BaseSelectProps, "Checkmark"> & import("./typings").AdditionalMobileProps & import("./typings").ModalSelectMobileProps & React.RefAttributes<unknown>>;
-export { SelectModalMobile };

package/esm/types-1b036d4b.d.ts

@@ -1,13 +0,0 @@
-type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
-type WidthUnit = number | string;
-type TextSkeletonProps = {
-    /**
-     *  Кол-во строк текста
-     */
-    rows?: number;
-    /**
-     * Ширина строки
-     */
-    width?: WidthUnit | WidthUnit[];
-};
-export { TextElementType, TextSkeletonProps };

package/esm/useSkeleton-1b036d4b.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { TextSkeletonProps } from "./types-1b036d4b";
-type SkeletonProps = {
-    wrapperClassName?: string;
-    dataTestId?: string;
-};
-declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
-    renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
-    textRef: React.RefObject<HTMLElement>;
-};
-export { useSkeleton };

package/modern/Component.modal.mobile.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<import("./typings").BaseSelectProps, "Checkmark"> & import("./typings").AdditionalMobileProps & import("./typings").ModalSelectMobileProps & React.RefAttributes<unknown>>;
-export { SelectModalMobile };

package/modern/types-1b036d4b.d.ts

@@ -1,13 +0,0 @@
-type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
-type WidthUnit = number | string;
-type TextSkeletonProps = {
-    /**
-     *  Кол-во строк текста
-     */
-    rows?: number;
-    /**
-     * Ширина строки
-     */
-    width?: WidthUnit | WidthUnit[];
-};
-export { TextElementType, TextSkeletonProps };

package/modern/useSkeleton-1b036d4b.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { TextSkeletonProps } from "./types-1b036d4b";
-type SkeletonProps = {
-    wrapperClassName?: string;
-    dataTestId?: string;
-};
-declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
-    renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
-    textRef: React.RefObject<HTMLElement>;
-};
-export { useSkeleton };

package/types-1b036d4b.d.ts

@@ -1,13 +0,0 @@
-type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
-type WidthUnit = number | string;
-type TextSkeletonProps = {
-    /**
-     *  Кол-во строк текста
-     */
-    rows?: number;
-    /**
-     * Ширина строки
-     */
-    width?: WidthUnit | WidthUnit[];
-};
-export { TextElementType, TextSkeletonProps };

package/useSkeleton-1b036d4b.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { TextSkeletonProps } from "./types-1b036d4b";
-type SkeletonProps = {
-    wrapperClassName?: string;
-    dataTestId?: string;
-};
-declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
-    renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
-    textRef: React.RefObject<HTMLElement>;
-};
-export { useSkeleton };