@alfalab/core-components-select 19.0.6 → 19.1.0

package/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_1s7nq {
+.select__skeleton_rw7xv {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/presets/useSelectWithLoading/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"skeleton":"select__skeleton_1s7nq"};
+var styles = {"skeleton":"select__skeleton_rw7xv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type FC } from 'react';
 import cn from 'classnames';
 
 import { Checkbox } from '@alfalab/core-components-checkbox';
@@ -8,27 +8,44 @@ import { type CheckmarkProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const BaseCheckmark = ({
+export const BaseCheckmark: FC<CheckmarkProps> = ({
     selected,
     disabled = false,
     className,
     multiple,
     align = 'center',
-}: CheckmarkProps) => {
-    const checkmarkClassNames = cn(styles.checkmark, styles[align], className, {
-        [styles.single]: !multiple,
-        [styles.selected]: selected,
-    });
+    position = 'before',
+    content,
+}) => {
+    const renderCheckmarkIcon = () => (
+        <CheckmarkMIcon
+            className={cn(styles.singleIcon, styles[position], {
+                [styles.selected]: selected,
+            })}
+        />
+    );
 
     return multiple ? (
         <Checkbox
+            block={true}
             checked={selected}
             disabled={disabled}
-            className={checkmarkClassNames}
+            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}
+            className={cn(styles.checkmark, styles[align], className, {
+                [styles.selected]: selected,
+            })}
             size={24}
+            position={position}
+            label={content}
             hiddenInput={true}
         />
     ) : (
-        <CheckmarkMIcon className={checkmarkClassNames} />
+        <div className={cn(styles.container, styles[align], className)}>
+            {position === 'before' && renderCheckmarkIcon()}
+
+            <div className={styles.content}>{content}</div>
+
+            {position === 'after' && renderCheckmarkIcon()}
+        </div>
     );
 };

package/src/components/base-checkmark/index.module.css

@@ -14,13 +14,42 @@
     }
 }
 
-.single {
+.positionAfter {
+    margin-left: unset;
+}
+
+.container {
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+
+    &.start {
+        align-items: flex-start;
+    }
+
+    &.center {
+        align-items: center;
+    }
+}
+
+.singleIcon {
+    flex-shrink: 0;
     opacity: 0;
 
+    &.before {
+        margin-right: var(--gap-12);
+    }
+
+    &.after {
+        margin-left: var(--gap-12);
+    }
+
     &.selected {
         opacity: 1;
     }
 }
+
+.content {
+    flex: 1;
+}

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

@@ -24,27 +24,8 @@ export const BaseOption: FC<OptionProps> = ({
 }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
-
     const isTextContent = !isValidElement(content);
-
-    const renderCheckmark = () => {
-        if (Checkmark && showCheckMark) {
-            return (
-                <Checkmark
-                    className={cn({
-                        [styles.checkmarkBeforeContent]: checkmarkPosition === 'before',
-                        [styles.checkmarkAfterContent]: checkmarkPosition === 'after',
-                    })}
-                    disabled={disabled}
-                    selected={selected}
-                    multiple={multiple}
-                    align={align}
-                />
-            );
-        }
-
-        return null;
-    };
+    const showCheckmark = Checkmark && showCheckMark;
 
     return (
         <div
@@ -55,17 +36,26 @@ export const BaseOption: FC<OptionProps> = ({
                 [styles.disabled]: disabled,
                 [styles.textContent]: isTextContent,
                 [styles.mobile]: mobile,
-                [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',
-                [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',
+                [styles.checkmarkAfter]:
+                    showCheckmark && !isTextContent && checkmarkPosition === 'after',
+                [styles.checkmarkBefore]:
+                    showCheckmark && !isTextContent && checkmarkPosition === 'before',
             })}
             data-test-id={dataTestId}
             aria-label={option?.value?.name}
         >
-            {checkmarkPosition === 'before' && renderCheckmark()}
-
-            <div className={cn(styles.content)}>{content}</div>
-
-            {checkmarkPosition === 'after' && renderCheckmark()}
+            {showCheckmark ? (
+                <Checkmark
+                    disabled={disabled}
+                    selected={selected}
+                    multiple={multiple}
+                    align={align}
+                    position={checkmarkPosition}
+                    content={content}
+                />
+            ) : (
+                <div className={cn(styles.content)}>{content}</div>
+            )}
         </div>
     );
 };

package/src/components/base-option/index.module.css

@@ -70,14 +70,6 @@
     color: var(--select-option-disabled-color);
 }
 
-.checkmarkBeforeContent {
-    margin-right: var(--gap-12);
-}
-
-.checkmarkAfterContent {
-    margin-left: var(--gap-12);
-}
-
 .content {
     flex: 1;
 }

package/src/components/checkmark/Component.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
 
-import { Badge } from '@alfalab/core-components-badge';
 import { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 
 import { type CheckmarkProps } from '../../typings';
@@ -16,6 +14,7 @@ export const Checkmark = ({
     className,
     multiple,
     position = 'before',
+    content,
 }: CheckmarkProps) => {
     const single = !multiple;
 
@@ -32,17 +31,7 @@ export const Checkmark = ({
 
     return single ? (
         <div className={checkmarkClassNames}>
-            {position === 'before' ? (
-                <Badge
-                    className={styles.after}
-                    view='icon'
-                    size='m'
-                    iconColor='positive'
-                    content={<CheckmarkCircleMIcon className={styles.colorIcon} />}
-                />
-            ) : (
-                <CheckmarkMIcon className={cn(styles.displayIcon)} />
-            )}
+            <CheckmarkMIcon className={cn(styles.displayIcon)} />
         </div>
     ) : (
         <Checkbox
@@ -50,6 +39,7 @@ export const Checkmark = ({
             disabled={disabled}
             className={checkmarkClassNames}
             size={24}
+            label={content}
             onClick={handleCheckboxClick}
         />
     );

package/src/components/checkmark/index.module.css

@@ -3,10 +3,13 @@
 
 .checkmark {
     flex-shrink: 0;
-    margin: var(--select-checkmark-margin);
+
+    &.before {
+        display: var(--select-checkmark-before-display);
+    }
 
     &.after {
-        margin: var(--select-checkmark-margin-after);
+        display: var(--select-checkmark-after-display);
     }
 }
 
@@ -15,9 +18,6 @@
     align-items: center;
     justify-content: center;
     opacity: var(--select-checkmark-unselected-opacity);
-    background: var(--select-checkmark-background);
-    background-size: cover;
-    border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size);
 
@@ -26,13 +26,15 @@
     }
 }
 
-.before {
-    display: var(--select-checkmark-before-display);
-
-    &.multiple {
+.multiple {
+    &.before {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
     }
+
+    &.after {
+        margin-left: var(--gap-12);
+    }
 }
 
 .after.after {
@@ -46,3 +48,9 @@
 .colorIcon {
     color: var(--color-light-status-positive);
 }
+
+.displayIcon {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/src/components/checkmark-mobile/Component.tsx

@@ -7,9 +7,9 @@ import { type CheckmarkProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const Checkmark = ({ selected, className }: CheckmarkProps) => (
+export const Checkmark = ({ selected, className, position = 'after' }: CheckmarkProps) => (
     <div
-        className={cn(styles.checkmark, className, {
+        className={cn(styles.checkmark, className, styles[position], {
             [styles.selected]: selected,
         })}
     >

package/src/components/checkmark-mobile/index.module.css

@@ -10,13 +10,17 @@
     height: 24px;
     opacity: 0;
 
-    &:first-child {
-        display: none;
-    }
-
     &.selected {
         opacity: 1;
     }
+
+    &.before {
+        margin-right: var(--gap-8);
+    }
+
+    &.after {
+        margin-left: var(--gap-8);
+    }
 }
 
 .displayIcon {

package/src/components/field/Component.tsx

@@ -1,8 +1,8 @@
-import React, { type ElementType, useCallback, useRef, useState } from 'react';
+import React, { type ElementType, Fragment, useCallback, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import { type FormControlProps } from '@alfalab/core-components-form-control';
-import { getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/shared';
+import { LockIcon } from '@alfalab/core-components-input/shared';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -70,35 +70,21 @@ export const Field = ({
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled,
-            render: () => (
+    const renderRightAddons = () => (
+        <Fragment>
+            {clear && filled && !disabled && (
                 <ClearButton
                     onClick={onClear}
                     disabled={disabled}
                     dataTestId={getDataTestId(dataTestId, 'clear-icon')}
                     size={size}
                 />
-            ),
-        },
-        {
-            priority: 2,
-            predicate: Boolean(rightAddons),
-            render: () => rightAddons,
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !disabled,
-            render: () => Arrow && React.cloneElement(Arrow, { className: styles.arrow }),
-        },
-        {
-            priority: 0,
-            predicate: disabled,
-            render: () => <LockIcon colors={colors} size={size} />,
-        },
-    ]);
+            )}
+            {rightAddons}
+            {!disabled && Arrow && React.cloneElement(Arrow, { className: styles.arrow })}
+            {disabled && <LockIcon colors={colors} size={size} />}
+        </Fragment>
+    );
 
     return (
         <div
@@ -123,7 +109,7 @@ export const Field = ({
                     labelView={labelView}
                     error={error}
                     hint={hint}
-                    rightAddons={rightAddonsMap}
+                    rightAddons={renderRightAddons()}
                     data-test-id={dataTestId}
                     {...restProps}
                     {...innerProps}

package/src/components/option/Component.tsx

@@ -28,6 +28,7 @@ export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
     multiple,
     mobile,
     Checkmark,
+    checkmarkPosition = multiple ? 'before' : 'after',
     innerProps,
     dataTestId,
     styles,
@@ -35,6 +36,17 @@ export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
 
+    const renderCheckmark = (position: 'before' | 'after') =>
+        Checkmark &&
+        showCheckMark && (
+            <Checkmark
+                disabled={disabled}
+                selected={selected}
+                multiple={multiple}
+                position={position}
+            />
+        );
+
     return (
         <div
             {...innerProps}
@@ -45,14 +57,7 @@ export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
             })}
             data-test-id={dataTestId}
         >
-            {Checkmark && showCheckMark && (
-                <Checkmark
-                    disabled={disabled}
-                    selected={selected}
-                    multiple={multiple}
-                    position='before'
-                />
-            )}
+            {checkmarkPosition === 'before' && renderCheckmark('before')}
 
             <div
                 className={cn(styles.content, {
@@ -62,15 +67,7 @@ export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
                 {content}
             </div>
 
-            {/** Workaround чтобы для клика показывать отметку справа и всегда в виде иконки */}
-            {Checkmark && showCheckMark && (
-                <Checkmark
-                    disabled={disabled}
-                    selected={selected}
-                    multiple={multiple}
-                    position='after'
-                />
-            )}
+            {checkmarkPosition === 'after' && renderCheckmark('after')}
         </div>
     );
 };

package/src/mobile/Component.mobile.tsx

@@ -49,6 +49,7 @@ export const SelectMobile = forwardRef(
             showClear = true,
             showSelectAll,
             showHeaderWithSelectAll,
+            checkmarkPosition = 'before',
             useWithApplyHook = multiple,
             showSearch,
             searchProps,
@@ -69,6 +70,7 @@ export const SelectMobile = forwardRef(
             onChange,
             showClear,
             showSelectAll,
+            checkmarkPosition,
         });
 
         const bottomAddons = (flatOptions: OptionShape[]) =>

package/src/presets/useSelectWithApply/hook.ts

@@ -80,6 +80,12 @@ export type UseSelectWithApplyProps = {
      * @default 'reset-footer'
      */
     resetName?: string;
+
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
 
 const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
@@ -94,6 +100,7 @@ export function useSelectWithApply({
     showClear = true,
     showSelectAll = false,
     showHeaderWithSelectAll = false,
+    checkmarkPosition = 'before',
     showSearch = false,
     searchProps = {},
     applyName = 'apply-footer',
@@ -134,7 +141,6 @@ export function useSelectWithApply({
             ),
         [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor],
     );
-
     const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);
 
     const selectedOptionsRef = useRef<OptionShape[]>(selectedOptions);
@@ -233,6 +239,7 @@ export function useSelectWithApply({
                     selectedDraft.length === flatOptions.length ||
                     flatOptions.every(({ key }) => selectedKeys.includes(key)),
                 onChange: handleToggleAll,
+                checkmarkPosition,
             },
         },
         multiple: true,
@@ -257,6 +264,7 @@ export function useSelectWithApply({
             showClear,
             showSelectAll,
             showHeaderWithSelectAll,
+            checkmarkPosition,
             showSearch,
             searchProps,
             applyName,

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

@@ -13,6 +13,7 @@ export type HeaderProps = {
     onChange?: CheckboxProps['onChange'];
     mobile?: boolean;
     dataTestId?: string;
+    checkmarkPosition?: 'before' | 'after';
     size?: OptionsListProps['size'];
 };
 
@@ -23,6 +24,7 @@ export const Header: React.FC<HeaderProps> = ({
     mobile,
     dataTestId,
     size,
+    checkmarkPosition = 'before',
 }) => (
     <div
         className={cn(size && styles[`size-${size}`], {
@@ -38,6 +40,8 @@ export const Header: React.FC<HeaderProps> = ({
             checked={checked}
             label='Выбрать все'
             dataTestId={dataTestId}
+            position={checkmarkPosition}
+            contentClassName={cn({ [styles.positionAfter]: checkmarkPosition === 'after' })}
         />
     </div>
 );

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

@@ -8,5 +8,9 @@
 }
 
 .mobile {
-    padding: var(--gap-12) var(--gap-8);
+    padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
+}
+
+.positionAfter {
+    margin-left: unset;
 }

package/src/typings.ts

@@ -853,6 +853,11 @@ export type CheckmarkProps = {
      */
     position?: 'before' | 'after';
 
+    /**
+     * Дополнительный контент
+     */
+    content?: ReactNode;
+
     /**
      * Иконка выбранного пункта
      */
@@ -888,6 +893,12 @@ export type AdditionalMobileProps = {
      * Использовать ли хук useSelectWithApply в мобильном компоненте
      */
     useWithApplyHook?: boolean;
+
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
 
 export type BottomSheetSelectMobileProps = {

package/src/vars.css

@@ -37,11 +37,11 @@
 
     --select-checkmark-margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-0);
     --select-checkmark-margin-after: var(--select-checkmark-margin);
-    --select-checkmark-size: 4px;
-    --select-checkmark-before-display: 'flex';
+    --select-checkmark-size: 24px;
+    --select-checkmark-before-display: flex;
     --select-checkmark-after-display: none;
     --select-checkmark-before-display-multiple: block;
-    --select-checkmark-after-display-single: none;
+    --select-checkmark-after-display-single: flex;
     --select-checkmark-unselected-opacity: 0;
     --select-checkmark-background: var(--color-light-neutral-translucent-1300);
     --select-checkmark-border-radius: var(--border-radius-circle);

package/typings.d.ts

@@ -669,6 +669,10 @@ export declare type CheckmarkProps = {
      * Расположение отметки
      */
     position?: 'before' | 'after';
+    /**
+     * Дополнительный контент
+     */
+    content?: ReactNode;
     /**
      * Иконка выбранного пункта
      */
@@ -697,6 +701,11 @@ export declare type AdditionalMobileProps = {
      * Использовать ли хук useSelectWithApply в мобильном компоненте
      */
     useWithApplyHook?: boolean;
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
 export declare type BottomSheetSelectMobileProps = {
     /**