@taiga-ui/cdk 4.0.0-alpha.0 → 4.0.0-rc.10

package/schematics/ng-update/interfaces/replacement-attribute-value.d.ts

@@ -2,10 +2,14 @@ import type { Element } from 'parse5/dist/tree-adapters/default';
 export interface ReplacementAttributeValue {
     readonly attrNames: string[];
     readonly newAttrName?: string;
-    readonly values: Array<{
+    readonly valueReplacer: Array<{
         readonly from: string;
         readonly to: string;
-    }>;
+    }> | ((value: string) => string);
     readonly withTagNames?: string[];
     readonly filterFn?: (el: Element) => boolean;
+    readonly directiveModule?: {
+        readonly moduleSpecifier: string;
+        readonly name: string;
+    };
 }

package/schematics/ng-update/interfaces/replacement-identifier.d.ts

@@ -7,16 +7,10 @@ export interface ReplacementIdentifier {
         readonly moduleSpecifier: string;
         readonly name: string;
         readonly namedImport?: string;
+        readonly spreadInModule?: boolean;
     };
 }
-export interface ReplacementIdentifierMulti extends Pick<ReplacementIdentifier, 'from'> {
-    readonly to: Array<{
-        readonly moduleSpecifier: string;
-        readonly name: string;
-        readonly namedImport?: string;
-    }> | {
-        readonly moduleSpecifier: string;
-        readonly name: string;
-        readonly namedImport?: string;
-    };
+export interface ReplacementIdentifierMulti {
+    readonly from: Array<ReplacementIdentifier['from']> | ReplacementIdentifier['from'];
+    readonly to: Array<ReplacementIdentifier['to']> | ReplacementIdentifier['to'];
 }

package/schematics/ng-update/interfaces/replacement-type.d.ts

@@ -4,4 +4,8 @@ export interface ReplacementType {
     readonly preserveGenerics?: boolean;
     readonly to?: string;
     readonly removeImport?: boolean;
+    readonly newImports?: Array<{
+        name: string;
+        moduleSpecifier: string;
+    }>;
 }

package/schematics/ng-update/steps/rename-types.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renameTypes = void 0;
 const ng_morph_1 = require("ng-morph");
+const add_unique_import_1 = require("../../utils/add-unique-import");
 const colored_log_1 = require("../../utils/colored-log");
 const get_named_import_references_1 = require("../../utils/get-named-import-references");
 const import_manipulations_1 = require("../../utils/import-manipulations");
-function renameType(from, to, moduleSpecifier, preserveGenerics = false, removeImport = false) {
+function renameType({ from, to, moduleSpecifier, preserveGenerics = false, removeImport = false, newImports = [], }) {
     const references = (0, get_named_import_references_1.getNamedImportReferences)(from, moduleSpecifier);
     references.forEach((ref) => {
         if (ref.wasForgotten()) {
@@ -18,6 +19,9 @@ function renameType(from, to, moduleSpecifier, preserveGenerics = false, removeI
         else if (ng_morph_1.Node.isTypeReference(parent)) {
             const targetType = preserveGenerics && to ? addGeneric(to, parent.getTypeArguments()) : to;
             parent.replaceWithText(targetType || 'any');
+            newImports.forEach(({ name, moduleSpecifier }) => {
+                (0, add_unique_import_1.addUniqueImport)(parent.getSourceFile().getFilePath(), name, moduleSpecifier);
+            });
         }
     });
 }
@@ -42,7 +46,7 @@ function addGeneric(typeName, generics) {
 function renameTypes(options, types) {
     !options['skip-logs'] &&
         (0, colored_log_1.infoLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} renaming types...`);
-    types.forEach(({ from, to, moduleSpecifier, preserveGenerics, removeImport }) => renameType(from, to, moduleSpecifier, preserveGenerics, removeImport));
+    types.forEach(renameType);
     !options['skip-logs'] &&
         (0, colored_log_1.successLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} types renamed \n`);
 }

package/schematics/ng-update/steps/replace-identifier.js

@@ -6,17 +6,30 @@ const add_unique_import_1 = require("../../utils/add-unique-import");
 const colored_log_1 = require("../../utils/colored-log");
 const get_named_import_references_1 = require("../../utils/get-named-import-references");
 const import_manipulations_1 = require("../../utils/import-manipulations");
+const progress_1 = require("../../utils/progress");
 function replaceIdentifiers(options, constants) {
     !options['skip-logs'] &&
         (0, colored_log_1.infoLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing identifiers...`);
-    constants.forEach(replaceIdentifier);
+    const progressLog = (0, progress_1.setupProgressLogger)({
+        total: constants.length,
+    });
+    constants.forEach(({ from, to }) => {
+        toArray(from).forEach((x) => replaceIdentifier({ from: x, to }));
+        !options['skip-logs'] &&
+            progressLog(toArray(from)
+                .map((x) => x.name)
+                .join(', '));
+    });
     !options['skip-logs'] &&
         (0, colored_log_1.successLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.SUCCESS_SYMBOL} identifiers replaced \n`);
 }
 exports.replaceIdentifiers = replaceIdentifiers;
 function replaceIdentifier({ from, to }) {
-    const references = (0, get_named_import_references_1.getNamedImportReferences)(from.name, from.moduleSpecifier);
+    const references = toArray(from)
+        .map(({ name, moduleSpecifier }) => (0, get_named_import_references_1.getNamedImportReferences)(name, moduleSpecifier))
+        .flat();
     references.forEach((ref) => {
+        var _a;
         if (ref.wasForgotten()) {
             return;
         }
@@ -26,15 +39,24 @@ function replaceIdentifier({ from, to }) {
             addImports(to, parent.getSourceFile().getFilePath());
         }
         else {
-            ref === null || ref === void 0 ? void 0 : ref.replaceWithText(Array.isArray(to) ? to.map(({ name }) => name).join(', ') : to.name);
+            const decorator = ref.getParentWhile((node) => node.getKindName() !== 'Decorator');
+            const inModule = ((_a = decorator === null || decorator === void 0 ? void 0 : decorator.getFirstChildIfKind(ng_morph_1.ts.SyntaxKind.Identifier)) === null || _a === void 0 ? void 0 : _a.getText()) ===
+                'NgModule';
+            ref.replaceWithText(getReplacementText(to, !!inModule));
         }
     });
 }
 exports.replaceIdentifier = replaceIdentifier;
 function addImports(identifier, filePath) {
-    Array.isArray(identifier)
-        ? identifier.forEach(({ name, namedImport, moduleSpecifier }) => {
-            (0, add_unique_import_1.addUniqueImport)(filePath, namedImport || name, moduleSpecifier);
-        })
-        : (0, add_unique_import_1.addUniqueImport)(filePath, identifier.namedImport || identifier.name, identifier.moduleSpecifier);
+    toArray(identifier).forEach(({ name, namedImport, moduleSpecifier }) => {
+        (0, add_unique_import_1.addUniqueImport)(filePath, namedImport || name, moduleSpecifier);
+    });
+}
+function getReplacementText(to, inModule) {
+    return toArray(to)
+        .map(({ name, spreadInModule }) => spreadInModule && inModule ? `...${name}` : name)
+        .join(', ');
+}
+function toArray(x) {
+    return Array.isArray(x) ? x : [x];
 }

package/schematics/ng-update/steps/replace-package-name.js

@@ -6,13 +6,12 @@ const constants_1 = require("../../constants");
 const get_file_system_1 = require("../utils/get-file-system");
 const replace_text_1 = require("../utils/replace-text");
 function replacePackageName(oldPackage, newPackage, tree) {
-    if (!(0, ng_morph_1.getPackageJsonDependency)(tree, oldPackage)) {
-        return;
-    }
     const fileSystem = (0, get_file_system_1.getFileSystem)(tree);
     (0, replace_text_1.replaceText)([{ from: oldPackage, to: newPackage.name }], constants_1.ALL_TS_FILES);
-    (0, ng_morph_1.removePackageJsonDependency)(tree, oldPackage);
-    (0, ng_morph_1.addPackageJsonDependency)(tree, newPackage);
+    if ((0, ng_morph_1.getPackageJsonDependency)(tree, oldPackage)) {
+        (0, ng_morph_1.removePackageJsonDependency)(tree, oldPackage);
+        (0, ng_morph_1.addPackageJsonDependency)(tree, newPackage);
+    }
     fileSystem.commitEdits();
     (0, ng_morph_1.saveActiveProject)();
 }

package/schematics/ng-update/utils/templates/replace-attr-values.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.replaceAttrValues = void 0;
+const add_import_to_closest_module_1 = require("../../../utils/add-import-to-closest-module");
 const elements_1 = require("../../../utils/templates/elements");
 const template_resource_1 = require("../../../utils/templates/template-resource");
 function replaceAttrValues({ resource, recorder, fileSystem, data, }) {
     const template = (0, template_resource_1.getTemplateFromTemplateResource)(resource, fileSystem);
     const templateOffset = (0, template_resource_1.getTemplateOffset)(resource);
-    data.forEach(({ attrNames, values, withTagNames, filterFn, newAttrName }) => {
+    data.forEach(({ attrNames, valueReplacer, withTagNames, filterFn, newAttrName, directiveModule, }) => {
         const elements = [
             ...(0, elements_1.findElementsWithAttributeOnTag)(template, attrNames, withTagNames, filterFn),
         ];
@@ -15,16 +16,44 @@ function replaceAttrValues({ resource, recorder, fileSystem, data, }) {
             if (!name || !value) {
                 return;
             }
-            const attributeName = attrNames.find((attrName) => attrName.toLowerCase() === name);
-            values.forEach(({ from, to }) => {
-                var _a, _b;
-                if (value === from) {
-                    const { startOffset, endOffset } = ((_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[name]) || { startOffset: 0, endOffset: 0 };
-                    recorder.remove(templateOffset + startOffset, endOffset - startOffset);
-                    recorder.insertRight(templateOffset + startOffset, `${newAttrName || attributeName}="${to}"`);
-                }
-            });
+            const attributeName = attrNames.find((attrName) => attrName.toLowerCase() === name) || '';
+            if (Array.isArray(valueReplacer)) {
+                valueReplacer.forEach(({ from, to }) => {
+                    if (value === from) {
+                        replaceValue({
+                            element,
+                            recorder,
+                            templateOffset,
+                            attrName: name,
+                            attrNewName: newAttrName || attributeName,
+                            attrValue: to,
+                        });
+                    }
+                });
+            }
+            else {
+                replaceValue({
+                    element,
+                    recorder,
+                    templateOffset,
+                    attrName: name,
+                    attrNewName: newAttrName || attributeName,
+                    attrValue: valueReplacer(value),
+                });
+            }
+            if (directiveModule) {
+                (0, add_import_to_closest_module_1.addImportToClosestModule)(resource.componentPath, directiveModule.name, directiveModule.moduleSpecifier);
+            }
         });
     });
 }
 exports.replaceAttrValues = replaceAttrValues;
+function replaceValue({ element, recorder, templateOffset, attrName, attrNewName, attrValue, }) {
+    var _a, _b;
+    const { startOffset, endOffset } = ((_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attrName]) || {
+        startOffset: 0,
+        endOffset: 0,
+    };
+    recorder.remove(templateOffset + startOffset, endOffset - startOffset);
+    recorder.insertRight(templateOffset + startOffset, `${attrNewName}="${attrValue}"`);
+}

package/schematics/ng-update/utils/templates/template-comments.js

@@ -7,7 +7,13 @@ const template_resource_1 = require("../../../utils/templates/template-resource"
 function addHTMLCommentTags({ resource, recorder, fileSystem, data, }) {
     const template = (0, template_resource_1.getTemplateFromTemplateResource)(resource, fileSystem);
     const templateOffset = (0, template_resource_1.getTemplateOffset)(resource);
-    data.forEach(({ comment, tag, withAttrs }) => {
+    data.forEach(({ comment, tag, withAttrs, pattern }) => {
+        if (pattern && template.match(pattern)) {
+            recorder.insertRight(templateOffset && templateOffset + 1, `<!-- ${insert_todo_1.TODO_MARK} ${comment} -->\n`);
+        }
+        if (!tag || !withAttrs) {
+            return;
+        }
         const elementStartOffsets = [
             ...(0, elements_1.findElementsWithAttributeOnTag)(template, withAttrs, [tag]),
             ...(withAttrs.length

package/schematics/ng-update/v4/index.js

@@ -9,16 +9,21 @@ const versions_1 = require("../../ng-add/constants/versions");
 const colored_log_1 = require("../../utils/colored-log");
 const get_execution_time_1 = require("../../utils/get-execution-time");
 const steps_1 = require("../steps");
+const replace_services_1 = require("../steps/replace-services");
 const get_file_system_1 = require("../utils/get-file-system");
 const enums_1 = require("../v4/steps/constants/enums");
 const steps_2 = require("./steps");
 const constants_1 = require("./steps/constants");
 const modules_to_replace_1 = require("./steps/constants/modules-to-replace");
 const types_1 = require("./steps/constants/types");
+const migrate_root_1 = require("./steps/migrate-root");
 const replace_modules_with_providers_1 = require("./steps/utils/replace-modules-with-providers");
 function main(options) {
     return (tree, context) => {
         const fileSystem = (0, get_file_system_1.getFileSystem)(tree);
+        (0, steps_1.replaceEnums)(options, enums_1.ENUMS_TO_REPLACE);
+        (0, migrate_root_1.migrateRoot)(fileSystem, options);
+        (0, replace_services_1.replaceServices)(options, constants_1.SERVICES_TO_REPLACE);
         (0, steps_1.replaceIdentifiers)(options, constants_1.IDENTIFIERS_TO_REPLACE);
         (0, steps_1.removeModules)(options, constants_1.MODULES_TO_REMOVE);
         (0, replace_modules_with_providers_1.replaceModulesWithProviders)(options, modules_to_replace_1.MODULES_TO_REPLACE_WITH_PROVIDERS);
@@ -29,7 +34,10 @@ function main(options) {
         (0, steps_2.migrateDestroyService)(options);
         (0, steps_2.migrateOptionProviders)(options);
         (0, steps_2.migrateAllCountryIsoCodes)(options);
-        (0, steps_1.replaceEnums)(options, enums_1.ENUMS_TO_REPLACE);
+        (0, steps_2.migrateAlertService)(options);
+        (0, steps_2.migrateNumberFormatSettings)(options);
+        (0, steps_2.migrateMonthContext)(options);
+        (0, ng_morph_1.saveActiveProject)();
         (0, steps_2.migrateTemplates)(fileSystem, options);
         (0, steps_1.showWarnings)(context, constants_1.MIGRATION_WARNINGS);
         fileSystem.commitEdits();

package/schematics/ng-update/v4/migrate-icons/index.js

@@ -9,12 +9,12 @@ const rename_icons_1 = require("./rename-icons");
 const rename_proprietary_icons_1 = require("./rename-proprietary-icons");
 function migrateIcons(options) {
     return (0, schematics_1.chain)([
-        (tree, _) => {
+        (tree, context) => {
             const fileSystem = (0, get_file_system_1.getFileSystem)(tree);
             !options['skip-logs'] &&
                 (0, colored_log_1.infoLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing icons...`);
             if (hasProprietaryIcons(tree)) {
-                (0, rename_proprietary_icons_1.renameProprietaryIcons)();
+                (0, rename_proprietary_icons_1.renameProprietaryIcons)(context);
             }
             else {
                 (0, rename_icons_1.renameIcons)();

package/schematics/ng-update/v4/migrate-icons/rename-icons.js

@@ -17,18 +17,26 @@ const CHANGED_ICONS = [
     { from: 'tuiIconDragLarge', to: ' @tui.grip-vertical' },
     { from: 'tuiIconGrid', to: '@tui.layout-grid' },
     { from: 'tuiIconGridLarge', to: '@tui.layout-grid' },
+    { from: 'tuiIconTool', to: '@tui.wrench' },
+    { from: 'tuiIconUnlock', to: '@tui.lock-open' },
+    { from: 'tuiIconMessageCircle', to: '@tui.message-circle' },
+    { from: 'tuiIconSliders', to: '@tui.sliders-vertical' },
+    { from: 'tuiIconPlusSquare', to: '@tui.square-plus' },
+    { from: 'tuiIconAlertTriangle', to: '@tui.triangle-alert' },
+    { from: 'tuiIconUploadCloud', to: '@tui.cloud-upload' },
+    { from: 'tuiIconDownloadCloud', to: '@tui.cloud-download' },
 ];
 function renameIcons(pattern = constants_1.ALL_FILES) {
     const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
     sourceFiles.forEach((file) => {
         let text = file.getFullText();
         CHANGED_ICONS.map(({ from, to }) => ({
-            from: new RegExp(`\\b${from}\\b`, 'g'),
+            from: new RegExp(`["'\`]${from}["'\`]`, 'g'),
             to,
         })).forEach(({ from, to }) => {
-            text = text.replaceAll(from, to);
+            text = text.replaceAll(from, `"${to}"`);
         });
-        const regex = /\btuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
+        const regex = /['"`]tuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
         text = text.replaceAll(regex, (match) => convertString(match));
         file.replaceWithText(text);
     });
@@ -36,7 +44,7 @@ function renameIcons(pattern = constants_1.ALL_FILES) {
 exports.renameIcons = renameIcons;
 function convertString(input) {
     let result = input
-        .replace(/^tuiIcon/, '')
+        .replace(/["'`]tuiIcon/, '')
         .replace(/Large$/, '')
         .replaceAll(/([A-Z0-9])/g, '-$1')
         .toLowerCase();
@@ -45,5 +53,5 @@ function convertString(input) {
         result = result.replace('-circle', '');
         result = `circle${result}`;
     }
-    return `@tui.${result.startsWith('-') ? result.slice(1) : result}`;
+    return `${input.slice(0, 1)}@tui.${result.startsWith('-') ? result.slice(1) : result}`;
 }

package/schematics/ng-update/v4/migrate-icons/rename-proprietary-icons.d.ts

@@ -1,2 +1,3 @@
 /// <reference lib="es2021" />
-export declare function renameProprietaryIcons(pattern?: import("ng-morph").Pattern): void;
+import type { SchematicContext } from '@angular-devkit/schematics';
+export declare function renameProprietaryIcons({ logger }: SchematicContext, pattern?: import("ng-morph").Pattern): void;

package/schematics/ng-update/v4/migrate-icons/rename-proprietary-icons.js

@@ -1,22 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renameProprietaryIcons = void 0;
-/// <reference lib="es2021" />
 const ng_morph_1 = require("ng-morph");
 const constants_1 = require("../../../constants");
-function renameProprietaryIcons(pattern = constants_1.ALL_FILES) {
+function renameProprietaryIcons({ logger }, pattern = constants_1.ALL_FILES) {
     const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
     sourceFiles.forEach((file) => {
         let text = file.getFullText();
-        const regex = /\btuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
-        text = text.replaceAll(regex, (match) => convertString(match));
+        const regex = /['"`]tuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
+        text = text.replaceAll(regex, (icon) => {
+            if (icon.match(/['"`]tuiIcon(?!Tds)\w*/)) {
+                logger.warn(`[WARNING] in ${file.getSourceFile().getFilePath()}: Invalid icon name ${icon}. Please select an icon from the proprietary pack.`);
+                return icon;
+            }
+            return convertString(icon);
+        });
+        const invalidIcons = [...new Set(text.match(/\b(tuiIcon(?!Tds|Button)\w*)\b/g))];
+        if (invalidIcons.length) {
+            const message = `TODO (Taiga UI migration): invalid icons ${invalidIcons.join(', ')}. Please select an icon from the proprietary pack`;
+            const todo = file.getFilePath().endsWith('html')
+                ? `<!-- ${message} -->`
+                : `// ${message}`;
+            text = `${todo}\n${text}`;
+        }
         file.replaceWithText(text);
     });
 }
 exports.renameProprietaryIcons = renameProprietaryIcons;
 function convertString(input) {
     const result = input
-        .replace(/^tuiIconTds/, '')
+        .replace(/['"`]tuiIconTds/, '')
         .replace(/SmallPragmatic$/, '')
         .replace(/MediumPragmatic$/, '')
         .replace(/Small$/, '')
@@ -30,7 +43,7 @@ function convertString(input) {
         .toLowerCase();
     const pack = extractPackName(input);
     const subfolder = extractSubfolder(input);
-    return `@tui.${pack}${subfolder ? `.${subfolder}` : ''}.${result.startsWith('-') ? result.slice(1) : result}`;
+    return `${input.slice(0, 1)}@tui.${pack}${subfolder ? `.${subfolder}` : ''}.${result.startsWith('-') ? result.slice(1) : result}`;
 }
 function extractPackName(input) {
     if (input.endsWith('Pragmatic')) {

package/schematics/ng-update/v4/steps/constants/attr-to-directive-replace.js

@@ -50,13 +50,14 @@ exports.ATTRS_TO_DIRECTIVE_REPLACE = [
         },
     },
     {
-        componentSelector: ['button'],
+        componentSelector: ['button', 'a'],
         inputProperty: 'showLoader',
         directive: 'loading',
         directiveModule: {
             name: 'TuiButtonLoading',
             moduleSpecifier: '@taiga-ui/kit',
         },
-        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton') ||
+            (0, elements_1.hasElementAttribute)(el, 'tuiIconButton'),
     },
 ];

package/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.js

@@ -2,20 +2,61 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ATTR_WITH_VALUES_TO_REPLACE = void 0;
 const elements_1 = require("../../../../utils/templates/elements");
+const hasPseudo = [
+    'button',
+    'a',
+    'tui-checkbox',
+    'tui-checkbox-block',
+    'tui-radio',
+    'tui-radio-block',
+    'tui-radio-labeled',
+    'tui-checkbox-labeled',
+];
 exports.ATTR_WITH_VALUES_TO_REPLACE = [
     {
         attrNames: ['shape'],
         newAttrName: '[style.border-radius.%]',
-        values: [{ from: 'rounded', to: '100' }],
+        valueReplacer: [{ from: 'rounded', to: '100' }],
         withTagNames: ['button'],
-        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton') ||
+            (0, elements_1.hasElementAttribute)(el, 'tuiIconButton'),
     },
     {
         attrNames: ['tuiMode'],
         newAttrName: 'tuiTheme',
-        values: [
+        valueReplacer: [
             { from: 'onDark', to: 'dark' },
             { from: 'onLight', to: 'light' },
         ],
     },
+    {
+        attrNames: ['[pseudoActive]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'active' : null`,
+    },
+    {
+        attrNames: ['[pseudoFocus]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'focus' : null`,
+    },
+    {
+        attrNames: ['[pseudoHover]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'hover' : null`,
+    },
+    {
+        attrNames: ['[pseudoInvalid]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'invalid' : null`,
+    },
+    {
+        attrNames: ['[pseudoDisabled]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: ['tui-radio-block', 'tui-radio-labeled', 'tui-radio'],
+        valueReplacer: (condition) => `${condition} ? 'disabled' : null`,
+    },
 ];