@alfalab/core-components-select 14.3.5 → 15.0.1

package/src/components/checkmark/index.module.css

@@ -0,0 +1,48 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.checkmark {
+    flex-shrink: 0;
+    margin: var(--select-checkmark-margin);
+
+    &.after {
+        margin: var(--select-checkmark-margin-after);
+    }
+}
+
+.single {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: var(--select-checkmark-unselected-opacity);
+    background: var(--select-checkmark-background);
+    background-size: cover;
+    border-radius: var(--select-checkmark-border-radius);
+    width: var(--select-checkmark-size);
+    height: var(--select-checkmark-size);
+
+    &.selected {
+        opacity: 1;
+    }
+}
+
+.before {
+    display: var(--select-checkmark-before-display);
+
+    &.multiple {
+        margin-right: var(--gap-s);
+        display: var(--select-checkmark-before-display-multiple);
+    }
+}
+
+.after {
+    display: var(--select-checkmark-after-display);
+
+    &.single {
+        display: var(--select-checkmark-after-display-single);
+    }
+}
+
+.colorIcon {
+    color: var(--color-light-graphic-positive);
+}

package/src/components/checkmark/index.ts

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

package/src/components/checkmark-mobile/Component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
+
+import { CheckmarkProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const Checkmark = ({ selected, className }: CheckmarkProps) => (
+    <div
+        className={cn(styles.checkmark, className, {
+            [styles.selected]: selected,
+        })}
+    >
+        <CheckmarkMIcon className={styles.displayIcon} />
+    </div>
+);

package/src/components/checkmark-mobile/index.module.css

@@ -0,0 +1,28 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.checkmark {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    opacity: 0;
+
+    &:first-child {
+        display: none;
+    }
+
+    &.selected {
+        opacity: 1;
+    }
+}
+
+.displayIcon {
+    display: var(--select-mobile-checkmark-display-icon);
+}
+
+.displayBadge {
+    display: var(--select-mobile-checkmark-display-badge);
+}

package/src/components/checkmark-mobile/index.ts

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

package/src/components/field/Component.tsx

@@ -0,0 +1,110 @@
+import React, { ElementType, useCallback, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import type { FormControlProps } from '@alfalab/core-components-form-control';
+import { useFocus } from '@alfalab/hooks';
+
+import { FieldProps as BaseFieldProps } from '../../typings';
+import { joinOptions } from '../../utils';
+
+import styles from './index.module.css';
+
+type FieldProps = {
+    /**
+     * Компонент FormControl
+     */
+    FormControlComponent?: ElementType;
+};
+
+export const Field = ({
+    size = 'm',
+    open,
+    multiple,
+    error,
+    hint,
+    disabled,
+    label,
+    labelView = 'inner',
+    placeholder,
+    selectedMultiple = [],
+    selected,
+    rightAddons,
+    valueRenderer = joinOptions,
+    setSelectedItems,
+    toggleMenu,
+    Arrow,
+    innerProps,
+    dataTestId,
+    fieldClassName,
+    FormControlComponent,
+    ...restProps
+}: BaseFieldProps & FormControlProps & FieldProps) => {
+    const [focused, setFocused] = useState(false);
+
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
+
+    const handleFocus = useCallback(() => setFocused(true), []);
+    const handleBlur = useCallback(() => setFocused(false), []);
+
+    const value = valueRenderer({ selected, selectedMultiple });
+
+    const filled = Boolean(value);
+    const showLabel = !!label || labelView === 'outer';
+    const showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');
+
+    return (
+        <div
+            className={styles.component}
+            ref={wrapperRef}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+        >
+            {FormControlComponent ? (
+                <FormControlComponent
+                    fieldClassName={cn(styles.field, fieldClassName, {
+                        [styles.disabled]: disabled,
+                        [styles.focusVisible]: focusVisible,
+                    })}
+                    block={true}
+                    size={size}
+                    focused={focused || open}
+                    disabled={disabled}
+                    filled={filled || (!!placeholder && open)}
+                    label={showLabel && label}
+                    labelView={labelView}
+                    error={error}
+                    hint={hint}
+                    rightAddons={
+                        (Arrow || rightAddons) && (
+                            <React.Fragment>
+                                {rightAddons}
+                                {/* TODO: стоит переделать, но это будет мажорка */}
+                                {Arrow
+                                    ? React.cloneElement(Arrow, { className: styles.arrow })
+                                    : null}
+                            </React.Fragment>
+                        )
+                    }
+                    data-test-id={dataTestId}
+                    {...restProps}
+                    {...innerProps}
+                >
+                    <div className={styles.contentWrapper}>
+                        {showPlaceholder && (
+                            <span
+                                className={cn(styles.placeholder, {
+                                    [styles.focused]: focused || open,
+                                })}
+                            >
+                                {placeholder}
+                            </span>
+                        )}
+                        {filled && <div className={styles.value}>{value}</div>}
+                    </div>
+                </FormControlComponent>
+            ) : null}
+        </div>
+    );
+};

package/src/components/field/index.module.css

@@ -0,0 +1,60 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-input/src/vars.css';
+@import '../../vars.css';
+
+.component {
+    width: 100%;
+    outline: none;
+}
+
+.field:not(.disabled) {
+    cursor: pointer;
+
+    &:hover {
+        & .arrow {
+            opacity: var(--select-arrow-hover-opacity);
+        }
+    }
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+}
+
+.placeholder {
+    color: var(--input-placeholder-color);
+    transition: color 0.2s ease;
+    animation: show-placeholder 0.2s ease;
+
+    &.focused {
+        color: var(--input-focus-placeholder-color);
+    }
+}
+
+.contentWrapper {
+    @mixin paragraph_component;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+}
+
+.value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+.focusVisible {
+    @mixin focus-outline;
+}
+
+@keyframes show-placeholder {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

package/src/components/field/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './arrow';
+export * from './base-select';
+export * from './field';
+export * from './optgroup';
+export * from './option';
+export * from './options-list';
+export * from './virtual-options-list';
+export * from './base-option';

package/src/components/native-select/Component.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, SelectHTMLAttributes, useCallback } from 'react';
+
+import { GroupShape, OptionShape } from '../../typings';
+import { isGroup } from '../../utils';
+
+export type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    /**
+     * Список вариантов выбора
+     */
+    options: Array<OptionShape | GroupShape>;
+
+    /**
+     * Значение селекта
+     */
+    value: string | string[];
+};
+
+const Option = ({ option }: { option: OptionShape }) => (
+    <option value={option.key} disabled={option.disabled}>
+        {typeof option.content === 'string' ? option.content : option.key}
+    </option>
+);
+
+const Group = ({ label, options }: GroupShape) => (
+    <optgroup label={label}>
+        {options.map((option) => (
+            <Option option={option} key={option.key} />
+        ))}
+    </optgroup>
+);
+
+export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+    ({ className, disabled, multiple, value, name, options, onChange, ...restProps }, ref) => {
+        const handleClick = useCallback((event: React.MouseEvent<HTMLSelectElement>) => {
+            event.stopPropagation();
+        }, []);
+
+        return (
+            <select
+                className={className}
+                disabled={disabled}
+                multiple={multiple}
+                name={name}
+                value={value}
+                onChange={onChange}
+                onClick={handleClick}
+                ref={ref}
+                {...restProps}
+            >
+                {options.map((option) =>
+                    isGroup(option) ? (
+                        <Group {...option} key={option.label} />
+                    ) : (
+                        <Option option={option} key={option.key} />
+                    ),
+                )}
+            </select>
+        );
+    },
+);

package/src/components/native-select/index.ts

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

package/src/components/optgroup/Component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { OptgroupProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const Optgroup = ({ children, className, label, size = 's' }: OptgroupProps) => (
+    <React.Fragment>
+        <div className={cn(styles.optgroup, className, styles[size])}>
+            <span className={styles.label}>{label}</span>
+        </div>
+        {children}
+    </React.Fragment>
+);

package/src/components/optgroup/index.module.css

@@ -0,0 +1,30 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.optgroup {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: var(--gap-s) var(--select-optgroup-right-padding) var(--gap-2xs)
+        var(--select-optgroup-left-padding);
+    box-sizing: border-box;
+    background: var(--select-optgroup-background);
+    min-height: 40px;
+
+    & + *[role='option']:before {
+        display: none;
+    }
+}
+
+.label {
+    @mixin paragraph_caps;
+
+    display: block;
+    color: var(--select-optgroup-color);
+}
+
+.l,
+.xl {
+    padding-left: var(--select-optgroup-l-left-padding);
+    padding-right: var(--select-optgroup-l-right-padding);
+}

package/src/components/optgroup/index.ts

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

package/src/components/option/Component.tsx

@@ -0,0 +1,65 @@
+import React, { FC, isValidElement } from 'react';
+import cn from 'classnames';
+
+import { OptionProps } from '../../typings';
+import { Checkmark as DefaultCheckMark } from '../checkmark';
+import { Checkmark as DefaultMobileCheckmark } from '../checkmark-mobile';
+
+import styles from './index.module.css';
+
+export const Option: FC<OptionProps> = ({
+    size = 's',
+    className,
+    option,
+    children,
+    selected,
+    highlighted,
+    disabled,
+    multiple,
+    mobile,
+    Checkmark = mobile ? DefaultMobileCheckmark : DefaultCheckMark,
+    innerProps,
+    dataTestId,
+}) => {
+    const content = children || option.content || option.key;
+    const { showCheckMark = true } = option;
+
+    return (
+        <div
+            {...innerProps}
+            className={cn(styles.option, styles[size], className, {
+                [styles.highlighted]: !mobile && highlighted,
+                [styles.selected]: selected,
+                [styles.disabled]: disabled,
+            })}
+            data-test-id={dataTestId}
+        >
+            {Checkmark && showCheckMark && (
+                <Checkmark
+                    disabled={disabled}
+                    selected={selected}
+                    multiple={multiple}
+                    position='before'
+                />
+            )}
+
+            <div
+                className={cn(styles.content, {
+                    [styles.textContent]: !isValidElement(content),
+                })}
+            >
+                {content}
+            </div>
+
+            {/** Workaround чтобы для клика показывать отметку справа и всегда в виде иконки */}
+            {Checkmark && showCheckMark && (
+                <Checkmark
+                    disabled={disabled}
+                    selected={selected}
+                    multiple={multiple}
+                    position='after'
+                />
+            )}
+        </div>
+    );
+};

package/src/components/option/index.module.css

@@ -0,0 +1,108 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.option {
+    @mixin paragraph_component;
+
+    display: flex;
+    align-items: center;
+    padding-left: var(--select-option-left-padding);
+    padding-right: var(--select-option-right-padding);
+    transition: background-color 0.2s ease;
+    background: var(--select-option-background);
+    color: var(--select-option-color);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+
+    &:not(.disabled):active {
+        background: var(--select-option-active-background);
+        color: var(--select-option-active-color);
+    }
+
+    &:before {
+        content: '';
+        position: absolute;
+        left: var(--select-option-left-padding);
+        right: var(--select-option-right-padding);
+        top: 0;
+        height: 1px;
+        background: var(--select-option-divider-background);
+        display: var(--select-option-divider-display);
+        transition: opacity 0.2s ease;
+    }
+
+    &:first-child:before {
+        display: none;
+    }
+}
+
+.s {
+    min-height: var(--size-s-height);
+}
+
+.m {
+    min-height: var(--size-m-height);
+}
+
+.l {
+    min-height: var(--size-l-height);
+}
+
+.xl {
+    min-height: var(--size-xl-height);
+}
+
+.l,
+.xl {
+    padding-left: var(--select-option-l-left-padding);
+    padding-right: var(--select-option-l-right-padding);
+
+    &:before {
+        left: var(--select-option-l-left-padding);
+        right: var(--select-option-l-right-padding);
+    }
+}
+
+.selected {
+    background: var(--select-option-selected-background);
+    color: var(--select-option-selected-color);
+    cursor: default;
+}
+
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+
+    &:before,
+    & + .option:before {
+        opacity: 0;
+    }
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+    background: var(--select-option-disabled-background);
+    color: var(--select-option-disabled-color);
+}
+
+.content {
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+}
+
+.textContent {
+    padding-top: var(--gap-s);
+    padding-bottom: var(--gap-s);
+}
+
+/* IE min-height fix */
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .option:after {
+        min-height: inherit;
+        font-size: 0;
+        content: '';
+    }
+}

package/src/components/option/index.ts

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