@alfalab/core-components-input-autocomplete 14.0.6 → 14.0.7-alfasans

package/moderncssm/autocomplete-field/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { getAddonsByPriority } from '@alfalab/core-components-input/helpers/get-addons-by-priority';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n    Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n    label,\n    labelView = 'inner',\n    placeholder,\n    size,\n    Arrow,\n    Input = DefaultInput,\n    value,\n    error,\n    success,\n    hint,\n    disabled,\n    readOnly,\n    onInput,\n    inputProps = {},\n    innerProps,\n    dataTestId,\n}: AutocompleteFieldProps) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const { onClick, onFocus } = innerProps;\n\n    const inputDisabled = disabled || readOnly;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLDivElement>) => {\n            if (onClick) onClick(event);\n\n            if (inputRef.current) {\n                inputRef.current.focus();\n            }\n        },\n        [onClick],\n    );\n\n    const handleInput: InputProps['onChange'] = (_, payload) =>\n        onInput?.(payload.value, OnInputReason.Change);\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: 2,\n            predicate: Boolean(inputProps.rightAddons),\n            render: () => inputProps.rightAddons,\n        },\n        {\n            priority: 1,\n            predicate: Boolean(Arrow) && !inputDisabled,\n            render: () => (\n                <span\n                    className={cn(styles.arrow, {\n                        [styles.error]: error,\n                    })}\n                >\n                    {Arrow}\n                </span>\n            ),\n        },\n    ]);\n\n    return (\n        <Input\n            dataTestId={dataTestId}\n            {...inputProps}\n            {...innerProps}\n            wrapperRef={mergeRefs([\n                innerProps.ref as React.Ref<HTMLElement>,\n                inputProps.wrapperRef as React.Ref<HTMLElement>,\n            ])}\n            ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n            disabled={disabled}\n            readOnly={readOnly}\n            block={true}\n            label={label}\n            labelView={labelView}\n            placeholder={placeholder}\n            size={size}\n            error={error}\n            success={success}\n            hint={hint}\n            onChange={handleInput}\n            onClick={inputDisabled ? undefined : handleClick}\n            onFocus={inputDisabled ? undefined : onFocus}\n            autoComplete='off'\n            value={value}\n            rightAddons={rightAddonsMap}\n        />\n    );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;;MAiBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;QAE3B,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;AAC3B;AACL,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;IACH,MAAM,cAAc,GAAG,mBAAmB,CAAC;AACvC,QAAA;AACI,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC;AAC1C,YAAA,MAAM,EAAE,MAAM,UAAU,CAAC,WAAW;AACvC,SAAA;AACD,QAAA;AACI,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa;AAC3C,YAAA,MAAM,EAAE,OACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,oBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;iBACxB,CAAC,EAAA,EAED,KAAK,CACH,CACV;AACJ,SAAA;AACJ,KAAA,CAAC;AAEF,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,cAAc,EAC7B,CAAA;AAEV;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n    Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n    label,\n    labelView = 'inner',\n    placeholder,\n    size,\n    Arrow,\n    Input = DefaultInput,\n    value,\n    error,\n    success,\n    hint,\n    disabled,\n    readOnly,\n    onInput,\n    inputProps = {},\n    innerProps,\n    dataTestId,\n}: AutocompleteFieldProps) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const { onClick, onFocus } = innerProps;\n\n    const inputDisabled = disabled || readOnly;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLDivElement>) => {\n            if (onClick) onClick(event);\n\n            if (inputRef.current) {\n                inputRef.current.focus();\n            }\n        },\n        [onClick],\n    );\n\n    const handleInput: InputProps['onChange'] = (_, payload) =>\n        onInput?.(payload.value, OnInputReason.Change);\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            {inputProps.rightAddons}\n            {Arrow && !inputDisabled && (\n                <span\n                    className={cn(styles.arrow, {\n                        [styles.error]: error,\n                    })}\n                >\n                    {Arrow}\n                </span>\n            )}\n        </Fragment>\n    );\n\n    return (\n        <Input\n            dataTestId={dataTestId}\n            {...inputProps}\n            {...innerProps}\n            wrapperRef={mergeRefs([\n                innerProps.ref as React.Ref<HTMLElement>,\n                inputProps.wrapperRef as React.Ref<HTMLElement>,\n            ])}\n            ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n            disabled={disabled}\n            readOnly={readOnly}\n            block={true}\n            label={label}\n            labelView={labelView}\n            placeholder={placeholder}\n            size={size}\n            error={error}\n            success={success}\n            hint={hint}\n            onChange={handleInput}\n            onClick={inputDisabled ? undefined : handleClick}\n            onFocus={inputDisabled ? undefined : onFocus}\n            autoComplete='off'\n            value={value}\n            rightAddons={renderRightAddons()}\n        />\n    );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;QAE3B,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;AAC3B;AACL,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;AACH,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,UAAU,CAAC,WAAW;AACtB,QAAA,KAAK,IAAI,CAAC,aAAa,KACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;AACxB,aAAA,CAAC,IAED,KAAK,CACH,CACV,CACM,CACd;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAAE,EAClC,CAAA;AAEV;;;;"}

package/moderncssm/autocomplete-mobile-field/Component.js

@@ -1,7 +1,7 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, Fragment } from 'react';
 import cn from 'classnames';
 import { FormControlMobile } from '@alfalab/core-components-form-control/moderncssm/mobile';
-import { getAddonsByPriority, ClearButton, LockIcon } from '@alfalab/core-components-input/moderncssm/shared';
+import { ClearButton, LockIcon } from '@alfalab/core-components-input/moderncssm/shared';
 import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { StatusBadge } from '@alfalab/core-components-status-badge/moderncssm';
 import { useFocus } from '@alfalab/hooks';
@@ -24,47 +24,22 @@ const AutocompleteMobileField = ({ size = 56, open, disabled, value, innerProps,
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled && !readOnly,
-            render: () => React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors }),
-        },
-        {
-            priority: 3,
-            predicate: Boolean(error),
-            render: () => (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
-        },
-        {
-            priority: 3,
-            predicate: Boolean(success && !error),
-            render: () => (React.createElement("div", { className: styles.successIcon },
-                React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))),
-        },
-        {
-            priority: 2,
-            predicate: Boolean(rightAddons),
-            render: () => rightAddons,
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !disabled && !readOnly,
-            render: () => Arrow,
-        },
-        {
-            priority: 0,
-            predicate: Boolean(disabled || readOnly),
-            render: () => React.createElement(LockIcon, { colors: colors, size: size }),
-        },
-    ]);
+    const renderRightAddons = () => (React.createElement(Fragment, null,
+        clear && filled && !disabled && !readOnly && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
+        error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
+            React.createElement(StatusBadge, { view: 'negative-alert', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
+        success && !error && (React.createElement("div", { className: styles.successIcon },
+            React.createElement(StatusBadge, { view: 'positive-checkmark', size: statusBadgeSize, dataTestId: getDataTestId(dataTestId, 'success-icon') }))),
+        rightAddons,
+        !disabled && !readOnly && Arrow,
+        (disabled || readOnly) && React.createElement(LockIcon, { colors: colors, size: size })));
     return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
         React.createElement(FormControlMobile, { fieldClassName: cn(styles.field, fieldClassName, {
                 [styles.disabled]: disabled,
                 [styles.focusVisible]: focusVisible,
             }), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: getDataTestId(dataTestId, 'form-control'), 
             // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
-            tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps, readOnly: readOnly, colors: colors, error: error, rightAddons: rightAddonsMap },
+            tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps, readOnly: readOnly, colors: colors, error: error, rightAddons: renderRightAddons() },
             React.createElement("div", { className: styles.contentWrapper },
                 showPlaceholder && React.createElement("span", { className: styles.placeholder }, placeholder),
                 filled && React.createElement("div", { className: styles.value }, value)))));

package/moderncssm/autocomplete-mobile-field/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n    FormControlMobile,\n    type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton, getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { StatusBadge } from '@alfalab/core-components-status-badge';\nimport { useFocus } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\nexport type AutocompleteMobileFieldProps = FormControlMobileProps &\n    Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {\n        /**\n         * Значение поля ввода\n         */\n        value?: string;\n    };\n\n// eslint-disable-next-line complexity\nexport const AutocompleteMobileField = ({\n    size = 56,\n    open,\n    disabled,\n    value,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    labelView = 'inner',\n    placeholder,\n    Arrow,\n    valueRenderer,\n    toggleMenu,\n    setSelectedItems,\n    selectedMultiple,\n    FormControlComponent,\n    rightAddons,\n    error,\n    readOnly,\n    clear,\n    success,\n    onClear,\n    onInput,\n    colors = 'default',\n    ...restProps\n}: AutocompleteMobileFieldProps & FieldProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const filled = Boolean(value);\n    const showPlaceholder = placeholder && !filled && labelView === 'outer';\n\n    const statusBadgeSize = size === 40 ? 16 : 20;\n\n    const { tabIndex, ...restInnerProps } = innerProps;\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 && !readOnly,\n            render: () => <ClearButton onClick={onClear} disabled={disabled} colors={colors} />,\n        },\n        {\n            priority: 3,\n            predicate: Boolean(error),\n            render: () => (\n                <div className={styles.errorIcon} data-addon='error-icon'>\n                    <StatusBadge\n                        view='negative-alert'\n                        size={statusBadgeSize}\n                        dataTestId={getDataTestId(dataTestId, 'error-icon')}\n                    />\n                </div>\n            ),\n        },\n        {\n            priority: 3,\n            predicate: Boolean(success && !error),\n            render: () => (\n                <div className={styles.successIcon}>\n                    <StatusBadge\n                        view='positive-checkmark'\n                        size={statusBadgeSize}\n                        dataTestId={getDataTestId(dataTestId, 'success-icon')}\n                    />\n                </div>\n            ),\n        },\n        {\n            priority: 2,\n            predicate: Boolean(rightAddons),\n            render: () => rightAddons,\n        },\n        {\n            priority: 1,\n            predicate: Boolean(Arrow) && !disabled && !readOnly,\n            render: () => Arrow,\n        },\n        {\n            priority: 0,\n            predicate: Boolean(disabled || readOnly),\n            render: () => <LockIcon colors={colors} size={size} />,\n        },\n    ]);\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n        >\n            <FormControlMobile\n                fieldClassName={cn(styles.field, fieldClassName, {\n                    [styles.disabled]: disabled,\n                    [styles.focusVisible]: focusVisible,\n                })}\n                block={true}\n                size={size}\n                focused={focused}\n                disabled={disabled}\n                filled={filled}\n                labelView={labelView}\n                dataTestId={getDataTestId(dataTestId, 'form-control')}\n                // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус\n                tabIndex={open ? undefined : tabIndex}\n                {...restProps}\n                {...restInnerProps}\n                readOnly={readOnly}\n                colors={colors}\n                error={error}\n                rightAddons={rightAddonsMap}\n            >\n                <div className={styles.contentWrapper}>\n                    {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}\n                    {filled && <div className={styles.value}>{value}</div>}\n                </div>\n            </FormControlMobile>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { type ElementType, Fragment, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n    FormControlMobile,\n    type FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton, LockIcon } from '@alfalab/core-components-input/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { StatusBadge } from '@alfalab/core-components-status-badge';\nimport { useFocus } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\nexport type AutocompleteMobileFieldProps = FormControlMobileProps &\n    Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {\n        /**\n         * Значение поля ввода\n         */\n        value?: string;\n    };\n\n// eslint-disable-next-line complexity\nexport const AutocompleteMobileField = ({\n    size = 56,\n    open,\n    disabled,\n    value,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    labelView = 'inner',\n    placeholder,\n    Arrow,\n    valueRenderer,\n    toggleMenu,\n    setSelectedItems,\n    selectedMultiple,\n    FormControlComponent,\n    rightAddons,\n    error,\n    readOnly,\n    clear,\n    success,\n    onClear,\n    onInput,\n    colors = 'default',\n    ...restProps\n}: AutocompleteMobileFieldProps & FieldProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const filled = Boolean(value);\n    const showPlaceholder = placeholder && !filled && labelView === 'outer';\n\n    const statusBadgeSize = size === 40 ? 16 : 20;\n\n    const { tabIndex, ...restInnerProps } = innerProps;\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 && !readOnly && (\n                <ClearButton onClick={onClear} disabled={disabled} colors={colors} />\n            )}\n            {error && (\n                <div className={styles.errorIcon} data-addon='error-icon'>\n                    <StatusBadge\n                        view='negative-alert'\n                        size={statusBadgeSize}\n                        dataTestId={getDataTestId(dataTestId, 'error-icon')}\n                    />\n                </div>\n            )}\n            {success && !error && (\n                <div className={styles.successIcon}>\n                    <StatusBadge\n                        view='positive-checkmark'\n                        size={statusBadgeSize}\n                        dataTestId={getDataTestId(dataTestId, 'success-icon')}\n                    />\n                </div>\n            )}\n            {rightAddons}\n            {!disabled && !readOnly && Arrow}\n            {(disabled || readOnly) && <LockIcon colors={colors} size={size} />}\n        </Fragment>\n    );\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n        >\n            <FormControlMobile\n                fieldClassName={cn(styles.field, fieldClassName, {\n                    [styles.disabled]: disabled,\n                    [styles.focusVisible]: focusVisible,\n                })}\n                block={true}\n                size={size}\n                focused={focused}\n                disabled={disabled}\n                filled={filled}\n                labelView={labelView}\n                dataTestId={getDataTestId(dataTestId, 'form-control')}\n                // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус\n                tabIndex={open ? undefined : tabIndex}\n                {...restProps}\n                {...restInnerProps}\n                readOnly={readOnly}\n                colors={colors}\n                error={error}\n                rightAddons={renderRightAddons()}\n            >\n                <div className={styles.contentWrapper}>\n                    {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}\n                    {filled && <div className={styles.value}>{value}</div>}\n                </div>\n            </FormControlMobile>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/autocomplete-mobile-field/index.module.css

@@ -37,7 +37,8 @@
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     white-space: nowrap;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-input-autocomplete",
-    "version": "14.0.6",
+    "version": "14.0.7-alfasans",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,13 +10,13 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-form-control": "^14.0.2",
-        "@alfalab/core-components-input": "^17.1.1",
-        "@alfalab/core-components-mq": "^6.0.2",
-        "@alfalab/core-components-popover": "^8.0.2",
-        "@alfalab/core-components-select": "^19.0.6",
-        "@alfalab/core-components-shared": "^2.1.0",
-        "@alfalab/core-components-status-badge": "^3.0.1",
+        "@alfalab/core-components-form-control": "14.0.3-alfasans",
+        "@alfalab/core-components-input": "17.1.2-alfasans",
+        "@alfalab/core-components-mq": "6.0.2-alfasans",
+        "@alfalab/core-components-popover": "8.0.2-alfasans",
+        "@alfalab/core-components-select": "19.1.0-alfasans",
+        "@alfalab/core-components-shared": "2.1.0-alfasans",
+        "@alfalab/core-components-status-badge": "3.0.1-alfasans",
         "@alfalab/hooks": "^1.13.1",
         "@maskito/core": "^1.7.0",
         "classnames": "^2.5.1",
@@ -32,6 +32,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.1",
-    "varsVersion": "11.0.1"
+    "themesVersion": "15.0.2-alfasans",
+    "varsVersion": "11.0.1-alfasans"
 }

package/src/autocomplete-field/Component.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useRef } from 'react';
+import React, { Fragment, useCallback, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
 import { type InputProps } from '@alfalab/core-components-input';
 import { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';
-import { getAddonsByPriority } from '@alfalab/core-components-input/helpers/get-addons-by-priority';
 import { type FieldProps } from '@alfalab/core-components-select/shared';
 
 import { OnInputReason } from '../enums';
@@ -61,16 +60,10 @@ export const AutocompleteField = ({
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 2,
-            predicate: Boolean(inputProps.rightAddons),
-            render: () => inputProps.rightAddons,
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !inputDisabled,
-            render: () => (
+    const renderRightAddons = () => (
+        <Fragment>
+            {inputProps.rightAddons}
+            {Arrow && !inputDisabled && (
                 <span
                     className={cn(styles.arrow, {
                         [styles.error]: error,
@@ -78,9 +71,9 @@ export const AutocompleteField = ({
                 >
                     {Arrow}
                 </span>
-            ),
-        },
-    ]);
+            )}
+        </Fragment>
+    );
 
     return (
         <Input
@@ -107,7 +100,7 @@ export const AutocompleteField = ({
             onFocus={inputDisabled ? undefined : onFocus}
             autoComplete='off'
             value={value}
-            rightAddons={rightAddonsMap}
+            rightAddons={renderRightAddons()}
         />
     );
 };

package/src/autocomplete-mobile-field/Component.tsx

@@ -1,11 +1,11 @@
-import React, { type ElementType, useRef, useState } from 'react';
+import React, { type ElementType, Fragment, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import {
     FormControlMobile,
     type FormControlMobileProps,
 } from '@alfalab/core-components-form-control/mobile';
-import { ClearButton, getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/shared';
+import { ClearButton, LockIcon } from '@alfalab/core-components-input/shared';
 import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { StatusBadge } from '@alfalab/core-components-status-badge';
@@ -76,16 +76,12 @@ export const AutocompleteMobileField = ({
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled && !readOnly,
-            render: () => <ClearButton onClick={onClear} disabled={disabled} colors={colors} />,
-        },
-        {
-            priority: 3,
-            predicate: Boolean(error),
-            render: () => (
+    const renderRightAddons = () => (
+        <Fragment>
+            {clear && filled && !disabled && !readOnly && (
+                <ClearButton onClick={onClear} disabled={disabled} colors={colors} />
+            )}
+            {error && (
                 <div className={styles.errorIcon} data-addon='error-icon'>
                     <StatusBadge
                         view='negative-alert'
@@ -93,12 +89,8 @@ export const AutocompleteMobileField = ({
                         dataTestId={getDataTestId(dataTestId, 'error-icon')}
                     />
                 </div>
-            ),
-        },
-        {
-            priority: 3,
-            predicate: Boolean(success && !error),
-            render: () => (
+            )}
+            {success && !error && (
                 <div className={styles.successIcon}>
                     <StatusBadge
                         view='positive-checkmark'
@@ -106,24 +98,12 @@ export const AutocompleteMobileField = ({
                         dataTestId={getDataTestId(dataTestId, 'success-icon')}
                     />
                 </div>
-            ),
-        },
-        {
-            priority: 2,
-            predicate: Boolean(rightAddons),
-            render: () => rightAddons,
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !disabled && !readOnly,
-            render: () => Arrow,
-        },
-        {
-            priority: 0,
-            predicate: Boolean(disabled || readOnly),
-            render: () => <LockIcon colors={colors} size={size} />,
-        },
-    ]);
+            )}
+            {rightAddons}
+            {!disabled && !readOnly && Arrow}
+            {(disabled || readOnly) && <LockIcon colors={colors} size={size} />}
+        </Fragment>
+    );
 
     return (
         <div
@@ -151,7 +131,7 @@ export const AutocompleteMobileField = ({
                 readOnly={readOnly}
                 colors={colors}
                 error={error}
-                rightAddons={rightAddonsMap}
+                rightAddons={renderRightAddons()}
             >
                 <div className={styles.contentWrapper}>
                     {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}