Merge branch 'next' into fix/nextjs15-link-component-override

Author: valentinpalkovic

.github/workflows/stale.yml

@@ -11,8 +11,10 @@ jobs:
         with:
           stale-issue-message: "Hi there! Thank you for opening this issue, but it has been marked as `stale` because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!"
           close-issue-message: "I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding."
-          any-of-labels: "needs reproduction,needs more info"
+          any-of-issue-labels: "needs reproduction,needs more info"
           exempt-issue-labels: "needs triage"
           labels-to-add-when-unstale: "needs triage"
-          days-before-stale: 21
-          days-before-pr-stale: -1
+          days-before-issue-close: 7
+          days-before-issue-stale: 21
+          days-before-pr-stale: 10
+          exempt-draft-pr: true

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 9.0.15
+
+- CLI: Do not fail incompatible package check in doctor if only core packages used - [#31886](https://github.com/storybookjs/storybook/pull/31886), thanks @mrginglymus!
+- React: Bump @joshwooding/vite-plugin-react-docgen-typescript to 0.6.1 - [#31899](https://github.com/storybookjs/storybook/pull/31899), thanks @mrginglymus!
+
+## 9.0.14
+
+- CLI: Prebundle more in cli-storybook package - [#31746](https://github.com/storybookjs/storybook/pull/31746), thanks @ndelangen!
+- Core: Fix FIPS compliance - [#31806](https://github.com/storybookjs/storybook/pull/31806), thanks @JReinhold!
+- Core: Fix addon scrollbars and align scrollbar colors with toolbars - [#31844](https://github.com/storybookjs/storybook/pull/31844), thanks @Sidnioulz!
+- Deps: Extend `vite` peerDependencies range to include `7.0.0` - [#31859](https://github.com/storybookjs/storybook/pull/31859), thanks @ghengeveld!
+- Deps: Update vite-plugin-babel to 1.3.2 to fix vite 7.0.0 peerDependency issue - [#31888](https://github.com/storybookjs/storybook/pull/31888), thanks @ghengeveld!
+- UI: Hide keyboard shortcuts entry from menu when shortcuts are disabled - [#23411](https://github.com/storybookjs/storybook/pull/23411), thanks @Spielboerg!
+
+## 9.0.13
+
+- Core: Gracefully handle disallowed cross-origin clipboard access - [#31834](https://github.com/storybookjs/storybook/pull/31834), thanks @ghengeveld!
+- Core: Support array-based catch-all Next.js route segments in AppRouterProvider - [#31524](https://github.com/storybookjs/storybook/pull/31524), thanks @yatishgoel!
+- Next.js-Vite: Support Next.js v15.4 - [#31828](https://github.com/storybookjs/storybook/pull/31828), thanks @valentinpalkovic!
+- React Native Web: Fix shift spread operator in react-native-web-vite presets - [#31804](https://github.com/storybookjs/storybook/pull/31804), thanks @xlecunff-pass!
+- Telemetry: Fix prompting without checking isTTY - [#31781](https://github.com/storybookjs/storybook/pull/31781), thanks @Synar!
+- Vite: Remove addon-themes and theming from optimized deps list - [#31833](https://github.com/storybookjs/storybook/pull/31833), thanks @ghengeveld!
+
 ## 9.0.12
 
 - Addon Vitest: Support init in Vitest >= 3.2 - [#31715](https://github.com/storybookjs/storybook/pull/31715), thanks @valentinpalkovic!

code/.yarn/patches/@vitest-expect-npm-3.0.9-e2a2210fb4.patch

@@ -58,6 +58,8 @@ const Subnav = styled.div(({ theme }) => ({
   overflow: 'auto',
   paddingRight: 10,
   gap: 6,
+  scrollbarColor: `${theme.barTextColor} ${theme.background.app}`,
+  scrollbarWidth: 'thin',
 }));
 
 const TabsWrapper = styled.div({});

code/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch

@@ -45,6 +45,11 @@ const Label = styled.label(({ theme }) => ({
       outline: 'none',
       boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
     },
+    '@media (forced-colors: active)': {
+      '&:focus': {
+        outline: '1px solid highlight',
+      },
+    },
   },
 
   span: {
@@ -87,6 +92,10 @@ const Label = styled.label(({ theme }) => ({
         : `${theme.appBorderColor} 0 0 0 1px`,
     color: theme.color.defaultText,
     padding: '7px 15px',
+
+    '@media (forced-colors: active)': {
+      textDecoration: 'underline',
+    },
   },
 }));
 

code/addons/a11y/src/components/Tabs.tsx

@@ -27,22 +27,12 @@ const Wrapper = styled.div(({ theme }) => ({
   '.rejt-tree': {
     marginLeft: '1rem',
     fontSize: '13px',
+    listStyleType: 'none',
   },
-  '.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':
-    {
-      '& > svg': {
-        opacity: 0,
-        transition: 'opacity 0.2s',
-      },
+  '.rejt-value-node:hover': {
+    '& > button': {
+      opacity: 1,
     },
-  '.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':
-    {
-      '& > svg': {
-        opacity: 1,
-      },
-    },
-  '.rejt-edit-form button': {
-    display: 'none',
   },
   '.rejt-add-form': {
     marginLeft: 10,
@@ -57,62 +47,6 @@ const Wrapper = styled.div(({ theme }) => ({
   '.rejt-not-collapsed-delimiter': {
     lineHeight: '22px',
   },
-  '.rejt-plus-menu': {
-    marginLeft: 5,
-  },
-  '.rejt-object-node > span > *, .rejt-array-node > span > *': {
-    position: 'relative',
-    zIndex: 2,
-  },
-  '.rejt-object-node, .rejt-array-node': {
-    position: 'relative',
-  },
-  '.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':
-    {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      display: 'block',
-      width: '100%',
-      marginLeft: '-1rem',
-      padding: '0 4px 0 1rem',
-      height: 22,
-    },
-  '.rejt-collapsed::before, .rejt-not-collapsed::before': {
-    zIndex: 1,
-    background: 'transparent',
-    borderRadius: 4,
-    transition: 'background 0.2s',
-    pointerEvents: 'none',
-    opacity: 0.1,
-  },
-  '.rejt-object-node:hover, .rejt-array-node:hover': {
-    '& > .rejt-collapsed::before, & > .rejt-not-collapsed::before': {
-      background: theme.color.secondary,
-    },
-  },
-  '.rejt-collapsed::after, .rejt-not-collapsed::after': {
-    content: '""',
-    position: 'absolute',
-    display: 'inline-block',
-    pointerEvents: 'none',
-    width: 0,
-    height: 0,
-  },
-  '.rejt-collapsed::after': {
-    left: -8,
-    top: 8,
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    borderLeft: '3px solid rgba(153,153,153,0.6)',
-  },
-  '.rejt-not-collapsed::after': {
-    left: -10,
-    top: 10,
-    borderTop: '3px solid rgba(153,153,153,0.6)',
-    borderLeft: '3px solid transparent',
-    borderRight: '3px solid transparent',
-  },
   '.rejt-value': {
     display: 'inline-block',
     border: '1px solid transparent',
@@ -137,36 +71,37 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) =
   color: primary ? theme.color.lightest : theme.color.dark,
   fontWeight: primary ? 'bold' : 'normal',
   cursor: 'pointer',
-  order: primary ? 'initial' : 9,
 }));
 
-const ActionAddIcon = styled(AddIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
-  display: 'inline-block',
+const ActionButton = styled.button(({ theme }) => ({
+  background: 'none',
+  border: 0,
+  display: 'inline-flex',
   verticalAlign: 'middle',
-  width: 15,
-  height: 15,
   padding: 3,
   marginLeft: 5,
-  cursor: disabled ? 'not-allowed' : 'pointer',
   color: theme.textMutedColor,
-  '&:hover': disabled ? {} : { color: theme.color.ancillary },
-  'svg + &': {
-    marginLeft: 0,
+  opacity: 0,
+  transition: 'opacity 0.2s',
+  cursor: 'pointer',
+  position: 'relative',
+  svg: {
+    width: 9,
+    height: 9,
   },
-}));
-
-const ActionSubstractIcon = styled(SubtractIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  width: 15,
-  height: 15,
-  padding: 3,
-  marginLeft: 5,
-  cursor: disabled ? 'not-allowed' : 'pointer',
-  color: theme.textMutedColor,
-  '&:hover': disabled ? {} : { color: theme.color.negative },
-  'svg + &': {
-    marginLeft: 0,
+  ':disabled': {
+    cursor: 'not-allowed',
+  },
+  ':hover, :focus-visible': {
+    opacity: 1,
+  },
+  '&:hover:not(:disabled), &:focus-visible:not(:disabled)': {
+    '&.rejt-plus-menu': {
+      color: theme.color.ancillary,
+    },
+    '&.rejt-minus-menu': {
+      color: theme.color.negative,
+    },
   },
 }));
 
@@ -220,7 +155,13 @@ const RawInput = styled(Form.Textarea)(({ theme }) => ({
   },
 }));
 
-const ENTER_EVENT = { bubbles: true, cancelable: true, key: 'Enter', code: 'Enter', keyCode: 13 };
+const ENTER_EVENT = {
+  bubbles: true,
+  cancelable: true,
+  key: 'Enter',
+  code: 'Enter',
+  keyCode: 13,
+};
 const dispatchEnterKey = (event: SyntheticEvent<HTMLInputElement>) => {
   event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent('keydown', ENTER_EVENT));
 };
@@ -311,9 +252,12 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
     <Wrapper aria-readonly={readonly}>
       {isObjectOrArray && (
         <RawButton
+          role="switch"
+          aria-checked={showRaw}
+          aria-label={`Edit the ${name} properties in text format`}
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
-            setShowRaw((v) => !v);
+            setShowRaw((isRaw) => !isRaw);
           }}
         >
           {showRaw ? <EyeCloseIcon /> : <EyeIcon />}
@@ -329,14 +273,21 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
           onFullyUpdate={onChange}
           getStyle={getCustomStyleFunction(theme)}
           cancelButtonElement={<ButtonInline type="button">Cancel</ButtonInline>}
-          editButtonElement={<ButtonInline type="submit">Save</ButtonInline>}
           addButtonElement={
             <ButtonInline type="submit" primary>
               Save
             </ButtonInline>
           }
-          plusMenuElement={<ActionAddIcon />}
-          minusMenuElement={<ActionSubstractIcon />}
+          plusMenuElement={
+            <ActionButton type="button">
+              <AddIcon />
+            </ActionButton>
+          }
+          minusMenuElement={
+            <ActionButton type="button">
+              <SubtractIcon />
+            </ActionButton>
+          }
           inputElement={(_: any, __: any, ___: any, key: string) =>
             key ? <Input onFocus={selectValue} onBlur={dispatchEnterKey} /> : <Input />
           }