@itcase/ui-web 1.9.111 → 1.9.113

package/dist/css/styles/bundles.css

@@ -61264,8 +61264,12 @@ h2.react-datepicker__current-month {
     right: 12px;
     transform: translateY(-50%);
   }
-  &__clear-label {
+  &__clear-button {
+    position: absolute;
+    top: 50%;
+    right: 12px;
     width: auto;
+    transform: translateY(-50%);
   }
   &__input-icon.icon {
     background: #fff;
@@ -61340,6 +61344,12 @@ h2.react-datepicker__current-month {
       &__input-time-container {
         grid-row-start: 2;
         grid-column-start: span 2;
+        &:not(:last-child) {
+          display: none;
+        }
+        &:last-child {
+          grid-column: 1 / -1;
+        }
       }
     }
   }
@@ -61347,12 +61357,14 @@ h2.react-datepicker__current-month {
 :root {
   --date-picker-padding: 24px 12px;
   --date-picker-fill: var(--color-surface-fill-primary);
+  --date-picker-background: var(--date-picker-fill);
   --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
   --date-picker-border-radius: 12px;
   --date-picker-border: solid 1px var(--color-surface-fill-tertiary);
 
   --date-picker-input-container-padding: 9px 15px;
   --date-picker-input-border-radius: 6px;
+  --date-picker-input-min-width: 70px;
 
   --date-picker-selected-weight: 400;
   --date-picker-week-width: 40px;

package/dist/stories/DatePickerOverview.mdx

@@ -8,5 +8,5 @@ import * as DatePickerStories from '../stories/DatePicker.stories'
 
 `DatePicker` — это календарь, который используется для выбора даты, либо диапазона дат.
 
-<Story of={DatePickerStories.Date} />
+<Story of={DatePickerStories.Default} />
 

package/dist/types/components/Avatar/stories/AvatarCount.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarCount.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarDemo.stories.js

@@ -32,6 +32,10 @@ const meta = {
         isSkeleton: false,
     },
     parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
         layout: 'centered',
     },
     argTypes: {

package/dist/types/components/Avatar/stories/AvatarImage.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarImage.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.d.ts

@@ -9,6 +9,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.js

@@ -10,6 +10,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarLetters.stories.d.ts

@@ -11,6 +11,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarLetters.stories.js

@@ -12,6 +12,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts

@@ -1,26 +1,21 @@
 import { StringId } from '@itcase/types-core';
-import type { AppearanceKeysPx, AppearancePartialRecord, AppearanceSizePxKey, DirectionProps, SizePXProps } from '@itcase/types-ui';
+import type { DirectionProps, SizePXProps } from '@itcase/types-ui';
+import { CompositeAppearanceWithoutSizeKeys } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
-import { AvatarConfig, AvatarProps } from '../Avatar/Avatar.interface';
-type AvatarStackAppearanceProps = {
-    size?: SizePXProps;
-};
 type AvatarsItem = {
     id: StringId;
     firstName: string;
     lastName: string;
     src: string;
 };
-type AvatarStackProps = AvatarStackAppearanceProps & StyleAttributes & {
-    appearance?: AppearanceKeysPx;
-    avatarAppearance?: AvatarProps['appearance'];
+type AvatarStackProps = StyleAttributes & {
+    avatarAppearance?: CompositeAppearanceWithoutSizeKeys;
     avatarsList: AvatarsItem[];
     className?: string;
     dataTestId?: string;
     direction?: DirectionProps;
     isSkeleton?: boolean;
     length?: number;
+    size?: SizePXProps;
 };
-type AvatarStackAppearance = AvatarConfig['appearance'];
-type AvatarStackAppearanceSize = AppearancePartialRecord<AppearanceSizePxKey, AvatarStackAppearanceProps, 'size'>;
-export type { AvatarStackAppearance, AvatarStackAppearanceSize, AvatarStackProps, };
+export type { AvatarStackProps };

package/dist/types/components/AvatarStack/AvatarStack.js

@@ -1,23 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { useStyles } from '@itcase/ui-core/hooks';
 import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
 import { Avatar } from 'src/components/Avatar';
 import { Group } from 'src/components/Group';
 import { Text } from 'src/components/Text';
-import { avatarStackAppearance } from './AvatarStack.appearance';
-const avatarStackConfig = {
-    appearance: avatarStackAppearance,
-    setAppearance: (appearanceConfig) => {
-        avatarStackConfig.appearance = appearanceConfig;
-    },
-};
 function AvatarStack(props) {
-    const { appearance, className, dataTestId, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig(appearance, avatarStackConfig);
-    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { size } = propsGenerator;
+    const { className, dataTestId, direction = 'horizontal', size = '56', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
     const { styles: avatarStackStyles } = useStyles(props);
-    return (avatarsList.length && (_jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `skeleton`), "data-testid": dataTestId, style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (_jsx(Avatar, { appearance: mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (_jsx(Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: _jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    return (avatarsList.length && (_jsxs("div", { className: clsx(className, 'avatar-stack', direction && `avatar-stack_direction_${direction}`, `avatar-stack_size_${size}`), "data-testid": dataTestId, style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (_jsx(Avatar, { appearance: mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, firstName: item.firstName, secondName: item.lastName, isSkeleton: isSkeleton }, item.id))), avatarsList.length > length && (_jsx(Group, { className: clsx('avatar-stack__item avatar-stack__item-text', isSkeleton && 'skeleton'), width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: _jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 export { AvatarStack };

package/dist/types/components/AvatarStack/index.d.ts

@@ -1,3 +1,3 @@
 import { AvatarStack } from './AvatarStack';
 export { AvatarStack };
-export type { AvatarStackAppearance, AvatarStackProps, } from './AvatarStack.interface';
+export type { AvatarStackProps } from './AvatarStack.interface';

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.d.ts

@@ -4,8 +4,9 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        appearance: "size56";
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        dataTestId: string;
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
@@ -15,10 +16,17 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Length3: Story;
-export declare const Length2: Story;
 export declare const Length1: Story;
+export declare const Length2: Story;
+export declare const Length3: Story;
+export declare const Length4: Story;
+export declare const Length5: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.js

@@ -1,40 +1,76 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { AvatarStack } from '..';
 import { avatarsListMock } from './__mock__';
 const meta = {
     title: 'Molecules / Avatar Stack / Length',
     component: AvatarStack,
     args: {
-        appearance: 'size56',
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        dataTestId: 'avatarStackLengthTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
-export const Length3 = {
+const lengthPlay = async ({ args, canvas, step }) => {
+    const { dataTestId, avatarsList = avatarsListMock, length = 0 } = args;
+    const overflow = avatarsList.length - length;
+    await step(`AvatarStack: ${length} avatar(s)${overflow > 0 ? ` and +${overflow} badge` : ', no overflow badge'}`, async () => {
+        const root = canvas.getByTestId(dataTestId);
+        const items = root.querySelectorAll(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
+        const badge = root.querySelector(':scope > .avatar-stack__item-text');
+        await storybookTest
+            .expect({
+            overflow: badge?.textContent ?? null,
+            avatars: items.length,
+        })
+            .toEqual({
+            overflow: overflow > 0 ? `+${overflow}` : null,
+            avatars: length,
+        });
+    });
+};
+export const Length1 = {
     args: {
-        length: 3,
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+        length: 1,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Length2 = {
     args: {
         length: 2,
     },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};
+export const Length3 = {
+    args: {
+        length: 3,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
-export const Length1 = {
+export const Length4 = {
     args: {
-        length: 1,
+        length: 4,
     },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};
+export const Length5 = {
+    args: {
+        length: 5,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.d.ts

@@ -4,7 +4,8 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
@@ -14,9 +15,12 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.js

@@ -5,24 +5,19 @@ const meta = {
     title: 'Molecules / Avatar Stack',
     component: AvatarStack,
     args: {
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.d.ts

@@ -4,17 +4,25 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        dataTestId: string;
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
             firstName: string;
             lastName: string;
         }[];
+        length: number;
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.js

@@ -1,63 +1,77 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { AvatarStack } from '..';
 import { avatarsListMock } from './__mock__';
 const meta = {
     title: 'Molecules / Avatar Stack / Size',
     component: AvatarStack,
     args: {
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        dataTestId: 'avatarStackSizeTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
+        length: 1,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
+const sizePlay = async ({ args, canvas, step }) => {
+    const { dataTestId, size, avatarsList = avatarsListMock, length = avatarsListMock.length, } = args;
+    const root = canvas.getByTestId(dataTestId);
+    const item = root.querySelector(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
+    await step(`AvatarStack: avatar ${size}px`, async () => {
+        await storybookTest.expect(root).toHaveClass(`avatar-stack_size_${size}`);
+        await storybookTest.expect(item).toHaveClass(`avatar_size_${size}`);
+        await storybookTest
+            .expect([item.clientWidth, item.clientHeight])
+            .toEqual([Number(size), Number(size)]);
+    });
+    const badge = root.querySelector(':scope > .avatar-stack__item-text');
+    await step(`Badge text is +${avatarsList.length - length}`, async () => {
+        await storybookTest
+            .expect(badge)
+            .toHaveTextContent(`+${avatarsList.length - length}`);
+    });
+    await step(`Badge size is ${size}px`, async () => {
+        await storybookTest
+            .expect([badge.clientWidth, badge.clientHeight])
+            .toEqual([Number(size), Number(size)]);
+    });
+};
 export const Size56 = {
-    args: {
-        appearance: 'size56',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '56' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size40 = {
-    args: {
-        appearance: 'size40',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '40' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size32 = {
-    args: {
-        appearance: 'size32',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '32' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size24 = {
-    args: {
-        appearance: 'size24',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '24' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size20 = {
-    args: {
-        appearance: 'size20',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '20' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size16 = {
-    args: {
-        appearance: 'size16',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '16' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/{__test__/AvatarStackTest.stories.d.ts → stories/AvatarStackSkeleton.stories.d.ts}

@@ -5,20 +5,25 @@ declare const meta: {
     component: typeof AvatarStack;
     args: {
         dataTestId: string;
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
             firstName: string;
             lastName: string;
         }[];
+        isSkeleton: true;
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Skeleton: Story;
-export declare const Length: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackSkeleton.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { AvatarStack } from '../AvatarStack';
+import { avatarsListMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Avatar Stack / Skeleton',
+    component: AvatarStack,
+    args: {
+        dataTestId: 'avatarStackSkeletonTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
+        avatarsList: avatarsListMock,
+        isSkeleton: true,
+    },
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
+    },
+    tags: ['test'],
+};
+export default meta;
+const avatarItemSelector = ':scope > .avatar-stack__item:not(.avatar-stack__item-text)';
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        const { avatarsList = avatarsListMock, length = 3 } = args;
+        const hasOverflow = avatarsList.length > length;
+        await step(`AvatarStack: ${length} skeleton avatar(s)${hasOverflow ? ' and skeleton overflow badge' : ''}`, async () => {
+            const root = canvas.getByTestId(args.dataTestId);
+            const avatars = root.querySelectorAll(avatarItemSelector);
+            const overflow = root.querySelector(':scope > .avatar-stack__item-text');
+            await storybookTest.expect(avatars.length).toBe(length);
+            for (const avatar of avatars) {
+                await storybookTest.expect(avatar).toHaveClass('skeleton');
+            }
+            if (hasOverflow) {
+                await storybookTest.expect(overflow).toHaveClass('skeleton');
+            }
+            else {
+                await storybookTest.expect(overflow).toBeNull();
+            }
+        });
+    },
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};