@uzum-tech/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/es/mapping-card/styles/light.d.ts

@@ -0,0 +1,352 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare function self(vars: ThemeCommonVars): {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: string;
+    dividerBackgroundColor: string;
+    headerPadding: string;
+    bodyPadding: string;
+    titleColor: string;
+    descriptionColor: string;
+    arrowColor: string;
+    colLabelColor: string;
+    colLabelFontSize: string;
+};
+export type MappingCardThemeVars = ReturnType<typeof self>;
+declare const mappingCardLight: import("../../_mixins").Theme<"MappingCard", {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: string;
+    dividerBackgroundColor: string;
+    headerPadding: string;
+    bodyPadding: string;
+    titleColor: string;
+    descriptionColor: string;
+    arrowColor: string;
+    colLabelColor: string;
+    colLabelFontSize: string;
+}, {
+    Button: import("../../_mixins").Theme<"Button", {
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        opacityDisabled: string;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
+        colorOpacitySecondaryFocus: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
+        waveColorSecondary: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
+        colorTertiaryDisalbed: string;
+        waveColorTertiary: string;
+        textColorTextTertiary: string;
+        rippleColorTertiary: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
+        color: string;
+        colorHover: string;
+        colorPressed: string;
+        colorFocus: string;
+        colorDisabled: string;
+        textColor: string;
+        textTertiary: string;
+        textColorTertiary: string;
+        textColorHover: string;
+        textColorPressed: string;
+        textColorFocus: string;
+        textColorDisabled: string;
+        textColorText: string;
+        textColorTextHover: string;
+        textColorTextPressed: string;
+        textColorTextFocus: string;
+        textColorTextDisabled: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        textColorGhostPressed: string;
+        textColorGhostFocus: string;
+        textColorGhostDisabled: string;
+        border: string;
+        borderHover: string;
+        borderPressed: string;
+        borderFocus: string;
+        borderDisabled: string;
+        rippleColor: string;
+        colorPrimary: string;
+        colorHoverPrimary: string;
+        colorPressedPrimary: string;
+        colorFocusPrimary: string;
+        colorDisabledPrimary: string;
+        waveColorPrimary: string;
+        textColorPrimary: string;
+        textColorHoverPrimary: string;
+        textColorPressedPrimary: string;
+        textColorFocusPrimary: string;
+        textColorDisabledPrimary: string;
+        textColorTextPrimary: string;
+        textColorTextHoverPrimary: string;
+        textColorTextPressedPrimary: string;
+        textColorTextFocusPrimary: string;
+        textColorTextDisabledPrimary: string;
+        textColorGhostPrimary: string;
+        textColorGhostHoverPrimary: string;
+        textColorGhostPressedPrimary: string;
+        textColorGhostFocusPrimary: string;
+        textColorGhostDisabledPrimary: string;
+        borderPrimary: string;
+        borderHoverPrimary: string;
+        borderPressedPrimary: string;
+        borderFocusPrimary: string;
+        borderDisabledPrimary: string;
+        rippleColorPrimary: string;
+        colorInfo: string;
+        colorHoverInfo: string;
+        colorPressedInfo: string;
+        colorFocusInfo: string;
+        colorDisabledInfo: string;
+        textColorInfo: string;
+        textColorHoverInfo: string;
+        textColorPressedInfo: string;
+        textColorFocusInfo: string;
+        textColorDisabledInfo: string;
+        textColorTextInfo: string;
+        textColorTextHoverInfo: string;
+        textColorTextPressedInfo: string;
+        textColorTextFocusInfo: string;
+        textColorTextDisabledInfo: string;
+        textColorGhostInfo: string;
+        textColorGhostHoverInfo: string;
+        textColorGhostPressedInfo: string;
+        textColorGhostFocusInfo: string;
+        textColorGhostDisabledInfo: string;
+        borderInfo: string;
+        borderHoverInfo: string;
+        borderPressedInfo: string;
+        borderFocusInfo: string;
+        borderDisabledInfo: string;
+        rippleColorInfo: string;
+        colorSuccess: string;
+        colorHoverSuccess: string;
+        colorPressedSuccess: string;
+        colorFocusSuccess: string;
+        colorDisabledSuccess: string;
+        textColorSuccess: string;
+        textColorHoverSuccess: string;
+        textColorPressedSuccess: string;
+        textColorFocusSuccess: string;
+        textColorDisabledSuccess: string;
+        textColorTextSuccess: string;
+        textColorTextHoverSuccess: string;
+        textColorTextPressedSuccess: string;
+        textColorTextFocusSuccess: string;
+        textColorTextDisabledSuccess: string;
+        textColorGhostSuccess: string;
+        textColorGhostHoverSuccess: string;
+        textColorGhostPressedSuccess: string;
+        textColorGhostFocusSuccess: string;
+        textColorGhostDisabledSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        borderPressedSuccess: string;
+        borderFocusSuccess: string;
+        borderDisabledSuccess: string;
+        rippleColorSuccess: string;
+        colorWarning: string;
+        colorHoverWarning: string;
+        colorPressedWarning: string;
+        colorFocusWarning: string;
+        colorDisabledWarning: string;
+        textColorWarning: string;
+        textColorHoverWarning: string;
+        textColorPressedWarning: string;
+        textColorFocusWarning: string;
+        textColorDisabledWarning: string;
+        textColorTextWarning: string;
+        textColorTextHoverWarning: string;
+        textColorTextPressedWarning: string;
+        textColorTextFocusWarning: string;
+        textColorTextDisabledWarning: string;
+        textColorGhostWarning: string;
+        textColorGhostHoverWarning: string;
+        textColorGhostPressedWarning: string;
+        textColorGhostFocusWarning: string;
+        textColorGhostDisabledWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderPressedWarning: string;
+        borderFocusWarning: string;
+        borderDisabledWarning: string;
+        rippleColorWarning: string;
+        colorError: string;
+        colorHoverError: string;
+        colorPressedError: string;
+        colorFocusError: string;
+        colorDisabledError: string;
+        textColorError: string;
+        textColorHoverError: string;
+        textColorPressedError: string;
+        textColorFocusError: string;
+        textColorDisabledError: string;
+        textColorTextError: string;
+        textColorTextHoverError: string;
+        textColorTextPressedError: string;
+        textColorTextFocusError: string;
+        textColorTextDisabledError: string;
+        textColorGhostError: string;
+        textColorGhostHoverError: string;
+        textColorGhostPressedError: string;
+        textColorGhostFocusError: string;
+        textColorGhostDisabledError: string;
+        borderError: string;
+        borderHoverError: string;
+        borderPressedError: string;
+        borderFocusError: string;
+        borderDisabledError: string;
+        rippleColorError: string;
+        waveOpacity: string;
+        fontWeight: string;
+        fontWeightStrong: string;
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingRoundTiny: string;
+        paddingRoundSmall: string;
+        paddingRoundMedium: string;
+        paddingRoundLarge: string;
+        iconMarginTiny: string;
+        iconMarginSmall: string;
+        iconMarginMedium: string;
+        iconMarginLarge: string;
+        iconSizeTiny: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        rippleDuration: string;
+    }, any>;
+    Icon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    Switch: import("../../_mixins").Theme<"Switch", {
+        buttonHeightSmall: string;
+        buttonHeightMedium: string;
+        buttonHeightLarge: string;
+        buttonWidthSmall: string;
+        buttonWidthMedium: string;
+        buttonWidthLarge: string;
+        buttonWidthPressedSmall: string;
+        buttonWidthPressedMedium: string;
+        buttonWidthPressedLarge: string;
+        railHeightSmall: string;
+        railHeightMedium: string;
+        railHeightLarge: string;
+        railWidthSmall: string;
+        railWidthMedium: string;
+        railWidthLarge: string;
+        iconColor: string;
+        textColor: string;
+        loadingColor: string;
+        loadingColorActive: string;
+        opacityDisabled: string;
+        railColor: string;
+        railColorActive: string;
+        railColorActiveDisabled: string;
+        buttonBoxShadow: string;
+        buttonBoxShadowHover: string;
+        buttonBoxShadowCheckedHover: string;
+        buttonBoxShadowChecked: string;
+        buttonColor: string;
+        buttonColorDisabled: string;
+        railBorderRadiusSmall: string;
+        railBorderRadiusMedium: string;
+        railBorderRadiusLarge: string;
+        buttonBorderRadiusSmall: string;
+        buttonBorderRadiusMedium: string;
+        buttonBorderRadiusLarge: string;
+        boxShadowFocus: string;
+    }, any>;
+    Tooltip: import("../../_mixins").Theme<"Tooltip", {
+        padding: string;
+        textPadding: string;
+        titleSize: string;
+        titleWeight: string;
+        titleLineHeight: string;
+        subtitleSize: string;
+        subtitleMargin: string;
+        subtitleWeight: string;
+        subtitleLineHeight: string;
+        iconSize: string;
+        arrowSpace: string;
+        noArrowSpace: string;
+        borderRadius: string;
+        color: string;
+        textColor: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+        }, any>;
+    }>;
+    EditIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    DeleteIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+    CopyIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+}>;
+export default mappingCardLight;
+export type MappingCardTheme = typeof mappingCardLight;

package/es/mapping-card/styles/light.mjs

@@ -0,0 +1,45 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+import { buttonLight } from "../../button/styles/index.mjs";
+import { iconLight } from "../../icon/styles/index.mjs";
+import { switchLight } from "../../switch/styles/index.mjs";
+import { tooltipLight } from "../../tooltip/styles/index.mjs";
+export function self(vars) {
+  const {
+    borderRadiusLarge,
+    elementsQuaternary,
+    textPrimary,
+    textSecondary,
+    textTertiary,
+    surfacePrimary,
+    containerSecondary
+  } = vars;
+  return {
+    backgroundColor: surfacePrimary,
+    borderColor: elementsQuaternary,
+    borderRadius: borderRadiusLarge,
+    dividerBackgroundColor: containerSecondary,
+    headerPadding: '12px 24px',
+    bodyPadding: '0 0',
+    titleColor: textPrimary,
+    descriptionColor: textSecondary,
+    arrowColor: textTertiary,
+    colLabelColor: textTertiary,
+    colLabelFontSize: '11px'
+  };
+}
+const mappingCardLight = createTheme({
+  name: 'MappingCard',
+  common: commonLight,
+  peers: {
+    Button: buttonLight,
+    Icon: iconLight,
+    Switch: switchLight,
+    Tooltip: tooltipLight,
+    EditIcon: iconLight,
+    DeleteIcon: iconLight,
+    CopyIcon: iconLight
+  },
+  self
+});
+export default mappingCardLight;

package/es/progress/src/MultipleCircle.d.ts

@@ -76,8 +76,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     railColor: string[];
-    fillColor: string[] | ProgressGradient[];
     railStyle: (string | CSSProperties)[];
+    fillColor: string[] | ProgressGradient[];
     percentage: number[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/radio/src/Radio.d.ts

@@ -601,8 +601,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly value: string | number | boolean;
     readonly disabled: boolean | undefined;
     readonly position: "left" | "right";
+    readonly checkedValue: boolean | undefined;
     readonly checked: boolean | undefined;
     readonly defaultChecked: boolean;
-    readonly checkedValue: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/radio/src/RadioButton.d.ts

@@ -36,8 +36,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly onChange?: import("../../_internal/radio").OnChangeImpl | undefined;
     readonly onClick?: ((event: MouseEvent) => void) | undefined;
     readonly name?: string | undefined;
-    readonly checked?: boolean | undefined;
     readonly checkedValue?: boolean | undefined;
+    readonly checked?: boolean | undefined;
     readonly 'onUpdate:checked'?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     readonly onUpdateChecked?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
 }, import("../../_internal").UseRadio, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
@@ -49,15 +49,15 @@ declare const _default: import("vue").DefineComponent<{
     readonly onChange?: import("../../_internal/radio").OnChangeImpl | undefined;
     readonly onClick?: ((event: MouseEvent) => void) | undefined;
     readonly name?: string | undefined;
-    readonly checked?: boolean | undefined;
     readonly checkedValue?: boolean | undefined;
+    readonly checked?: boolean | undefined;
     readonly 'onUpdate:checked'?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     readonly onUpdateChecked?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
 }> & Readonly<{}>, {
     readonly value: string | number | boolean;
     readonly disabled: boolean | undefined;
+    readonly checkedValue: boolean | undefined;
     readonly checked: boolean | undefined;
     readonly defaultChecked: boolean;
-    readonly checkedValue: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/tabs/src/Tabs.d.ts

@@ -664,9 +664,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {};
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import("vue").Attrs;
         $refs: {
             [x: string]: unknown;
         };
@@ -702,9 +700,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {};
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import("vue").Attrs;
         $refs: {
             [x: string]: unknown;
         };

package/es/themes/dark.mjs

@@ -57,6 +57,7 @@ import { legacyTransferDark } from "../legacy-transfer/styles/index.mjs";
 import { listDark } from "../list/styles/index.mjs";
 import { loadingBarDark } from "../loading-bar/styles/index.mjs";
 import { logDark } from "../log/styles/index.mjs";
+import { mappingCardDark } from "../mapping-card/styles/index.mjs";
 import { marqueeDark } from "../marquee/styles/index.mjs";
 import { mentionDark } from "../mention/styles/index.mjs";
 import { menuDark } from "../menu/styles/index.mjs";
@@ -103,6 +104,7 @@ export const darkTheme = {
   common: commonDark,
   AccountOption: accountOptionDark,
   ActionCard: actionCardDark,
+  MappingCard: mappingCardDark,
   Alert: alertDark,
   Anchor: anchorDark,
   AutoComplete: autoCompleteDark,

package/es/themes/light.mjs

@@ -60,6 +60,7 @@ import { legacyTransferLight } from "../legacy-transfer/styles/index.mjs";
 import { listLight } from "../list/styles/index.mjs";
 import { loadingBarLight } from "../loading-bar/styles/index.mjs";
 import { logLight } from "../log/styles/index.mjs";
+import { mappingCardLight } from "../mapping-card/styles/index.mjs";
 import { marqueeLight } from "../marquee/styles/index.mjs";
 import { mentionLight } from "../mention/styles/index.mjs";
 import { menuLight } from "../menu/styles/index.mjs";
@@ -105,6 +106,7 @@ export const lightTheme = {
   common: commonLight,
   AccountOption: accountOptionLight,
   ActionCard: actionCardLight,
+  MappingCard: mappingCardLight,
   Alert: alertLight,
   Anchor: anchorLight,
   AutoComplete: autoCompleteLight,

package/es/toggle-button/src/ToggleButton.d.ts

@@ -554,10 +554,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     value: string | number | boolean;
     disabled: boolean | undefined;
     type: "checkbox" | "radio";
-    checked: string | number | boolean | undefined;
-    defaultChecked: string | number | boolean;
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
+    checked: string | number | boolean | undefined;
+    defaultChecked: string | number | boolean;
     viewType: "default" | "primary";
     iconPosition: "top" | "bottom";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.0-beta.3";
+declare const _default: "2.0.0-beta.5";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.0-beta.3';
+export default '2.0.0-beta.5';

package/lib/_internal/component-renderer/index.d.ts

@@ -0,0 +1,2 @@
+export type { BuiltinType, BuiltinTypeMap, ComponentConfig } from './src/interface';
+export { renderConfig } from './src/renderer';

package/lib/_internal/component-renderer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderConfig = void 0;
+var renderer_1 = require("./src/renderer");
+Object.defineProperty(exports, "renderConfig", { enumerable: true, get: function () { return renderer_1.renderConfig; } });

package/lib/_internal/component-renderer/src/interface.d.ts

@@ -0,0 +1,29 @@
+import type { VNode } from 'vue';
+import type { BadgeProps } from '../../../badge';
+import type { ListItemProps } from '../../../list/src/props';
+import type { StatusProps } from '../../../status';
+import type { TagProps } from '../../../tag';
+import type { TextProps } from '../../../typography';
+export interface BuiltinTypeMap {
+    text: TextProps;
+    status: StatusProps;
+    badge: BadgeProps;
+    tag: TagProps;
+    list_item: ListItemProps;
+}
+export type BuiltinType = keyof BuiltinTypeMap;
+export type BuiltinConfig = {
+    [K in BuiltinType]: {
+        type: K;
+        params?: BuiltinTypeMap[K];
+        slots?: Record<string, ComponentConfig>;
+        render?: never;
+    };
+}[BuiltinType];
+export interface RenderConfig {
+    render: () => VNode;
+    type?: never;
+    params?: never;
+    slots?: never;
+}
+export type ComponentConfig = BuiltinConfig | RenderConfig;

package/lib/_internal/component-renderer/src/interface.js

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

package/lib/_internal/component-renderer/src/renderer.d.ts

@@ -0,0 +1,3 @@
+import type { VNode } from 'vue';
+import type { ComponentConfig } from './interface';
+export declare function renderConfig(config: ComponentConfig): VNode;

package/lib/_internal/component-renderer/src/renderer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderConfig = renderConfig;
+const vue_1 = require("vue");
+const badge_1 = require("../../../badge");
+const list_1 = require("../../../list");
+const status_1 = require("../../../status");
+const tag_1 = require("../../../tag");
+const typography_1 = require("../../../typography");
+const registry = {
+    text: typography_1.UText,
+    status: status_1.UStatus,
+    badge: badge_1.UBadge,
+    tag: tag_1.UTag,
+    list_item: list_1.UListItem
+};
+function renderConfig(config) {
+    if (config.render) {
+        return config.render();
+    }
+    const slots = config.slots
+        ? Object.fromEntries(Object.entries(config.slots).map(([name, slotConfig]) => [
+            name,
+            () => renderConfig(slotConfig)
+        ]))
+        : undefined;
+    return (0, vue_1.h)(registry[config.type], config.params, slots);
+}

package/lib/_internal/select-menu/src/SelectOption.js

@@ -11,11 +11,12 @@ const icon_1 = require("../../icon");
 const icons_1 = require("../../icons");
 const interface_1 = require("./interface");
 function renderCheckMark(show, clsPrefix) {
-    return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
-        default: () => show ? ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
-            default: () => (0, vue_1.h)(icons_1.CheckmarkIcon)
-        })) : null
-    }));
+    return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-option__check-wrapper` },
+        (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
+            default: () => show ? ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
+                default: () => (0, vue_1.h)(icons_1.CheckmarkIcon)
+            })) : null
+        })));
 }
 exports.default = (0, vue_1.defineComponent)({
     name: 'UBaseSelectOption',
@@ -70,8 +71,9 @@ exports.default = (0, vue_1.defineComponent)({
             isSelected: (0, vooks_1.useMemo)(() => {
                 const { value } = valueRef;
                 const { value: multiple } = multipleRef;
-                if (value === null)
+                if (value === null) {
                     return false;
+                }
                 const optionValue = props.tmNode.rawNode[valueFieldRef.value];
                 if (multiple) {
                     const { value: valueSet } = valueSetRef;
@@ -91,16 +93,13 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove, account } = this;
-        const checkmark = renderCheckMark(isSelected, clsPrefix);
+        const checkmark = renderCheckMark(showCheckmark && isSelected, clsPrefix);
         const label = renderLabel
             ? renderLabel(rawNode, isSelected)
             : (0, _utils_1.render)(rawNode[this.labelField], rawNode, isSelected);
         const children = account
-            ? [
-                (0, vue_1.h)(account_option_1.default, Object.assign({}, rawNode, { label: label })),
-                showCheckmark && checkmark
-            ]
-            : [label, showCheckmark && checkmark];
+            ? [(0, vue_1.h)(account_option_1.default, Object.assign({}, rawNode, { label: label })), checkmark]
+            : [label, checkmark];
         const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
         const node = ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [
                 `${clsPrefix}-base-select-option`,

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -109,14 +109,15 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  color: var(--u-option-text-color-disabled);
  `), (0, cssr_1.cM)('selected', `
  opacity: var(--u-option-opacity-disabled);
- `)]), (0, cssr_1.cE)('check', `
- font-size: 24px;
+ `)]), (0, cssr_1.cE)('check-wrapper', `
  position: absolute;
  right: calc(var(--u-option-padding-right) - 4px);
  top: 50%;
  transform: translateY(-50%);
+ `, [(0, cssr_1.cE)('check', `
+ font-size: 24px;
  color: var(--u-option-check-color);
  transition: color .3s var(--u-bezier);
  `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)({
   enterScale: '0.5'
-})])])]);
+})])])])]);