@alfalab/core-components-select 15.2.0 → 15.2.2

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1mb8q */
+/* hash: r40yx */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_1hcm9 {
+} .select__footer_zbbxs {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_1hcm9 > * + * {
+} .select__footer_zbbxs > * + * {
         margin-left: var(--gap-xs);
     }

package/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_s77i9","mobile":"select__mobile_s77i9"};
+var styles = {"desktop":"select__desktop_1a8hu","mobile":"select__mobile_1a8hu"};
 require('./index.css')
 
 var Header = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: ex6il */
+/* hash: 1qszj */
 :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 */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_s77i9 {
+} .select__desktop_1a8hu {
     padding: var(--gap-s);
-} .select__mobile_s77i9 {
+} .select__mobile_1a8hu {
     padding: var(--gap-s) var(--gap-xs);
 }

package/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-45ab0a9c";
+export * from "../../../hook-a6f060a1";

package/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-45ab0a9c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-a6f060a1.js');
 require('tslib');
 require('react');
 require('../../../utils.js');

package/presets/useSelectWithLoading/hook.js

@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_1f6a1"};
+var styles = {"skeleton":"select__skeleton_1eba2"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 52mbq */
-.select__skeleton_1f6a1 {
+/* hash: 1fned */
+.select__skeleton_1eba2 {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared.js

@@ -13,7 +13,7 @@ var components_baseOption_Component = require('./components/base-option/Componen
 var components_search_Component = require('./components/search/Component.js');
 var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-45ab0a9c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-a6f060a1.js');
 var utils = require('./utils.js');
 require('react');
 require('classnames');

package/src/Component.mobile.tsx

@@ -141,6 +141,8 @@ export const SelectMobile = forwardRef(
                 selected={selected}
                 onChange={onChange}
                 OptionsList={OptionsList}
+                showSearch={showSearch}
+                searchProps={searchProps}
                 bottomSheetProps={{
                     bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
                         <Header {...applyProps.optionsListProps.headerProps} mobile={true} />

package/src/Component.modal.mobile.tsx

@@ -134,6 +134,8 @@ export const SelectModalMobile = forwardRef(
                 onChange={onChange}
                 OptionsList={OptionsList}
                 optionsListProps={optionsListProps}
+                showSearch={showSearch}
+                searchProps={searchProps}
                 modalHeaderProps={{
                     bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
                         <Header {...applyProps.optionsListProps.headerProps} mobile={true} />

package/src/components/base-select/Component.tsx

@@ -171,6 +171,7 @@ export const BaseSelect = forwardRef(
             highlightedIndex,
             toggleMenu,
             openMenu,
+            setHighlightedIndex,
         } = useCombobox<OptionShape>({
             id,
             isOpen: openProp,
@@ -274,7 +275,15 @@ export const BaseSelect = forwardRef(
 
         const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
             inputProps.onKeyDown(event);
-            if (autocomplete && !open && (event.key.length === 1 || event.key === 'Backspace')) {
+
+            // https://caniuse.com/?search=KeyboardEvent.key
+            const isKeyUnsupported = event.key === 'Unidentified';
+
+            if (
+                autocomplete &&
+                !open &&
+                (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')
+            ) {
                 // Для автокомплита - открываем меню при начале ввода
                 openMenu();
             }
@@ -330,7 +339,7 @@ export const BaseSelect = forwardRef(
                 size: optionsSize,
                 disabled: option.disabled,
                 highlighted: index === highlightedIndex,
-                selected: selectedItems.includes(option),
+                selected: selectedItems.some(({ key }) => key === option.key),
                 dataTestId: getDataTestId(dataTestId, 'option'),
             }),
             [
@@ -540,6 +549,7 @@ export const BaseSelect = forwardRef(
                             >
                                 <OptionsList
                                     {...(optionsListProps as AnyObject)}
+                                    setHighlightedIndex={setHighlightedIndex}
                                     optionsListWidth={optionsListWidth}
                                     flatOptions={flatOptions}
                                     highlightedIndex={highlightedIndex}

package/src/components/base-select-mobile/Component.tsx

@@ -323,7 +323,15 @@ export const BaseSelectMobile = forwardRef(
 
         const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
             inputProps.onKeyDown(event);
-            if (autocomplete && !open && (event.key.length === 1 || event.key === 'Backspace')) {
+
+            // https://caniuse.com/?search=KeyboardEvent.key
+            const isKeyUnsupported = event.key === 'Unidentified';
+
+            if (
+                autocomplete &&
+                !open &&
+                (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')
+            ) {
                 // Для автокомплита - открываем меню при начале ввода
                 openMenu();
             }
@@ -349,7 +357,7 @@ export const BaseSelectMobile = forwardRef(
         };
 
         const getOptionProps = (option: OptionShape, index: number): OptionProps => {
-            const selectedItem = selectedItems.includes(option);
+            const selectedItem = selectedItems.some(({ key }) => key === option.key);
 
             return {
                 ...(optionProps as object),
@@ -539,8 +547,13 @@ export const BaseSelectMobile = forwardRef(
                         <ModalMobile.Header
                             hasCloser={true}
                             sticky={true}
-                            bottomAddons={renderSearch()}
                             {...modalHeaderProps}
+                            bottomAddons={
+                                <React.Fragment>
+                                    {renderSearch()}
+                                    {modalHeaderProps?.bottomAddons}
+                                </React.Fragment>
+                            }
                         >
                             {label || placeholder}
                         </ModalMobile.Header>

package/src/components/base-select-mobile/index.module.css

@@ -49,7 +49,7 @@
 }
 
 .search {
-    padding: var(--gap-m) var(--gap-xs) var(--gap-s);
+    padding: var(--gap-xs);
 }
 
 /* width: max-content; fix for IE */

package/src/components/options-list/Component.tsx

@@ -41,6 +41,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             optionsListWidth,
             nativeScrollbar: nativeScrollbarProp,
             flatOptions = [],
+            setHighlightedIndex,
         },
         ref,
     ) => {
@@ -120,17 +121,24 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             </div>
         );
 
+        const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
+
         return (
             <div
                 {...(nativeScrollbar && { 'data-test-id': dataTestId })}
                 className={cn(styles.optionsList, styles[size], className)}
             >
-                {header && <div className={styles.optionsListHeader}>{header}</div>}
+                {header && (
+                    <div className={styles.optionsListHeader} onMouseEnter={resetHighlightedIndex}>
+                        {header}
+                    </div>
+                )}
 
                 {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
 
                 {showFooter && footer && (
                     <div
+                        onMouseEnter={resetHighlightedIndex}
                         className={cn(styles.optionsListFooter, {
                             [styles.withBorder]:
                                 visibleOptions && flatOptions.length > visibleOptions,

package/src/components/virtual-options-list/Component.tsx

@@ -34,6 +34,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             optionsListWidth,
             onScroll,
             nativeScrollbar: nativeScrollbarProp,
+            setHighlightedIndex,
         },
         ref,
     ) => {
@@ -184,6 +185,8 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             return <div {...contentNodeProps}>{renderList()}</div>;
         };
 
+        const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
+
         if (options.length === 0 && !emptyPlaceholder) {
             return null;
         }
@@ -193,7 +196,14 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                 className={cn(styles.virtualOptionsList, styles[size], className)}
                 data-test-id={dataTestId}
             >
-                {header && <div className={styles.virtualOptionsListHeader}>{header}</div>}
+                {header && (
+                    <div
+                        className={styles.virtualOptionsListHeader}
+                        onMouseEnter={resetHighlightedIndex}
+                    >
+                        {header}
+                    </div>
+                )}
 
                 {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
 
@@ -203,6 +213,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
 
                 {showFooter && footer && (
                     <div
+                        onMouseEnter={resetHighlightedIndex}
                         className={cn(styles.virtualOptionsListFooter, {
                             [styles.withBorder]:
                                 visibleOptions && flatOptions.length > visibleOptions,

package/src/presets/useSelectWithApply/options-list-with-apply/Component.tsx

@@ -48,7 +48,7 @@ export const OptionsListWithApply = forwardRef<HTMLDivElement, OptionsListWithAp
                 const selected =
                     option.key === SELECT_ALL_KEY
                         ? selectedDraft.length === flatOptions.length - 1
-                        : selectedDraft.includes(option);
+                        : selectedDraft.some(({ key }) => key === option.key);
 
                 return {
                     ...optionProps,

package/src/typings.ts

@@ -580,6 +580,11 @@ export type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+
+    /**
+     * Указать индекс пункта для hover состояния
+     */
+    setHighlightedIndex?: (index: number) => void;
 };
 
 export type OptgroupProps = {

package/{cssm/typings-9211a437.d.ts → typings-89f0cb07.d.ts}

@@ -69,6 +69,8 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+};
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -80,16 +82,12 @@ type ComponentProps = {
      */
     colorStylesMap: StyleColors;
 };
-type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
-type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/typings.d.ts

@@ -459,6 +459,10 @@ type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+    /**
+     * Указать индекс пункта для hover состояния
+     */
+    setHighlightedIndex?: (index: number) => void;
 };
 type OptgroupProps = {
     /**

package/cssm/desktop-63dec22f.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
-type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
-declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ButtonDesktopProps, ButtonDesktop };

package/desktop-63dec22f.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
-type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
-declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ButtonDesktopProps, ButtonDesktop };

package/esm/desktop-63dec22f.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
-type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
-declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ButtonDesktopProps, ButtonDesktop };

package/modern/desktop-63dec22f.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
-type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
-declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ButtonDesktopProps, ButtonDesktop };