@pega/cosmos-react-core 7.0.0-build.26.0 → 7.0.0-build.26.10

package/lib/components/Tabs/Tab.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { transparentize } from 'polished';
+import { meetsContrastGuidelines, mix, transparentize } from 'polished';
+import { readableHue } from '../../styles';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import { registerIcon } from '../Icon';
 import { useConsolidatedRef, useElement, useI18n } from '../../hooks';
@@ -10,6 +11,7 @@ import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledCount } from '../Badges/Count';
 import BareButton from '../Button/BareButton';
+import TabsContext from './TabsContext';
 import { StyledErrorIcon } from './Tabs.styles';
 registerIcon(warnSolidIcon);
 const activeStyle = (color) => css `
@@ -18,21 +20,49 @@ const activeStyle = (color) => css `
     background-color: ${color};
   }
 `;
-const getHorizontalStyles = ({ selected, theme }) => {
-    const primaryColor = theme.base.palette.interactive;
-    const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';
+const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level && level > 1
+    ? css `
+        ::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          border-radius: inherit;
+          background-color: currentColor;
+          opacity: ${opacity};
+        }
+      `
+    : css `
+        background-color: ${color};
+        border-start-start-radius: calc(0.5rem * 0.5);
+        border-start-end-radius: calc(0.5rem * 0.5);
+      `;
+const getHorizontalStyles = ({ selected, level, theme }) => {
+    const color = theme.components.button.color;
+    const secondaryColor = theme.base.palette['secondary-background'];
+    const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';
+    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;
+    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));
+    const activeBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));
     const { spacing } = theme.base;
     return css `
     align-items: center;
     display: flex;
     flex-direction: row;
     height: calc(4 * ${spacing});
-    padding: 0 calc(2 * ${spacing});
+    padding: 0 calc(1.5 * ${spacing});
     border: none;
     text-decoration: none;
 
+    @media (pointer: coarse) {
+      height: ${theme.base['hit-area']['finger-min']};
+    }
+
     span:first-of-type {
-      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};
+      color: ${selected ? color : theme.base.palette['foreground-color']};
       display: inline-block;
 
       ::before {
@@ -50,26 +80,54 @@ const getHorizontalStyles = ({ selected, theme }) => {
     }
 
     ::after {
-      background: ${selected ? primaryColor : lightenedColor};
+      background: ${selected ? color : lightenedColor};
       display: ${selected ? 'block' : 'none'};
       content: '';
       position: absolute;
       height: 0.125rem;
       bottom: 0;
-      left: 0;
-      right: 0;
+      left: calc(1.5 * ${spacing});
+      right: calc(1.5 * ${spacing});
     }
 
-    &:hover&:not(:disabled) {
-      ${activeStyle(lightenedColor)}
-      text-decoration: none;
-    }
+    ${!selected
+        ? css `
+          @media (hover: hover) {
+            &:not(:disabled):hover {
+              text-decoration: none;
+              ${getHorizontalUnselectedHoverStyle({
+            level,
+            opacity: 0.1,
+            color: hoverBackgroundColor
+        })}
+            }
+
+            &:not(:disabled):active {
+              text-decoration: none;
+              ${getHorizontalUnselectedHoverStyle({
+            level,
+            opacity: 0.2,
+            color: activeBackgroundColor
+        })}
+            }
+          }
+        `
+        : css `
+          ${level &&
+            level > 1 &&
+            css `
+            background-color: ${theme.base.palette['primary-background']};
+          `}
+        `}
 
     &:focus,
     &:not([disabled]):focus {
-      ${activeStyle(lightenedColor)}
+      border-radius: calc(0.5rem * 0.5);
       box-shadow: ${theme.base.shadow['focus-inset']};
       text-decoration: none;
+      ::after {
+        display: none;
+      }
     }
 
     @media (pointer: coarse) {
@@ -127,7 +185,7 @@ const getVerticalStyles = ({ selected, theme }) => {
     }
   `;
 };
-export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `
     position: relative;
     background: none;
     cursor: pointer;
@@ -152,7 +210,7 @@ export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => cs
     }
 
     ${tabType === 'horizontal'
-    ? getHorizontalStyles({ theme, selected })
+    ? getHorizontalStyles({ theme, selected, level })
     : getVerticalStyles({ theme, selected })}
 
     ${StyledErrorIcon} {
@@ -164,7 +222,8 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     const t = useI18n();
     const [tabEl, setTabEl] = useElement();
     const tabRef = useConsolidatedRef(ref, setTabEl);
-    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
+    const { level } = useContext(TabsContext);
+    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, level: level, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
 });
 export default Tab;
 //# sourceMappingURL=Tab.js.map

package/lib/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport type { TabsProps } from './Tabs.types';\nimport { StyledErrorIcon } from './Tabs.styles';\n\nregisterIcon(warnSolidIcon);\n\nexport interface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n  /** Ref to the tab element. */\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    @media (pointer: coarse) {\n      min-block-size: ${theme.base['hit-area'].finger};\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: TabProps['ref']\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n\n  return (\n    <StyledTab ref={tabRef} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none'>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {count}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { FC, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { meetsContrastGuidelines, mix, transparentize } from 'polished';\n\nimport { readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport TabsContext from './TabsContext';\nimport type { TabsContextValue } from './TabsContext';\nimport type { TabsProps } from './Tabs.types';\nimport { StyledErrorIcon } from './Tabs.styles';\n\nregisterIcon(warnSolidIcon);\n\nexport interface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n  /** Ref to the tab element. */\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalUnselectedHoverStyle = ({\n  level,\n  opacity,\n  color\n}: { level?: TabsContextValue['level'] } & { color?: string; opacity: number }) =>\n  level && level > 1\n    ? css`\n        ::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          border-radius: inherit;\n          background-color: currentColor;\n          opacity: ${opacity};\n        }\n      `\n    : css`\n        background-color: ${color};\n        border-start-start-radius: calc(0.5rem * 0.5);\n        border-start-end-radius: calc(0.5rem * 0.5);\n      `;\n\nconst getHorizontalStyles = ({\n  selected,\n  level,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'> & {\n  level?: TabsContextValue['level'];\n}) => {\n  const color = theme.components.button.color;\n  const secondaryColor = theme.base.palette['secondary-background'];\n  const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n  const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;\n  const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));\n\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(1.5 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area']['finger-min']};\n    }\n\n    span:first-of-type {\n      color: ${selected ? color : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? color : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: calc(1.5 * ${spacing});\n      right: calc(1.5 * ${spacing});\n    }\n\n    ${!selected\n      ? css`\n          @media (hover: hover) {\n            &:not(:disabled):hover {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                level,\n                opacity: 0.1,\n                color: hoverBackgroundColor\n              })}\n            }\n\n            &:not(:disabled):active {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                level,\n                opacity: 0.2,\n                color: activeBackgroundColor\n              })}\n            }\n          }\n        `\n      : css`\n          ${level &&\n          level > 1 &&\n          css`\n            background-color: ${theme.base.palette['primary-background']};\n          `}\n        `}\n\n    &:focus,\n    &:not([disabled]):focus {\n      border-radius: calc(0.5rem * 0.5);\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n      ::after {\n        display: none;\n      }\n    }\n\n    @media (pointer: coarse) {\n      min-block-size: ${theme.base['hit-area'].finger};\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<\n  StyledTabProps & {\n    level?: TabsContextValue['level'];\n  }\n>(\n  ({ theme, tabType, selected, level }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected, level })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: TabProps['ref']\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n  const { level } = useContext(TabsContext);\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      level={level}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none'>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {count}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}

package/lib/components/Tabs/TabPanel.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent, ReactNode, Ref, RefObject } from 'react';
 import type { ForwardProps } from '../../types';
+import type { TabsProps } from './Tabs.types';
 interface TabPanelProps {
     /** The id of the Tab that the tab panel is related to. */
     tabId: string;
@@ -8,15 +9,23 @@ interface TabPanelProps {
      * The tabsValue must match the tabId in order for the TabPanel to show itself.
      */
     currentTabId?: string;
+    /** The title for the tab panel */
+    title?: string;
     /** Content of the tab panel. */
     children: ReactNode;
     /** Ref to the tablist element. */
     tablistRef?: RefObject<HTMLElement>;
+    /**
+     * The tablist type indicates what direction the tabs are rendered in.
+     * @default 'horizontal'
+     */
+    tablistType?: TabsProps['type'];
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledTabPanel: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, Pick<TabPanelProps, "tablistType"> & {
     current: boolean;
+    level: number;
 }, never>;
 declare const TabPanel: FunctionComponent<TabPanelProps & ForwardProps>;
 export default TabPanel;

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAgBhB,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8C5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AAM5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAEd,OAAO;WACT,MAAM;SA2Bf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyE5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -1,27 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback } from 'react';
+import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import Button from '../Button';
 import { getFocusables } from '../../utils';
+import Flex from '../Flex';
+import Text from '../Text';
+import TabsContext from './TabsContext';
 const defaultProps = {
     tabId: ''
 };
-export const StyledTabPanel = styled.div(({ current, theme }) => {
+export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme }) => {
     return css `
     min-width: 0;
     max-width: 100%;
 
     :focus {
       outline: none;
-      box-shadow: ${theme.base.shadow.focus};
+      box-shadow: ${tablistType === 'horizontal' && level > 1
+        ? theme.base.shadow['focus-inset']
+        : theme.base.shadow.focus};
     }
 
     ${!current &&
         css `
       display: none;
     `}
+    ${tablistType === 'horizontal' &&
+        level > 1 &&
+        css `
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-start: none;
+      border-end-start-radius: calc(0.5rem * 0.5);
+      border-end-end-radius: calc(0.5rem * 0.5);
+    `}
   `;
 });
 StyledTabPanel.defaultProps = defaultThemeProp;
@@ -35,25 +48,33 @@ const StyledButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledButton.defaultProps = defaultThemeProp;
-const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, tablistRef, children, ...restProps }, ref) {
+const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tablistRef, tablistType = 'horizontal', children, ...restProps }, ref) {
     const t = useI18n();
     const tabPanelRef = useConsolidatedRef(ref);
     const [showReturnButton, setShowReturnButton] = useState(false);
+    const { level } = useContext(TabsContext);
     const onFocusChange = useCallback(isFocused => {
         if (!isFocused) {
             setShowReturnButton(false);
         }
     }, []);
     useFocusWithin([tabPanelRef], onFocusChange);
+    const contextValue = useMemo(() => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }), [level, tablistType]);
     const onKeyUp = () => {
         if (tabPanelRef.current?.contains(document.activeElement)) {
             setShowReturnButton(true);
         }
     };
     useEvent('keyup', onKeyUp);
-    return (_jsxs(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, children: [children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
-                    getFocusables(tablistRef)[0]?.focus();
-                }, children: t('return_to_tab_list') }))] }));
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(StyledTabPanel, { ...restProps, container: {
+                direction: 'column',
+                rowGap: 1,
+                ...(tablistType === 'horizontal' && {
+                    pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]
+                })
+            }, item: { grow: 1 }, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, tablistType: tablistType, level: level, children: [title && _jsx(Text, { variant: `h${Math.min(2 + level, 6)}`, children: title }), children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
+                        getFocusables(tablistRef)[0]?.focus();
+                    }, children: t('return_to_tab_list') }))] }) }));
 });
 TabPanel.defaultProps = defaultProps;
 export default TabPanel;

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  { tabId, currentTabId, tablistRef, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n\n  const onFocusChange = useCallback(isFocused => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  return (\n    <StyledTabPanel\n      {...restProps}\n      current={currentTabId && tabId ? currentTabId === tabId : true}\n      role='tabpanel'\n      aria-labelledby={`${tabId}`}\n      id={`${tabId}-panel`}\n      ref={tabPanelRef}\n      tabIndex={0}\n    >\n      {children}\n      {tablistRef?.current && showReturnButton && (\n        <StyledButton\n          variant='link'\n          onClick={() => {\n            getFocusables(tablistRef)[0]?.focus();\n          }}\n        >\n          {t('return_to_tab_list')}\n        </StyledButton>\n      )}\n    </StyledTabPanel>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** The title for the tab panel */\n  title?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /**\n   * The tablist type indicates what direction the tabs are rendered in.\n   * @default 'horizontal'\n   */\n  tablistType?: TabsProps['type'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n  Pick<TabPanelProps, 'tablistType'> & {\n    current: boolean;\n    level: number;\n  }\n>(({ current, tablistType, level, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n      box-shadow: ${tablistType === 'horizontal' && level > 1\n        ? theme.base.shadow['focus-inset']\n        : theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n    ${tablistType === 'horizontal' &&\n    level > 1 &&\n    css`\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-end-start-radius: calc(0.5rem * 0.5);\n      border-end-end-radius: calc(0.5rem * 0.5);\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  {\n    tabId,\n    currentTabId,\n    title,\n    tablistRef,\n    tablistType = 'horizontal',\n    children,\n    ...restProps\n  }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n  const { level } = useContext(TabsContext);\n\n  const onFocusChange = useCallback(isFocused => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const contextValue = useMemo(\n    () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n    [level, tablistType]\n  );\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <StyledTabPanel\n        {...restProps}\n        container={{\n          direction: 'column',\n          rowGap: 1,\n          ...(tablistType === 'horizontal' && {\n            pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n          })\n        }}\n        item={{ grow: 1 }}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={tabPanelRef}\n        tabIndex={0}\n        tablistType={tablistType}\n        level={level}\n      >\n        {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n        {children}\n        {tablistRef?.current && showReturnButton && (\n          <StyledButton\n            variant='link'\n            onClick={() => {\n              getFocusables(tablistRef)[0]?.focus();\n            }}\n          >\n            {t('return_to_tab_list')}\n          </StyledButton>\n        )}\n      </StyledTabPanel>\n    </TabsContext.Provider>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsIpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAyJpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import SearchInput from '../SearchInput';
 import Flex from '../Flex';
 import Link from '../Link';
 import Count from '../Badges/Count';
 import { useAfterInitialEffect, useConsolidatedRef, useElement, useEscape, useI18n, useUID } from '../../hooks';
-import * as caretDownIcon from '../Icon/icons/caret-down.icon';
+import * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';
 import { registerIcon } from '../Icon/Icon';
 import { createStringMatcher, debounce } from '../../utils';
-import { StyledErrorIcon, StyledAllTabsButton, StyledTabs } from './Tabs.styles';
+import TabsContext from './TabsContext';
+import { StyledErrorIcon, StyledAllTabsButton, StyledTabs, StylesAllTabsButtonWrapper, StyledAllTabsWrapper, StyledSeparator } from './Tabs.styles';
 import Tab from './Tab';
-registerIcon(caretDownIcon);
+registerIcon(arrowMicroDownIcon);
 const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
     const menuId = useUID();
     const t = useI18n();
@@ -37,7 +38,7 @@ const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
             menuButtonRef.current?.focus();
         }
     }, searchEleRef);
-    return (_jsx(StyledAllTabsButton, { ref: menuButtonRef, text: t('all_tabs'), iconOnly: true, variant: 'simple', icon: 'caret-down', menu: {
+    return (_jsx(StyledAllTabsButton, { ref: menuButtonRef, text: t('all_tabs'), iconOnly: true, variant: 'simple', icon: 'arrow-micro-down', menu: {
             listId: menuId,
             mode: 'single-select',
             items: itemsToRender,
@@ -69,6 +70,7 @@ const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
 const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) {
     const [wrapper, setWrapper] = useElement();
     const wrapperRef = useConsolidatedRef(ref, setWrapper);
+    const { level } = useContext(TabsContext);
     const [hasScrollBar, setHasScrollBar] = useState(false);
     // Used to keep a reference for every tab in order to focus them with key presses
     const tabRefs = useRef([]);
@@ -117,23 +119,26 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
             ro.disconnect();
         };
     }, [wrapper]);
+    const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;
     const TabList = (_jsx(Flex, { ...restProps, container: {
-            direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, hasScrollBar: hasScrollBar, children: tabs.map((tab, i) => {
+            direction: type !== 'horizontal' ? 'column' : undefined,
+            pad: type === 'horizontal' && !hasScrollBar && level === 1 ? [0, 0, 0, 0.5] : undefined
+        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, hasScrollBar: hasScrollBar, level: level, children: tabs.map((tab, i) => {
             const { href, name, count, id, disabled, errors } = tab;
             const selected = id === currentTabId;
-            return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {
-                    onTabClick?.(id, event);
-                }, role: 'tab', ref: el => {
-                    tabRefs.current[i] = el;
-                }, onKeyDown: (e) => {
-                    if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {
-                        e.preventDefault();
-                        changeTabFocus(e, i);
-                    }
-                }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled, errors: errors }, id));
+            return (_jsxs(Fragment, { children: [level > 1 && (_jsx(StyledSeparator, { transparent: selected ||
+                            (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId) })), _jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {
+                            onTabClick?.(id, event);
+                        }, role: 'tab', ref: el => {
+                            tabRefs.current[i] = el;
+                        }, onKeyDown: (e) => {
+                            if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {
+                                e.preventDefault();
+                                changeTabFocus(e, i);
+                            }
+                        }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled, errors: errors })] }, id));
         }) }));
-    return type === 'horizontal' && hasScrollBar ? (_jsxs(Flex, { container: { direction: 'row' }, children: [_jsx(AllTabsButton, { tabs: tabs, tabRefs: tabRefs, currentTabId: currentTabId, onTabClick: onTabClick }), TabList] })) : (TabList);
+    return shouldRenderAllTabsButton ? (_jsxs(Flex, { container: { direction: 'row' }, as: StyledAllTabsWrapper, level: level, children: [_jsx(Flex, { container: { pad: level === 1 ? [0, 0, 0, 0.5] : undefined }, as: StylesAllTabsButtonWrapper, children: _jsx(AllTabsButton, { tabs: tabs, tabRefs: tabRefs, currentTabId: currentTabId, onTabClick: onTabClick }) }), TabList] })) : (TabList);
 });
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref\n} from 'react';\nimport { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useUID\n} from '../../hooks';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport { StyledErrorIcon, StyledAllTabsButton, StyledTabs } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(caretDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefs,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefs: MutableRefObject<(HTMLAnchorElement | HTMLButtonElement | null)[]>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='caret-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefs.current[tabs.findIndex(tab => tab.id === id)]?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement | null)[]>([]);\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabRefs.current?.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefs.current.find(tab => tab && tab.id === currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      type={type}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Tab\n            id={id}\n            aria-selected={selected}\n            aria-controls={`${id}-panel`}\n            content={name}\n            count={typeof count === 'number' && <Count>{count}</Count>}\n            href={href}\n            selected={selected}\n            onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n              onTabClick?.(id, event);\n            }}\n            role='tab'\n            ref={el => {\n              tabRefs.current[i] = el;\n            }}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                e.preventDefault();\n                changeTabFocus(e, i);\n              }\n            }}\n            key={id}\n            as={href ? Link : undefined}\n            tabIndex={selected ? undefined : -1}\n            aria-label={name}\n            type={type}\n            disabled={disabled}\n            errors={errors}\n          />\n        );\n      })}\n    </Flex>\n  );\n\n  return type === 'horizontal' && hasScrollBar ? (\n    <Flex container={{ direction: 'row' }}>\n      <AllTabsButton\n        tabs={tabs}\n        tabRefs={tabRefs}\n        currentTabId={currentTabId}\n        onTabClick={onTabClick}\n      />\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref\n} from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useUID\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefs,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefs: MutableRefObject<(HTMLAnchorElement | HTMLButtonElement | null)[]>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefs.current[tabs.findIndex(tab => tab.id === id)]?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement | null)[]>([]);\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabRefs.current?.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefs.current.find(tab => tab && tab.id === currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined,\n        pad: type === 'horizontal' && !hasScrollBar && level === 1 ? [0, 0, 0, 0.5] : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      type={type}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={typeof count === 'number' && <Count>{count}</Count>}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={el => {\n                tabRefs.current[i] = el;\n              }}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ direction: 'row' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex\n        container={{ pad: level === 1 ? [0, 0, 0, 0.5] : undefined }}\n        as={StylesAllTabsButtonWrapper}\n      >\n        <AllTabsButton\n          tabs={tabs}\n          tabRefs={tabRefs}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}

package/lib/components/Tabs/Tabs.styles.d.ts

@@ -1,9 +1,17 @@
 import type { TabsProps } from './Tabs.types';
 export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<TabsProps> & {
     hasScrollBar: boolean;
+    level: number;
 }, never>;
 export declare const StyledAllTabsButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
     getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StylesAllTabsButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAllTabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    level: number;
+}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    transparent: boolean;
+}, never>;
 //# sourceMappingURL=Tabs.styles.d.ts.map

package/lib/components/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,UAAU;kBAAmD,OAAO;SA2ChF,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uDAkB/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,UAAU;kBAAmD,OAAO;WAAS,MAAM;SA6D/F,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;SAiBd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}