@salutejs/plasma-new-hope 0.134.0-canary.1406.10628421547.0 → 0.134.0-dev.0

package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { mergeConfig } from '../../../../engines';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { ComboboxPrimitiveValue, comboboxConfig } from '../../../../components/Combobox';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+
+import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
+import { config } from './Combobox.config';
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
+
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_b2c/Combobox',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        enumerationType: {
+            options: enumerations,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(comboboxConfig, config)),
+    },
+    args: {
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        placeholder: 'Placeholder',
+        enumerationType: 'comma',
+        size: 'm',
+        view: 'default',
+        placement: 'bottom',
+    },
+};
+
+export default meta;
+
+const onChangeAction = action('onChange');
+
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
+};
+
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
+};
+
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StorySingle = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <StorySingle {...args} />,
+};
+
+const StoryMultiple = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
+
+    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
+
+    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                enumerationType={enumerationType}
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryMultiple {...args} />,
+};
+
+const StoryAddCustomItem = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [opened, setOpened] = useState(false);
+    const [items, setItems] = useState(getSelectItems('item', 1));
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { code } = event;
+
+        if (code === 'Enter') {
+            const newValue = (event.target as HTMLInputElement).value;
+            const newItems = [...items];
+
+            if (newItems.find((item) => item.child === newValue)) {
+                return;
+            }
+
+            newItems.push({
+                value: `${newValue}_`,
+                child: (newValue || '').toString(),
+            });
+
+            setOpened(false);
+            setItems(newItems);
+        }
+    };
+
+    const filterFunction = () => true;
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                opened={opened}
+                onToggle={onToggle}
+                onChangeValue={onChangeValue}
+                onKeyDown={onKeyDown}
+                filterFunction={filterFunction}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxDivider />
+                {items.map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const AddCustomItem: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryAddCustomItem {...args} />,
+};

package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { comboboxTokens } from '../../../../components/Combobox';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.5rem;", ":0;", ":0.375rem;", ":auto;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":0.375rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":2rem;", ":100%;", ":0.5rem;", ":0 2.5rem 0 0.75rem;", ":0 2.625rem 0 0.375rem;", ":0 2.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight),
+      s: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.625rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.75rem;", ":0;", ":0.75rem;", ":auto;", ":1.5rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":1.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.75rem;", ":2.5rem;", ":100%;", ":0.625rem;", ":0 3rem 0 1rem;", ":0 3.125rem 0 0.375rem;", ":0 3.125rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight),
+      m: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.875rem;", ":0;", ":0.875rem;", ":auto;", ":1.5rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.625rem;", ":1.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.875rem;", ":0.625rem;", ":0.5rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.875rem;", ":3rem;", ":100%;", ":0.75rem;", ":0 3.25rem 0 1.25rem;", ":0 3.375rem 0 0.375rem;", ":0 3.375rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight),
+      l: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], comboboxTokens.targetColor, comboboxTokens.targetLabelColor, comboboxTokens.targetArrowColor, comboboxTokens.targetBorderColor, comboboxTokens.targetBorderColorHover, comboboxTokens.targetBorderColorActive, comboboxTokens.targetBorderColorOpen, comboboxTokens.background, comboboxTokens.boxShadow, comboboxTokens.itemBackground, comboboxTokens.itemBackgroundHover, comboboxTokens.itemBackgroundSelectedHover, comboboxTokens.itemColor, comboboxTokens.itemContentLeftColor, comboboxTokens.chipCloseIconColor, comboboxTokens.chipColor, comboboxTokens.chipBackground, comboboxTokens.chipColorHover, comboboxTokens.chipBackgroundHover, comboboxTokens.chipColorActive, comboboxTokens.chipBackgroundActive, comboboxTokens.chipBackgroundReadOnly, comboboxTokens.chipColorReadOnly, comboboxTokens.chipBackgroundReadOnlyHover, comboboxTokens.chipColorReadOnlyHover, comboboxTokens.chipOpacityReadonly, comboboxTokens.disabledOpacity, comboboxTokens.focusColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.js

@@ -0,0 +1,15 @@
+import { comboboxConfig, comboboxItemConfig, comboboxDividerConfig, comboboxFooterConfig, comboboxGroupConfig, comboboxHeaderConfig } from '../../../../components/Combobox';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Combobox.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(comboboxConfig, config);
+export var Combobox = /*#__PURE__*/component(mergedConfig);
+var mergedItemConfig = /*#__PURE__*/mergeConfig(comboboxItemConfig);
+export var ComboboxItem = /*#__PURE__*/component(mergedItemConfig);
+var mergedDividerConfig = /*#__PURE__*/mergeConfig(comboboxDividerConfig);
+export var ComboboxDivider = /*#__PURE__*/component(mergedDividerConfig);
+var mergedFooterConfig = /*#__PURE__*/mergeConfig(comboboxFooterConfig);
+export var ComboboxFooter = /*#__PURE__*/component(mergedFooterConfig);
+var mergedGroupConfig = /*#__PURE__*/mergeConfig(comboboxGroupConfig);
+export var ComboboxGroup = /*#__PURE__*/component(mergedGroupConfig);
+var mergedHeaderConfig = /*#__PURE__*/mergeConfig(comboboxHeaderConfig);
+export var ComboboxHeader = /*#__PURE__*/component(mergedHeaderConfig);

package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { mergeConfig } from '../../../../engines';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { ComboboxPrimitiveValue, comboboxConfig } from '../../../../components/Combobox';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+
+import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
+import { config } from './Combobox.config';
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
+
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_web/Combobox',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        enumerationType: {
+            options: enumerations,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(comboboxConfig, config)),
+    },
+    args: {
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        placeholder: 'Placeholder',
+        enumerationType: 'comma',
+        size: 'm',
+        view: 'default',
+        placement: 'bottom',
+    },
+};
+
+export default meta;
+
+const onChangeAction = action('onChange');
+
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
+};
+
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
+};
+
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StorySingle = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <StorySingle {...args} />,
+};
+
+const StoryMultiple = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
+
+    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
+
+    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                enumerationType={enumerationType}
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryMultiple {...args} />,
+};
+
+const StoryAddCustomItem = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [opened, setOpened] = useState(false);
+    const [items, setItems] = useState(getSelectItems('item', 1));
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { code } = event;
+
+        if (code === 'Enter') {
+            const newValue = (event.target as HTMLInputElement).value;
+            const newItems = [...items];
+
+            if (newItems.find((item) => item.child === newValue)) {
+                return;
+            }
+
+            newItems.push({
+                value: `${newValue}_`,
+                child: (newValue || '').toString(),
+            });
+
+            setOpened(false);
+            setItems(newItems);
+        }
+    };
+
+    const filterFunction = () => true;
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                opened={opened}
+                onToggle={onToggle}
+                onChangeValue={onChangeValue}
+                onKeyDown={onKeyDown}
+                filterFunction={filterFunction}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxDivider />
+                {items.map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const AddCustomItem: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryAddCustomItem {...args} />,
+};

package/styled-components/es/hooks/useOutsideClick.js

@@ -1,15 +1,10 @@
 import { useEffect, useRef } from 'react';
-export var useOutsideClick = function useOutsideClick(callback, secondaryRef) {
+export var useOutsideClick = function useOutsideClick(callback) {
   var ref = useRef(null);
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
-      if (ref.current && !ref.current.contains(event.target)
-      // secondaryRef.current &&
-      // !secondaryRef.current.contains(event.target as Node)
-      ) {
-        if (!(secondaryRef !== null && secondaryRef !== void 0 && secondaryRef.current) || secondaryRef.current && !secondaryRef.current.contains(event.target)) {
-          callback();
-        }
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
       }
     };
     document.addEventListener('mouseup', handleClickOutside);

package/types/components/Combobox/Combobox.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import type { ComboboxProps } from './Combobox.types';
+/**
+ * Выпадающий список без внешнего контроля видимости.
+ */
+export declare const comboboxRoot: (Root: RootProps<HTMLInputElement, ComboboxProps>) => React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const comboboxConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLInputElement, ComboboxProps>) => React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+    base: string;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Combobox.d.ts.map

package/types/components/Combobox/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,aAAa,CAAC,2FAwOxE,CAAC;AAEN,eAAO,MAAM,cAAc;;;mBA1OQ,UAAU,gBAAgB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;CA2P5E,CAAC"}

package/types/components/Combobox/Combobox.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledCombobox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledPopover: import("@linaria/react").StyledComponent<{
+    selectWidth?: number | undefined;
+} & import("../../engines/types").PropsType<{
+    view: {
+        css: import("@linaria/core").LinariaClassName;
+    };
+}> & import("react").HTMLAttributes<HTMLDivElement> & import("../Popover/Popover.types").CustomPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItemNotFound: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledNativeSelect: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSelectElement> & import("react").SelectHTMLAttributes<HTMLSelectElement> & Record<never, unknown>>;
+//# sourceMappingURL=Combobox.styles.d.ts.map

package/types/components/Combobox/Combobox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU,qKAOtB,CAAC;AAEF,eAAO,MAAM,cAAc,qKAY1B,CAAC;AAKF,eAAO,MAAM,aAAa;;;;;;4JAMzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,qKAUhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,iLAY9B,CAAC"}

package/types/components/Combobox/Combobox.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLlB,CAAC"}