@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/dist/cjs/components/FieldPhone/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useCountries';
+export * from './useMapCountryToOptions';

package/dist/cjs/components/FieldPhone/hooks/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useCountries"), exports);
+__exportStar(require("./useMapCountryToOptions"), exports);

package/dist/cjs/components/FieldPhone/hooks/useCountries.d.ts

@@ -0,0 +1,2 @@
+import { CountrySettings, FieldPhoneOptionsProps } from '../types';
+export declare function useCountries(optionsSettings?: CountrySettings): FieldPhoneOptionsProps[];

package/dist/cjs/components/FieldPhone/hooks/useCountries.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCountries = useCountries;
+const react_1 = require("react");
+const countries_1 = require("../countries");
+const utils_1 = require("../utils");
+const useMapCountryToOptions_1 = require("./useMapCountryToOptions");
+function useCountries(optionsSettings) {
+    const mapCountryToOption = (0, useMapCountryToOptions_1.useMapCountryToOptions)();
+    const filterCountries = (0, react_1.useMemo)(() => {
+        if (!optionsSettings) {
+            return () => true;
+        }
+        const { includedCountries, excludedCountries } = optionsSettings;
+        const uniqueKey = 'value';
+        if (includedCountries) {
+            const includedSet = (0, utils_1.uniqueSet)(includedCountries, uniqueKey);
+            return (country) => includedSet.has(country[uniqueKey]);
+        }
+        if (excludedCountries) {
+            const excludedSet = (0, utils_1.uniqueSet)(excludedCountries, uniqueKey);
+            return (country) => !excludedSet.has(country[uniqueKey]);
+        }
+        return () => true;
+    }, [optionsSettings]);
+    return (0, react_1.useMemo)(() => {
+        if (optionsSettings?.overriddenOptions)
+            return optionsSettings.overriddenOptions;
+        return countries_1.ALL_COUNTRY_CODES.reduce((result, country) => {
+            if (filterCountries(country)) {
+                result.push(mapCountryToOption(country));
+            }
+            return result;
+        }, []);
+    }, [optionsSettings, filterCountries, mapCountryToOption]);
+}

package/dist/cjs/components/FieldPhone/hooks/useMapCountryToOptions.d.ts

@@ -0,0 +1,2 @@
+import { Country, FieldPhoneOptionsProps } from '../types';
+export declare function useMapCountryToOptions(): ({ value: id, mask, caption, icon, iso2 }: Country) => FieldPhoneOptionsProps;

package/dist/cjs/components/FieldPhone/hooks/useMapCountryToOptions.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMapCountryToOptions = useMapCountryToOptions;
+const react_1 = require("react");
+const locale_1 = require("../../../locale");
+const constants_1 = require("../constants");
+function useMapCountryToOptions() {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const mapCountryToOption = (0, react_1.useCallback)(({ value: id, mask, caption, icon, iso2 }) => ({
+        id,
+        mask,
+        content: {
+            label: t(`FieldPhone.${id}`),
+            caption,
+        },
+        beforeContent: (0, react_1.createElement)(icon, { size: constants_1.FLAG_ICON_SIZE }),
+        iso2,
+    }), [t]);
+    return mapCountryToOption;
+}

package/dist/cjs/components/FieldPhone/index.d.ts

@@ -0,0 +1,5 @@
+export * from './countries';
+export * from './FieldPhone';
+export * from './hooks';
+export * from './types';
+export { detectCountryByPhone, formatPhoneNumber } from './utils';

package/dist/cjs/components/FieldPhone/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPhoneNumber = exports.detectCountryByPhone = void 0;
+__exportStar(require("./countries"), exports);
+__exportStar(require("./FieldPhone"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./types"), exports);
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "detectCountryByPhone", { enumerable: true, get: function () { return utils_1.detectCountryByPhone; } });
+Object.defineProperty(exports, "formatPhoneNumber", { enumerable: true, get: function () { return utils_1.formatPhoneNumber; } });

package/dist/cjs/components/FieldPhone/styles.module.css

@@ -0,0 +1,3 @@
+.fieldPhone input[data-empty]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}

package/dist/cjs/components/FieldPhone/types.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { useIMask } from 'react-imask';
+import { ALL_COUNTRY_CODES } from './countries';
+export type FieldPhoneOptionsProps = {
+    id: string;
+    beforeContent: ReactNode;
+    content: {
+        label: string;
+        caption: string;
+    };
+    mask: string;
+    iso2: string;
+};
+export type MaskOptions = Parameters<typeof useIMask>[0];
+export type Country = (typeof ALL_COUNTRY_CODES)[number];
+type OneOf<T extends object> = {
+    [K in keyof T]: {
+        [P in K]: T[P];
+    } & {
+        [P in Exclude<keyof T, K>]?: never;
+    };
+}[keyof T];
+export type CountrySettings = OneOf<{
+    /** Список элементов выпадающего списка со странами; переопределяет встроенный список пакета */
+    overriddenOptions: FieldPhoneOptionsProps[];
+    /** Список стран, которые должны отображаться в селекторе (из встроенного перечня пакета) */
+    includedCountries: Country[];
+    /** Список стран, которые будут исключены из встроенного перечня пакета */
+    excludedCountries: Country[];
+}>;
+export {};

package/dist/cjs/components/FieldPhone/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/FieldPhone/utils.d.ts

@@ -0,0 +1,14 @@
+import { FieldPhoneOptionsProps } from './types';
+export declare const uniqueSet: <T, K extends keyof T>(arr: T[], key: K) => Set<T[K]>;
+export declare const formatPhoneNumber: <T extends {
+    caption: string;
+    mask: string;
+}>(phone: string, countries: readonly T[]) => string;
+export declare function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]): FieldPhoneOptionsProps | undefined;
+export declare const handleAutoInsert: ({ raw, onValueChange, onCountryChange, country, options, }: {
+    raw: string;
+    onValueChange(str: string): void;
+    onCountryChange(country: FieldPhoneOptionsProps): void;
+    country?: FieldPhoneOptionsProps;
+    options: FieldPhoneOptionsProps[];
+}) => void;

package/dist/cjs/components/FieldPhone/utils.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAutoInsert = exports.formatPhoneNumber = exports.uniqueSet = void 0;
+exports.detectCountryByPhone = detectCountryByPhone;
+const awesome_phonenumber_1 = require("awesome-phonenumber");
+const countries_1 = require("./countries");
+const uniqueSet = (arr, key) => new Set(arr.map(obj => obj[key]));
+exports.uniqueSet = uniqueSet;
+/* Приходит +79878887879/+7987****875, на основании mask возвращается +7 987-888-78-79/+7 987-***-*8-75 */
+const formatPhoneNumber = (phone, countries) => {
+    const digits = phone.replace(/[^\d*]/g, '');
+    const country = countries.find(item => digits.startsWith(item.caption.replace('+', '')));
+    if (!country) {
+        return phone;
+    }
+    const countryCode = country.caption.replace('+', '');
+    const restNumber = digits.slice(countryCode.length);
+    let formatted = '';
+    let index = 0;
+    for (const char of country.mask) {
+        if (char === 'X') {
+            formatted += restNumber.charAt(index) || '';
+            index++;
+        }
+        else {
+            formatted += char;
+        }
+    }
+    return `${country.caption} ${formatted}`;
+};
+exports.formatPhoneNumber = formatPhoneNumber;
+const byId = (id) => (option) => option.id === id;
+function detectCountryByPhone(text, options) {
+    const cleaned = text.replace(/[^\d+]/g, '');
+    const withPlus = cleaned.startsWith('+') ? cleaned : `+${cleaned}`;
+    const parsedNumber = (0, awesome_phonenumber_1.parsePhoneNumber)(withPlus);
+    const regionCode = parsedNumber.regionCode;
+    /* У Абхазии iso2 совпадает с Россией */
+    if (/^\+?7(840|940)/.test(cleaned)) {
+        let russia;
+        for (const option of options) {
+            const id = option.id;
+            const iso = option.iso2;
+            if (id === countries_1.ABKHAZIA_COUNTRY_CODE.value) {
+                return option;
+            }
+            if (!russia && (id === countries_1.RUSSIA_COUNTRY_CODE.value || iso === countries_1.RUSSIA_COUNTRY_CODE.iso2)) {
+                russia = option;
+            }
+        }
+        return russia;
+    }
+    if (regionCode === countries_1.RUSSIA_COUNTRY_CODE.iso2) {
+        return options.find(byId(countries_1.RUSSIA_COUNTRY_CODE.value));
+    }
+    return options.find(opt => opt.iso2 === regionCode);
+}
+const handleAutoInsert = ({ raw, onValueChange, onCountryChange, country, options, }) => {
+    if (!raw)
+        return;
+    const parsed = (0, awesome_phonenumber_1.parsePhoneNumber)(raw);
+    const ok = parsed.valid || parsed.possible;
+    if (!ok)
+        return;
+    const detected = detectCountryByPhone(raw, options);
+    if (!detected)
+        return;
+    let national = parsed.number?.significant.replace(/\D/g, '');
+    if (!national)
+        return;
+    const nextNationalLength = (detected.mask?.match(/X/g) ?? []).length;
+    if (nextNationalLength && national.length > nextNationalLength) {
+        national = national.slice(-nextNationalLength);
+    }
+    const fullDigits = (parsed.number?.e164 ?? raw).replace(/\D/g, '');
+    const countryCodeDigits = String(parsed.countryCode ?? '');
+    const expected = countryCodeDigits.length + nextNationalLength;
+    if (fullDigits.length < expected)
+        return;
+    if (detected.id !== country?.id) {
+        onCountryChange(detected);
+    }
+    onValueChange(national);
+};
+exports.handleAutoInsert = handleAutoInsert;

package/dist/cjs/components/FieldSelectCreate/FieldSelectCreate.d.ts

@@ -0,0 +1,8 @@
+import { FieldSelectCreateProps } from './types';
+/**
+ * Поле выбора с действием «создать»: `FieldSelect` из `@cloud-ru/ds-fields` + встроенная форма создания опции
+ * в модалке или дровере (`createLayoutType`). Кнопка «Создать <entityName>» — под полем и в футере
+ * дроплиста (`SelectFooter`). Пустые состояния и тексты строятся из `entityName`. Доступ рулит `permission`.
+ * На mobile дроплист и модалка/дровер — `BottomSheet` (адаптив `@ds`), своего пропа `layoutType` нет.
+ */
+export declare const FieldSelectCreate: import("react").ForwardRefExoticComponent<FieldSelectCreateProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldSelectCreate/FieldSelectCreate.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSelectCreate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const drawer_1 = require("@cloud-ru/ds-drawer");
+const fields_1 = require("@cloud-ru/ds-fields");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const modal_1 = require("@cloud-ru/ds-modal");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const constants_2 = require("./constants");
+const SelectFooter_1 = require("./helperComponents/SelectFooter");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const useSelectDataStates_1 = require("./useSelectDataStates");
+/**
+ * Поле выбора с действием «создать»: `FieldSelect` из `@cloud-ru/ds-fields` + встроенная форма создания опции
+ * в модалке или дровере (`createLayoutType`). Кнопка «Создать <entityName>» — под полем и в футере
+ * дроплиста (`SelectFooter`). Пустые состояния и тексты строятся из `entityName`. Доступ рулит `permission`.
+ * На mobile дроплист и модалка/дровер — `BottomSheet` (адаптив `@ds`), своего пропа `layoutType` нет.
+ */
+exports.FieldSelectCreate = (0, react_1.forwardRef)(function FieldSelectCreate({ selectProps, createLayoutProps, createLayoutType = constants_2.CREATE_LAYOUT_TYPE.Drawer, entityName, submitHandler, onRefetch, className, afterClose, entityIcon, permission = constants_2.PERMISSION.CanCreate, ...rest }, ref) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const { isOpen, onOpen, onClose } = (0, hooks_1.useOpen)();
+    const selectDataStates = (0, useSelectDataStates_1.useSelectDataStates)({ entityName, entityIcon, onRefetch });
+    const size = selectProps.size ?? 'm';
+    const isNone = permission === constants_2.PERMISSION.None;
+    const canCreate = permission === constants_2.PERMISSION.CanCreate;
+    const handleClose = (0, react_1.useCallback)(() => {
+        onClose();
+        afterClose?.();
+    }, [afterClose, onClose]);
+    const handleCreate = (0, react_1.useCallback)(async () => {
+        const newValue = await submitHandler();
+        // Автовыбор новой опции — в single-режиме; в multiple выбор оставляем потребителю.
+        if (typeof newValue === 'string' && selectProps.selection !== 'multiple') {
+            selectProps.onChange?.(newValue);
+        }
+        handleClose();
+    }, [handleClose, selectProps, submitHandler]);
+    const createButtonLabel = `${t('FieldSelectCreate.create')} ${entityName.single.toLocaleLowerCase()}`;
+    const noPermissionTip = t('FieldSelectCreate.noPermission');
+    // createLayoutType и createLayoutProps дискриминируются союзом, но при деструктуризации корреляция
+    // теряется — поэтому приводим тип поверхности к целевому внутри ветки (как в легаси).
+    const layoutProps = {
+        ...createLayoutProps,
+        open: isOpen,
+        onClose: handleClose,
+        'data-test-id': constants_1.TEST_IDS.fieldSelectCreateSurface,
+        approveButton: { label: t('FieldSelectCreate.create'), onClick: handleCreate },
+        cancelButton: { label: t('FieldSelectCreate.cancel'), onClick: handleClose },
+    };
+    const formLayout = createLayoutType === constants_2.CREATE_LAYOUT_TYPE.Modal ? ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...layoutProps })) : ((0, jsx_runtime_1.jsx)(drawer_1.Drawer, { ...layoutProps, position: createLayoutProps.position ?? drawer_1.POSITION.Right }));
+    const withTip = (node, show) => show ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: noPermissionTip, children: node }) : node;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldSelectCreate, className), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldSelectCreate, children: [withTip((0, jsx_runtime_1.jsx)(fields_1.FieldSelect, { ...selectProps, ref: ref, size: size, disabled: isNone || selectProps.disabled, placeholder: selectProps.placeholder ?? t('FieldSelectCreate.placeholder'), ...selectDataStates, footer: 
+                // В состоянии ошибки показываем только «Обновить» из errorDataState — без футера «Создать» (по макету).
+                selectProps.dataError ? undefined : ((0, jsx_runtime_1.jsx)(SelectFooter_1.SelectFooter, { onClick: onOpen, createButtonLabel: createButtonLabel, canCreate: canCreate })) }), isNone), withTip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onOpen, size: size, disabled: !canCreate, className: styles_module_scss_1.default.createButton, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateButton }), !canCreate), formLayout] }));
+});

package/dist/cjs/components/FieldSelectCreate/constants.d.ts

@@ -0,0 +1,14 @@
+/** Поверхность формы создания опции: модальное окно или дровер. */
+export declare const CREATE_LAYOUT_TYPE: {
+    readonly Modal: "modal";
+    readonly Drawer: "drawer";
+};
+/** Права пользователя на чтение/создание опций. */
+export declare const PERMISSION: {
+    /** Поле недоступно. */
+    readonly None: "none";
+    /** Поле активно, создание опции недоступно. */
+    readonly CanRead: "canRead";
+    /** Полный доступ: чтение и создание. */
+    readonly CanCreate: "canCreate";
+};

package/dist/cjs/components/FieldSelectCreate/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PERMISSION = exports.CREATE_LAYOUT_TYPE = void 0;
+/** Поверхность формы создания опции: модальное окно или дровер. */
+exports.CREATE_LAYOUT_TYPE = {
+    Modal: 'modal',
+    Drawer: 'drawer',
+};
+/** Права пользователя на чтение/создание опций. */
+exports.PERMISSION = {
+    /** Поле недоступно. */
+    None: 'none',
+    /** Поле активно, создание опции недоступно. */
+    CanRead: 'canRead',
+    /** Полный доступ: чтение и создание. */
+    CanCreate: 'canCreate',
+};

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.d.ts

@@ -0,0 +1,8 @@
+type SelectFooterProps = {
+    onClick(): void;
+    createButtonLabel: string;
+    canCreate: boolean;
+};
+/** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
+export declare function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectFooter = SelectFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const constants_1 = require("../../../../constants");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
+function SelectFooter({ onClick, createButtonLabel, canCreate }) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const button = ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onClick, disabled: !canCreate, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateFooterButton }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerWrapper, children: canCreate ? button : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldSelectCreate.noPermission'), children: button }) }));
+}

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectFooter';

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SelectFooter"), exports);

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/styles.module.css

@@ -0,0 +1,6 @@
+.footerWrapper{
+  display:flex;
+  align-items:center;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}

package/dist/cjs/components/FieldSelectCreate/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FieldSelectCreate';
+export * from './types';

package/dist/cjs/components/FieldSelectCreate/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./FieldSelectCreate"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/FieldSelectCreate/styles.module.css

@@ -0,0 +1,9 @@
+.fieldSelectCreate{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.createButton{
+  align-self:flex-start;
+}

package/dist/cjs/components/FieldSelectCreate/types.d.ts

@@ -0,0 +1,58 @@
+import { DrawerProps, Position } from '@cloud-ru/ds-drawer';
+import { FieldSelectMultipleProps, FieldSelectSingleProps } from '@cloud-ru/ds-fields';
+import { ModalProps } from '@cloud-ru/ds-modal';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { CREATE_LAYOUT_TYPE, PERMISSION } from './constants';
+export type CreateLayoutType = ValueOf<typeof CREATE_LAYOUT_TYPE>;
+export type Permission = ValueOf<typeof PERMISSION>;
+export type EntityName = {
+    /** Единственное число (винительный падеж) — для кнопки «Создать <single>». */
+    single: string;
+    /** Множественное число — для текстов пустых состояний и ошибки. */
+    plural: string;
+};
+export type EntityIcon = NonNullable<NonNullable<FieldSelectSingleProps['noDataState']>['icon']>['icon'];
+type OmittedSelectKeys = 'footer' | 'noDataState' | 'noResultsState' | 'errorDataState';
+export type SelectFieldProps = (Omit<FieldSelectSingleProps, OmittedSelectKeys> & {
+    selection?: 'single';
+}) | (Omit<FieldSelectMultipleProps, OmittedSelectKeys> & {
+    selection: 'multiple';
+});
+type ManagedLayoutKeys = 'open' | 'onClose' | 'approveButton' | 'cancelButton';
+export type LayoutProps = {
+    /** По клику на «Создать» открывается модальное окно. */
+    createLayoutType: 'modal';
+    /** Пропсы модалки создания (`content` — форма создания опции). */
+    createLayoutProps: Omit<ModalProps, ManagedLayoutKeys>;
+} | {
+    /** По клику на «Создать» открывается дровер (по умолчанию). */
+    createLayoutType?: 'drawer';
+    /** Пропсы дровера создания (`content` — форма создания опции); `position` по умолчанию `right`. */
+    createLayoutProps: Omit<DrawerProps, ManagedLayoutKeys | 'position'> & {
+        position?: Position;
+    };
+};
+export type FieldSelectCreateProps = WithSupportProps<LayoutProps & {
+    /** Название сущности в единственном и множественном числе — для кнопок и пустых состояний. */
+    entityName: EntityName;
+    /** Действие создания опции: возвращает `value` новой опции, которая выбирается в поле (single-режим). */
+    submitHandler(): Promise<string | void>;
+    /** Пропсы, прокидываемые в `FieldSelect` (`@cloud-ru/ds-fields`). */
+    selectProps: SelectFieldProps;
+    /** Повтор загрузки в состоянии ошибки (кнопка «Обновить» в футере `errorDataState`). */
+    onRefetch?(): void;
+    /** CSS-класс корневой обёртки. */
+    className?: string;
+    /** Колбэк после закрытия модалки/дровера создания. */
+    afterClose?(): void;
+    /** Иконка пустого состояния `noData` (по умолчанию — иконка поиска). */
+    entityIcon?: EntityIcon;
+    /**
+     * Права пользователя:
+     * - `canCreate` (по умолчанию) — доступны и выбор, и создание;
+     * - `canRead` — поле активно, но создание недоступно (кнопки «Создать» с tooltip);
+     * - `none` — поле недоступно (с tooltip).
+     */
+    permission?: Permission;
+}>;
+export {};

package/dist/cjs/components/FieldSelectCreate/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/FieldSelectCreate/useSelectDataStates.d.ts

@@ -0,0 +1,11 @@
+import { FieldSelectSingleProps } from '@cloud-ru/ds-fields';
+import { EntityIcon, EntityName } from './types';
+type Props = {
+    entityName: EntityName;
+    entityIcon?: EntityIcon;
+    onRefetch?(): void;
+};
+type SelectDataStates = Pick<FieldSelectSingleProps, 'noDataState' | 'noResultsState' | 'errorDataState'>;
+/** Строит пустые/ошибочные состояния дроплиста из `entityName` (единственное/множественное число). */
+export declare function useSelectDataStates({ entityName, entityIcon, onRefetch }: Props): SelectDataStates;
+export {};

package/dist/cjs/components/FieldSelectCreate/useSelectDataStates.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectDataStates = useSelectDataStates;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const utils_1 = require("./utils");
+/** Строит пустые/ошибочные состояния дроплиста из `entityName` (единственное/множественное число). */
+function useSelectDataStates({ entityName, entityIcon, onRefetch }) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    return (0, react_1.useMemo)(() => ({
+        noDataState: {
+            icon: { icon: entityIcon ?? system_1.SearchSVG, appearance: 'green' },
+            description: `${(0, utils_1.capitalize)(entityName.plural)} ${t('FieldSelectCreate.noData')}`,
+        },
+        noResultsState: {
+            icon: { icon: system_1.SearchSVG, appearance: 'green' },
+            description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, utils_1.capitalize)(entityName.plural), " ", t('FieldSelectCreate.noResult'), ".", (0, jsx_runtime_1.jsx)("br", {}), t('FieldSelectCreate.changeRequest'), " ", entityName.single.toLocaleLowerCase()] })),
+        },
+        errorDataState: {
+            icon: { icon: system_1.CrossCircleSVG, appearance: 'neutral' },
+            description: `${t('FieldSelectCreate.loadError')} ${entityName.plural.toLocaleLowerCase()}`,
+            footer: onRefetch ? ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Tonal, appearance: button_1.APPEARANCE.Neutral, label: t('FieldSelectCreate.refetch'), icon: (0, jsx_runtime_1.jsx)(system_1.UpdateSVG, {}), iconPosition: button_1.ICON_POSITION.After, onClick: onRefetch, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateRetry })) : undefined,
+        },
+    }), [entityIcon, entityName, onRefetch, t]);
+}

package/dist/cjs/components/FieldSelectCreate/utils.d.ts

@@ -0,0 +1,2 @@
+/** Первая буква строки в верхний регистр. */
+export declare function capitalize(value: string): string;

package/dist/cjs/components/FieldSelectCreate/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = capitalize;
+/** Первая буква строки в верхний регистр. */
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './FieldChat';
+export * from './FieldCode';
+export * from './FieldDescription';
+export * from './FieldMask';
+export * from './FieldName';
+export * from './FieldPhone';
+export * from './FieldSelectCreate';

package/dist/cjs/components/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldChat"), exports);
+__exportStar(require("./FieldCode"), exports);
+__exportStar(require("./FieldDescription"), exports);
+__exportStar(require("./FieldMask"), exports);
+__exportStar(require("./FieldName"), exports);
+__exportStar(require("./FieldPhone"), exports);
+__exportStar(require("./FieldSelectCreate"), exports);