npm - @pega/cosmos-react-core - Versions diffs - 8.0.0-build.45.2 → 8.0.0-build.46.0 - Mend

@pega/cosmos-react-core 8.0.0-build.45.2 → 8.0.0-build.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/lib/components/PageTemplates/DashboardPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Tabs, { TabPanel } from '../Tabs';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n const height = 'calc(100vh - var(--appshell-offset, 0rem))';\n\n return css`\n min-height: ${height};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n\n [role='tabpanel'] & {\n padding: 0;\n }\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: ForwardRefForwardPropsComponent<DashboardPageLayoutProps> = forwardRef(\n function DashboardPageLayout(\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n utilities,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: DashboardPageLayoutProps['ref']\n ) {\n const pageRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n const isMediumOrAbove = useBreakpoint('md');\n\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const renderFilters =\n filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0;\n const renderHeader = !!path \|\| !!icon \|\| !!title \|\| !!actions;\n const renderBanners = !!banners;\n\n const gridAreas = useMemo(() => {\n if (renderFilters && renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderBanners) {\n return `\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderHeader) {\n return `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters) {\n return `\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners) {\n return `${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderHeader) {\n return `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n return `${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners, renderHeader, renderFilters, renderBanners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n return 'fit-content(100%)';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={pageRef}\n >\n {renderHeader && (isMediumOrAbove \|\| (!isMediumOrAbove && !utilities)) && (\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n )}\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n ${StyledDashboardPageLayout} {\n padding: 0;\n min-height: unset;\n height: unset;\n }\n `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nconst DashboardPage: ForwardRefForwardPropsComponent<DashboardPageProps> = forwardRef(\n function DashboardPage(\n {\n a,\n b,\n c,\n filters,\n fitToViewport,\n utilities,\n path,\n icon,\n title,\n actions,\n ...restProps\n }: PropsWithoutRef<DashboardPageProps>,\n ref: DashboardPageProps['ref']\n ) {\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageContent = (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n utilities={utilities}\n path={path}\n icon={icon}\n title={title}\n actions={actions}\n ref={ref}\n />\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('agent'),\n id: 'agent',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex container={{ gap: 0.5 }}>\n <Flex item={{ grow: 1 }}>{pageContent}</Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Flex container={{ direction: 'column', pad: [2, 2, undefined] }} as={StyledPageHeader}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n </Flex>\n\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StylePageTabContent>{tab.content}</StylePageTabContent>\n </TabPanel>\n ))}\n </Flex>\n );\n }\n\n return pageContent;\n }\n);\n\nexport default DashboardPage;\n"]}
1	+ {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Tabs, { TabPanel } from '../Tabs';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({\n fitToViewport,\n theme: {\n base: {\n palette: { 'secondary-background': secondaryBackground }\n }\n }\n}) => {\n const height = 'calc(100vh - var(--appshell-offset, 0rem))';\n\n return css`\n min-height: ${height};\n background-color: ${secondaryBackground};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n\n [role='tabpanel'] & {\n padding: 0;\n }\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: ForwardRefForwardPropsComponent<DashboardPageLayoutProps> = forwardRef(\n function DashboardPageLayout(\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n utilities,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: DashboardPageLayoutProps['ref']\n ) {\n const pageRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n const isMediumOrAbove = useBreakpoint('md');\n\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const renderFilters =\n filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0;\n const renderHeader = !!path \|\| !!icon \|\| !!title \|\| !!actions;\n const renderBanners = !!banners;\n\n const gridAreas = useMemo(() => {\n if (renderFilters && renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderBanners) {\n return `\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderHeader) {\n return `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters) {\n return `\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners) {\n return `${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderHeader) {\n return `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n return `${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners, renderHeader, renderFilters, renderBanners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n return 'fit-content(100%)';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={pageRef}\n >\n {renderHeader && (isMediumOrAbove \|\| (!isMediumOrAbove && !utilities)) && (\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n )}\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n ${StyledDashboardPageLayout} {\n padding: 0;\n min-height: unset;\n height: unset;\n }\n `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nconst DashboardPage: ForwardRefForwardPropsComponent<DashboardPageProps> = forwardRef(\n function DashboardPage(\n {\n a,\n b,\n c,\n filters,\n fitToViewport,\n utilities,\n path,\n icon,\n title,\n actions,\n ...restProps\n }: PropsWithoutRef<DashboardPageProps>,\n ref: DashboardPageProps['ref']\n ) {\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageContent = (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n utilities={utilities}\n path={path}\n icon={icon}\n title={title}\n actions={actions}\n ref={ref}\n />\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('agent'),\n id: 'agent',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex container={{ gap: 0.5 }}>\n <Flex item={{ grow: 1 }}>{pageContent}</Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Flex container={{ direction: 'column', pad: [2, 2, undefined] }} as={StyledPageHeader}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n </Flex>\n\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StylePageTabContent>{tab.content}</StylePageTabContent>\n </TabPanel>\n ))}\n </Flex>\n );\n }\n\n return pageContent;\n }\n);\n\nexport default DashboardPage;\n"]}

package/lib/components/Tabs/Tab.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAa7D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAInE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;~~AAsPD~~,eAAO,MAAM,SAAS;YAEV,gBAAgB,CAAC,OAAO,CAAC;SAmCpC,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CAgCjD,CAAC;AAEH,eAAe,GAAG,CAAC"}
1	+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAa7D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAInE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AA2QD,eAAO,MAAM,SAAS;YAEV,gBAAgB,CAAC,OAAO,CAAC;SAmCpC,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CAgCjD,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js CHANGED Viewed

@@ -20,7 +20,7 @@ const activeStyle = (color) => css `
     background-color: ${color};
   }
 `;
-const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level && level > 1
+const getHorizontalUnselectedHoverStyle = ({ detached, level, opacity, color }) => level && level > 1 && !detached
     ? css `
         ::before {
           content: '';
@@ -36,11 +36,12 @@ const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level &
       `
     : css `
         background-color: ${color};
-        border-start-start-radius: calc(0.5rem * 0.5);
-        border-start-end-radius: calc(0.5rem * 0.5);
+        border-start-start-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
+        border-start-end-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
       `;
 const getHorizontalStyles = ({ selected, level, theme }) => {
     const color = theme.components.button.color;
+    const foreground = theme.base.palette['foreground-color'];
     const { detached: tabsDetached } = theme.components.tabs;
     const secondaryColor = tabsDetached
         ? theme.base.palette['primary-background']
@@ -50,8 +51,12 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);
     const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);
     const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);
-    const hoverBackgroundColor = tryCatch(() => mix(0.9, fallbackBackground, usableColor));
-    const activeBackgroundColor = tryCatch(() => mix(0.8, fallbackBackground, usableColor));
+    const hoverBackgroundColor = tabsDetached
+        ? tryCatch(() => transparentize(0.95, foreground))
+        : tryCatch(() => mix(0.9, fallbackBackground, usableColor));
+    const activeBackgroundColor = tabsDetached
+        ? theme.base.palette['primary-background']
+        : tryCatch(() => mix(0.8, fallbackBackground, usableColor));
     const { spacing } = theme.base;
     let activeTabColor = theme.base.palette.interactive;
     if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {
@@ -71,7 +76,7 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     }
     span:first-of-type {
-      color: ${selected ? color : theme.base.palette['foreground-color']};
+      color: ${selected ? color : foreground};
       display: inline-block;
       ::before {
@@ -107,6 +112,7 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
             &:not(:disabled):hover {
               text-decoration: none;
               ${getHorizontalUnselectedHoverStyle({
+            detached: tabsDetached,
             level,
             opacity: 0.1,
             color: hoverBackgroundColor
@@ -116,6 +122,7 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
             &:not(:disabled):active {
               text-decoration: none;
               ${getHorizontalUnselectedHoverStyle({
+            detached: tabsDetached,
             level,
             opacity: 0.2,
             color: activeBackgroundColor
@@ -153,34 +160,42 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
         css `
       &[aria-selected='true'],
       &:focus,
-      &:not([disabled]):focus,
-      &:hover:not(:disabled) {
+      &:not([disabled]):focus {
         color: ${activeTabColor};
         span:first-of-type {
           color: ${activeTabColor};
         }
-        background: ${theme.base.palette['primary-background']};
+        background: ${activeBackgroundColor};
       }
       &:hover:not(:disabled):not([aria-selected='true']) {
         background: ${hoverBackgroundColor};
+        border-radius: 0;
+        color: ${foreground};
+        span:first-of-type {
+          color: ${foreground};
+        }
       }
     `}
   `;
 };
 const getVerticalStyles = ({ selected, theme }) => {
+    const { detached: tabsDetached } = theme.components.tabs;
     const borderColor = theme.base.palette['border-line'];
     const interactive = theme.base.palette.interactive;
-    const lightenedColor = tryCatch(() => transparentize(0.5, interactive)) ?? '';
+    const foreground = theme.base.palette['foreground-color'];
+    const secondary = theme.base.palette['secondary-background'];
+    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
     const { spacing } = theme.base;
-    const { detached: tabsDetached } = theme.components.tabs;
-    const activeTabBg = transparentize(0.75, interactive);
-    const activeTabColor = calculateForegroundColor(activeTabBg, theme.components.card['foreground-color']);
+    const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);
+    const activeTabColor = tabsDetached
+        ? interactive
+        : calculateForegroundColor(activeTabBg, foreground);
     return css `
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-style: solid;
-    color: ${theme.base.palette['foreground-color']};
+    color: ${foreground};
     border-width: 0.0625rem 0;
     border-color: ${tabsDetached ? 'transparent' : borderColor};
     height: calc(5.5 * ${spacing});
@@ -222,13 +237,14 @@ const getVerticalStyles = ({ selected, theme }) => {
       border-radius: calc(0.5 * ${theme.base['border-radius']});
       margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});
-      &:hover&:not(:disabled),
-      &:focus,
       &:not([disabled]):focus,
       &[aria-selected='true'] {
         background: ${activeTabBg};
         color: ${activeTabColor};
       }
+      &:hover:not(:disabled):not([aria-selected='true']) {
+        background: ${lightenedColor};
+      }
     `}
   `;
 };

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

	@@ -1 +1 @@
1	- {"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 { ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { calculateForegroundColor, isSolidColor, 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 { ForwardRefForwardPropsComponent } 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 { detached: tabsDetached } = theme.components.tabs;\n const secondaryColor = tabsDetached\n ? theme.base.palette['primary-background']\n : theme.base.palette['secondary-background'];\n const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n\n // If the secondary color is not a solid color, use the readable color as the fallback background.\n const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n const activeBackgroundColor = tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n const { spacing } = theme.base;\n\n let activeTabColor = theme.base.palette.interactive;\n if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n activeTabColor = readableHue(activeTabColor, fallbackBackground);\n }\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 ${!tabsDetached &&\n css`\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\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 ${tabsDetached &&\n css`\n &[aria-selected='true'],\n &:focus,\n &:not([disabled]):focus,\n &:hover:not(:disabled) {\n color: ${activeTabColor};\n span:first-of-type {\n color: ${activeTabColor};\n }\n background: ${theme.base.palette['primary-background']};\n }\n &:hover:not(:disabled):not([aria-selected='true']) {\n background: ${hoverBackgroundColor};\n }\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 interactive = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.5, interactive)) ?? '';\n const { spacing } = theme.base;\n const { detached: tabsDetached } = theme.components.tabs;\n const activeTabBg = transparentize(0.75, interactive);\n const activeTabColor = calculateForegroundColor(\n activeTabBg,\n theme.components.card['foreground-color']\n );\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: ${tabsDetached ? 'transparent' : 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 ${tabsDetached ? 'transparent' : borderColor};\n }\n ${!tabsDetached &&\n css`\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: ${interactive};\n }\n `}\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(interactive)}\n box-shadow: inset 0 0 0 0.0625rem ${interactive};\n text-decoration: none;\n }\n\n ${tabsDetached &&\n css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n &:hover&:not(:disabled),\n &:focus,\n &:not([disabled]):focus,\n &[aria-selected='true'] {\n background: ${activeTabBg};\n color: ${activeTabColor};\n }\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: ForwardRefForwardPropsComponent<TabProps> = 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"]}
1	+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEvF,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAE9C,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,YAAY,CAAC,aAAa,CAAC,CAAC;AAwB5B,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,CAAA;;;wBAGlB,KAAK;;CAE5B,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,EACzC,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EAKN,EAAE,EAAE,CACH,KAAK,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ;IAC7B,CAAC,CAAC,GAAG,CAAA;;;;;;;;;;qBAUY,OAAO;;OAErB;IACH,CAAC,CAAC,GAAG,CAAA;4BACmB,KAAK;qCACI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB;mCACrC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB;OAC/D,CAAC;AAER,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EAGN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC1D,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACzD,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QAC1C,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IAExE,kGAAkG;IAClG,MAAM,kBAAkB,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChG,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;IACtF,MAAM,oBAAoB,GAAG,YAAY;QACvC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9D,MAAM,qBAAqB,GAAG,YAAY;QACxC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QAC1C,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE/B,IAAI,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACpD,IAAI,CAAC,uBAAuB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC;QACpE,cAAc,GAAG,WAAW,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,GAAG,CAAA;;;;uBAIW,OAAO;4BACF,OAAO;;;;;gBAKnB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;eAIrC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU;;;;;;;;;;;;;;;;MAgBtC,CAAC,YAAY;QACf,GAAG,CAAA;;sBAEe,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc;mBACpC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;2BAKnB,OAAO;4BACN,OAAO;;KAE9B;;MAEC,CAAC,QAAQ;QACT,CAAC,CAAC,GAAG,CAAA;;;;gBAIK,iCAAiC,CAAC;YAClC,QAAQ,EAAE,YAAY;YACtB,KAAK;YACL,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,oBAAoB;SAC5B,CAAC;;;;;gBAKA,iCAAiC,CAAC;YAClC,QAAQ,EAAE,YAAY;YACtB,KAAK;YACL,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,qBAAqB;SAC7B,CAAC;;;SAGP;QACH,CAAC,CAAC,GAAG,CAAA;YACC,KAAK;YACP,KAAK,GAAG,CAAC;YACT,GAAG,CAAA;gCACmB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;WAC7D;SACF;;;;;oBAKW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;;;;;;wBAQ5B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM;;;MAG/C,WAAW;wCACuB,OAAO;;;MAGzC,YAAY;QACd,GAAG,CAAA;;;;iBAIU,cAAc;;mBAEZ,cAAc;;sBAEX,qBAAqB;;;sBAGrB,oBAAoB;;iBAEzB,UAAU;;mBAER,UAAU;;;KAGxB;GACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACmD,EAAE,EAAE;IAC5D,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACzD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACnD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC7D,MAAM,cAAc,GAClB,QAAQ,CAAC,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CACnF,IAAI,EAAE,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAC/B,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACjF,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,wBAAwB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IAEtD,OAAO,GAAG,CAAA;;;;;aAKC,UAAU;;oBAEH,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;yBACrC,OAAO;;0BAEN,OAAO;;;;oCAIG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;;MAExE,CAAC,YAAY;QACf,GAAG,CAAA;;;;mBAIY,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;sBAKxB,WAAW;;KAE5B;;;QAGG,WAAW,CAAC,cAAc,CAAC;;;;;;QAM3B,WAAW,CAAC,WAAW,CAAC;0CACU,WAAW;;;;MAI/C,YAAY;QACd,GAAG,CAAA;kCAC2B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;6BAChC,OAAO,cAAc,OAAO;;;;sBAInC,WAAW;iBAChB,cAAc;;;sBAGT,cAAc;;KAE/B;GACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAKzC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;MAMxC,QAAQ;IACV,GAAG,CAAA;;KAEF;;;;;;;;;;;;iBAYY,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;MAGzC,OAAO,KAAK,YAAY;IACxB,CAAC,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;;MAExC,eAAe;sCACiB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CACF,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAA8C,UAAU,CAAC,SAAS,GAAG,CAC5E,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAA6B,EAC7F,GAAoB;IAEpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,EAAE,CAAC;IACvC,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACjD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,SAAS,IACR,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,KACR,SAAS,aAEb,2BACG,CAAC,CAAC,MAAM,IAAI,CACX,8BACE,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,EACrC,KAAC,OAAO,IAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACtD,CAAC,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,GAC1B,IACT,CACJ,EACD,+BAAoB,OAAO,YAAG,OAAO,GAAQ,IACxC,EACN,KAAK,IACI,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,GAAG,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { calculateForegroundColor, isSolidColor, 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 { ForwardRefForwardPropsComponent } 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 detached,\n level,\n opacity,\n color\n}: { level?: TabsContextValue['level'] } & {\n detached?: boolean;\n color?: string;\n opacity: number;\n}) =>\n level && level > 1 && !detached\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: ${detached ? 0 : 'calc(0.5rem 0.5)'};\n border-start-end-radius: ${detached ? 0 : '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 foreground = theme.base.palette['foreground-color'];\n const { detached: tabsDetached } = theme.components.tabs;\n const secondaryColor = tabsDetached\n ? theme.base.palette['primary-background']\n : theme.base.palette['secondary-background'];\n const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n\n // If the secondary color is not a solid color, use the readable color as the fallback background.\n const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);\n const hoverBackgroundColor = tabsDetached\n ? tryCatch(() => transparentize(0.95, foreground))\n : tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n const activeBackgroundColor = tabsDetached\n ? theme.base.palette['primary-background']\n : tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n const { spacing } = theme.base;\n\n let activeTabColor = theme.base.palette.interactive;\n if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n activeTabColor = readableHue(activeTabColor, fallbackBackground);\n }\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 : foreground};\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 ${!tabsDetached &&\n css`\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\n ${!selected\n ? css`\n @media (hover: hover) {\n &:not(:disabled):hover {\n text-decoration: none;\n ${getHorizontalUnselectedHoverStyle({\n detached: tabsDetached,\n level,\n opacity: 0.1,\n color: hoverBackgroundColor\n })}\n }\n\n &:not(:disabled):active {\n text-decoration: none;\n ${getHorizontalUnselectedHoverStyle({\n detached: tabsDetached,\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 ${tabsDetached &&\n css`\n &[aria-selected='true'],\n &:focus,\n &:not([disabled]):focus {\n color: ${activeTabColor};\n span:first-of-type {\n color: ${activeTabColor};\n }\n background: ${activeBackgroundColor};\n }\n &:hover:not(:disabled):not([aria-selected='true']) {\n background: ${hoverBackgroundColor};\n border-radius: 0;\n color: ${foreground};\n span:first-of-type {\n color: ${foreground};\n }\n }\n `}\n `;\n};\n\nconst getVerticalStyles = ({\n selected,\n theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' \| 'selected'>) => {\n const { detached: tabsDetached } = theme.components.tabs;\n const borderColor = theme.base.palette['border-line'];\n const interactive = theme.base.palette.interactive;\n const foreground = theme.base.palette['foreground-color'];\n const secondary = theme.base.palette['secondary-background'];\n const lightenedColor =\n tryCatch(() =>\n transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)\n ) ?? '';\n const { spacing } = theme.base;\n const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);\n const activeTabColor = tabsDetached\n ? interactive\n : calculateForegroundColor(activeTabBg, foreground);\n\n return css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-style: solid;\n color: ${foreground};\n border-width: 0.0625rem 0;\n border-color: ${tabsDetached ? 'transparent' : 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 ${tabsDetached ? 'transparent' : borderColor};\n }\n ${!tabsDetached &&\n css`\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: ${interactive};\n }\n `}\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(interactive)}\n box-shadow: inset 0 0 0 0.0625rem ${interactive};\n text-decoration: none;\n }\n\n ${tabsDetached &&\n css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n &:not([disabled]):focus,\n &[aria-selected='true'] {\n background: ${activeTabBg};\n color: ${activeTabColor};\n }\n &:hover:not(:disabled):not([aria-selected='true']) {\n background: ${lightenedColor};\n }\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: ForwardRefForwardPropsComponent<TabProps> = 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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAMxE~~,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;~~AAO~~/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;~~AAK9C~~,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;~~SA+Ff~~,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAyE3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;AAQ/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,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;SA0Ef,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAyE3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { transparentize } from 'polished';
 import { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import Button from '../Button';
@@ -9,9 +8,9 @@ import { getFocusables } from '../../utils';
 import Flex from '../Flex';
 import Text from '../Text';
 import { StyledCardContent } from '../Card/CardContent';
+import { StyledCard } from '../Card/Card';
 import TabsContext from './TabsContext';
 import { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';
-import { StyledTab } from './Tab';
 const defaultProps = {
     tabId: ''
 };
@@ -45,43 +44,31 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
     ${theme.components.tabs.detached &&
         tablistType === 'horizontal' &&
         css `
-      background: ${theme.base.palette['primary-background']};
-      border: none;
-      border-radius: ${theme.components.card['border-radius']};
+      background: ${theme.base.palette['secondary-background']};
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-start: none;
+      border-radius: var(--border-radius, ${theme.base['border-radius']});
       border-start-start-radius: 0;
       border-start-end-radius: 0;
-      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+      padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
       &&& ${StyledCardContent} {
         padding: 0;
+        ${StyledCard} {
+          border: 0;
+          padding: 0;
+        }
       }
-      ${StyledTabs} {
-        border-radius: calc(0.5 * ${theme.base['border-radius']});
-        margin-block-end: ${theme.base.spacing};
-        ${StyledTab} {
-          border-radius: calc(0.5 * ${theme.base['border-radius']});
-          color: ${theme.base.palette.interactive};
-          span:first-of-type {
-            color: ${theme.base.palette.interactive};
-          }
-          &[aria-selected='true'],
-          &:focus,
-          &:not([disabled]):focus,
-          &:hover:not(:disabled) {
-            background: ${transparentize(0.8, theme.base.palette.interactive)};
-            color: ${theme.base.palette['foreground-color']};
-            span:first-of-type {
-              color: ${theme.base.palette['foreground-color']};
-            }
-          }
-        }
+      &&& ${StyledCard} {
+        padding: calc(2 * ${theme.base.spacing});
+        padding-block-start: ${theme.base.spacing};
+        border: 0.0625rem solid ${theme.base.palette['border-line']};
+        border-radius: var(--border-radius, ${theme.base['border-radius']});
+        background: ${theme.components.card.background};
       }
       ${StyledAllTabsWrapper} {
-        border-radius: calc(0.5 * ${theme.base['border-radius']});
-        margin-block-end: ${theme.base.spacing};
         ${StyledTabs} {
           margin-block-end: 0;
         }
@@ -90,16 +77,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
       ${level > 1 &&
             css `
         :has(&) {
-          border: 0.0625rem solid ${theme.base.palette['border-line']};
-          border-radius: calc(0.5 * ${theme.base['border-radius']});
-          padding: 0;
-          ${StyledTabs} {
-            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-          }
           ${StyledAllTabsWrapper} {
-            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
             ${StyledTabs} {
               margin: 0;
             }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAyBlC,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAKxC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;;;;;;oBAMQ,WAAW,KAAK,YAAY,IAAI,KAAK,GAAG,CAAC;QACrD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QAClC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAG3B,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;;MAEC,WAAW,KAAK,YAAY;QAC9B,KAAK,GAAG,CAAC;QACT,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;gCAClC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;KAI5D;;MAEC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ;QAChC,WAAW,KAAK,YAAY;QAC5B,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;uBAErC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;iBAG5C,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;YAEtD,iBAAiB;;;;QAIrB,UAAU;oCACkB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACnC,KAAK,CAAC,IAAI,CAAC,OAAO;;UAEpC,SAAS;sCACmB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;mBAC9C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;qBAE5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;0BAMzB,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;qBACxD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;uBAEpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;QAMrD,oBAAoB;oCACQ,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACnC,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,UAAU;;;;;QAKZ,KAAK,GAAG,CAAC;YACX,GAAG,CAAA;;oCAE2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sCAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;YAGrD,UAAU;sBACA,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;YAG3D,oBAAoB;sBACV,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;cACzD,UAAU;;;;;OAKjB;KACF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,EACE,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,GAAG,SAAS,EACmB,EACjC,GAAyB;IAEzB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACvD,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/D,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1D,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IACF,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAE3B,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACvC,MAAC,cAAc,OACT,SAAS,EACb,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;gBACnB,MAAM,EAAE,CAAC;gBACT,GAAG,CAAC,WAAW,KAAK,YAAY,IAAI;oBAClC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC;iBACjE,CAAC;aACH,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,EAAgB,YAAG,KAAK,GAAQ,EAClF,QAAQ,EACR,UAAU,EAAE,OAAO,IAAI,gBAAgB,IAAI,CAC1C,KAAC,YAAY,IACX,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;oBACxC,CAAC,YAEA,CAAC,CAAC,oBAAoB,CAAC,GACX,CAChB,IACc,GACI,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\nimport { StyledTab } from './Tab';\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-visible {\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\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n background-color: ${theme.base.palette['primary-background']};\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 ${theme.components.tabs.detached &&\n tablistType === 'horizontal' &&\n css`\n background: ${theme.base.palette['primary-background']};\n border: none;\n border-radius: ${theme.components.card['border-radius']};\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n &&& ${StyledCardContent} {\n padding: 0;\n }\n\n ${StyledTabs} {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin-block-end: ${theme.base.spacing};\n\n ${StyledTab} {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n color: ${theme.base.palette.interactive};\n span:first-of-type {\n color: ${theme.base.palette.interactive};\n }\n &[aria-selected='true'],\n &:focus,\n &:not([disabled]):focus,\n &:hover:not(:disabled) {\n background: ${transparentize(0.8, theme.base.palette.interactive)};\n color: ${theme.base.palette['foreground-color']};\n span:first-of-type {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n }\n }\n\n ${StyledAllTabsWrapper} {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin-block-end: ${theme.base.spacing};\n ${StyledTabs} {\n margin-block-end: 0;\n }\n }\n\n ${level > 1 &&\n css`\n :has(&) {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n padding: 0;\n\n ${StyledTabs} {\n margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n\n ${StyledAllTabsWrapper} {\n margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n ${StyledTabs} {\n margin: 0;\n }\n }\n }\n `}\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: ForwardRefForwardPropsComponent<TabPanelProps> = 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: boolean) => {\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"]}
1	+ {"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 { 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 { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { StyledCard } from '../Card/Card';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\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-visible {\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\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n background-color: ${theme.base.palette['primary-background']};\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 ${theme.components.tabs.detached &&\n tablistType === 'horizontal' &&\n css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n &&& ${StyledCardContent} {\n padding: 0;\n ${StyledCard} {\n border: 0;\n padding: 0;\n }\n }\n\n &&& ${StyledCard} {\n padding: calc(2 * ${theme.base.spacing});\n padding-block-start: ${theme.base.spacing};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n background: ${theme.components.card.background};\n }\n\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin-block-end: 0;\n }\n }\n\n ${level > 1 &&\n css`\n :has(&) {\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin: 0;\n }\n }\n }\n `}\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: ForwardRefForwardPropsComponent<TabPanelProps> = 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: boolean) => {\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.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,yGAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;~~SA2Fb~~,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;~~SAoBd~~,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}
1	+ {"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,yGAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;SAsHb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;SA+Bd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}

package/lib/components/Tabs/Tabs.styles.js CHANGED Viewed

@@ -32,10 +32,28 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
         margin-inline-start: calc(2 * ${theme.base.spacing});
       }
       &[aria-orientation='horizontal'] {
-        background-color: ${theme.base.palette['secondary-background']};
+        background-color: ${theme.base.palette['primary-background']};
         border-radius: var(--border-radius, ${theme.base['border-radius']});
         border-end-end-radius: 0;
         border-end-start-radius: 0;
+        > ${StyledTab} {
+          background-color: ${theme.base.palette['primary-background']};
+          &[aria-selected='true'] {
+            background-color: ${theme.base.palette['secondary-background']};
+          }
+          ${!hasScrollBar &&
+            css `
+            :first-child {
+              border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});
+            }
+          `}
+          ${hasScrollBar &&
+            css `
+            :last-child {
+              border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});
+            }
+          `}
+        }
       }
     `}
@@ -74,24 +92,27 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
             : `0.0625rem solid ${theme.base.palette['border-line']}`};
             ${level > 1 &&
             css `
-              background-color: ${theme.base.palette['secondary-background']};
+              background-color: ${theme.components.tabs.detached
+                ? theme.base.palette['primary-background']
+                : theme.base.palette['secondary-background']};
               border: ${theme.components.tabs.detached
                 ? 'none'
                 : `0.0625rem solid ${theme.base.palette['border-line']}`};
               border-block-end: none;
               border-radius: 0;
-              border-start-start-radius: calc(0.5rem * 0.5);
-              border-start-end-radius: calc(0.5rem * 0.5);
+              border-start-start-radius: ${theme.components.tabs.detached
+                ? `var(--border-radius, ${theme.base['border-radius']})`
+                : 'calc(0.5rem * 0.5)'};
+              border-start-end-radius: ${theme.components.tabs.detached
+                ? `var(--border-radius, ${theme.base['border-radius']})`
+                : 'calc(0.5rem * 0.5)'};
             `}
           `}
       ${theme.components.tabs.detached &&
         css `
         padding-block: 0;
-        ${level > 1 &&
-            css `
-          width: fit-content;
-        `}
+        border: 0.0625rem solid ${theme.base.palette['border-line']};
+        border-block-end: none;
         ${StylesAllTabsButtonWrapper} + & {
           padding-inline-start: calc(0.25 * ${theme.base.spacing});
@@ -99,6 +120,12 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
         ${StyledTab} + ${StyledTab} {
           margin-inline-start: 0;
         }
+        ${hasScrollBar &&
+            css `
+          border: none;
+          border-inline-start: none;
+          max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});
+        `}
       `}
     }
@@ -127,7 +154,9 @@ StyledErrorIcon.defaultProps = defaultThemeProp;
 export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
     ${level > 1 &&
     css `
-      background-color: ${theme.base.palette['secondary-background']};
+      background-color: ${theme.components.tabs.detached
+        ? theme.base.palette['primary-background']
+        : theme.base.palette['secondary-background']};
       ${!theme.components.tabs.detached &&
         css `
         border-inline: 0.0625rem solid ${theme.base.palette['border-line']};
@@ -141,6 +170,15 @@ export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
         border-inline-end: none;
       }
     `}
+    ${theme.components.tabs.detached &&
+    css `
+      background-color: ${theme.base.palette['primary-background']};
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-end: none;
+      ${StylesAllTabsButtonWrapper} {
+        border-radius: 0;
+      }
+    `}
   `);
 StyledAllTabsWrapper.defaultProps = defaultThemeProp;
 export const StyledSeparator = styled.span(({ theme, transparent }) => css `