chore: update storybook to v8.1.9

.stylelintrc

@@ -2,7 +2,6 @@
     "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"],
     "plugins": ["stylelint-use-logical"],
     "rules": {
-        "csstools/use-logical": ["always", {"except": ["float", "width", "min-width", "max-width", "height", "min-height", "max-height"]}],
-        "declaration-colon-space-after": "always-single-line"
+        "csstools/use-logical": ["always", {"except": ["float", "width", "min-width", "max-width", "height", "min-height", "max-height"]}]
     }
 }

package.json

@@ -136,16 +136,16 @@
         "@gravity-ui/tsconfig": "^1.0.0",
         "@playwright/experimental-ct-react": "^1.42.1",
         "@playwright/test": "^1.42.1",
-        "@storybook/addon-a11y": "^8.0.5",
-        "@storybook/addon-essentials": "^8.0.5",
-        "@storybook/addon-storysource": "^8.1.4",
+        "@storybook/addon-a11y": "^8.1.9",
+        "@storybook/addon-essentials": "^8.1.9",
+        "@storybook/addon-storysource": "^8.1.9",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.0.5",
-        "@storybook/manager-api": "^8.0.5",
+        "@storybook/cli": "^8.1.9",
+        "@storybook/manager-api": "^8.1.9",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/preview-api": "^8.0.5",
-        "@storybook/react-webpack5": "^8.0.5",
-        "@storybook/test-runner": "^0.17.0",
+        "@storybook/preview-api": "^8.1.9",
+        "@storybook/react-webpack5": "^8.1.9",
+        "@storybook/test-runner": "^0.18.0",
         "@testing-library/dom": "^10.1.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
@@ -186,7 +186,7 @@
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",
-        "storybook": "^8.0.5",
+        "storybook": "^8.1.9",
         "stylelint": "^15.11.0",
         "stylelint-use-logical": "^2.1.0",
         "ts-jest": "^29.1.2",

src/components/ArrowToggle/__stories__/ArrowToggle.new.stories.tsx

@@ -7,7 +7,7 @@ import type {ArrowToggleProps} from '../ArrowToggle';
 
 const directions = ['top', 'left', 'bottom', 'right'] as Array<ArrowToggleProps['direction']>;
 
-export default {
+const meta: Meta<typeof ArrowToggle> = {
     title: 'Components/Utils/ArrowToggle',
     id: 'components/utils/ArrowToggle',
     args: {
@@ -20,10 +20,12 @@ export default {
             control: {type: 'select'},
         },
         size: {
-            control: {type: 'input'},
+            control: {type: 'number'},
         },
     },
-} as Meta;
+};
+
+export default meta;
 
 export const Playground: StoryFn = (args: ArrowToggleProps) => {
     return <ArrowToggle size={args.size} direction={args.direction} />;

src/components/Popover/__stories__/Popover.stories.tsx

@@ -12,7 +12,7 @@ import {WithCustomAnchor as WithCustomAnchorExample} from './examples/WithCustom
 
 import './PopoverDemo.scss';
 
-export default {
+const meta: Meta<typeof Popover> = {
     title: 'Components/Overlays/Popover',
     component: Popover,
     args: {
@@ -64,19 +64,19 @@ export default {
         },
         size: {control: 'select', options: ['s', 'l']},
         anchorRef: {},
-        children: {control: 'string'},
-        title: {control: 'string '},
-        content: {control: 'string'},
+        children: {control: 'text'},
+        title: {control: 'text'},
+        content: {control: 'text'},
         htmlContent: {control: 'object'},
-        contentClassName: {control: 'string '},
-        links: {control: 'array'},
+        contentClassName: {control: 'text'},
+        links: {control: 'object'},
         forceLinksAppearance: {control: 'boolean'},
         tooltipActionButton: {control: 'object'},
         tooltipCancelButton: {control: 'object'},
-        tooltipOffset: {control: 'array'},
-        tooltipClassName: {control: 'string '},
-        tooltipContentClassName: {control: 'string '},
-        className: {control: 'string '},
+        tooltipOffset: {control: 'object'},
+        tooltipClassName: {control: 'text'},
+        tooltipContentClassName: {control: 'text'},
+        className: {control: 'text'},
         onClick: {action: 'onClick'},
         onOpenChange: {action: 'onOpenChange'},
         onCloseClick: {action: 'onCloseClick'},
@@ -87,9 +87,11 @@ export default {
         delayOpening: {control: 'number', min: 0},
         delayClosing: {control: 'number', min: 0},
         disablePortal: {control: 'boolean'},
-        tooltipId: {control: 'string'},
+        tooltipId: {control: 'text'},
     },
-} as Meta;
+};
+
+export default meta;
 
 const PlaygroundTemplate: StoryFn<PopoverProps> = (args) => (
     <Base {...args}>{args.openOnHover ? 'Move the cursor' : 'Click'} here to show the popover</Base>

src/components/Popover/hooks/useOpen.ts

@@ -11,7 +11,7 @@ export type UseOpenProps = {
     onOpenChange?: (open: boolean) => void;
     delayOpening?: number;
     delayClosing?: number;
-    behavior: PopoverBehavior;
+    behavior: `${PopoverBehavior}`;
     shouldBeOpen: React.MutableRefObject<boolean>;
 };
 

src/components/Popover/types.ts

@@ -79,7 +79,7 @@ export type PopoverBehaviorProps = {
      * DelayedClosing - with 300ms delay only for closing
      * Won't be applied if `delayOpening` or `delayClosing` are passed
      */
-    behavior?: PopoverBehavior;
+    behavior?: `${PopoverBehavior}`;
     /**
      * Custom delay for opening if openOnHover
      */