storybook 10.2.0-alpha.13 → 10.2.0-alpha.15

package/dist/manager/globals-runtime.js

@@ -40510,6 +40510,7 @@ init_ActionBar();
 
 // src/components/components/ActionList/ActionList.tsx
 var import_react95 = __toESM(require_react(), 1);
+init_polished_esm();
 init_theming();
 
 // src/components/components/Button/Button.tsx
@@ -60329,22 +60330,24 @@ var init11 = ({ store: store2, fullAPI, provider }) => {
         defaults[actionName] = defaultShortcut;
       }), defaults;
     },
-    async setShortcuts(shortcuts) {
-      return await store2.setState({ shortcuts }, { persistence: "permanent" }), shortcuts;
+    async setShortcuts(update2) {
+      let { shortcuts } = await store2.setState(
+        (state4) => ({ shortcuts: typeof update2 == "function" ? update2(state4.shortcuts) : update2 }),
+        { persistence: "permanent" }
+      );
+      return shortcuts;
     },
     async restoreAllDefaultShortcuts() {
       return api.setShortcuts(api.getDefaultShortcuts());
     },
     async setShortcut(action2, value) {
-      let shortcuts = api.getShortcutKeys();
-      return await api.setShortcuts({ ...shortcuts, [action2]: value }), value;
+      return await api.setShortcuts((shortcuts) => ({ ...shortcuts, [action2]: value })), value;
     },
     async setAddonShortcut(addon, shortcut) {
-      let shortcuts = api.getShortcutKeys();
-      return await api.setShortcuts({
+      return await api.setShortcuts((shortcuts) => ({
         ...shortcuts,
         [`${addon}-${shortcut.actionName}`]: shortcut.defaultShortcut
-      }), addonsShortcuts[`${addon}-${shortcut.actionName}`] = shortcut, shortcut;
+      })), addonsShortcuts[`${addon}-${shortcut.actionName}`] = shortcut, shortcut;
     },
     async restoreDefaultShortcut(action2) {
       let defaultShortcut = api.getDefaultShortcuts()[action2];
@@ -62130,7 +62133,7 @@ init_dist();
 var import_memoizerific8 = __toESM(require_memoizerific(), 1), import_semver = __toESM(require_semver2(), 1);
 
 // src/manager-api/version.ts
-var version = "10.2.0-alpha.13";
+var version = "10.2.0-alpha.15";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK } = scope, getVersionCheckData = (0, import_memoizerific8.default)(1)(() => {
@@ -70212,19 +70215,44 @@ var ActionListItem = styled.li(
     justifyContent: "space-between",
     flex: "0 0 auto",
     overflow: "hidden",
+    minHeight: 32,
     gap: 4,
     fontSize: theme3.typography.size.s1,
     fontWeight: active ? theme3.typography.weight.bold : theme3.typography.weight.regular,
-    color: active ? theme3.color.secondary : theme3.color.defaultText,
-    "--listbox-item-muted-color": active ? theme3.color.secondary : theme3.color.mediumdark,
+    color: active ? "var(--listbox-item-active-color)" : theme3.color.defaultText,
+    "--listbox-item-active-color": theme3.base === "light" ? curriedDarken$1(0.1, theme3.color.secondary) : theme3.color.secondary,
+    "--listbox-item-muted-color": active ? "var(--listbox-item-active-color)" : theme3.color.mediumdark,
+    '&[aria-disabled="true"]': {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    '&[aria-selected="true"]': {
+      color: "var(--listbox-item-active-color)",
+      fontWeight: theme3.typography.weight.bold,
+      "--listbox-item-muted-color": "var(--listbox-item-active-color)"
+    },
     "&:not(:hover, :has(:focus-visible)) svg + input": {
       position: "absolute",
       opacity: 0
     },
+    '&[role="option"]': {
+      cursor: "pointer",
+      borderRadius: theme3.input.borderRadius,
+      outlineOffset: -2,
+      padding: "0 9px",
+      gap: 8,
+      "&:hover": {
+        background: curriedTransparentize$1(0.86, theme3.color.secondary)
+      },
+      "&:focus-visible": {
+        outline: `2px solid ${theme3.color.secondary}`
+      }
+    },
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords",
-      transition: "all var(--transition-duration, 0.2s)",
-      transitionBehavior: "allow-discrete"
+      transitionBehavior: "allow-discrete",
+      transitionDuration: "var(--transition-duration, 0.2s)",
+      transitionProperty: "opacity, block-size, content-visibility"
     },
     "@media (prefers-reduced-motion: reduce)": {
       transition: "none"
@@ -70266,12 +70294,13 @@ var ActionListItem = styled.li(
     opacity: 0,
     paddingInline: 0
   }
-})), StyledButton2 = styled(Button)({
+})), StyledButton2 = styled(Button)(({ size }) => ({
+  gap: size === "small" ? 6 : 8,
   "&:focus-visible": {
     // Prevent focus outline from being cut off by overflow: hidden
     outlineOffset: -2
   }
-}), StyledToggleButton = styled(ToggleButton)({
+})), StyledToggleButton = styled(ToggleButton)({
   "&:focus-visible": {
     // Prevent focus outline from being cut off by overflow: hidden
     outlineOffset: -2
@@ -70285,6 +70314,8 @@ var ActionListItem = styled.li(
     return import_react95.default.createElement(StyledToggleButton, { ...props, variant, padding, size, ref });
   }
 ), ActionListAction = styled(ActionListButton)(({ theme: theme3 }) => ({
+  height: "auto",
+  minHeight: 32,
   flex: "0 1 100%",
   textAlign: "start",
   justifyContent: "space-between",
@@ -70300,32 +70331,40 @@ var ActionListItem = styled.li(
     outline: `2px solid ${theme3.color.secondary}`,
     outlineOffset: -2
   }
-})), ActionListLink = (props) => import_react95.default.createElement(ActionListAction, { as: "a", ...props }), ActionListText = styled.div({
+})), ActionListLink = (props) => import_react95.default.createElement(ActionListAction, { as: "a", ...props }), ActionListText = styled.div(({ theme: theme3 }) => ({
   display: "flex",
-  alignItems: "center",
-  gap: 8,
+  flexDirection: "column",
+  justifyContent: "center",
   flexGrow: 1,
   minWidth: 0,
   padding: "8px 0",
   lineHeight: "16px",
-  "& span": {
+  "& > *": {
+    margin: 0,
+    whiteSpace: "normal"
+  },
+  "& > span": {
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  "& small": {
+    fontSize: "inherit",
+    color: theme3.textMutedColor
+  },
   "&:first-child": {
     paddingLeft: 8
   },
   "&:last-child": {
     paddingRight: 8
   },
-  "button > &:first-child": {
+  'button > &:first-child, [role="option"] > &:first-child': {
     paddingLeft: 0
   },
-  "button > &:last-child": {
+  'button > &:last-child, [role="option"] > &:last-child': {
     paddingRight: 0
   }
-}), ActionListIcon = styled.div({
+})), ActionListIcon = styled.div({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -70729,7 +70768,7 @@ var fadeIn = keyframes({
       outline: "none"
     }
   }),
-  ({ width, height, $variant, $status, $transitionDuration }) => $variant === "dialog" ? {
+  ({ theme: theme3, width, height, $variant, $status, $transitionDuration }) => $variant === "dialog" ? {
     top: "50%",
     left: "50%",
     width: width ?? 740,
@@ -70749,9 +70788,12 @@ var fadeIn = keyframes({
     bottom: "0",
     left: "0",
     right: "0",
+    borderRadius: "10px 10px 0 0",
+    overflow: "hidden",
     width: width ?? "100%",
     height: height ?? "80%",
     maxWidth: "100%",
+    background: theme3.background.content,
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords"
     },
@@ -71128,9 +71170,9 @@ var import_react110 = __toESM(require_react(), 1), ZoomIFrame = class extends im
   setIframeInnerZoom(scale) {
     try {
       Object.assign(this.iframe.contentDocument.body.style, {
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
+        width: `${1 / scale * 100}%`,
+        height: `${1 / scale * 100}%`,
+        transform: `scale(${scale})`,
         transformOrigin: "top left"
       });
     } catch {
@@ -71139,9 +71181,9 @@ var import_react110 = __toESM(require_react(), 1), ZoomIFrame = class extends im
   }
   setIframeZoom(scale) {
     Object.assign(this.iframe.style, {
-      width: `${scale * 100}%`,
-      height: `${scale * 100}%`,
-      transform: `scale(${1 / scale})`,
+      width: `${1 / scale * 100}%`,
+      height: `${1 / scale * 100}%`,
+      transform: `scale(${scale})`,
       transformOrigin: "top left"
     });
   }
@@ -71788,57 +71830,12 @@ Popover.displayName = "Popover";
 
 // src/components/components/Select/SelectOption.tsx
 var import_react123 = __toESM(require_react(), 1);
-init_polished_esm();
-init_theming();
-var Item = styled("li")(({ theme: theme3 }) => ({
-  padding: "6px 12px",
-  fontSize: 12,
-  lineHeight: 1.5,
-  background: "transparent",
-  color: theme3.color.defaultText,
-  cursor: "pointer",
-  borderRadius: 4,
-  '&[aria-disabled="true"]': {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  '&[aria-selected="true"]': {
-    color: theme3.base === "light" ? curriedDarken$1(0.1, theme3.color.secondary) : theme3.color.secondary,
-    fontWeight: theme3.typography.weight.bold
-  },
-  ":hover": {
-    background: curriedTransparentize$1(0.93, theme3.color.secondary)
-  },
-  ":focus-visible": {
-    background: theme3.background.hoverable,
-    outline: `2px solid ${theme3.barSelectedColor}`,
-    outlineOffset: 1,
-    borderRadius: 2
-  },
-  display: "flex",
-  alignItems: "flex-start",
-  gap: 8
-})), Row2 = styled("div")({
-  display: "flex",
-  flexDirection: "row",
-  gap: 4,
-  alignItems: "center"
-}), Col2 = styled("div")({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1
-}), Icon = styled("span")(() => ({
-  display: "block",
-  height: "1rem",
-  width: "1rem"
-})), Title3 = styled("span")(({}) => ({})), Description2 = styled("span")(({ theme: theme3 }) => ({
-  fontSize: 11,
-  color: theme3.textMutedColor
-})), SelectOption = ({
+var SelectOption = ({
   id,
   title,
   description,
   icon,
+  aside,
   children,
   isSelected,
   isActive,
@@ -71848,7 +71845,7 @@ var Item = styled("li")(({ theme: theme3 }) => ({
   shouldLookDisabled = !1,
   ...props
 }) => import_react123.default.createElement(
-  Item,
+  ActionList.Item,
   {
     ...props,
     id,
@@ -71860,7 +71857,7 @@ var Item = styled("li")(({ theme: theme3 }) => ({
     onFocus,
     onKeyDown
   },
-  children ?? import_react123.default.createElement(Row2, null, icon && import_react123.default.createElement(Icon, null, icon), import_react123.default.createElement(Col2, null, import_react123.default.createElement(Title3, null, title), description && import_react123.default.createElement(Description2, null, description)))
+  children ?? import_react123.default.createElement(import_react123.default.Fragment, null, icon && import_react123.default.createElement(ActionList.Icon, null, icon), import_react123.default.createElement(ActionList.Text, null, import_react123.default.createElement("p", null, title), description && import_react123.default.createElement("small", null, description)), aside)
 );
 SelectOption.displayName = "SelectOption";
 
@@ -71974,12 +71971,16 @@ var StyledButton3 = styled(Button)(
     ariaLabel,
     ...props
   }, ref) => {
-    let [isOpen, setIsOpen] = (0, import_react124.useState)(props.defaultOpen || !1), triggerRef = $df56164dff5785e2$export$4338b53315abf666(ref), id = (0, import_react124.useMemo)(() => "select-" + Math.random().toString(36).substring(2, 15), []), listboxId = `${id}-listbox`, listboxRef = (0, import_react124.useRef)(null), otState = $fc909762b330b746$export$61c6a8c84e605fb6({
+    let [isOpen, setIsOpen] = (0, import_react124.useState)(props.defaultOpen || !1), [shouldRefocusTrigger, setShouldRefocusTrigger] = (0, import_react124.useState)(!1), triggerRef = $df56164dff5785e2$export$4338b53315abf666(ref), id = (0, import_react124.useMemo)(() => "select-" + Math.random().toString(36).substring(2, 15), []), listboxId = `${id}-listbox`, listboxRef = (0, import_react124.useRef)(null), otState = $fc909762b330b746$export$61c6a8c84e605fb6({
       isOpen: isOpen && !disabled,
       onOpenChange: setIsOpen
     }), handleClose = (0, import_react124.useCallback)(() => {
-      setIsOpen(!1), triggerRef.current?.focus();
-    }, [triggerRef]), [selectedOptions, setSelectedOptions] = (0, import_react124.useState)(
+      setIsOpen(!1), setShouldRefocusTrigger(!0);
+    }, []);
+    (0, import_react124.useEffect)(() => {
+      !otState.isOpen && shouldRefocusTrigger && (triggerRef.current?.focus(), setShouldRefocusTrigger(!1));
+    }, [otState.isOpen, shouldRefocusTrigger, triggerRef]);
+    let [selectedOptions, setSelectedOptions] = (0, import_react124.useState)(
       setSelectedFromDefault(calleeOptions, defaultOptions2)
     ), handleSelectOption = (0, import_react124.useCallback)(
       (option) => {
@@ -72009,8 +72010,8 @@ var StyledButton3 = styled(Button)(
     let [activeOption, setActiveOptionState] = (0, import_react124.useState)(
       void 0
     ), setActiveOption = (0, import_react124.useCallback)(
-      (option) => {
-        setActiveOptionState(optionOrResetToInternal(option)), multiSelect || handleSelectOption(optionOrResetToInternal(option));
+      (option, changeSelection = !0) => {
+        setActiveOptionState(optionOrResetToInternal(option)), !multiSelect && changeSelection && handleSelectOption(optionOrResetToInternal(option));
       },
       [multiSelect, handleSelectOption]
     ), moveActiveOptionDown = (0, import_react124.useCallback)(
@@ -72117,6 +72118,7 @@ var StyledButton3 = styled(Button)(
             key: option.value === void 0 ? "sb-reset" : String(option.value),
             title: option.title,
             description: option.description,
+            aside: option.aside,
             icon: !isReset && multiSelect ? (
               // Purely decorative.
               import_react124.default.createElement(Form2.Checkbox, { checked: isSelected, hidden: !0, role: "presentation" })
@@ -72127,7 +72129,7 @@ var StyledButton3 = styled(Button)(
             onClick: () => {
               handleSelectOption(option), multiSelect || handleClose();
             },
-            onFocus: () => setActiveOption(externalOption),
+            onFocus: () => setActiveOption(externalOption, !1),
             shouldLookDisabled: isReset && selectedOptions.length === 0 && multiSelect,
             onKeyDown: (e) => {
               e.key === "Enter" || e.key === " " ? (e.preventDefault(), handleSelectOption(option), multiSelect || handleClose()) : e.key === "Tab" && (multiSelect || handleSelectOption(option), handleClose());
@@ -75711,7 +75713,7 @@ var import_react159 = __toESM(require_react(), 1), LazyWithTooltip = (0, import_
 var import_react160 = __toESM(require_react(), 1);
 init_client_logger();
 init_theming();
-var Title4 = styled.div(({ theme: theme3 }) => ({
+var Title3 = styled.div(({ theme: theme3 }) => ({
   fontWeight: theme3.typography.weight.bold
 })), Desc2 = styled.span(), Links = styled.div(({ theme: theme3 }) => ({
   marginTop: 8,
@@ -75729,7 +75731,7 @@ var Title4 = styled.div(({ theme: theme3 }) => ({
   boxSizing: "border-box"
 }), TooltipMessage = ({ title, desc, links }) => (deprecate(
   "`TooltipMessage` is deprecated and will be removed in Storybook 11, use `Popover` and `PopoverProvider` instead."
-), import_react160.default.createElement(MessageWrapper, { "data-deprecated": "TooltipMessage" }, import_react160.default.createElement(Message2, null, title && import_react160.default.createElement(Title4, null, title), desc && import_react160.default.createElement(Desc2, null, desc)), links && import_react160.default.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => import_react160.default.createElement(Link2, { ...other, key: linkTitle }, linkTitle)))));
+), import_react160.default.createElement(MessageWrapper, { "data-deprecated": "TooltipMessage" }, import_react160.default.createElement(Message2, null, title && import_react160.default.createElement(Title3, null, title), desc && import_react160.default.createElement(Desc2, null, desc)), links && import_react160.default.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => import_react160.default.createElement(Link2, { ...other, key: linkTitle }, linkTitle)))));
 
 // src/components/components/tooltip/TooltipLinkList.tsx
 var import_react162 = __toESM(require_react(), 1);
@@ -75741,7 +75743,7 @@ var import_react161 = __toESM(require_react(), 1);
 init_client_logger();
 var import_memoizerific11 = __toESM(require_memoizerific(), 1);
 init_theming();
-var Title5 = styled(({ active, loading, disabled, ...rest }) => import_react161.default.createElement("span", { ...rest }))(
+var Title4 = styled(({ active, loading, disabled, ...rest }) => import_react161.default.createElement("span", { ...rest }))(
   ({ theme: theme3 }) => ({
     color: theme3.color.defaultText,
     // Previously was theme.typography.weight.normal but this weight does not exists in Theme
@@ -75796,7 +75798,7 @@ var Title5 = styled(({ active, loading, disabled, ...rest }) => import_react161.
     display: "flex",
     maxWidth: 14
   })
-), Item2 = styled.button(
+), Item = styled.button(
   ({ theme: theme3 }) => ({
     width: "100%",
     minWidth: 0,
@@ -75875,7 +75877,7 @@ var Title5 = styled(({ active, loading, disabled, ...rest }) => import_react161.
   } = props, commonProps = { active, disabled }, itemProps = getItemProps(props), left2 = icon || input2;
   return deprecate(
     "`ListItem` is deprecated and will be removed in Storybook 11, use `MenuItem` instead."
-  ), import_react161.default.createElement(Item2, { "data-deprecated": "ListItem", ref, ...rest, ...commonProps, ...itemProps }, import_react161.default.createElement(import_react161.default.Fragment, null, left2 && import_react161.default.createElement(Left, { ...commonProps }, left2), title || center ? import_react161.default.createElement(Center, { isIndented: isIndented && !left2 }, title && import_react161.default.createElement(Title5, { ...commonProps, loading }, title), center && import_react161.default.createElement(CenterText, { ...commonProps }, center)) : null, right2 && import_react161.default.createElement(Right, { ...commonProps }, right2)));
+  ), import_react161.default.createElement(Item, { "data-deprecated": "ListItem", ref, ...rest, ...commonProps, ...itemProps }, import_react161.default.createElement(import_react161.default.Fragment, null, left2 && import_react161.default.createElement(Left, { ...commonProps }, left2), title || center ? import_react161.default.createElement(Center, { isIndented: isIndented && !left2 }, title && import_react161.default.createElement(Title4, { ...commonProps, loading }, title), center && import_react161.default.createElement(CenterText, { ...commonProps }, center)) : null, right2 && import_react161.default.createElement(Right, { ...commonProps }, right2)));
 });
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
@@ -75898,7 +75900,7 @@ var List = styled.div(
   "& + &": {
     borderTop: `1px solid ${theme3.appBorderColor}`
   }
-})), Item3 = ({ id, onClick, ...rest }) => {
+})), Item2 = ({ id, onClick, ...rest }) => {
   let { active, disabled, title, href } = rest, handleClick = (0, import_react162.useCallback)(
     (event) => onClick?.(event, { id, active, disabled, title, href }),
     [onClick, id, active, disabled, title, href]
@@ -75911,7 +75913,7 @@ var List = styled.div(
   let groups = Array.isArray(links[0]) ? links : [links], isIndented = groups.some(
     (group) => group.some((link) => "icon" in link && link.icon || "input" in link && link.input)
   );
-  return import_react162.default.createElement(List, { "data-deprecated": "TooltipLinkList", ...props, className: "sb-list" }, groups.filter((group) => group.length).map((group, index4) => import_react162.default.createElement(Group, { key: group.map((link) => link.id).join(`~${index4}~`) }, group.map((link) => "content" in link ? import_react162.default.createElement(import_react162.Fragment, { key: link.id }, link.content) : import_react162.default.createElement(Item3, { key: link.id, isIndented, LinkWrapper, ...link })))));
+  return import_react162.default.createElement(List, { "data-deprecated": "TooltipLinkList", ...props, className: "sb-list" }, groups.filter((group) => group.length).map((group, index4) => import_react162.default.createElement(Group, { key: group.map((link) => link.id).join(`~${index4}~`) }, group.map((link) => "content" in link ? import_react162.default.createElement(import_react162.Fragment, { key: link.id }, link.content) : import_react162.default.createElement(Item2, { key: link.id, isIndented, LinkWrapper, ...link })))));
 };
 
 // src/components/components/Tabs/Tabs.tsx
@@ -76091,19 +76093,19 @@ var Wrapper5 = styled.div(({ theme: theme3 }) => ({
   flexDirection: "column",
   gap: 4,
   maxWidth: 415
-}), Title6 = styled.div(({ theme: theme3 }) => ({
+}), Title5 = styled.div(({ theme: theme3 }) => ({
   fontWeight: theme3.typography.weight.bold,
   fontSize: theme3.typography.size.s2 - 1,
   textAlign: "center",
   color: theme3.color.defaultText
 })), Footer = styled.div(({ theme: theme3 }) => ({
   fontSize: theme3.typography.size.s2 - 1
-})), Description3 = styled.div(({ theme: theme3 }) => ({
+})), Description2 = styled.div(({ theme: theme3 }) => ({
   fontWeight: theme3.typography.weight.regular,
   fontSize: theme3.typography.size.s2 - 1,
   textAlign: "center",
   color: theme3.textMutedColor
-})), EmptyTabContent = ({ title, description, footer }) => import_react165.default.createElement(Wrapper5, null, import_react165.default.createElement(Content2, null, import_react165.default.createElement(Title6, null, title), description && import_react165.default.createElement(Description3, null, description)), footer && import_react165.default.createElement(Footer, null, footer));
+})), EmptyTabContent = ({ title, description, footer }) => import_react165.default.createElement(Wrapper5, null, import_react165.default.createElement(Content2, null, import_react165.default.createElement(Title5, null, title), description && import_react165.default.createElement(Description2, null, description)), footer && import_react165.default.createElement(Footer, null, footer));
 
 // src/components/components/Tabs/Tabs.helpers.tsx
 var import_react166 = __toESM(require_react(), 1);
@@ -76426,6 +76428,7 @@ var import_react169 = __toESM(require_react(), 1);
 init_theming();
 var Separator2 = styled.span(
   ({ theme: theme3 }) => ({
+    display: "inline-block",
     width: 1,
     height: 20,
     background: theme3.appBorderColor,
@@ -77056,7 +77059,7 @@ var useTabsState = ({
   selected,
   tabs
 }) => $76f919a04c5a7d14$export$4ba071daf4e486({
-  children: tabs.map(({ children: Children10, id, "aria-label": ariaLabel, title: Title7 }) => import_react179.default.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, { key: id, "aria-label": ariaLabel, title: typeof Title7 == "function" ? import_react179.default.createElement(Title7, null) : Title7 }, typeof Children10 == "function" ? import_react179.default.createElement(Children10, null) : Children10)),
+  children: tabs.map(({ children: Children10, id, "aria-label": ariaLabel, title: Title6 }) => import_react179.default.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, { key: id, "aria-label": ariaLabel, title: typeof Title6 == "function" ? import_react179.default.createElement(Title6, null) : Title6 }, typeof Children10 == "function" ? import_react179.default.createElement(Children10, null) : Children10)),
   disabledKeys: tabs.filter(({ isDisabled: isDisabled3 }) => isDisabled3).map(({ id }) => id),
   defaultSelectedKey: defaultSelected,
   onSelectionChange: (key) => onSelectionChange?.(`${key}`),