@pega/cosmos-react-core 9.0.0-build.5.2 → 9.0.0-build.5.3
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.
|
@@ -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;AAKxE,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;AAS/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;
|
|
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;AAS/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;SAsFf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CA4E3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
|
|
@@ -54,6 +54,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
|
|
|
54
54
|
padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
|
|
55
55
|
|
|
56
56
|
&&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {
|
|
57
|
+
padding: 0;
|
|
57
58
|
@media (width < ${theme.base.breakpoints.sm}) {
|
|
58
59
|
padding: 0;
|
|
59
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, 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';\nimport { StyledCardHeader } from '../Card/CardHeader';\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['primary-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 &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n @media (width < ${theme.base.breakpoints.sm}) {\n padding: 0;\n }\n }\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 &&& > ${StyledCard} {\n padding: 0;\n border: 0;\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 const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\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={currentTab}\n inert={currentTab ? undefined : ''}\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';\nimport { StyledCardHeader } from '../Card/CardHeader';\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['primary-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 &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n padding: 0;\n @media (width < ${theme.base.breakpoints.sm}) {\n padding: 0;\n }\n }\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 &&& > ${StyledCard} {\n padding: 0;\n border: 0;\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 const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\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={currentTab}\n inert={currentTab ? undefined : ''}\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.5.
|
|
3
|
+
"version": "9.0.0-build.5.3",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|