@salutejs/sdds-api-tests 0.34.0-dev.1 → 0.35.0-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-api-tests",
-  "version": "0.34.0-dev.1",
+  "version": "0.35.0-dev.0",
   "description": "API tests for components",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -13,19 +13,19 @@
     "test": "rm -rf tests && node script.mjs && NODE_OPTIONS=--max-old-space-size=8192 tsc --noEmit -p ./tsconfig.typecheck.json"
   },
   "devDependencies": {
-    "@salutejs/plasma-b2c": "1.645.0-dev.1",
-    "@salutejs/plasma-giga": "0.372.0-dev.1",
+    "@salutejs/plasma-b2c": "1.646.0-dev.0",
+    "@salutejs/plasma-giga": "0.373.0-dev.0",
     "@salutejs/plasma-icons": "1.257.1-dev.0",
-    "@salutejs/plasma-web": "1.647.0-dev.1",
-    "@salutejs/sdds-bizcom": "0.377.0-dev.1",
-    "@salutejs/sdds-cs": "0.381.0-dev.1",
-    "@salutejs/sdds-dfa": "0.375.0-dev.1",
-    "@salutejs/sdds-finai": "0.368.0-dev.1",
-    "@salutejs/sdds-insol": "0.372.0-dev.1",
-    "@salutejs/sdds-netology": "0.376.0-dev.1",
-    "@salutejs/sdds-platform-ai": "0.376.0-dev.1",
-    "@salutejs/sdds-scan": "0.375.0-dev.1",
-    "@salutejs/sdds-serv": "0.376.0-dev.1",
+    "@salutejs/plasma-web": "1.648.0-dev.0",
+    "@salutejs/sdds-bizcom": "0.378.0-dev.0",
+    "@salutejs/sdds-cs": "0.382.0-dev.0",
+    "@salutejs/sdds-dfa": "0.376.0-dev.0",
+    "@salutejs/sdds-finai": "0.369.0-dev.0",
+    "@salutejs/sdds-insol": "0.373.0-dev.0",
+    "@salutejs/sdds-netology": "0.377.0-dev.0",
+    "@salutejs/sdds-platform-ai": "0.377.0-dev.0",
+    "@salutejs/sdds-scan": "0.376.0-dev.0",
+    "@salutejs/sdds-serv": "0.377.0-dev.0",
     "@types/node": "^25.9.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77c6420021dc3e4b07d35f80a29f28d008f393c5"
+  "gitHead": "a14f9c39f6edf2ba938e1c640ee5357a3629e928"
 }

package/script.mjs

@@ -21,18 +21,19 @@ const config = {
         },
         {
             name: '@salutejs/plasma-giga',
+            excludeComponents: ['Editable'],
         },
         {
             name: '@salutejs/sdds-bizcom',
-            excludeComponents: ['CodeArea', 'BottomSheet'],
+            excludeComponents: ['CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-cs',
-            excludeComponents: ['RatingInput', 'Select', 'InformationWrapper', 'CodeArea', 'BottomSheet'],
+            excludeComponents: ['RatingInput', 'Select', 'InformationWrapper', 'CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-dfa',
-            excludeComponents: ['InformationWrapper', 'CodeArea', 'BottomSheet'],
+            excludeComponents: ['InformationWrapper', 'CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-finai',
@@ -40,23 +41,23 @@ const config = {
         },
         {
             name: '@salutejs/sdds-insol',
-            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet'],
+            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-netology',
-            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet'],
+            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-platform-ai',
-            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet'],
+            excludeComponents: ['RatingInput', 'CodeArea', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-scan',
-            excludeComponents: ['CodeArea', 'Sheet', 'BottomSheet'],
+            excludeComponents: ['CodeArea', 'Sheet', 'BottomSheet', 'Editable'],
         },
         {
             name: '@salutejs/sdds-serv',
-            excludeComponents: ['CodeArea', 'BottomSheet'],
+            excludeComponents: ['CodeArea', 'BottomSheet', 'Editable'],
         },
     ],
     includeComponents: [],

package/src/components/Editable/Editable.api.test.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import type { AriaRole, ComponentProps, ComponentPropsWithRef, CSSProperties, FC, ReactNode } from 'react';
+import { useState } from 'react';
+import { describe, it } from 'node:test';
+import { expectTypeOf } from 'expect-type';
+import { IconDownload } from '@salutejs/plasma-icons';
+import { Editable, H5, editableTokens } from '@salutejs/plasma-b2c';
+
+type EditableProps = ComponentProps<typeof Editable>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        expectTypeOf<EditableProps>().toHaveProperty('textComponent').toEqualTypeOf<FC<ComponentPropsWithRef<'div'>>>();
+        expectTypeOf<EditableProps>().toHaveProperty('value').toEqualTypeOf<string | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('placeholder').toEqualTypeOf<string | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('maxLength').toEqualTypeOf<number | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('spellCheck').toEqualTypeOf<'true' | 'false' | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('icon').toEqualTypeOf<ReactNode>();
+        expectTypeOf<EditableProps>().toHaveProperty('multiline').toEqualTypeOf<boolean | undefined>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<EditableProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<EditableProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+    });
+
+    it('HTMLInputElement', () => {
+        expectTypeOf<EditableProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<EditableProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('defaultValue')
+            .toEqualTypeOf<string | number | readonly string[] | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('onChange')
+            .toEqualTypeOf<React.ChangeEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('onFocus')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('onBlur')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('onKeyDown')
+            .toEqualTypeOf<React.KeyboardEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<EditableProps>()
+            .toHaveProperty('onPaste')
+            .toEqualTypeOf<React.ClipboardEventHandler<HTMLInputElement> | undefined>();
+    });
+});
+
+describe('Tokens', () => {
+    it('iconGap', () => {
+        expectTypeOf(editableTokens).toHaveProperty('iconGap').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('editButtonBackground').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('editButtonColor').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('editButtonColorHover').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('editButtonPaddingLeft').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('placeholderColor').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('caretColor').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('textBoxMarginRight').toEqualTypeOf<string>();
+        expectTypeOf(editableTokens).toHaveProperty('textBoxPaddingRight').toEqualTypeOf<string>();
+    });
+});
+
+describe('Examples', () => {
+    it('With icon and gap', () => {
+        () => {
+            const [value, setValue] = useState('Header 5');
+
+            return (
+                <Editable
+                    textComponent={H5}
+                    value={value}
+                    multiline={false}
+                    placeholder="Введите текст"
+                    spellCheck="false"
+                    maxLength={120}
+                    icon={<IconDownload color="inherit" />}
+                    style={{ maxWidth: '20rem', [editableTokens.iconGap]: '6px' }}
+                    onChange={(event) => setValue(event.target.value)}
+                />
+            );
+        };
+    });
+
+    it('Multiline', () => {
+        () => {
+            return (
+                <Editable
+                    textComponent={H5}
+                    value="Очень длинное название документа, которое не помещается в одну строку"
+                    multiline
+                    style={{ maxWidth: '20rem', [editableTokens.iconGap]: '6px' }}
+                    icon={<IconDownload color="inherit" />}
+                />
+            );
+        };
+    });
+});

package/src/components/Wheel/Wheel.api.test.tsx

@@ -0,0 +1,334 @@
+import * as React from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import { describe, it } from 'node:test';
+import { expectTypeOf } from 'expect-type';
+// Wheel подключён только к DFA и HomeDS: проверяем публичные экспорты этих пакетов.
+import { Wheel } from '@salutejs/sdds-dfa';
+import { Wheel as HomeDSWheel } from '@salutejs/plasma-homeds';
+import type { WheelProps as HomeDSWheelProps } from '@salutejs/plasma-homeds';
+import type {
+    WheelProps,
+    WheelAlignment,
+    WheelSeparator,
+    WheelSeparatorPreset,
+    WheelColumn,
+    WheelColumns,
+    WheelItem,
+    WheelItemState,
+} from '@salutejs/sdds-dfa';
+
+type Value = { hours: number; period: 'am' | 'pm' };
+type Props = WheelProps<Value>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        expectTypeOf<Props>().toHaveProperty('columns').toEqualTypeOf<WheelColumns<Value>>();
+        expectTypeOf<Props>().toHaveProperty('width').toEqualTypeOf<CSSProperties['width']>();
+        expectTypeOf<Props>().toHaveProperty('value').toEqualTypeOf<Value>();
+        expectTypeOf<Props>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<Props>().toHaveProperty('hasControls').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<Props>().toHaveProperty('visibleItemsCount').toEqualTypeOf<3 | 5 | undefined>();
+        expectTypeOf<Props>().toHaveProperty('animated').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<Props>().toHaveProperty('textAfterMode').toEqualTypeOf<'dynamic' | 'static' | undefined>();
+        expectTypeOf<HomeDSWheelProps<Value>['textAfterMode']>().toEqualTypeOf<'dynamic' | 'static' | undefined>();
+        expectTypeOf<Props>().toHaveProperty('align').toEqualTypeOf<WheelAlignment | undefined>();
+        expectTypeOf<WheelAlignment>().toEqualTypeOf<'left' | 'center' | 'right' | 'mixed'>();
+        expectTypeOf<Props>().toHaveProperty('separator').toEqualTypeOf<WheelSeparator>();
+        expectTypeOf<WheelSeparatorPreset>().toEqualTypeOf<'none' | 'dots' | 'divider'>();
+        expectTypeOf<WheelSeparator>().toExtend<ReactNode>();
+        expectTypeOf<ReactNode>().toExtend<WheelSeparator>();
+        expectTypeOf<Props>()
+            .toHaveProperty('onChange')
+            .toEqualTypeOf<((value: Value, column: keyof Value) => void) | undefined>();
+        expectTypeOf<WheelColumn>().toHaveProperty('label').toEqualTypeOf<string>();
+        expectTypeOf<WheelColumn>().toHaveProperty('width').toEqualTypeOf<CSSProperties['width']>();
+        expectTypeOf<WheelColumn>().toHaveProperty('description').toEqualTypeOf<ReactNode>();
+        expectTypeOf<WheelColumn>().toHaveProperty('textAfter').toEqualTypeOf<ReactNode>();
+        expectTypeOf<WheelColumn>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<WheelColumn>().toHaveProperty('loop').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<WheelItemState>().toHaveProperty('selected').toEqualTypeOf<boolean>();
+        expectTypeOf<WheelItemState>().toHaveProperty('offset').toEqualTypeOf<-3 | -2 | -1 | 0 | 1 | 2 | 3>();
+        expectTypeOf<WheelColumn>()
+            .toHaveProperty('renderItem')
+            .toEqualTypeOf<((item: WheelItem, state: WheelItemState) => ReactNode) | undefined>();
+    });
+
+    it('Variations', () => {
+        type Size = NonNullable<Props['size']>;
+        type View = NonNullable<Props['view']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+        expectTypeOf<View>().toEqualTypeOf<'default'>();
+        expectTypeOf<Size>().toEqualTypeOf<
+            'displayL' | 'displayM' | 'displayS' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'l' | 'm' | 's'
+        >();
+        expectTypeOf<HomeDSWheelProps<Value>['size']>().toEqualTypeOf<'h1' | 'h4' | undefined>();
+        expectTypeOf<HomeDSWheelProps<Value>['view']>().toEqualTypeOf<'default' | 'highlighted' | undefined>();
+        expectTypeOf<React.ComponentProps<typeof Wheel>['size']>().toEqualTypeOf<Props['size']>();
+        expectTypeOf<React.ComponentProps<typeof HomeDSWheel>['size']>().toEqualTypeOf<
+            HomeDSWheelProps<Value>['size']
+        >();
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<Props>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<Props>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<Props>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<Props>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<Props>()
+            .toHaveProperty('onFocus')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLDivElement> | undefined>();
+        expectTypeOf<React.ComponentProps<typeof Wheel>>()
+            .toHaveProperty('ref')
+            .toEqualTypeOf<Ref<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('TextAfter mode', () => {
+        void (<Wheel value={{ hours: 12 }} columns={[]} textAfterMode="dynamic" />);
+        void (<Wheel value={{ hours: 12 }} columns={[]} textAfterMode="static" />);
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[]} size="h4" textAfterMode="static" />);
+        // @ts-expect-error Допустимы только dynamic и static.
+        void (<Wheel value={{ hours: 12 }} columns={[]} textAfterMode="fixed" />);
+    });
+
+    it('Vertical configurations', () => {
+        void (<Wheel value={{ hours: 12 }} columns={[]} size="displayL" view="default" />);
+        void (<Wheel value={{ hours: 12 }} columns={[]} size="s" />);
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[]} size="h1" view="default" />);
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[]} size="h4" view="highlighted" />);
+        // @ts-expect-error В DFA доступен только вид default.
+        void (<Wheel value={{ hours: 12 }} columns={[]} view="highlighted" />);
+        // @ts-expect-error В HomeDS доступны только размеры h1 и h4.
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[]} size="m" />);
+        // @ts-expect-error В HomeDS нет размера displayL.
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[]} size="displayL" />);
+        // @ts-expect-error Неизвестный размер DFA.
+        void (<Wheel value={{ hours: 12 }} columns={[]} size="xs" />);
+    });
+    it('Container and column widths', () => {
+        expectTypeOf<Props['width']>(640);
+        expectTypeOf<Props['width']>('100%');
+        expectTypeOf<Props['width']>('calc(100% - 2rem)');
+        expectTypeOf<WheelColumn['width']>(0);
+        expectTypeOf<WheelColumn['width']>('12rem');
+        expectTypeOf<WheelColumn['width']>(undefined);
+        void (
+            <Wheel
+                value={{ hours: 12 }}
+                width="100%"
+                columns={[{ name: 'hours', label: 'Часы', items: [], width: 160 }]}
+            />
+        );
+        // @ts-expect-error Ширина принимает только число или CSS-строку.
+        expectTypeOf<Props['width']>(true);
+        // @ts-expect-error Ширина колонки не является объектом стилей.
+        expectTypeOf<WheelColumn['width']>({ width: 100 });
+    });
+    it('Visible item count', () => {
+        void (<Wheel value={{ hours: 12 }} columns={[]} visibleItemsCount={3} />);
+        void (<Wheel value={{ hours: 12 }} columns={[]} visibleItemsCount={5} />);
+        // @ts-expect-error Поддерживаются только 3 и 5 видимых значений.
+        void (<Wheel value={{ hours: 12 }} columns={[]} visibleItemsCount={4} />);
+        // @ts-expect-error Количество задаётся числом.
+        void (<Wheel value={{ hours: 12 }} columns={[]} visibleItemsCount="3" />);
+    });
+    it('Loop belongs to a column', () => {
+        void (<Wheel value={{ hours: 12 }} columns={[{ name: 'hours', label: 'Часы', items: [], loop: true }]} />);
+        // @ts-expect-error Зацикливание задаётся отдельно в columns.
+        void (<Wheel value={{ hours: 12 }} columns={[]} loop />);
+    });
+    it('Storybook-only column count', () => {
+        // @ts-expect-error columnsCount — только контроль Storybook, количество определяется массивом columns.
+        void (<Wheel value={{ hours: 12 }} columns={[]} columnsCount={1} />);
+    });
+    it('Preset and custom separators', () => {
+        expectTypeOf<WheelSeparator>('none');
+        expectTypeOf<WheelSeparator>('dots');
+        expectTypeOf<WheelSeparator>('divider');
+        expectTypeOf<WheelSeparator>('/');
+        expectTypeOf<WheelSeparator>(0);
+        expectTypeOf<WheelSeparator>(<span>/</span>);
+        expectTypeOf<WheelSeparator>(
+            <>
+                от <b>до</b>
+            </>,
+        );
+        expectTypeOf<WheelSeparator>([<span key="slash">/</span>, '·']);
+        expectTypeOf<WheelSeparator>(null);
+        expectTypeOf<WheelSeparator>(false);
+        expectTypeOf<WheelSeparator>(undefined);
+        // @ts-expect-error render-функция не является ReactNode.
+        expectTypeOf<WheelSeparator>(() => <span>/</span>);
+        // @ts-expect-error Произвольный объект не является ReactNode.
+        expectTypeOf<WheelSeparator>({ custom: '/' });
+        void (<Wheel value={{ hours: 12 }} columns={[]} separator={<span>/</span>} />);
+    });
+    it('Alignment', () => {
+        expectTypeOf<Props['align']>('left');
+        expectTypeOf<Props['align']>('center');
+        expectTypeOf<Props['align']>('right');
+        expectTypeOf<Props['align']>('mixed');
+        // @ts-expect-error Произвольное CSS-значение не входит в API выравнивания.
+        expectTypeOf<Props['align']>('justify');
+    });
+    it('Accessible item content', () => {
+        expectTypeOf<WheelItem<number>>({ value: 1, label: 'Один' });
+        expectTypeOf<WheelItem<number>>({ value: 1, label: <b>Один</b>, textValue: 'Один' });
+        // @ts-expect-error JSX требует текст для скринридера.
+        expectTypeOf<WheelItem<number>>({ value: 1, label: <b>Один</b> });
+        // @ts-expect-error Тип значения опции сохраняется.
+        expectTypeOf<WheelItem<number>>({ value: '1', label: 'Один' });
+    });
+});
+
+describe('Generics', () => {
+    it('Infers inline column callbacks from value', () => {
+        const value: Value = { hours: 12, period: 'am' };
+        void (
+            <Wheel
+                value={value}
+                columns={[
+                    {
+                        name: 'hours',
+                        label: 'Часы',
+                        items: [{ value: 12, label: 12 }],
+                        renderItem: (item) => {
+                            expectTypeOf(item.value).toEqualTypeOf<number>();
+                            return item.label;
+                        },
+                    },
+                    {
+                        name: 'period',
+                        label: 'Период',
+                        items: [{ value: 'pm', label: 'PM' }],
+                        renderItem: (item) => {
+                            expectTypeOf(item.value).toEqualTypeOf<'am' | 'pm'>();
+                            return item.label;
+                        },
+                    },
+                ]}
+                onChange={(nextValue, column) => {
+                    expectTypeOf(nextValue).toEqualTypeOf<Value>();
+                    expectTypeOf(column).toEqualTypeOf<keyof Value>();
+                }}
+            />
+        );
+        const invalidPeriod = [
+            { name: 'period' as const, label: 'Период', items: [{ value: 'night', label: 'Ночь' }] },
+        ];
+        // @ts-expect-error Опции не должны расширять допустимые значения period.
+        void (<Wheel value={value} columns={invalidPeriod} />);
+        // @ts-expect-error HomeDS также выводит допустимые значения только из value.
+        void (<HomeDSWheel value={value} columns={invalidPeriod} />);
+        // @ts-expect-error Опции не должны добавлять ключи в value HomeDS.
+        void (<HomeDSWheel value={{ hours: 12 }} columns={[{ name: 'minutes', label: 'Минуты', items: [] }]} />);
+    });
+
+    it('HomeDS preserves value and column inference', () => {
+        void (
+            <HomeDSWheel
+                value={{ hours: 12, period: 'am' } as Value}
+                columns={[
+                    { name: 'hours', label: 'Часы', items: [{ value: 12, label: 12 }] },
+                    {
+                        name: 'period',
+                        label: 'Период',
+                        items: [{ value: 'am', label: 'AM' }],
+                        renderItem: (item) => {
+                            expectTypeOf(item.value).toEqualTypeOf<'am' | 'pm'>();
+                            return item.label;
+                        },
+                    },
+                ]}
+                onChange={(value, column) => {
+                    expectTypeOf(value).toEqualTypeOf<Value>();
+                    expectTypeOf(column).toEqualTypeOf<keyof Value>();
+                }}
+                ref={React.createRef<HTMLDivElement>()}
+            />
+        );
+        const invalidHours = [{ name: 'hours' as const, label: 'Часы', items: [{ value: '12', label: '12' }] }];
+        // @ts-expect-error Опции HomeDS также должны соответствовать типу hours из value.
+        void (<HomeDSWheel value={{ hours: 12 }} columns={invalidHours} />);
+    });
+    it('Accepts interfaces without an index signature', () => {
+        interface Time {
+            hours: number;
+            minutes: number;
+        }
+        const time: Time = { hours: 12, minutes: 30 };
+        void (
+            <Wheel
+                value={time}
+                columns={[]}
+                onChange={(value) => {
+                    expectTypeOf(value).toEqualTypeOf<Time>();
+                }}
+            />
+        );
+    });
+
+    it('Column names and values', () => {
+        const columns: WheelColumns<Value> = [
+            {
+                name: 'hours',
+                label: 'Часы',
+                items: [{ value: 12, label: 12 }],
+                renderItem: (item) => {
+                    expectTypeOf(item.value).toEqualTypeOf<number>();
+                    return item.label;
+                },
+            },
+            { name: 'period', label: 'Период', items: [{ value: 'am', label: 'AM' }] },
+        ];
+        void (
+            <Wheel
+                value={{ hours: 12, period: 'am' } as Value}
+                columns={columns}
+                onChange={(value, column) => {
+                    expectTypeOf(value).toEqualTypeOf<Value>();
+                    expectTypeOf(column).toEqualTypeOf<keyof Value>();
+                }}
+            />
+        );
+        // @ts-expect-error Неизвестное имя столбца.
+        void (<Wheel value={{ hours: 12 }} columns={[{ name: 'minutes', label: 'Минуты', items: [] }]} />);
+        const invalidHours = [{ name: 'hours' as const, label: 'Часы', items: [{ value: '12', label: '12' }] }];
+        // @ts-expect-error Опции не должны расширять тип hours, выведенный из value.
+        void (<Wheel value={{ hours: 12 }} columns={invalidHours} />);
+        const invalidPeriod = [
+            { name: 'period' as const, label: 'Период', items: [{ value: 'night', label: 'Ночь' }] },
+        ];
+        // @ts-expect-error Период ограничен литералами am и pm.
+        expectTypeOf<WheelColumns<Value>>(invalidPeriod);
+    });
+});
+
+describe('Examples', () => {
+    it('Controlled', () => {
+        () => {
+            const [value, setValue] = React.useState<Value>({ hours: 12, period: 'am' });
+            return (
+                <Wheel
+                    textAfterMode="static"
+                    value={value}
+                    onChange={setValue}
+                    columns={[
+                        { name: 'hours', label: 'Часы', textAfter: 'ч', items: [{ value: 12, label: 12 }] },
+                        {
+                            name: 'period',
+                            label: 'Период',
+                            items: [
+                                { value: 'am', label: 'AM' },
+                                { value: 'pm', label: 'PM' },
+                            ],
+                        },
+                    ]}
+                    ref={React.createRef<HTMLDivElement>()}
+                />
+            );
+        };
+    });
+});