fix

Author: dHIM24

.changeset/famous-ghosts-hang.md

@@ -5,7 +5,5 @@
 
 ##### Checkbox
 
-- Добавлен prop `position` для управления положением чекбокса относительно контента ('before' | 'after')
-- Добавлен prop `showCheckmark` для управления видимостью визуального чекбокса (по умолчанию `true`)
-- При `showCheckmark: false` чекбокс скрывается, но контент (`label`, `hint`, `error`) продолжает отображаться
+- Добавлен prop `position` для управления положением чекбокса относительно контента ('before' | 'after'), теперь компонент сам контролирует порядок DOM-узлов (label/checkbox).
 - Логика позиционирования и видимости чекбокса полностью инкапсулирована внутри компонента

.changeset/neat-owls-judge.md

@@ -1,26 +1,22 @@
 ---
 '@alfalab/core-components-select-with-tags': minor
 '@alfalab/core-components-select': minor
-'@alfalab/core-components-checkbox': minor
+'@alfalab/core-components-custom-picker-button': minor
 '@alfalab/core-components': minor
 ---
 
+##### Select
+
+- Добавлен проп `checkmarkPosition` для управления позицией чекмарка относительно контента ('before' | 'after')
+- Компонент `BaseCheckmark` теперь поддерживает проп `content` для передачи контента опции
+- Оптимизирована логика рендеринга чекбоксов и иконок в компонентах `OptionBase` и `BaseOption`
+
 ##### SelectWithTags
 
 - Добавлена поддержка динамического позиционирования чекмарков в зависимости от `view` (desktop/mobile)
-- Для desktop по умолчанию используются чекбоксы слева (`checkmarkPosition='before'`)
-- Для mobile по умолчанию используются иконки справа (`checkmarkPosition='after'`)
+- Для desktop по умолчанию используется `checkmarkPosition='before'`, для mobile - `checkmarkPosition='after'`
 - Возможность переопределить позицию через проп `optionProps.checkmarkPosition`
 
-##### Select
-
-- Убран избыточный проп `hasSelectionMarker` из типов и компонентов
-- Точка-маркер выбора теперь рендерится автоматически для дефолтного Option при `checkmarkPosition='before'` и single-select
-- Оптимизирована логика рендеринга чекбоксов, иконок и точки-маркера в компоненте `OptionBase`
-- Добавлен контейнер `.beforeMarker` для правильного позиционирования элементов при `checkmarkPosition='before'`
-
-##### Checkbox
+##### CustomPickerButton
 
-- Исправлена логика скрытия визуального чекбокса при `showCheckmark=false`
-- Компонент теперь корректно рендерит `null` вместо визуального элемента когда чекмарк скрыт
-- Оптимизированы CSS-стили для `.checkmarkAfter` (сокращённая запись margin)
+- Добавлен хелпер `disableCheckmarks` для автоматического отключения чекмарков у всех опций

packages/checkbox/src/Component.tsx

@@ -199,14 +199,11 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                     <CheckIcon className={cn(styles.checkedIcon, colorStyle.checkedIcon)} />
                 )}
                 {indeterminate && !checked && (
-                    <span
-                        className={cn(styles.indeterminateLine, colorStyle.indeterminateLine)}
-                    />
+                    <span className={cn(styles.indeterminateLine, colorStyle.indeterminateLine)} />
                 )}
             </span>
         );
 
-
         return (
             <label
                 {...labelProps}

packages/custom-picker-button/src/desktop/Component.desktop.tsx

@@ -7,6 +7,7 @@ import {
 } from '@alfalab/core-components-picker-button/desktop';
 
 import { Field as DefaultField } from '../field';
+import { disableCheckmarks } from '../utils/disableCheckMarks';
 
 const DEFAULT_BUTTON_COLOR = '#FF45C3';
 const DEFAULT_CONTENT_COLOR = 'white';
@@ -24,12 +25,14 @@ export const CustomPickerButtonDesktop = forwardRef<
             contentColor = DEFAULT_CONTENT_COLOR,
             stateType = 'darkening',
             icon,
+            options = [],
             ...restProps
         },
         ref,
     ) => (
         <PickerButtonDesktop
             {...restProps}
+            options={disableCheckmarks(options)}
             fieldProps={{
                 backgroundColor,
                 contentColor,

packages/custom-picker-button/src/mobile/Component.mobile.tsx

@@ -7,6 +7,7 @@ import {
 } from '@alfalab/core-components-picker-button/mobile';
 
 import { Field as DefaultField } from '../field';
+import { disableCheckmarks } from '../utils/disableCheckMarks';
 
 const DEFAULT_BUTTON_COLOR = '#FF45C3';
 const DEFAULT_CONTENT_COLOR = 'white';
@@ -20,12 +21,14 @@ export const CustomPickerButtonMobile = forwardRef<HTMLInputElement, CustomPicke
             backgroundColor = DEFAULT_BUTTON_COLOR,
             contentColor = DEFAULT_CONTENT_COLOR,
             stateType = 'darkening',
+            options = [],
             ...restProps
         },
         ref,
     ) => (
         <PickerButtonMobile
             {...restProps}
+            options={disableCheckmarks(options)}
             fieldProps={{
                 backgroundColor,
                 contentColor,

packages/custom-picker-button/src/utils/disableCheckMarks.ts

@@ -0,0 +1,16 @@
+import { type GroupShape, type OptionShape } from '@alfalab/core-components-select/shared';
+
+type OptionLike = OptionShape | GroupShape;
+
+/**
+ * Отключает отображение чекмарков у всех опций, включая опции внутри групп.
+ *
+ * @param options - список опций и/или групп для Select.
+ * @returns новый массив с тем же деревом, но с `showCheckMark: false` у всех опций.
+ */
+export const disableCheckmarks = (options: OptionLike[]): OptionLike[] =>
+    options.map((item) =>
+        'options' in item
+            ? { ...item, options: item.options.map((opt) => ({ ...opt, showCheckMark: false })) }
+            : { ...item, showCheckMark: false },
+    );

packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap

@@ -254,6 +254,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                                       >
                                         Neptunium
                                       </div>
+                                      <div
+                                        class="checkmark after"
+                                      >
+                                        <svg
+                                          class="displayIcon"
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height="24"
+                                          role="img"
+                                          viewBox="0 0 24 24"
+                                          width="24"
+                                        >
+                                          <path
+                                            clip-rule="evenodd"
+                                            d="M20 7.519L9.903 17 5 12.327l1.448-1.503 3.47 3.308L18.569 6 20 7.519z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </div>
                                     </div>
                                     <div
                                       aria-disabled="false"
@@ -267,6 +286,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                                       >
                                         Plutonium
                                       </div>
+                                      <div
+                                        class="checkmark after"
+                                      >
+                                        <svg
+                                          class="displayIcon"
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height="24"
+                                          role="img"
+                                          viewBox="0 0 24 24"
+                                          width="24"
+                                        >
+                                          <path
+                                            clip-rule="evenodd"
+                                            d="M20 7.519L9.903 17 5 12.327l1.448-1.503 3.47 3.308L18.569 6 20 7.519z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>

packages/input-autocomplete/src/desktop/Component.desktop.tsx

@@ -41,7 +41,6 @@ export const InputAutocompleteDesktop = forwardRef<HTMLInputElement, InputAutoco
             Field={AutocompleteField}
             Optgroup={Optgroup}
             OptionsList={OptionsList}
-            showCheckmark={false}
             {...restProps}
             fieldProps={{
                 ...(restProps.fieldProps as AnyObject),

packages/input-autocomplete/src/mobile/Component.mobile.tsx

@@ -136,7 +136,6 @@ export const InputAutocompleteMobile = React.forwardRef(
             <Component
                 Field={AutocompleteMobileField}
                 {...restProps}
-                showCheckmark={false}
                 {...(isBottomSheet
                     ? {
                           bottomSheetProps: {

packages/international-phone-input/src/components/country-select/Component.tsx

@@ -112,7 +112,6 @@ export const CountrySelect: React.FC<CountrySelectProps> = ({
                     Option={BaseOption}
                     size={size}
                     {...restProps}
-                    showCheckmark={false}
                     dataTestId={getDataTestId(dataTestId, 'country-select')}
                     options={options}
                     selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}