@pega/cosmos-react-core 10.0.0-build.5.2 → 10.0.0-build.5.21

package/lib/components/AppShell/DocumentTabs.styles.js

@@ -0,0 +1,562 @@
+import styled, { css } from 'styled-components';
+import { useContext } from 'react';
+import { defaultThemeProp } from '../../theme';
+import { StyledIcon } from '../Icon';
+import Button from '../Button';
+import MenuButton from '../MenuButton';
+import Flex from '../Flex';
+import AppShellContext from './AppShellContext';
+export const getDocumentTabsVariant = (theme) => {
+    const value = theme.components?.['app-shell']?.['document-tabs']?.variant;
+    return value === 'segmented' || value === 'anchored' || value === 'underline' ? value : 'folder';
+};
+const getVariant = getDocumentTabsVariant;
+const MAX_TAB_WIDTH = '12rem';
+const getTabFill = (theme) => theme.components?.['app-shell']?.['document-tabs']?.fill ?? theme.base.palette['app-background'];
+/**
+ * Each variant returns the CSS slices that customize the tab strip.
+ * All values come from theme tokens (spacing, palette, radius, shadow) —
+ * no hard-coded pixel values from any specific design frame.
+ */
+/**
+ * Shared spacing tokens for tabs. Kept in one place so nudging padding /
+ * gap / max-width once affects all variants.
+ */
+const tabTokens = (theme) => {
+    const { spacing } = theme.base;
+    return {
+        tabPaddingInline: `calc(1.5 * ${spacing})`
+    };
+};
+/**
+ * CSS slices shared by every variant. Individual variants layer their own
+ * background, radius, padding, and active-state visuals on top.
+ */
+const baseVariantStyles = (theme) => {
+    const { palette, 'border-radius': borderRadius } = theme.base;
+    const { tabPaddingInline } = tabTokens(theme);
+    return {
+        container: css `
+      background-color: ${palette['secondary-background']};
+    `,
+        tab: css `
+      padding-inline: ${tabPaddingInline};
+
+      &:hover {
+        background-color: ${palette['primary-background']};
+      }
+
+      /* Outset outline around the tab body. z-index lifts the tab above the
+         panel below so the outline is not clipped where they overlap. */
+      &:focus-visible {
+        outline: 0.125rem solid ${palette.interactive};
+        outline-offset: 0.0625rem;
+        box-shadow: none;
+        position: relative;
+        z-index: 3;
+      }
+
+      /* Active folder tab has top-only rounded corners and scoop pseudos
+         that weld it into the panel below. On focus, round all corners and
+         hide the scoops so the tab reads as a standalone pill — matching
+         the non-active tab focus shape. */
+      &[aria-selected='true']:focus-visible {
+        border-radius: ${borderRadius};
+      }
+      &[aria-selected='true']:focus-visible::before,
+      &[aria-selected='true']:focus-visible::after {
+        display: none;
+      }
+    `,
+        activeIcon: css `
+      ${StyledIcon} {
+        color: ${palette['foreground-color']};
+        opacity: 1;
+      }
+    `
+    };
+};
+/**
+ * Shared "browser-tab" shape used by anchored + folder variants.
+ * The tab has a filled body that grows into the container's bottom edge on
+ * active state, with two outward-curving scoop pseudos that visually flow
+ * into the panel below.
+ *
+ * @param fill  Background color for the active tab and its scoops.
+ * @param onFill Text/icon color when the tab is active.
+ * @param inactiveFill Background color for inactive tabs.
+ * @param fontWeight Active tab font weight.
+ */
+const browserTabStyles = (theme, { fill, onFill, inactiveFill, fontWeight }) => {
+    const { palette, spacing, 'border-radius': borderRadius } = theme.base;
+    const base = baseVariantStyles(theme);
+    return {
+        container: css `
+      ${base.container}
+      --tab-height: 2rem;
+      align-items: flex-end;
+      padding-block-start: calc(0.375 * ${spacing});
+      padding-inline: ${spacing};
+      gap: calc(0.5 * ${spacing});
+
+      &[data-overflowing='true'] {
+        padding-block-start: ${spacing};
+      }
+
+      /* Home is the leftmost tab and has no neighbor to weld into on its
+         left side. Hide the ::before scoop so it doesn't curve into empty
+         space against the nav. */
+      [id='document-tab-home']::before {
+        display: none;
+      }
+    `,
+        tab: css `
+      ${base.tab}
+      height: calc(var(--tab-height) - 0.4375rem);
+      margin-block-end: 0.3125rem;
+      background-color: ${inactiveFill};
+      color: ${palette['foreground-color']};
+      opacity: 0.9;
+      border-radius: ${borderRadius};
+
+      &:hover,
+      &:focus-visible {
+        opacity: 1;
+      }
+    `,
+        active: css `
+      background-color: ${fill};
+      color: ${onFill};
+      opacity: 1;
+      font-weight: ${fontWeight};
+      height: calc(var(--tab-height) - 0.125rem);
+      border-radius: ${borderRadius} ${borderRadius} 0 0;
+      margin-block-end: 0;
+      padding-block-end: 0.3125rem;
+      position: relative;
+      overflow: visible;
+      z-index: 1;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block-end: 0;
+        width: 1.125rem;
+        height: 1.125rem;
+        pointer-events: none;
+      }
+
+      &::before {
+        inset-inline-start: -1.125rem;
+        border-end-end-radius: 0.8125rem;
+        box-shadow: 0.45rem 0.05rem 0 ${fill};
+      }
+
+      &::after {
+        inset-inline-end: -1.125rem;
+        border-end-start-radius: 0.8125rem;
+        box-shadow: -0.45rem 0.05rem 0 ${fill};
+      }
+
+      ${StyledIcon} {
+        color: ${onFill};
+        opacity: 1;
+      }
+
+      &:hover {
+        background-color: ${fill};
+      }
+    `
+    };
+};
+const variantStyles = (variant, theme) => {
+    const { palette, spacing } = theme.base;
+    const base = baseVariantStyles(theme);
+    switch (variant) {
+        case 'segmented':
+            return {
+                container: css `
+          ${base.container}
+          padding-block: calc(0.125 * ${spacing});
+          padding-inline: calc(0.75 * ${spacing});
+          border-radius: calc(var(--tab-height) / 2);
+          align-self: center;
+          flex-grow: 0;
+        `,
+                tab: css `
+          ${base.tab}
+          border-radius: calc(var(--tab-height) / 2);
+        `,
+                active: css `
+          background-color: ${palette['primary-background']};
+          color: ${palette['foreground-color']};
+          opacity: 1;
+          font-weight: 500;
+          border: 0.0625rem solid ${palette['border-line']};
+
+          ${StyledIcon} {
+            color: ${palette.interactive};
+            opacity: 1;
+          }
+
+          &:hover {
+            background-color: ${palette['primary-background']};
+          }
+        `
+            };
+        case 'anchored':
+            return browserTabStyles(theme, {
+                fill: palette.interactive,
+                onFill: palette['primary-background'],
+                inactiveFill: palette['primary-background'],
+                fontWeight: 500
+            });
+        case 'folder': {
+            // Folder tabs read as one flat surface — active and inactive share
+            // the same fill; active state is signaled by the scoop pseudos welding
+            // it into the panel below rather than by a distinct color.
+            const tabFill = getTabFill(theme);
+            return browserTabStyles(theme, {
+                fill: tabFill,
+                onFill: palette['foreground-color'],
+                inactiveFill: tabFill,
+                fontWeight: 600
+            });
+        }
+        case 'underline':
+        default:
+            return {
+                container: css `
+          ${base.container}
+          padding-block: calc(0.5 * ${spacing});
+          border-block-end: 0.0625rem solid ${palette['border-line']};
+        `,
+                tab: css `
+          ${base.tab}
+        `,
+                active: css `
+          background-color: ${palette['primary-background']};
+          color: ${palette['foreground-color']};
+          opacity: 1;
+          font-weight: 500;
+          box-shadow: 0 calc(-0.125 * ${spacing}) 0 0 ${palette['foreground-color']} inset;
+
+          ${base.activeIcon}
+
+          &:hover {
+            background-color: ${palette['primary-background']};
+          }
+        `
+            };
+    }
+};
+export const documentTabsHeight = '2.25rem';
+export const StyledDocumentTabsContainer = styled(Flex)(({ theme }) => {
+    const { spacing } = theme.base;
+    const variant = getVariant(theme);
+    const { isMobileNav, isTopBar } = useContext(AppShellContext);
+    return css `
+    --tab-height: ${documentTabsHeight};
+    position: sticky;
+    top: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));
+
+    /* Sit above CaseView's own sticky wrappers (which use z-index: 1) and
+       similar low-z content so case-content doesn't bleed through the tab
+       strip background. */
+    z-index: ${theme.base['z-index'].popover};
+    align-items: stretch;
+    gap: calc(0.25 * ${spacing});
+    background-color: transparent;
+    min-height: ${documentTabsHeight};
+    overflow: visible;
+    margin-inline-start: ${isMobileNav || isTopBar ? 0 : 'var(--appshell-horizontal-offset, 0)'};
+    transition: margin-inline-start
+      ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
+
+    ${variantStyles(variant, theme).container}
+  `;
+});
+StyledDocumentTabsContainer.defaultProps = defaultThemeProp;
+export const StyledDocumentTabButton = styled.button
+    .attrs({ type: 'button' })
+    .withConfig({ shouldForwardProp: prop => !['hasClose'].includes(prop) })(({ hasClose, theme }) => {
+    const { palette, spacing } = theme.base;
+    const variant = getVariant(theme);
+    return css `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(0.5 * ${spacing});
+      box-sizing: border-box;
+      height: 100%;
+      padding-block: 0;
+      border: none;
+      background-color: transparent;
+      color: ${palette['foreground-color']};
+      opacity: 0.7;
+      cursor: pointer;
+      position: relative;
+      max-width: ${MAX_TAB_WIDTH};
+      font: inherit;
+      text-align: start;
+      text-decoration: none;
+      transition:
+        background-color 120ms ease,
+        color 120ms ease,
+        opacity 120ms ease;
+
+      ${StyledIcon} {
+        flex-shrink: 0;
+        font-size: 1rem;
+        opacity: 0.75;
+      }
+
+      &:hover {
+        opacity: 1;
+
+        ${StyledIcon} {
+          opacity: 1;
+        }
+      }
+
+      ${variantStyles(variant, theme).tab}
+
+      /* Layered after the variant's shorthand padding-inline so the extra
+       right-side room reserved for the close overlay wins the cascade. */
+    ${hasClose &&
+        css `
+        padding-inline-end: calc(1.5rem + ${spacing});
+      `}
+    `;
+});
+StyledDocumentTabButton.defaultProps = defaultThemeProp;
+/**
+ * Absolute-positioned wrapper that overlays the close Button on the tab's
+ * inline-end padding. Button has intrinsic min-width/min-height we can't
+ * reliably override for tight overlays, so the wrapper handles geometry
+ * (flex-centered vertically, full item height) and the Button lives
+ * naturally inside.
+ */
+export const StyledDocumentTabCloseAnchor = styled.span(({ theme }) => {
+    const { spacing } = theme.base;
+    return css `
+    position: absolute;
+    inset-inline-end: calc(0.5 * ${spacing});
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+
+    /* Sits above the focused tab button (which bumps to z-index: 3 for
+       its outline) so the × stays visible while focused. */
+    z-index: 4;
+  `;
+});
+StyledDocumentTabCloseAnchor.defaultProps = defaultThemeProp;
+export const StyledDocumentTabItem = styled.div.withConfig({
+    shouldForwardProp: prop => !['isActive', 'isDropBefore', 'isDragging'].includes(prop)
+})(({ isActive, isDropBefore, isDragging, theme }) => {
+    const { palette } = theme.base;
+    const variant = getVariant(theme);
+    return css `
+    flex-shrink: 0;
+    white-space: nowrap;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    opacity: ${isDragging ? 0.5 : 1};
+
+    ${isDropBefore &&
+        css `
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: 0.25rem;
+        inset-inline-start: -0.0625rem;
+        width: 0.125rem;
+        background-color: ${palette.interactive};
+        border-radius: 0.125rem;
+        z-index: 2;
+      }
+    `}
+
+    ${StyledDocumentTabButton} {
+      ${isActive && variantStyles(variant, theme).active}
+    }
+
+    /* Folder/anchored variants size the row to the active tab (which is
+       taller than inactive tabs, and adds padding-block-end on active),
+       so the label's optical center sits ~0.3125rem above the row's
+       geometric center. Mirror that inset on the close anchor so the ×
+       stays optically aligned on every tab in these variants. */
+    ${(variant === 'folder' || variant === 'anchored') &&
+        css `
+      & > ${StyledDocumentTabCloseAnchor} {
+        inset-block-end: 0.3125rem;
+      }
+    `}
+  `;
+});
+StyledDocumentTabItem.defaultProps = defaultThemeProp;
+export const StyledDocumentTabList = styled.div(({ theme }) => {
+    const { spacing } = theme.base;
+    const variant = getVariant(theme);
+    const gap = variant === 'segmented' || variant === 'anchored' || variant === 'folder'
+        ? `calc(1.5 * ${spacing})`
+        : `calc(0.5 * ${spacing})`;
+    return css `
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-grow: 1;
+    min-width: 0;
+    gap: ${gap};
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 0;
+
+    /* Padding + negative margin gives the focused-tab pill outline (which
+       extends outside the tab body on all sides) room to render inside the
+       scroll clip. Negative margins cancel the padding so surrounding
+       layout stays put. */
+    padding-block-start: 0.5rem;
+    padding-block-end: 0.25rem;
+    padding-inline: 0.25rem;
+    margin-block-start: -0.5rem;
+    margin-block-end: -0.25rem;
+    margin-inline: -0.25rem;
+  `;
+});
+StyledDocumentTabList.defaultProps = defaultThemeProp;
+export const StyledDocumentTabLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+`;
+StyledDocumentTabLabel.defaultProps = defaultThemeProp;
+export const StyledDocumentTabClose = styled(Button)(({ theme: { base: { palette, 'border-radius': borderRadius } } }) => {
+    return css `
+    padding: 0 !important;
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    border-radius: ${borderRadius};
+    opacity: 1;
+
+    /* Override Button's built-in icon-hover ::before (a currentColor overlay
+       positioned at negative inset around the whole 24×24 box) with a
+       smaller inset chrome so hover doesn't touch the tab's block edges.
+       The 24×24 button remains the pointer target for WCAG 2.5.8. */
+    &:hover::before,
+    &:active::before {
+      top: 0.1875rem !important;
+      right: 0.1875rem !important;
+      bottom: 0.1875rem !important;
+      left: 0.1875rem !important;
+      background-color: ${palette['border-line']} !important;
+      opacity: 1 !important;
+      z-index: -1 !important;
+    }
+
+    ${StyledIcon} {
+      font-size: 0.625rem;
+      width: 0.625rem;
+      height: 0.625rem;
+      opacity: 1;
+    }
+
+    svg {
+      width: 0.625rem !important;
+      height: 0.625rem !important;
+    }
+  `;
+});
+StyledDocumentTabClose.defaultProps = defaultThemeProp;
+export const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {
+    const variant = getVariant(theme);
+    return css `
+    flex-shrink: 0;
+
+    /* Folder/anchored containers use align-items: flex-end (tabs sit at
+       the container bottom); align the caret button to the top edge of
+       that same content area so it lines up with the tab tops rather
+       than centering in the taller container box. */
+    align-self: ${variant === 'folder' || variant === 'anchored' ? 'flex-start' : 'center'};
+  `;
+});
+StyledOverflowTabMenu.defaultProps = defaultThemeProp;
+/**
+ * Inner content wrapper for each tab. Hosts the pseudo-element flares for
+ * the folder variant's active tab. Because this element is inside the button
+ * (which we can't force overflow: visible on without breaking other things),
+ * the flares live here and can escape their box without fighting the button's
+ * inherited overflow behavior.
+ */
+export const StyledDocumentTabAnchor = styled.span(({ theme }) => {
+    const { spacing } = theme.base;
+    return css `
+    display: flex;
+    align-items: center;
+    gap: calc(0.5 * ${spacing});
+    position: relative;
+    overflow: visible;
+
+    /* Fill the button so pseudo-flares sit at the button's true edges. */
+    align-self: stretch;
+    flex: 1;
+
+    /* Allow the anchor to shrink below its intrinsic content width so the
+       label inside can ellipsize when the button hits its max-width cap. */
+    min-width: 0;
+  `;
+});
+StyledDocumentTabAnchor.defaultProps = defaultThemeProp;
+/**
+ * Wrapper for AppShell main content when the tab strip is visible. Certain
+ * variants (anchored, folder) require a themed content panel below the tab
+ * strip so the active tab can "attach" to it. For other variants this is a
+ * transparent pass-through so surrounding layout is unchanged.
+ */
+export const StyledDocumentTabPanel = styled.div(({ theme }) => {
+    const { palette, spacing, 'border-radius': borderRadius } = theme.base;
+    const variant = getVariant(theme);
+    switch (variant) {
+        case 'anchored':
+            return css `
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        background-color: ${palette['primary-background']};
+        border-block-start: calc(0.375 * ${spacing}) solid ${palette.interactive};
+        border-radius: ${borderRadius} ${borderRadius} 0 0;
+        margin-inline: ${spacing};
+      `;
+        case 'folder':
+            return css `
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        background-color: ${palette['primary-background']};
+
+        /* Top corners are flat so the tab strip welds cleanly into the panel;
+           a rounded top-right exposes a curved sliver of the container
+           background above the scrollbar when tabs overflow. */
+        border-radius: 0;
+        margin-block-end: ${spacing};
+      `;
+        case 'underline':
+        case 'segmented':
+        default:
+            return css `
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      `;
+    }
+});
+StyledDocumentTabPanel.defaultProps = defaultThemeProp;
+//# sourceMappingURL=DocumentTabs.styles.js.map

package/lib/components/AppShell/DocumentTabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentTabs.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/DocumentTabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport Button from '../Button';\nimport MenuButton from '../MenuButton';\nimport Flex from '../Flex';\n\nimport AppShellContext from './AppShellContext';\n\nexport type DocumentTabsVariant = 'underline' | 'segmented' | 'anchored' | 'folder';\n\nexport const getDocumentTabsVariant = (theme: DefaultTheme): DocumentTabsVariant => {\n  const value = theme.components?.['app-shell']?.['document-tabs']?.variant;\n  return value === 'segmented' || value === 'anchored' || value === 'underline' ? value : 'folder';\n};\n\nconst getVariant = getDocumentTabsVariant;\n\nconst MAX_TAB_WIDTH = '12rem';\n\nconst getTabFill = (theme: DefaultTheme): string =>\n  theme.components?.['app-shell']?.['document-tabs']?.fill ?? theme.base.palette['app-background'];\n\n/**\n * Each variant returns the CSS slices that customize the tab strip.\n * All values come from theme tokens (spacing, palette, radius, shadow) —\n * no hard-coded pixel values from any specific design frame.\n */\n\n/**\n * Shared spacing tokens for tabs. Kept in one place so nudging padding /\n * gap / max-width once affects all variants.\n */\nconst tabTokens = (theme: DefaultTheme) => {\n  const { spacing } = theme.base;\n  return {\n    tabPaddingInline: `calc(1.5 * ${spacing})`\n  };\n};\n\n/**\n * CSS slices shared by every variant. Individual variants layer their own\n * background, radius, padding, and active-state visuals on top.\n */\nconst baseVariantStyles = (theme: DefaultTheme) => {\n  const { palette, 'border-radius': borderRadius } = theme.base;\n  const { tabPaddingInline } = tabTokens(theme);\n  return {\n    container: css`\n      background-color: ${palette['secondary-background']};\n    `,\n    tab: css`\n      padding-inline: ${tabPaddingInline};\n\n      &:hover {\n        background-color: ${palette['primary-background']};\n      }\n\n      /* Outset outline around the tab body. z-index lifts the tab above the\n         panel below so the outline is not clipped where they overlap. */\n      &:focus-visible {\n        outline: 0.125rem solid ${palette.interactive};\n        outline-offset: 0.0625rem;\n        box-shadow: none;\n        position: relative;\n        z-index: 3;\n      }\n\n      /* Active folder tab has top-only rounded corners and scoop pseudos\n         that weld it into the panel below. On focus, round all corners and\n         hide the scoops so the tab reads as a standalone pill — matching\n         the non-active tab focus shape. */\n      &[aria-selected='true']:focus-visible {\n        border-radius: ${borderRadius};\n      }\n      &[aria-selected='true']:focus-visible::before,\n      &[aria-selected='true']:focus-visible::after {\n        display: none;\n      }\n    `,\n    activeIcon: css`\n      ${StyledIcon} {\n        color: ${palette['foreground-color']};\n        opacity: 1;\n      }\n    `\n  };\n};\n\n/**\n * Shared \"browser-tab\" shape used by anchored + folder variants.\n * The tab has a filled body that grows into the container's bottom edge on\n * active state, with two outward-curving scoop pseudos that visually flow\n * into the panel below.\n *\n * @param fill  Background color for the active tab and its scoops.\n * @param onFill Text/icon color when the tab is active.\n * @param inactiveFill Background color for inactive tabs.\n * @param fontWeight Active tab font weight.\n */\nconst browserTabStyles = (\n  theme: DefaultTheme,\n  {\n    fill,\n    onFill,\n    inactiveFill,\n    fontWeight\n  }: {\n    fill: string;\n    onFill: string;\n    inactiveFill: string;\n    fontWeight: number;\n  }\n) => {\n  const { palette, spacing, 'border-radius': borderRadius } = theme.base;\n  const base = baseVariantStyles(theme);\n  return {\n    container: css`\n      ${base.container}\n      --tab-height: 2rem;\n      align-items: flex-end;\n      padding-block-start: calc(0.375 * ${spacing});\n      padding-inline: ${spacing};\n      gap: calc(0.5 * ${spacing});\n\n      &[data-overflowing='true'] {\n        padding-block-start: ${spacing};\n      }\n\n      /* Home is the leftmost tab and has no neighbor to weld into on its\n         left side. Hide the ::before scoop so it doesn't curve into empty\n         space against the nav. */\n      [id='document-tab-home']::before {\n        display: none;\n      }\n    `,\n    tab: css`\n      ${base.tab}\n      height: calc(var(--tab-height) - 0.4375rem);\n      margin-block-end: 0.3125rem;\n      background-color: ${inactiveFill};\n      color: ${palette['foreground-color']};\n      opacity: 0.9;\n      border-radius: ${borderRadius};\n\n      &:hover,\n      &:focus-visible {\n        opacity: 1;\n      }\n    `,\n    active: css`\n      background-color: ${fill};\n      color: ${onFill};\n      opacity: 1;\n      font-weight: ${fontWeight};\n      height: calc(var(--tab-height) - 0.125rem);\n      border-radius: ${borderRadius} ${borderRadius} 0 0;\n      margin-block-end: 0;\n      padding-block-end: 0.3125rem;\n      position: relative;\n      overflow: visible;\n      z-index: 1;\n\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        inset-block-end: 0;\n        width: 1.125rem;\n        height: 1.125rem;\n        pointer-events: none;\n      }\n\n      &::before {\n        inset-inline-start: -1.125rem;\n        border-end-end-radius: 0.8125rem;\n        box-shadow: 0.45rem 0.05rem 0 ${fill};\n      }\n\n      &::after {\n        inset-inline-end: -1.125rem;\n        border-end-start-radius: 0.8125rem;\n        box-shadow: -0.45rem 0.05rem 0 ${fill};\n      }\n\n      ${StyledIcon} {\n        color: ${onFill};\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ${fill};\n      }\n    `\n  };\n};\n\nconst variantStyles = (variant: DocumentTabsVariant, theme: DefaultTheme) => {\n  const { palette, spacing } = theme.base;\n  const base = baseVariantStyles(theme);\n\n  switch (variant) {\n    case 'segmented':\n      return {\n        container: css`\n          ${base.container}\n          padding-block: calc(0.125 * ${spacing});\n          padding-inline: calc(0.75 * ${spacing});\n          border-radius: calc(var(--tab-height) / 2);\n          align-self: center;\n          flex-grow: 0;\n        `,\n        tab: css`\n          ${base.tab}\n          border-radius: calc(var(--tab-height) / 2);\n        `,\n        active: css`\n          background-color: ${palette['primary-background']};\n          color: ${palette['foreground-color']};\n          opacity: 1;\n          font-weight: 500;\n          border: 0.0625rem solid ${palette['border-line']};\n\n          ${StyledIcon} {\n            color: ${palette.interactive};\n            opacity: 1;\n          }\n\n          &:hover {\n            background-color: ${palette['primary-background']};\n          }\n        `\n      };\n    case 'anchored':\n      return browserTabStyles(theme, {\n        fill: palette.interactive,\n        onFill: palette['primary-background'],\n        inactiveFill: palette['primary-background'],\n        fontWeight: 500\n      });\n    case 'folder': {\n      // Folder tabs read as one flat surface — active and inactive share\n      // the same fill; active state is signaled by the scoop pseudos welding\n      // it into the panel below rather than by a distinct color.\n      const tabFill = getTabFill(theme);\n      return browserTabStyles(theme, {\n        fill: tabFill,\n        onFill: palette['foreground-color'],\n        inactiveFill: tabFill,\n        fontWeight: 600\n      });\n    }\n    case 'underline':\n    default:\n      return {\n        container: css`\n          ${base.container}\n          padding-block: calc(0.5 * ${spacing});\n          border-block-end: 0.0625rem solid ${palette['border-line']};\n        `,\n        tab: css`\n          ${base.tab}\n        `,\n        active: css`\n          background-color: ${palette['primary-background']};\n          color: ${palette['foreground-color']};\n          opacity: 1;\n          font-weight: 500;\n          box-shadow: 0 calc(-0.125 * ${spacing}) 0 0 ${palette['foreground-color']} inset;\n\n          ${base.activeIcon}\n\n          &:hover {\n            background-color: ${palette['primary-background']};\n          }\n        `\n      };\n  }\n};\n\nexport const documentTabsHeight = '2.25rem';\n\nexport const StyledDocumentTabsContainer = styled(Flex)(({ theme }) => {\n  const { spacing } = theme.base;\n  const variant = getVariant(theme);\n  const { isMobileNav, isTopBar } = useContext(AppShellContext);\n  return css`\n    --tab-height: ${documentTabsHeight};\n    position: sticky;\n    top: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));\n\n    /* Sit above CaseView's own sticky wrappers (which use z-index: 1) and\n       similar low-z content so case-content doesn't bleed through the tab\n       strip background. */\n    z-index: ${theme.base['z-index'].popover};\n    align-items: stretch;\n    gap: calc(0.25 * ${spacing});\n    background-color: transparent;\n    min-height: ${documentTabsHeight};\n    overflow: visible;\n    margin-inline-start: ${isMobileNav || isTopBar ? 0 : 'var(--appshell-horizontal-offset, 0)'};\n    transition: margin-inline-start\n      ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n\n    ${variantStyles(variant, theme).container}\n  `;\n});\n\nStyledDocumentTabsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledDocumentTabButton = styled.button\n  .attrs({ type: 'button' as const })\n  .withConfig({ shouldForwardProp: prop => !['hasClose'].includes(prop) })<{ hasClose?: boolean }>(\n  ({ hasClose, theme }) => {\n    const { palette, spacing } = theme.base;\n    const variant = getVariant(theme);\n    return css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(0.5 * ${spacing});\n      box-sizing: border-box;\n      height: 100%;\n      padding-block: 0;\n      border: none;\n      background-color: transparent;\n      color: ${palette['foreground-color']};\n      opacity: 0.7;\n      cursor: pointer;\n      position: relative;\n      max-width: ${MAX_TAB_WIDTH};\n      font: inherit;\n      text-align: start;\n      text-decoration: none;\n      transition:\n        background-color 120ms ease,\n        color 120ms ease,\n        opacity 120ms ease;\n\n      ${StyledIcon} {\n        flex-shrink: 0;\n        font-size: 1rem;\n        opacity: 0.75;\n      }\n\n      &:hover {\n        opacity: 1;\n\n        ${StyledIcon} {\n          opacity: 1;\n        }\n      }\n\n      ${variantStyles(variant, theme).tab}\n\n      /* Layered after the variant's shorthand padding-inline so the extra\n       right-side room reserved for the close overlay wins the cascade. */\n    ${hasClose &&\n      css`\n        padding-inline-end: calc(1.5rem + ${spacing});\n      `}\n    `;\n  }\n);\n\nStyledDocumentTabButton.defaultProps = defaultThemeProp;\n\n/**\n * Absolute-positioned wrapper that overlays the close Button on the tab's\n * inline-end padding. Button has intrinsic min-width/min-height we can't\n * reliably override for tight overlays, so the wrapper handles geometry\n * (flex-centered vertically, full item height) and the Button lives\n * naturally inside.\n */\nexport const StyledDocumentTabCloseAnchor = styled.span(({ theme }) => {\n  const { spacing } = theme.base;\n  return css`\n    position: absolute;\n    inset-inline-end: calc(0.5 * ${spacing});\n    inset-block: 0;\n    display: flex;\n    align-items: center;\n\n    /* Sits above the focused tab button (which bumps to z-index: 3 for\n       its outline) so the × stays visible while focused. */\n    z-index: 4;\n  `;\n});\n\nStyledDocumentTabCloseAnchor.defaultProps = defaultThemeProp;\n\nexport const StyledDocumentTabItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['isActive', 'isDropBefore', 'isDragging'].includes(prop)\n})<{\n  isActive?: boolean;\n  isDropBefore?: boolean;\n  isDragging?: boolean;\n}>(({ isActive, isDropBefore, isDragging, theme }) => {\n  const { palette } = theme.base;\n  const variant = getVariant(theme);\n  return css`\n    flex-shrink: 0;\n    white-space: nowrap;\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    opacity: ${isDragging ? 0.5 : 1};\n\n    ${isDropBefore &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset-block: 0.25rem;\n        inset-inline-start: -0.0625rem;\n        width: 0.125rem;\n        background-color: ${palette.interactive};\n        border-radius: 0.125rem;\n        z-index: 2;\n      }\n    `}\n\n    ${StyledDocumentTabButton} {\n      ${isActive && variantStyles(variant, theme).active}\n    }\n\n    /* Folder/anchored variants size the row to the active tab (which is\n       taller than inactive tabs, and adds padding-block-end on active),\n       so the label's optical center sits ~0.3125rem above the row's\n       geometric center. Mirror that inset on the close anchor so the ×\n       stays optically aligned on every tab in these variants. */\n    ${(variant === 'folder' || variant === 'anchored') &&\n    css`\n      & > ${StyledDocumentTabCloseAnchor} {\n        inset-block-end: 0.3125rem;\n      }\n    `}\n  `;\n});\n\nStyledDocumentTabItem.defaultProps = defaultThemeProp;\n\nexport const StyledDocumentTabList = styled.div(({ theme }) => {\n  const { spacing } = theme.base;\n  const variant = getVariant(theme);\n  const gap =\n    variant === 'segmented' || variant === 'anchored' || variant === 'folder'\n      ? `calc(1.5 * ${spacing})`\n      : `calc(0.5 * ${spacing})`;\n  return css`\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-grow: 1;\n    min-width: 0;\n    gap: ${gap};\n    overflow-x: auto;\n    overflow-y: hidden;\n    margin: 0;\n\n    /* Padding + negative margin gives the focused-tab pill outline (which\n       extends outside the tab body on all sides) room to render inside the\n       scroll clip. Negative margins cancel the padding so surrounding\n       layout stays put. */\n    padding-block-start: 0.5rem;\n    padding-block-end: 0.25rem;\n    padding-inline: 0.25rem;\n    margin-block-start: -0.5rem;\n    margin-block-end: -0.25rem;\n    margin-inline: -0.25rem;\n  `;\n});\n\nStyledDocumentTabList.defaultProps = defaultThemeProp;\n\nexport const StyledDocumentTabLabel = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n`;\n\nStyledDocumentTabLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDocumentTabClose = styled(Button)(({\n  theme: {\n    base: { palette, 'border-radius': borderRadius }\n  }\n}) => {\n  return css`\n    padding: 0 !important;\n    width: 1.5rem !important;\n    height: 1.5rem !important;\n    min-width: 0 !important;\n    min-height: 0 !important;\n    border-radius: ${borderRadius};\n    opacity: 1;\n\n    /* Override Button's built-in icon-hover ::before (a currentColor overlay\n       positioned at negative inset around the whole 24×24 box) with a\n       smaller inset chrome so hover doesn't touch the tab's block edges.\n       The 24×24 button remains the pointer target for WCAG 2.5.8. */\n    &:hover::before,\n    &:active::before {\n      top: 0.1875rem !important;\n      right: 0.1875rem !important;\n      bottom: 0.1875rem !important;\n      left: 0.1875rem !important;\n      background-color: ${palette['border-line']} !important;\n      opacity: 1 !important;\n      z-index: -1 !important;\n    }\n\n    ${StyledIcon} {\n      font-size: 0.625rem;\n      width: 0.625rem;\n      height: 0.625rem;\n      opacity: 1;\n    }\n\n    svg {\n      width: 0.625rem !important;\n      height: 0.625rem !important;\n    }\n  `;\n});\n\nStyledDocumentTabClose.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {\n  const variant = getVariant(theme);\n  return css`\n    flex-shrink: 0;\n\n    /* Folder/anchored containers use align-items: flex-end (tabs sit at\n       the container bottom); align the caret button to the top edge of\n       that same content area so it lines up with the tab tops rather\n       than centering in the taller container box. */\n    align-self: ${variant === 'folder' || variant === 'anchored' ? 'flex-start' : 'center'};\n  `;\n});\n\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\n/**\n * Inner content wrapper for each tab. Hosts the pseudo-element flares for\n * the folder variant's active tab. Because this element is inside the button\n * (which we can't force overflow: visible on without breaking other things),\n * the flares live here and can escape their box without fighting the button's\n * inherited overflow behavior.\n */\nexport const StyledDocumentTabAnchor = styled.span(({ theme }) => {\n  const { spacing } = theme.base;\n  return css`\n    display: flex;\n    align-items: center;\n    gap: calc(0.5 * ${spacing});\n    position: relative;\n    overflow: visible;\n\n    /* Fill the button so pseudo-flares sit at the button's true edges. */\n    align-self: stretch;\n    flex: 1;\n\n    /* Allow the anchor to shrink below its intrinsic content width so the\n       label inside can ellipsize when the button hits its max-width cap. */\n    min-width: 0;\n  `;\n});\n\nStyledDocumentTabAnchor.defaultProps = defaultThemeProp;\n\n/**\n * Wrapper for AppShell main content when the tab strip is visible. Certain\n * variants (anchored, folder) require a themed content panel below the tab\n * strip so the active tab can \"attach\" to it. For other variants this is a\n * transparent pass-through so surrounding layout is unchanged.\n */\nexport const StyledDocumentTabPanel = styled.div(({ theme }) => {\n  const { palette, spacing, 'border-radius': borderRadius } = theme.base;\n  const variant = getVariant(theme);\n\n  switch (variant) {\n    case 'anchored':\n      return css`\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n        background-color: ${palette['primary-background']};\n        border-block-start: calc(0.375 * ${spacing}) solid ${palette.interactive};\n        border-radius: ${borderRadius} ${borderRadius} 0 0;\n        margin-inline: ${spacing};\n      `;\n    case 'folder':\n      return css`\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n        background-color: ${palette['primary-background']};\n\n        /* Top corners are flat so the tab strip welds cleanly into the panel;\n           a rounded top-right exposes a curved sliver of the container\n           background above the scrollbar when tabs overflow. */\n        border-radius: 0;\n        margin-block-end: ${spacing};\n      `;\n    case 'underline':\n    case 'segmented':\n    default:\n      return css`\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n      `;\n  }\n});\n\nStyledDocumentTabPanel.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AAmB5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAkGhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA8QhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AAmB5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAkGhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA+QhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -105,7 +105,7 @@ const StyledNavigationTouchDialog = styled(TouchDialog)(({ theme }) => {
 StyledNavigationTouchDialog.defaultProps = defaultThemeProp;
 const ListItemWrapper = props => {
     const { children, childElementRef, label, tooltipLabel, items, filterAt = 5, content, onMenuToggle, mobileNavBar } = props;
-    const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);
+    const { isMobileNav, navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);
     const popoverRef = useRef(null);
     const filterElRef = useRef(null);
     const isMenu = (Array.isArray(items) && items.length > 0) || !!content;
@@ -145,7 +145,7 @@ const ListItemWrapper = props => {
     useEffect(() => {
         const onClick = () => {
             if (isMenu) {
-                if (!navOpen && !popoverOpen)
+                if ((isMobileNav || !navOpen) && !popoverOpen)
                     setPopoverOpen(true);
                 else {
                     setTimeout(() => {
@@ -215,7 +215,7 @@ const ListItemWrapper = props => {
                 hidePopoverTimeout.current = null;
             }
         };
-    }, [isMenu, navOpen, closePopover, collapsedHoverMenus, popoverOpen]);
+    }, [isMenu, navOpen, closePopover, collapsedHoverMenus, popoverOpen, isMobileNav]);
     useEffect(() => {
         onMenuToggle?.(popoverOpen ? 'open' : 'close');
     }, [popoverOpen]);
@@ -227,14 +227,15 @@ const ListItemWrapper = props => {
             return filterRegex.test(item.primary);
         })
         : items ?? [];
+    const useTouchDialog = mobileNavBar && isTouchDevice;
     const filterInputProps = renderFilter
         ? {
             value: filterValue,
             ref: filterElRef,
-            onChange: (e) => setFilterValue(e.target.value)
+            onChange: (e) => setFilterValue(e.target.value),
+            autoFocus: !useTouchDialog
         }
         : undefined;
-    const useTouchDialog = mobileNavBar && isTouchDevice;
     const menuContent = content ? (_jsx("div", { onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, children: content })) : (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, listId: searchListId, filterInputProps: filterInputProps, items: itemsToRender.map(item => {
             const itemText = 'text' in item && typeof item.text === 'string' ? item.text : '';
             const itemTextValue = item.primary || itemText;