@alfalab/core-components-select 19.0.6 → 19.1.0

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

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

package/moderncssm/components/checkmark/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected, disabled, className, multiple, position, }: CheckmarkProps) => React.JSX.Element;
+export declare const Checkmark: ({ selected, disabled, className, multiple, position, content, }: CheckmarkProps) => React.JSX.Element;

package/moderncssm/components/checkmark/Component.js

@@ -1,12 +1,10 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/moderncssm';
 import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', }) => {
+const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', content, }) => {
     const single = !multiple;
     const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {
         [styles.multiple]: !single,
@@ -14,7 +12,8 @@ const Checkmark = ({ selected, disabled = false, className, multiple, position =
         [styles.selected]: selected,
     });
     const handleCheckboxClick = useCallback((event) => event.stopPropagation(), []);
-    return single ? (React.createElement("div", { className: checkmarkClassNames }, position === 'before' ? (React.createElement(Badge, { className: styles.after, view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.colorIcon }) })) : (React.createElement(CheckmarkMIcon, { className: cn(styles.displayIcon) })))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, onClick: handleCheckboxClick }));
+    return single ? (React.createElement("div", { className: checkmarkClassNames },
+        React.createElement(CheckmarkMIcon, { className: cn(styles.displayIcon) }))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, label: content, onClick: handleCheckboxClick }));
 };
 
 export { Checkmark };

package/moderncssm/components/checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            {position === 'before' ? (\n                <Badge\n                    className={styles.after}\n                    view='icon'\n                    size='m'\n                    iconColor='positive'\n                    content={<CheckmarkCircleMIcon className={styles.colorIcon} />}\n                />\n            ) : (\n                <CheckmarkMIcon className={cn(styles.displayIcon)} />\n            )}\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAYa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,GACN,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA,EAC9B,QAAQ,KAAK,QAAQ,IAClB,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,KAAC,CAAA,aAAA,CAAA,oBAAoB,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,CAAI,GAChE,KAEF,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAA,CAAI,CACxD,CACC,KAEN,oBAAC,QAAQ,EAAA,EACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n    content,\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            <CheckmarkMIcon className={cn(styles.displayIcon)} />\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            label={content}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;MAUa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACM,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA;QAC/B,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,GAAI,CACnD,KAEN,KAAC,CAAA,aAAA,CAAA,QAAQ,IACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}

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

@@ -1,24 +1,22 @@
 :root {
-
-    --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);
 }
 
 .checkmark {
     flex-shrink: 0;
-    margin: var(--select-checkmark-margin);
 }
 
+.checkmark.before {
+        display: var(--select-checkmark-before-display);
+    }
+
 .checkmark.after {
-        margin: var(--select-checkmark-margin-after);
+        display: var(--select-checkmark-after-display);
     }
 
 .single {
@@ -26,9 +24,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);
 }
@@ -37,15 +32,15 @@
         opacity: 1;
     }
 
-.before {
-    display: var(--select-checkmark-before-display);
-}
-
-.before.multiple {
+.multiple.before {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
     }
 
+.multiple.after {
+        margin-left: var(--gap-12);
+    }
+
 .after.after {
     display: var(--select-checkmark-after-display);
 }
@@ -57,3 +52,9 @@
 .colorIcon {
     color: var(--color-light-status-positive);
 }
+
+.displayIcon {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/moderncssm/components/checkmark-mobile/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected, className }: CheckmarkProps) => React.JSX.Element;
+export declare const Checkmark: ({ selected, className, position }: CheckmarkProps) => React.JSX.Element;

package/moderncssm/components/checkmark-mobile/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {
+const Checkmark = ({ selected, className, position = 'after' }) => (React.createElement("div", { className: cn(styles.checkmark, className, styles[position], {
         [styles.selected]: selected,
     }) },
     React.createElement(CheckmarkMIcon, { className: styles.displayIcon })));

package/moderncssm/components/checkmark-mobile/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AASa,MAAA,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAkB,MAC7D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className, position = 'after' }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, styles[position], {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,OAAO,EAAkB,MACjF,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AACzD,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}

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

@@ -13,14 +13,18 @@
     opacity: 0;
 }
 
-.checkmark:first-child {
-        display: none;
-    }
-
 .checkmark.selected {
         opacity: 1;
     }
 
+.checkmark.before {
+        margin-right: var(--gap-8);
+    }
+
+.checkmark.after {
+        margin-left: var(--gap-8);
+    }
+
 .displayIcon {
     display: var(--select-mobile-checkmark-display-icon);
 }

package/moderncssm/components/field/Component.js

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, Fragment } from 'react';
 import cn from 'classnames';
-import { getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/moderncssm/shared';
+import { LockIcon } from '@alfalab/core-components-input/moderncssm/shared';
 import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { useFocus } from '@alfalab/hooks';
 import { joinOptions } from '../../utils.js';
@@ -27,32 +27,15 @@ const Field = ({ size = 56, open, multiple, error, hint, disabled, label, labelV
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled,
-            render: () => (React.createElement(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: () => React.createElement(LockIcon, { colors: colors, size: size }),
-        },
-    ]);
+    const renderRightAddons = () => (React.createElement(Fragment, null,
+        clear && filled && !disabled && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, dataTestId: getDataTestId(dataTestId, 'clear-icon'), size: size })),
+        rightAddons,
+        !disabled && Arrow && React.cloneElement(Arrow, { className: styles.arrow }),
+        disabled && React.createElement(LockIcon, { colors: colors, size: size })));
     return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur }, FormControlComponent ? (React.createElement(FormControlComponent, { dataTestId: getDataTestId(dataTestId, 'form-control'), fieldClassName: cn(styles.field, fieldClassName, {
             [styles.disabled]: disabled,
             [styles.focusVisible]: focusVisible,
-        }), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: rightAddonsMap, "data-test-id": dataTestId, ...restProps, ...innerProps },
+        }), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: renderRightAddons(), "data-test-id": dataTestId, ...restProps, ...innerProps },
         React.createElement("div", { className: cn(styles.contentWrapper, styles[`size-${size}`]) },
             showPlaceholder && (React.createElement("span", { className: cn(styles.placeholder, {
                     [styles.focused]: focused || open,

package/moderncssm/components/field/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/field/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { type FormControlProps } from '@alfalab/core-components-form-control';\nimport { getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type FieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\nimport { ClearButton } from '../clear-button';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\n// eslint-disable-next-line complexity\nexport const Field = ({\n    size = 56,\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    labelView = 'inner',\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    setSelectedItems,\n    toggleMenu,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    FormControlComponent,\n    clear,\n    onClear,\n    valueSeparator,\n    ...restProps\n}: BaseFieldProps & FormControlProps & FieldProps) => {\n    const { colors = 'default' } = restProps;\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple, valueSeparator });\n\n    const filled = Boolean(value);\n    const showLabel = !!label || labelView === 'outer';\n    const showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');\n\n    /**\n     * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n     * [4] - Clear\n     * [3] - Status (error, success)\n     * [2] - Common (info, e.g.)\n     * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n     * [0] - Lock\n     */\n    const rightAddonsMap = getAddonsByPriority([\n        {\n            priority: 4,\n            predicate: clear && filled && !disabled,\n            render: () => (\n                <ClearButton\n                    onClick={onClear}\n                    disabled={disabled}\n                    dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                    size={size}\n                />\n            ),\n        },\n        {\n            priority: 2,\n            predicate: Boolean(rightAddons),\n            render: () => rightAddons,\n        },\n        {\n            priority: 1,\n            predicate: Boolean(Arrow) && !disabled,\n            render: () => Arrow && React.cloneElement(Arrow, { className: styles.arrow }),\n        },\n        {\n            priority: 0,\n            predicate: disabled,\n            render: () => <LockIcon colors={colors} size={size} />,\n        },\n    ]);\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n        >\n            {FormControlComponent ? (\n                <FormControlComponent\n                    dataTestId={getDataTestId(dataTestId, 'form-control')}\n                    fieldClassName={cn(styles.field, fieldClassName, {\n                        [styles.disabled]: disabled,\n                        [styles.focusVisible]: focusVisible,\n                    })}\n                    block={true}\n                    size={size}\n                    focused={focused || open}\n                    disabled={disabled}\n                    filled={filled || (!!placeholder && open)}\n                    label={showLabel && label}\n                    labelView={labelView}\n                    error={error}\n                    hint={hint}\n                    rightAddons={rightAddonsMap}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                    {...innerProps}\n                >\n                    <div className={cn(styles.contentWrapper, styles[`size-${size}`])}>\n                        {showPlaceholder && (\n                            <span\n                                className={cn(styles.placeholder, {\n                                    [styles.focused]: focused || open,\n                                })}\n                            >\n                                {placeholder}\n                            </span>\n                        )}\n                        {filled && (\n                            <div className={cn(styles.value, styles[`size-${size}`])}>{value}</div>\n                        )}\n                    </div>\n                </FormControlComponent>\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/field/Component.tsx"],"sourcesContent":["import React, { type ElementType, Fragment, useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { type FormControlProps } from '@alfalab/core-components-form-control';\nimport { LockIcon } from '@alfalab/core-components-input/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type FieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\nimport { ClearButton } from '../clear-button';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\n// eslint-disable-next-line complexity\nexport const Field = ({\n    size = 56,\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    labelView = 'inner',\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    setSelectedItems,\n    toggleMenu,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    FormControlComponent,\n    clear,\n    onClear,\n    valueSeparator,\n    ...restProps\n}: BaseFieldProps & FormControlProps & FieldProps) => {\n    const { colors = 'default' } = restProps;\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple, valueSeparator });\n\n    const filled = Boolean(value);\n    const showLabel = !!label || labelView === 'outer';\n    const showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');\n\n    /**\n     * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n     * [4] - Clear\n     * [3] - Status (error, success)\n     * [2] - Common (info, e.g.)\n     * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n     * [0] - Lock\n     */\n    const renderRightAddons = () => (\n        <Fragment>\n            {clear && filled && !disabled && (\n                <ClearButton\n                    onClick={onClear}\n                    disabled={disabled}\n                    dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                    size={size}\n                />\n            )}\n            {rightAddons}\n            {!disabled && Arrow && React.cloneElement(Arrow, { className: styles.arrow })}\n            {disabled && <LockIcon colors={colors} size={size} />}\n        </Fragment>\n    );\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n        >\n            {FormControlComponent ? (\n                <FormControlComponent\n                    dataTestId={getDataTestId(dataTestId, 'form-control')}\n                    fieldClassName={cn(styles.field, fieldClassName, {\n                        [styles.disabled]: disabled,\n                        [styles.focusVisible]: focusVisible,\n                    })}\n                    block={true}\n                    size={size}\n                    focused={focused || open}\n                    disabled={disabled}\n                    filled={filled || (!!placeholder && open)}\n                    label={showLabel && label}\n                    labelView={labelView}\n                    error={error}\n                    hint={hint}\n                    rightAddons={renderRightAddons()}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                    {...innerProps}\n                >\n                    <div className={cn(styles.contentWrapper, styles[`size-${size}`])}>\n                        {showPlaceholder && (\n                            <span\n                                className={cn(styles.placeholder, {\n                                    [styles.focused]: focused || open,\n                                })}\n                            >\n                                {placeholder}\n                            </span>\n                        )}\n                        {filled && (\n                            <div className={cn(styles.value, styles[`size-${size}`])}>{value}</div>\n                        )}\n                    </div>\n                </FormControlComponent>\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/option/Component.js

@@ -1,19 +1,21 @@
 import React, { isValidElement } from 'react';
 import cn from 'classnames';
 
-const OptionBase = ({ size = 48, className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark, innerProps, dataTestId, styles, }) => {
+const OptionBase = ({ size = 48, className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark, checkmarkPosition = multiple ? 'before' : 'after', innerProps, dataTestId, styles, }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
+    const renderCheckmark = (position) => Checkmark &&
+        showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: position }));
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, styles[`size-${size}`], className, {
             [styles.highlighted]: !mobile && highlighted,
             [styles.selected]: selected,
             [styles.disabled]: disabled,
         }), "data-test-id": dataTestId },
-        Checkmark && showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'before' })),
+        checkmarkPosition === 'before' && renderCheckmark('before'),
         React.createElement("div", { className: cn(styles.content, {
                 [styles.textContent]: !isValidElement(content),
             }) }, content),
-        Checkmark && showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'after' }))));
+        checkmarkPosition === 'after' && renderCheckmark('after')));
 };
 
 export { OptionBase };

package/moderncssm/components/option/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionCommonProps } from '../../typings';\n\nimport type stylesDesktop from './desktop/index.module.css';\nimport type stylesMobile from './mobile/index.module.css';\n\ntype OptionPrivateProps = {\n    /**\n     * Мобильная версия option.\n     */\n    mobile: boolean;\n    /**\n     * Стили\n     */\n    styles: typeof stylesDesktop | typeof stylesMobile;\n};\n\nexport const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({\n    size = 48,\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    mobile,\n    Checkmark,\n    innerProps,\n    dataTestId,\n    styles,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n            })}\n            data-test-id={dataTestId}\n        >\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='before'\n                />\n            )}\n\n            <div\n                className={cn(styles.content, {\n                    [styles.textContent]: !isValidElement(content),\n                })}\n            >\n                {content}\n            </div>\n\n            {/** Workaround чтобы для клика показывать отметку справа и всегда в виде иконки */}\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='after'\n                />\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;AAmBO,MAAM,UAAU,GAA+C,CAAC,EACnE,IAAI,GAAG,EAAE,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,GACT,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;IAEvC,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE;YAC5D,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,kBACY,UAAU,EAAA;QAEvB,SAAS,IAAI,aAAa,KACvB,oBAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,QAAQ,EAAA,CACnB,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC1B,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;aACjD,CAAC,EAAA,EAED,OAAO,CACN;QAGL,SAAS,IAAI,aAAa,KACvB,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,OAAO,EAClB,CAAA,CACL,CACC;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionCommonProps } from '../../typings';\n\nimport type stylesDesktop from './desktop/index.module.css';\nimport type stylesMobile from './mobile/index.module.css';\n\ntype OptionPrivateProps = {\n    /**\n     * Мобильная версия option.\n     */\n    mobile: boolean;\n    /**\n     * Стили\n     */\n    styles: typeof stylesDesktop | typeof stylesMobile;\n};\n\nexport const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({\n    size = 48,\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    mobile,\n    Checkmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    innerProps,\n    dataTestId,\n    styles,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    const renderCheckmark = (position: 'before' | 'after') =>\n        Checkmark &&\n        showCheckMark && (\n            <Checkmark\n                disabled={disabled}\n                selected={selected}\n                multiple={multiple}\n                position={position}\n            />\n        );\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n            })}\n            data-test-id={dataTestId}\n        >\n            {checkmarkPosition === 'before' && renderCheckmark('before')}\n\n            <div\n                className={cn(styles.content, {\n                    [styles.textContent]: !isValidElement(content),\n                })}\n            >\n                {content}\n            </div>\n\n            {checkmarkPosition === 'after' && renderCheckmark('after')}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;MAmBa,UAAU,GAA+C,CAAC,EACnE,IAAI,GAAG,EAAE,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,UAAU,EACV,UAAU,EACV,MAAM,GACT,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AAEvC,IAAA,MAAM,eAAe,GAAG,CAAC,QAA4B,KACjD,SAAS;QACT,aAAa,KACT,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EACpB,CAAA,CACL;IAEL,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE;YAC5D,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,kBACY,UAAU,EAAA;AAEvB,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;AAE5D,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC1B,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;aACjD,CAAC,EAAA,EAED,OAAO,CACN;QAEL,iBAAiB,KAAK,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CACxD;AAEd;;;;"}

package/moderncssm/desktop/Component.desktop.js

@@ -6,9 +6,7 @@ import { BaseSelect } from '../components/base-select/Component.js';
 import { Field } from '../components/field/Component.js';
 import { Optgroup } from '../components/optgroup/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/moderncssm';
 import '@alfalab/core-components-checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
 import '../components/option/desktop/index.module.css';

package/moderncssm/desktop/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { FormControlDesktop } from '@alfalab/core-components-form-control/desktop';\nimport { Popover } from '@alfalab/core-components-popover';\n\nimport { Arrow as DefaultArrow } from '../components/arrow';\nimport { BaseSelect } from '../components/base-select';\nimport { Field as DefaultField } from '../components/field';\nimport { Optgroup as DefaultOptgroup } from '../components/optgroup';\nimport { Option as DefaultOption } from '../components/option';\nimport { OptionsList as DefaultOptionsList } from '../components/options-list';\nimport { Search as DefaultSearch } from '../components/search';\nimport { type SelectDesktopProps } from '../typings';\n\nexport const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(\n    (\n        {\n            Arrow = DefaultArrow,\n            Field = DefaultField,\n            OptionsList = DefaultOptionsList,\n            Optgroup = DefaultOptgroup,\n            Option = DefaultOption,\n            Search = DefaultSearch,\n            fieldProps = {},\n            ...restProps\n        },\n        ref,\n    ) => (\n        <BaseSelect\n            ref={ref}\n            view='desktop'\n            Option={Option}\n            Field={Field}\n            fieldProps={{\n                FormControlComponent: FormControlDesktop,\n                ...(fieldProps as object),\n            }}\n            Search={Search}\n            Optgroup={Optgroup}\n            OptionsList={OptionsList}\n            Arrow={Arrow}\n            Popover={Popover}\n            {...restProps}\n        />\n    ),\n);\n"],"names":["Arrow","DefaultArrow","Field","DefaultField","OptionsList","DefaultOptionsList","Optgroup","DefaultOptgroup","DefaultOption","Search","DefaultSearch"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcO,MAAM,aAAa,GAAG,UAAU,CACnC,CACI,SACIA,OAAK,GAAGC,KAAY,SACpBC,OAAK,GAAGC,KAAY,eACpBC,aAAW,GAAGC,WAAkB,YAChCC,UAAQ,GAAGC,QAAe,EAC1B,MAAM,GAAGC,gBAAa,UACtBC,QAAM,GAAGC,MAAa,EACtB,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAA,CAAA,aAAA,CAAC,UAAU,EACP,EAAA,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAER,OAAK,EACZ,UAAU,EAAE;AACR,QAAA,oBAAoB,EAAE,kBAAkB;AACxC,QAAA,GAAI,UAAqB;KAC5B,EACD,MAAM,EAAEO,QAAM,EACd,QAAQ,EAAEH,UAAQ,EAClB,WAAW,EAAEF,aAAW,EACxB,KAAK,EAAEJ,OAAK,EACZ,OAAO,EAAE,OAAO,KACZ,SAAS,EAAA,CACf,CACL;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { FormControlDesktop } from '@alfalab/core-components-form-control/desktop';\nimport { Popover } from '@alfalab/core-components-popover';\n\nimport { Arrow as DefaultArrow } from '../components/arrow';\nimport { BaseSelect } from '../components/base-select';\nimport { Field as DefaultField } from '../components/field';\nimport { Optgroup as DefaultOptgroup } from '../components/optgroup';\nimport { Option as DefaultOption } from '../components/option';\nimport { OptionsList as DefaultOptionsList } from '../components/options-list';\nimport { Search as DefaultSearch } from '../components/search';\nimport { type SelectDesktopProps } from '../typings';\n\nexport const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(\n    (\n        {\n            Arrow = DefaultArrow,\n            Field = DefaultField,\n            OptionsList = DefaultOptionsList,\n            Optgroup = DefaultOptgroup,\n            Option = DefaultOption,\n            Search = DefaultSearch,\n            fieldProps = {},\n            ...restProps\n        },\n        ref,\n    ) => (\n        <BaseSelect\n            ref={ref}\n            view='desktop'\n            Option={Option}\n            Field={Field}\n            fieldProps={{\n                FormControlComponent: FormControlDesktop,\n                ...(fieldProps as object),\n            }}\n            Search={Search}\n            Optgroup={Optgroup}\n            OptionsList={OptionsList}\n            Arrow={Arrow}\n            Popover={Popover}\n            {...restProps}\n        />\n    ),\n);\n"],"names":["Arrow","DefaultArrow","Field","DefaultField","OptionsList","DefaultOptionsList","Optgroup","DefaultOptgroup","DefaultOption","Search","DefaultSearch"],"mappings":";;;;;;;;;;;;;;;;;;AAcO,MAAM,aAAa,GAAG,UAAU,CACnC,CACI,SACIA,OAAK,GAAGC,KAAY,SACpBC,OAAK,GAAGC,KAAY,eACpBC,aAAW,GAAGC,WAAkB,YAChCC,UAAQ,GAAGC,QAAe,EAC1B,MAAM,GAAGC,gBAAa,UACtBC,QAAM,GAAGC,MAAa,EACtB,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAA,CAAA,aAAA,CAAC,UAAU,EACP,EAAA,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAER,OAAK,EACZ,UAAU,EAAE;AACR,QAAA,oBAAoB,EAAE,kBAAkB;AACxC,QAAA,GAAI,UAAqB;KAC5B,EACD,MAAM,EAAEO,QAAM,EACd,QAAQ,EAAEH,UAAQ,EAClB,WAAW,EAAEF,aAAW,EACxB,KAAK,EAAEJ,OAAK,EACZ,OAAO,EAAE,OAAO,KACZ,SAAS,EAAA,CACf,CACL;;;;"}

package/moderncssm/mobile/Component.mobile.js

@@ -8,9 +8,7 @@ import { Field } from '../components/field/Component.js';
 import { Footer } from '../components/footer/Component.js';
 import { Optgroup } from '../components/optgroup/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/moderncssm';
 import '@alfalab/core-components-checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
 import '../components/option/desktop/index.module.css';
@@ -26,7 +24,7 @@ import { Header } from '../presets/useSelectWithApply/options-list-with-apply/he
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 56, optionsSize = 56, fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option = OptionResponsive, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
-    : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
+    : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, checkmarkPosition = 'before', useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
@@ -40,6 +38,7 @@ const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allow
         onChange,
         showClear,
         showSelectAll,
+        checkmarkPosition,
     });
     const bottomAddons = (flatOptions) => flatOptions.length > 0 &&
         useWithApplyHook &&

package/moderncssm/mobile/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BottomSheet } from '@alfalab/core-components-bottom-sheet';\nimport { FormControlMobile } from '@alfalab/core-components-form-control/mobile';\nimport { ModalMobile } from '@alfalab/core-components-modal/mobile';\n\nimport { Arrow as DefaultArrow } from '../components/arrow';\nimport { BaseSelect } from '../components/base-select';\nimport { Field as DefaultField } from '../components/field';\nimport { Footer } from '../components/footer';\nimport { Optgroup as DefaultOptgroup } from '../components/optgroup';\nimport { Option as DefaultOption } from '../components/option';\nimport { OptionsList as DefaultOptionsList } from '../components/options-list';\nimport { Search as DefaultSearch } from '../components/search';\nimport { VirtualOptionsList as DefaultVirtualOptionsList } from '../components/virtual-options-list';\nimport { useSelectWithApply } from '../presets/useSelectWithApply/hook';\nimport { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component';\nimport { type AnyObject, type OptionShape, type SelectMobileProps } from '../typings';\n\nconst VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;\n\nexport const SelectMobile = forwardRef(\n    (\n        {\n            autocomplete = false,\n            multiple = false,\n            allowUnselect = false,\n            disabled = false,\n            closeOnSelect = !multiple,\n            circularNavigation = false,\n            defaultOpen = false,\n            open: openProp,\n            size = 56,\n            optionsSize = 56,\n            fieldProps = {},\n            optionProps = {},\n            optionsListProps = {},\n            Arrow = DefaultArrow,\n            Field = DefaultField,\n            Optgroup = DefaultOptgroup,\n            Option = DefaultOption,\n            Search = DefaultSearch,\n            selected,\n            options,\n            OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD\n                ? DefaultVirtualOptionsList\n                : DefaultOptionsList,\n            onChange,\n            showClear = true,\n            showSelectAll,\n            showHeaderWithSelectAll,\n            useWithApplyHook = multiple,\n            showSearch,\n            searchProps,\n            ...restProps\n        }: SelectMobileProps,\n        ref,\n    ) => {\n        const applyProps = useSelectWithApply({\n            optionsListProps: {\n                ...(optionsListProps as AnyObject),\n                Footer,\n            },\n            OptionsList,\n            showSearch,\n            searchProps,\n            selected,\n            options,\n            onChange,\n            showClear,\n            showSelectAll,\n        });\n\n        const bottomAddons = (flatOptions: OptionShape[]) =>\n            flatOptions.length > 0 &&\n            useWithApplyHook &&\n            showHeaderWithSelectAll && (\n                <Header {...applyProps.optionsListProps.headerProps} mobile={true} />\n            );\n\n        return (\n            <BaseSelect\n                ref={ref}\n                view='mobile'\n                autocomplete={autocomplete}\n                multiple={multiple}\n                allowUnselect={allowUnselect}\n                disabled={disabled}\n                closeOnSelect={closeOnSelect}\n                circularNavigation={circularNavigation}\n                defaultOpen={defaultOpen}\n                open={openProp}\n                size={size}\n                optionsSize={optionsSize}\n                fieldProps={{\n                    FormControlComponent: FormControlMobile,\n                    ...(fieldProps as object),\n                }}\n                optionProps={optionProps}\n                Arrow={Arrow}\n                Field={Field}\n                Optgroup={Optgroup}\n                Option={Option}\n                Search={Search}\n                options={options}\n                selected={selected}\n                onChange={onChange}\n                OptionsList={OptionsList}\n                showSearch={showSearch}\n                searchProps={searchProps}\n                BottomSheet={BottomSheet}\n                ModalMobile={ModalMobile}\n                optionsListProps={optionsListProps}\n                {...restProps}\n                {...(restProps.isBottomSheet === false\n                    ? {\n                          modalHeaderProps: {\n                              bottomAddons,\n                              ...restProps.modalHeaderProps,\n                          },\n                      }\n                    : {\n                          bottomSheetProps: {\n                              bottomAddons,\n                              showSwipeMarker: false,\n                              ...restProps.bottomSheetProps,\n                          },\n                      })}\n                {...(useWithApplyHook && applyProps)}\n            />\n        );\n    },\n);\n"],"names":["Arrow","DefaultArrow","Field","DefaultField","Optgroup","DefaultOptgroup","DefaultOption","Search","DefaultSearch","OptionsList","DefaultVirtualOptionsList","DefaultOptionsList"],"mappings":"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"}
+{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BottomSheet } from '@alfalab/core-components-bottom-sheet';\nimport { FormControlMobile } from '@alfalab/core-components-form-control/mobile';\nimport { ModalMobile } from '@alfalab/core-components-modal/mobile';\n\nimport { Arrow as DefaultArrow } from '../components/arrow';\nimport { BaseSelect } from '../components/base-select';\nimport { Field as DefaultField } from '../components/field';\nimport { Footer } from '../components/footer';\nimport { Optgroup as DefaultOptgroup } from '../components/optgroup';\nimport { Option as DefaultOption } from '../components/option';\nimport { OptionsList as DefaultOptionsList } from '../components/options-list';\nimport { Search as DefaultSearch } from '../components/search';\nimport { VirtualOptionsList as DefaultVirtualOptionsList } from '../components/virtual-options-list';\nimport { useSelectWithApply } from '../presets/useSelectWithApply/hook';\nimport { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component';\nimport { type AnyObject, type OptionShape, type SelectMobileProps } from '../typings';\n\nconst VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;\n\nexport const SelectMobile = forwardRef(\n    (\n        {\n            autocomplete = false,\n            multiple = false,\n            allowUnselect = false,\n            disabled = false,\n            closeOnSelect = !multiple,\n            circularNavigation = false,\n            defaultOpen = false,\n            open: openProp,\n            size = 56,\n            optionsSize = 56,\n            fieldProps = {},\n            optionProps = {},\n            optionsListProps = {},\n            Arrow = DefaultArrow,\n            Field = DefaultField,\n            Optgroup = DefaultOptgroup,\n            Option = DefaultOption,\n            Search = DefaultSearch,\n            selected,\n            options,\n            OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD\n                ? DefaultVirtualOptionsList\n                : DefaultOptionsList,\n            onChange,\n            showClear = true,\n            showSelectAll,\n            showHeaderWithSelectAll,\n            checkmarkPosition = 'before',\n            useWithApplyHook = multiple,\n            showSearch,\n            searchProps,\n            ...restProps\n        }: SelectMobileProps,\n        ref,\n    ) => {\n        const applyProps = useSelectWithApply({\n            optionsListProps: {\n                ...(optionsListProps as AnyObject),\n                Footer,\n            },\n            OptionsList,\n            showSearch,\n            searchProps,\n            selected,\n            options,\n            onChange,\n            showClear,\n            showSelectAll,\n            checkmarkPosition,\n        });\n\n        const bottomAddons = (flatOptions: OptionShape[]) =>\n            flatOptions.length > 0 &&\n            useWithApplyHook &&\n            showHeaderWithSelectAll && (\n                <Header {...applyProps.optionsListProps.headerProps} mobile={true} />\n            );\n\n        return (\n            <BaseSelect\n                ref={ref}\n                view='mobile'\n                autocomplete={autocomplete}\n                multiple={multiple}\n                allowUnselect={allowUnselect}\n                disabled={disabled}\n                closeOnSelect={closeOnSelect}\n                circularNavigation={circularNavigation}\n                defaultOpen={defaultOpen}\n                open={openProp}\n                size={size}\n                optionsSize={optionsSize}\n                fieldProps={{\n                    FormControlComponent: FormControlMobile,\n                    ...(fieldProps as object),\n                }}\n                optionProps={optionProps}\n                Arrow={Arrow}\n                Field={Field}\n                Optgroup={Optgroup}\n                Option={Option}\n                Search={Search}\n                options={options}\n                selected={selected}\n                onChange={onChange}\n                OptionsList={OptionsList}\n                showSearch={showSearch}\n                searchProps={searchProps}\n                BottomSheet={BottomSheet}\n                ModalMobile={ModalMobile}\n                optionsListProps={optionsListProps}\n                {...restProps}\n                {...(restProps.isBottomSheet === false\n                    ? {\n                          modalHeaderProps: {\n                              bottomAddons,\n                              ...restProps.modalHeaderProps,\n                          },\n                      }\n                    : {\n                          bottomSheetProps: {\n                              bottomAddons,\n                              showSwipeMarker: false,\n                              ...restProps.bottomSheetProps,\n                          },\n                      })}\n                {...(useWithApplyHook && applyProps)}\n            />\n        );\n    },\n);\n"],"names":["Arrow","DefaultArrow","Field","DefaultField","Optgroup","DefaultOptgroup","DefaultOption","Search","DefaultSearch","OptionsList","DefaultVirtualOptionsList","DefaultOptionsList"],"mappings":"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"}

package/moderncssm/presets/useLazyLoading/hook.js

@@ -1,9 +1,7 @@
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
 import 'classnames';
-import '@alfalab/core-components-badge/moderncssm';
 import '@alfalab/core-components-checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark/index.module.css';
 import '../../components/option/desktop/index.module.css';

package/moderncssm/presets/useLazyLoading/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../src/presets/useLazyLoading/hook.tsx"],"sourcesContent":["import React, { type Reducer, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { Option as DefaultOption } from '../../components/option';\nimport { type OptionProps, type OptionShape } from '../../typings';\n\nimport 'intersection-observer';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\ntype OptionsFetcherResponse = {\n    options: OptionShape[];\n    hasMore: boolean;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useLazyLoadingProps = {\n    /** Количество элементов на \"странице\" */\n    limit?: number;\n\n    /** Начальный номер \"страницы\" */\n    initialOffset?: number;\n\n    /** Скелетон загружаемых элементов */\n    skeleton?: React.ReactNode;\n\n    /** Компонент пункта меню */\n    Option?: React.FC<OptionProps>;\n\n    /**\n     * Функция-загрузчик опций.\n     * @param offset - текущая страница\n     * @param limit - количество элементов на странице\n     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList\n     * @returns Promise<{\n     *  options - список опций следующей \"страницы\". Они аппендятся к предыдущим\n     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать \"следующую страницу\")\n     * }>\n     */\n    optionsFetcher(\n        offset: number,\n        limit: number,\n        queryString?: string,\n    ): Promise<OptionsFetcherResponse>;\n};\n\nconst actions = {\n    fetchOptionsStart() {\n        return { type: 'FETCH_OPTIONS_START' } as const;\n    },\n    fetchOptionsBreak() {\n        return { type: 'FETCH_OPTIONS_BREAK' } as const;\n    },\n    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {\n        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;\n    },\n    setIsOpened(opened: boolean) {\n        return { type: 'SET_IS_OPENED', payload: opened } as const;\n    },\n    setQueryString(qs: string) {\n        return { type: 'SET_QUERY_STRING', payload: qs } as const;\n    },\n    reset() {\n        return { type: 'RESET' } as const;\n    },\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;\n\nconst skeletonStyle: React.CSSProperties = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    height: '16px',\n    width: '50%',\n};\n\nexport function useLazyLoading({\n    limit = 10,\n    initialOffset = 0,\n    optionsFetcher,\n    skeleton = <Skeleton style={skeletonStyle} visible={true} />,\n    Option = DefaultOption,\n}: useLazyLoadingProps) {\n    const initialOptions: OptionShape[] = [];\n    const initialLoading = false;\n\n    const lazyLoadingInitialState = {\n        opened: false,\n        offset: initialOffset,\n        options: initialOptions,\n        loading: initialLoading,\n        allOptionsLoaded: false,\n        queryString: '',\n    };\n\n    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (\n        state,\n        action,\n    ) => {\n        switch (action.type) {\n            case 'FETCH_OPTIONS_START': {\n                return {\n                    ...state,\n                    loading: true,\n                };\n            }\n            case 'FETCH_OPTIONS_BREAK': {\n                return {\n                    ...state,\n                    loading: false,\n                };\n            }\n            case 'FETCH_OPTIONS_SUCCESS': {\n                return {\n                    ...state,\n                    options: [...state.options, ...action.payload.options],\n                    offset: state.offset + (action.payload.options.length ? 1 : 0),\n                    allOptionsLoaded: !action.payload.hasMore,\n                    loading: false,\n                };\n            }\n            case 'SET_IS_OPENED': {\n                return {\n                    ...state,\n                    opened: action.payload,\n                };\n            }\n            case 'SET_QUERY_STRING': {\n                return {\n                    // Изменение queryString подразумевает сброс текущих опций.\n                    ...lazyLoadingInitialState,\n                    opened: state.opened,\n                    loading: true,\n                    queryString: action.payload,\n                };\n            }\n            case 'RESET': {\n                return {\n                    ...lazyLoadingInitialState,\n                };\n            }\n            default: {\n                return state;\n            }\n        }\n    };\n\n    const [{ opened, offset, options, loading, allOptionsLoaded, queryString }, dispatch] =\n        useReducer(lazyLoadingReducer, lazyLoadingInitialState);\n\n    const abortFetchingOptionsRef = useRef<() => void>();\n\n    const fetchNextOffsetOptions = useCallback(() => {\n        dispatch(actions.fetchOptionsStart());\n\n        new Promise<OptionsFetcherResponse>((resolve, reject) => {\n            // eslint-disable-next-line no-unused-expressions\n            abortFetchingOptionsRef.current?.();\n            abortFetchingOptionsRef.current = reject;\n            optionsFetcher(offset, limit, queryString).then((res) => {\n                resolve(res);\n            });\n        })\n            .then((res) => {\n                dispatch(actions.fetchOptionsSuccess(res));\n                abortFetchingOptionsRef.current = undefined;\n            })\n            .catch(\n                // eslint-disable-next-line @typescript-eslint/no-empty-function\n                () => {},\n            );\n    }, [optionsFetcher, offset, limit, queryString]);\n\n    const listRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        let observer: IntersectionObserver;\n\n        if (opened && !loading && !allOptionsLoaded) {\n            observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        if (observer) {\n                            observer.disconnect();\n                        }\n                        fetchNextOffsetOptions();\n                    }\n                },\n                {\n                    root: listRef.current,\n                },\n            );\n\n            /*\n             * Обсервим пересечение последней опции с контейнером.\n             * Таким образом, загрузка следующей \"страницы\" начнется когда юзер доскроллит список\n             * до верхнего края последней опции, что обеспечивает плавность\n             */\n            const optionList = listRef.current?.querySelectorAll('[role=\"option\"]');\n            const lastOption = optionList?.[optionList.length - 1];\n\n            if (lastOption) {\n                observer.observe(lastOption);\n            }\n        }\n\n        return () => {\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, [offset, fetchNextOffsetOptions, opened, allOptionsLoaded, initialOffset, loading]);\n\n    const onOpen = useCallback(\n        (payload: { open?: boolean }) => {\n            if (payload.open) {\n                if (options.length === initialOptions.length) {\n                    fetchNextOffsetOptions();\n                }\n            } else {\n                // eslint-disable-next-line no-unused-expressions\n                abortFetchingOptionsRef.current?.();\n                dispatch(actions.fetchOptionsBreak());\n            }\n\n            dispatch(actions.setIsOpened(payload.open ?? false));\n        },\n        [initialOptions.length, fetchNextOffsetOptions, options.length],\n    );\n\n    const fetchNextOptionsRef = useRef<() => void>();\n    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n    useEffect(() => {\n        fetchNextOptionsRef.current = fetchNextOffsetOptions;\n    }, [fetchNextOffsetOptions]);\n\n    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(\n        (_, payload) => {\n            dispatch(actions.setQueryString(payload.value));\n            /* eslint-disable no-unused-expressions */\n\n            /*\n             * Если во время загрузки опций юзер ввел новый текст в инпут,\n             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу\n             */\n            abortFetchingOptionsRef.current?.();\n\n            listRef.current?.scrollTo({ top: 0 });\n\n            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */\n            if (fetchNextOptionsTimerRef.current) {\n                clearTimeout(fetchNextOptionsTimerRef.current);\n            }\n            fetchNextOptionsTimerRef.current = setTimeout(() => {\n                /*\n                 * После дебаунса необходимо вызвать функцию-загрузчик,\n                 * содержащую актуальные на данный момент данные оффсета и queryString.\n                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,\n                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,\n                 * так что берем ее из обновляемого рефа\n                 */\n                fetchNextOptionsRef.current?.();\n            }, DEBOUNCE_TIMEOUT);\n            /* eslint-enable */\n        },\n        [],\n    );\n\n    const renderOption = (props: OptionProps) => (\n        <Option {...props} highlighted={loading ? false : props.highlighted} />\n    );\n\n    const skeletonOptions: OptionShape[] = useMemo(\n        () =>\n            Array(loading ? limit : 0)\n                .fill(0)\n                .map((_, key) => ({\n                    key: `loading-${key}`,\n                    disabled: true,\n                    content: skeleton,\n                })),\n        [loading, limit, skeleton],\n    );\n\n    const reset = useCallback(() => {\n        dispatch(actions.reset());\n    }, []);\n\n    return {\n        optionsProps: {\n            Option: renderOption,\n            options: [...options, ...skeletonOptions],\n            optionsListProps: {\n                ref: listRef,\n                inputProps: {\n                    onChange: onQueryStringChange,\n                    value: queryString,\n                },\n            },\n            onOpen,\n        },\n        reset,\n    };\n}\n"],"names":["DefaultOption"],"mappings":"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"}
+{"version":3,"file":"hook.js","sources":["../../../src/presets/useLazyLoading/hook.tsx"],"sourcesContent":["import React, { type Reducer, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { Option as DefaultOption } from '../../components/option';\nimport { type OptionProps, type OptionShape } from '../../typings';\n\nimport 'intersection-observer';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\ntype OptionsFetcherResponse = {\n    options: OptionShape[];\n    hasMore: boolean;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useLazyLoadingProps = {\n    /** Количество элементов на \"странице\" */\n    limit?: number;\n\n    /** Начальный номер \"страницы\" */\n    initialOffset?: number;\n\n    /** Скелетон загружаемых элементов */\n    skeleton?: React.ReactNode;\n\n    /** Компонент пункта меню */\n    Option?: React.FC<OptionProps>;\n\n    /**\n     * Функция-загрузчик опций.\n     * @param offset - текущая страница\n     * @param limit - количество элементов на странице\n     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList\n     * @returns Promise<{\n     *  options - список опций следующей \"страницы\". Они аппендятся к предыдущим\n     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать \"следующую страницу\")\n     * }>\n     */\n    optionsFetcher(\n        offset: number,\n        limit: number,\n        queryString?: string,\n    ): Promise<OptionsFetcherResponse>;\n};\n\nconst actions = {\n    fetchOptionsStart() {\n        return { type: 'FETCH_OPTIONS_START' } as const;\n    },\n    fetchOptionsBreak() {\n        return { type: 'FETCH_OPTIONS_BREAK' } as const;\n    },\n    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {\n        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;\n    },\n    setIsOpened(opened: boolean) {\n        return { type: 'SET_IS_OPENED', payload: opened } as const;\n    },\n    setQueryString(qs: string) {\n        return { type: 'SET_QUERY_STRING', payload: qs } as const;\n    },\n    reset() {\n        return { type: 'RESET' } as const;\n    },\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;\n\nconst skeletonStyle: React.CSSProperties = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    height: '16px',\n    width: '50%',\n};\n\nexport function useLazyLoading({\n    limit = 10,\n    initialOffset = 0,\n    optionsFetcher,\n    skeleton = <Skeleton style={skeletonStyle} visible={true} />,\n    Option = DefaultOption,\n}: useLazyLoadingProps) {\n    const initialOptions: OptionShape[] = [];\n    const initialLoading = false;\n\n    const lazyLoadingInitialState = {\n        opened: false,\n        offset: initialOffset,\n        options: initialOptions,\n        loading: initialLoading,\n        allOptionsLoaded: false,\n        queryString: '',\n    };\n\n    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (\n        state,\n        action,\n    ) => {\n        switch (action.type) {\n            case 'FETCH_OPTIONS_START': {\n                return {\n                    ...state,\n                    loading: true,\n                };\n            }\n            case 'FETCH_OPTIONS_BREAK': {\n                return {\n                    ...state,\n                    loading: false,\n                };\n            }\n            case 'FETCH_OPTIONS_SUCCESS': {\n                return {\n                    ...state,\n                    options: [...state.options, ...action.payload.options],\n                    offset: state.offset + (action.payload.options.length ? 1 : 0),\n                    allOptionsLoaded: !action.payload.hasMore,\n                    loading: false,\n                };\n            }\n            case 'SET_IS_OPENED': {\n                return {\n                    ...state,\n                    opened: action.payload,\n                };\n            }\n            case 'SET_QUERY_STRING': {\n                return {\n                    // Изменение queryString подразумевает сброс текущих опций.\n                    ...lazyLoadingInitialState,\n                    opened: state.opened,\n                    loading: true,\n                    queryString: action.payload,\n                };\n            }\n            case 'RESET': {\n                return {\n                    ...lazyLoadingInitialState,\n                };\n            }\n            default: {\n                return state;\n            }\n        }\n    };\n\n    const [{ opened, offset, options, loading, allOptionsLoaded, queryString }, dispatch] =\n        useReducer(lazyLoadingReducer, lazyLoadingInitialState);\n\n    const abortFetchingOptionsRef = useRef<() => void>();\n\n    const fetchNextOffsetOptions = useCallback(() => {\n        dispatch(actions.fetchOptionsStart());\n\n        new Promise<OptionsFetcherResponse>((resolve, reject) => {\n            // eslint-disable-next-line no-unused-expressions\n            abortFetchingOptionsRef.current?.();\n            abortFetchingOptionsRef.current = reject;\n            optionsFetcher(offset, limit, queryString).then((res) => {\n                resolve(res);\n            });\n        })\n            .then((res) => {\n                dispatch(actions.fetchOptionsSuccess(res));\n                abortFetchingOptionsRef.current = undefined;\n            })\n            .catch(\n                // eslint-disable-next-line @typescript-eslint/no-empty-function\n                () => {},\n            );\n    }, [optionsFetcher, offset, limit, queryString]);\n\n    const listRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        let observer: IntersectionObserver;\n\n        if (opened && !loading && !allOptionsLoaded) {\n            observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        if (observer) {\n                            observer.disconnect();\n                        }\n                        fetchNextOffsetOptions();\n                    }\n                },\n                {\n                    root: listRef.current,\n                },\n            );\n\n            /*\n             * Обсервим пересечение последней опции с контейнером.\n             * Таким образом, загрузка следующей \"страницы\" начнется когда юзер доскроллит список\n             * до верхнего края последней опции, что обеспечивает плавность\n             */\n            const optionList = listRef.current?.querySelectorAll('[role=\"option\"]');\n            const lastOption = optionList?.[optionList.length - 1];\n\n            if (lastOption) {\n                observer.observe(lastOption);\n            }\n        }\n\n        return () => {\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, [offset, fetchNextOffsetOptions, opened, allOptionsLoaded, initialOffset, loading]);\n\n    const onOpen = useCallback(\n        (payload: { open?: boolean }) => {\n            if (payload.open) {\n                if (options.length === initialOptions.length) {\n                    fetchNextOffsetOptions();\n                }\n            } else {\n                // eslint-disable-next-line no-unused-expressions\n                abortFetchingOptionsRef.current?.();\n                dispatch(actions.fetchOptionsBreak());\n            }\n\n            dispatch(actions.setIsOpened(payload.open ?? false));\n        },\n        [initialOptions.length, fetchNextOffsetOptions, options.length],\n    );\n\n    const fetchNextOptionsRef = useRef<() => void>();\n    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n    useEffect(() => {\n        fetchNextOptionsRef.current = fetchNextOffsetOptions;\n    }, [fetchNextOffsetOptions]);\n\n    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(\n        (_, payload) => {\n            dispatch(actions.setQueryString(payload.value));\n            /* eslint-disable no-unused-expressions */\n\n            /*\n             * Если во время загрузки опций юзер ввел новый текст в инпут,\n             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу\n             */\n            abortFetchingOptionsRef.current?.();\n\n            listRef.current?.scrollTo({ top: 0 });\n\n            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */\n            if (fetchNextOptionsTimerRef.current) {\n                clearTimeout(fetchNextOptionsTimerRef.current);\n            }\n            fetchNextOptionsTimerRef.current = setTimeout(() => {\n                /*\n                 * После дебаунса необходимо вызвать функцию-загрузчик,\n                 * содержащую актуальные на данный момент данные оффсета и queryString.\n                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,\n                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,\n                 * так что берем ее из обновляемого рефа\n                 */\n                fetchNextOptionsRef.current?.();\n            }, DEBOUNCE_TIMEOUT);\n            /* eslint-enable */\n        },\n        [],\n    );\n\n    const renderOption = (props: OptionProps) => (\n        <Option {...props} highlighted={loading ? false : props.highlighted} />\n    );\n\n    const skeletonOptions: OptionShape[] = useMemo(\n        () =>\n            Array(loading ? limit : 0)\n                .fill(0)\n                .map((_, key) => ({\n                    key: `loading-${key}`,\n                    disabled: true,\n                    content: skeleton,\n                })),\n        [loading, limit, skeleton],\n    );\n\n    const reset = useCallback(() => {\n        dispatch(actions.reset());\n    }, []);\n\n    return {\n        optionsProps: {\n            Option: renderOption,\n            options: [...options, ...skeletonOptions],\n            optionsListProps: {\n                ref: listRef,\n                inputProps: {\n                    onChange: onQueryStringChange,\n                    value: queryString,\n                },\n            },\n            onOpen,\n        },\n        reset,\n    };\n}\n"],"names":["DefaultOption"],"mappings":"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"}

package/moderncssm/presets/useSelectWithApply/hook.d.ts

@@ -55,8 +55,13 @@ export declare type UseSelectWithApplyProps = {
      * @default 'reset-footer'
      */
     resetName?: string;
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
-export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, applyName, resetName, }: UseSelectWithApplyProps): {
+export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, checkmarkPosition, showSearch, searchProps, applyName, resetName, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
         className?: string | undefined;
         optionGroupClassName?: string | undefined;
@@ -237,6 +242,7 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
         showClear: boolean;
         showSelectAll: boolean;
         showHeaderWithSelectAll: boolean;
+        checkmarkPosition: "before" | "after";
         showSearch: boolean;
         searchProps: {
             componentProps?: import("../../typings").SearchProps | undefined;

package/moderncssm/presets/useSelectWithApply/hook.js

@@ -5,7 +5,7 @@ import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions,
 import { OptionsListWithApply } from './options-list-with-apply/Component.js';
 
 const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
-function useSelectWithApply({ options, selected, onChange = () => null, onSelectAllClick = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, showSearch = false, searchProps = {}, applyName = 'apply-footer', resetName = 'reset-footer', }) {
+function useSelectWithApply({ options, selected, onChange = () => null, onSelectAllClick = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, checkmarkPosition = 'before', showSearch = false, searchProps = {}, applyName = 'apply-footer', resetName = 'reset-footer', }) {
     const [searchState, setSearchState] = useState('');
     const [search, setSearch] = typeof searchProps?.value === 'string'
         ? [searchProps.value, searchProps.onChange]
@@ -99,6 +99,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, onSelect
                 checked: selectedDraft.length === flatOptions.length ||
                     flatOptions.every(({ key }) => selectedKeys.includes(key)),
                 onChange: handleToggleAll,
+                checkmarkPosition,
             },
         },
         multiple: true,
@@ -123,6 +124,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, onSelect
             showClear,
             showSelectAll,
             showHeaderWithSelectAll,
+            checkmarkPosition,
             showSearch,
             searchProps,
             applyName,