feat(select): split select/option

.changeset/orange-clocks-change.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-select': minor
+---
+
+Добавлен сплит select/option
+В select/shared добавлены OptionDesktop и OptionMobile

packages/select/src/components/option/Component.responsive.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import type { OptionProps } from '../../typings';
+
+import { OptionDesktop } from './desktop/Component'
+import { OptionMobile } from './mobile/Component'
+
+export const OptionResponsive = ({mobile, ...props}: OptionProps) =>
+    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />

packages/select/src/components/option/Component.tsx

@@ -2,13 +2,23 @@ import React, { FC, isValidElement } from 'react';
 import cn from 'classnames';
 
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
-import { OptionProps } from '../../typings';
-import { Checkmark as DefaultCheckMark } from '../checkmark';
-import { Checkmark as DefaultMobileCheckmark } from '../checkmark-mobile';
+import { OptionCommonProps } from '../../typings';
 
-import styles from './index.module.css';
+import type stylesDesktop from './desktop/index.module.css';
+import type stylesMobile from './mobile/index.module.css';
 
-export const Option: FC<OptionProps> = ({
+type OptionPrivateProps = {
+    /**
+     * Мобильная версия option.
+     */
+    mobile: boolean;
+    /**
+     * Стили
+     */
+    styles: typeof stylesDesktop | typeof stylesMobile;
+};
+
+export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
     size = 48,
     className,
     option,
@@ -18,9 +28,10 @@ export const Option: FC<OptionProps> = ({
     disabled,
     multiple,
     mobile,
-    Checkmark = mobile ? DefaultMobileCheckmark : DefaultCheckMark,
+    Checkmark,
     innerProps,
     dataTestId,
+    styles,
 }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;

packages/select/src/components/option/desktop/Component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import type { OptionCommonProps } from '../../../typings';
+import { Checkmark as DefaultCheckMark } from '../../checkmark';
+import { OptionBase } from '../Component';
+
+import styles from './index.module.css';
+
+export const OptionDesktop = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (
+    <OptionBase {...props} mobile={false} Checkmark={Checkmark} styles={styles} />
+);

packages/select/src/components/option/desktop/index.module.css

@@ -0,0 +1,13 @@
+@import '../../../../../vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';
+
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+
+    &:before,
+    & + .option:before {
+        opacity: 0;
+    }
+}

packages/select/src/components/option/index.ts

@@ -1 +1,3 @@
-export * from './Component';
+export * from './desktop/Component';
+export * from './mobile/Component';
+export { OptionResponsive as Option } from './Component.responsive';

packages/select/src/components/option/mobile/Component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import type { OptionCommonProps } from '../../../typings';
+import { Checkmark as DefaultCheckMark } from '../../checkmark-mobile';
+import { OptionBase } from '../Component';
+
+import styles from './index.module.css';
+
+export const OptionMobile = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (
+    <OptionBase {...props} mobile={true} Checkmark={Checkmark} styles={styles} />
+);

packages/select/src/components/option/mobile/index.module.css

@@ -0,0 +1,3 @@
+@import '../../../../../vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';

packages/select/src/typings.ts

@@ -717,7 +717,7 @@ export type OptgroupProps = {
     multiple?: boolean;
 };
 
-export type OptionProps = {
+export type OptionCommonProps = {
     /**
      * Дополнительный класс
      */
@@ -795,9 +795,11 @@ export type OptionProps = {
      * Выравнивание чекбокса или иконки "галочки"
      */
     align?: 'start' | 'center';
+};
 
+export type OptionProps = OptionCommonProps & {
     /**
-     * Мобильная верcия option.
+     * Мобильная версия option.
      */
     mobile?: boolean;
 };