@pega/cosmos-react-core 9.15.0 → 9.16.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 (7) hide show
  1. package/lib/components/Lightbox/Lightbox.styles.d.ts.map +1 -1
  2. package/lib/components/Lightbox/Lightbox.styles.js +1 -0
  3. package/lib/components/Lightbox/Lightbox.styles.js.map +1 -1
  4. package/lib/components/Preview/PreviewPanel.d.ts.map +1 -1
  5. package/lib/components/Preview/PreviewPanel.js +6 -1
  6. package/lib/components/Preview/PreviewPanel.js.map +1 -1
  7. package/package.json +1 -1
package/lib/components/Lightbox/Lightbox.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;YAA2B,OAAO;YAuBzD,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,6NAWrB,CAAC;AAIH,eAAO,MAAM,eAAe;;0KAgE1B,CAAC;AAIH,eAAO,MAAM,eAAe,6NAW1B,CAAC;AAIH,eAAO,MAAM,oBAAoB;YAAwB,OAAO;YAuC9D,CAAC;AAEH,eAAO,MAAM,YAAY,yOAKxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAE5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;uJAG/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;YAA8B,OAAO;;;iDAW9D,CAAC"}
1
+ {"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;YAA2B,OAAO;YAuBzD,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,6NAWrB,CAAC;AAIH,eAAO,MAAM,eAAe;;0KAgE1B,CAAC;AAIH,eAAO,MAAM,eAAe,6NAW1B,CAAC;AAIH,eAAO,MAAM,oBAAoB;YAAwB,OAAO;YAwC9D,CAAC;AAEH,eAAO,MAAM,YAAY,yOAKxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAE5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;uJAG/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;YAA8B,OAAO;;;iDAW9D,CAAC"}
package/lib/components/Lightbox/Lightbox.styles.js CHANGED
@@ -145,6 +145,7 @@ export const StyledMediaContainer = styled.div(({ theme, global }) => {
145
145
  ${!global &&
146
146
  css `
147
147
  background-color: ${theme.base.colors.gray['extra-dark']};
148
+ overflow-y: auto;
148
149
  `}
149
150
 
150
151
  & > div {
package/lib/components/Lightbox/Lightbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport Text, { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\nimport { StyledLink } from '../Link/Link';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledHeader = styled.header<{ global: boolean }>(({ theme, global }) => {\n const color: string | undefined = tryCatch(() =>\n rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n );\n\n return css`\n position: relative;\n width: 100%;\n padding: ${theme.base.spacing};\n color: ${color};\n ${!global &&\n css`\n background-color: ${theme.base.colors.gray['extra-dark']};\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n `}\n\n ${StyledMetaList} {\n justify-content: center;\n li {\n color: ${color};\n }\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xs};\n text-align: center;\n min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n }\n `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette.light};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n min-width: 0;\n\n ${StyledLink} {\n color: inherit;\n text-decoration: underline;\n }\n `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n const { rtl } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block: 0;\n min-width: ${theme.base['hit-area']['mouse-min']};\n color: ${theme.base.palette['foreground-color']};\n box-shadow: none;\n border-radius: 0;\n\n @media (pointer: coarse) {\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n &[hidden] {\n display: none;\n }\n\n & > span {\n display: inline-block;\n background-color: ${bg};\n\n ${StyledIcon} {\n color: ${theme.base.palette.light};\n width: 2rem;\n height: 3rem;\n\n ${rtl &&\n css`\n transform: rotateZ(180deg);\n `}\n }\n }\n\n &:nth-of-type(1) {\n inset-inline-start: 0;\n text-align: start;\n & > span {\n border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:nth-of-type(2) {\n inset-inline-end: 0;\n text-align: end;\n & > span {\n border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:hover > span {\n background-color: ${hoverBg};\n }\n\n &:focus > span {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled.div(({ theme }) => {\n return css`\n button {\n padding: ${theme.base.spacing};\n color: ${theme.base.palette.light};\n\n &:focus:enabled {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMediaContainer = styled.div<{ global: boolean }>(({ theme, global }) => {\n return css`\n position: relative;\n\n ${!global &&\n css`\n background-color: ${theme.base.colors.gray['extra-dark']};\n `}\n\n & > div {\n position: absolute;\n inset: 0;\n }\n\n ${StyledErrorState} {\n margin: auto;\n & > ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n\n img,\n video,\n audio {\n display: block;\n max-width: calc(100% - 5rem);\n max-height: 100%;\n margin: auto;\n }\n\n img,\n video {\n ${!global &&\n css`\n margin-block-start: calc(${theme.base.spacing} * 4);\n max-width: calc(100% - calc(${theme.base.spacing} * 4));\n `}\n }\n `;\n});\n\nexport const StyledObject = styled.object`\n display: block;\n margin: auto;\n width: calc(100% - 5rem);\n height: 100%;\n`;\n\nStyledMediaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const StyledLiveRegion = styled.div`\n ${hideVisually}\n`;\n\nexport const StyledLightboxTitle = styled(Text)`\n max-width: 100%;\n ${ellipsisOverflow};\n`;\n\nexport const StyledLightbox = styled(Backdrop)<{ global: boolean }>(({ global, theme }) => {\n return css`\n ${global &&\n css`\n z-index: ${theme.base['z-index'].max};\n `}\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport Text, { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\nimport { StyledLink } from '../Link/Link';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledHeader = styled.header<{ global: boolean }>(({ theme, global }) => {\n const color: string | undefined = tryCatch(() =>\n rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n );\n\n return css`\n position: relative;\n width: 100%;\n padding: ${theme.base.spacing};\n color: ${color};\n ${!global &&\n css`\n background-color: ${theme.base.colors.gray['extra-dark']};\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n `}\n\n ${StyledMetaList} {\n justify-content: center;\n li {\n color: ${color};\n }\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xs};\n text-align: center;\n min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n }\n `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette.light};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n min-width: 0;\n\n ${StyledLink} {\n color: inherit;\n text-decoration: underline;\n }\n `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n const { rtl } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block: 0;\n min-width: ${theme.base['hit-area']['mouse-min']};\n color: ${theme.base.palette['foreground-color']};\n box-shadow: none;\n border-radius: 0;\n\n @media (pointer: coarse) {\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n &[hidden] {\n display: none;\n }\n\n & > span {\n display: inline-block;\n background-color: ${bg};\n\n ${StyledIcon} {\n color: ${theme.base.palette.light};\n width: 2rem;\n height: 3rem;\n\n ${rtl &&\n css`\n transform: rotateZ(180deg);\n `}\n }\n }\n\n &:nth-of-type(1) {\n inset-inline-start: 0;\n text-align: start;\n & > span {\n border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:nth-of-type(2) {\n inset-inline-end: 0;\n text-align: end;\n & > span {\n border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:hover > span {\n background-color: ${hoverBg};\n }\n\n &:focus > span {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled.div(({ theme }) => {\n return css`\n button {\n padding: ${theme.base.spacing};\n color: ${theme.base.palette.light};\n\n &:focus:enabled {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMediaContainer = styled.div<{ global: boolean }>(({ theme, global }) => {\n return css`\n position: relative;\n\n ${!global &&\n css`\n background-color: ${theme.base.colors.gray['extra-dark']};\n overflow-y: auto;\n `}\n\n & > div {\n position: absolute;\n inset: 0;\n }\n\n ${StyledErrorState} {\n margin: auto;\n & > ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n\n img,\n video,\n audio {\n display: block;\n max-width: calc(100% - 5rem);\n max-height: 100%;\n margin: auto;\n }\n\n img,\n video {\n ${!global &&\n css`\n margin-block-start: calc(${theme.base.spacing} * 4);\n max-width: calc(100% - calc(${theme.base.spacing} * 4));\n `}\n }\n `;\n});\n\nexport const StyledObject = styled.object`\n display: block;\n margin: auto;\n width: calc(100% - 5rem);\n height: 100%;\n`;\n\nStyledMediaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const StyledLiveRegion = styled.div`\n ${hideVisually}\n`;\n\nexport const StyledLightboxTitle = styled(Text)`\n max-width: 100%;\n ${ellipsisOverflow};\n`;\n\nexport const StyledLightbox = styled(Backdrop)<{ global: boolean }>(({ global, theme }) => {\n return css`\n ${global &&\n css`\n z-index: ${theme.base['z-index'].max};\n `}\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}
package/lib/components/Preview/PreviewPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,eAAO,MAAM,mBAAmB,mVA2B9B,CAAC;;;;AA4HH,wBAAiE"}
1
+ {"version":3,"file":"PreviewPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,eAAO,MAAM,mBAAmB,mVA2B9B,CAAC;;;;AAqIH,wBAAiE"}
package/lib/components/Preview/PreviewPanel.js CHANGED
@@ -72,6 +72,11 @@ const StyledCloseButton = styled(Button)(({ theme }) => {
72
72
  `;
73
73
  });
74
74
  StyledCloseButton.defaultProps = defaultThemeProp;
75
+ const StyledContentOverflow = styled(Flex) `
76
+ min-height: 0;
77
+ overflow-y: auto;
78
+ `;
79
+ StyledContentOverflow.defaultProps = defaultThemeProp;
75
80
  const PreviewPanel = forwardRef(function PreviewPanel({ testId, previewLabel, open, children, progress, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, ...restProps }, ref) {
76
81
  const testIds = useTestIds(testId, getPreviewPanelTestIds);
77
82
  const t = useI18n();
@@ -104,7 +109,7 @@ const PreviewPanel = forwardRef(function PreviewPanel({ testId, previewLabel, op
104
109
  previewTriggerRef.current?.focus();
105
110
  }, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times', size: 'font-size' }) }), _jsx(Progress, { "data-testid": testIds.progress, placement: 'local', visible: !!progress, focusOnVisible: true, delay: true, onTransitionStartIn: () => {
106
111
  setProgressVisible(true);
107
- }, onTransitionEndOut: () => setProgressVisible(false) }), !progress && children] }));
112
+ }, onTransitionEndOut: () => setProgressVisible(false) }), _jsx(StyledContentOverflow, { item: { grow: 1, basis: '0' }, children: !progress && children })] }));
108
113
  });
109
114
  export default withTestIds(PreviewPanel, getPreviewPanelTestIds);
110
115
  //# sourceMappingURL=PreviewPanel.js.map
package/lib/components/Preview/PreviewPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n resizeDrawerDefaultWidth,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: auto;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-bottom-offset, 0);\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 1ms);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${StyledResizeHandle} {\n z-index: calc(${theme.base['z-index'].max - 1});\n }\n\n @media (width >= ${theme.base.breakpoints.md}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n return css`\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n border: none;\n\n /* Places above resize handle */\n z-index: ${theme.base['z-index'].max};\n box-shadow: ${theme.base.shadow.low};\n inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n {\n testId,\n previewLabel,\n open,\n children,\n progress,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<PreviewPanelProps>,\n ref: Ref<HTMLDivElement>\n) {\n const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n const t = useI18n();\n const direction = useDirection();\n const previewRef = useConsolidatedRef(ref);\n const { previewTriggerRef } = usePreviewContext();\n\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const [progressVisible, setProgressVisible] = useState(false);\n\n const setFocus = () => {\n if (progressVisible) return;\n\n const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n const focusable = focusables[0] ?? closeButtonEl;\n focusable?.focus();\n };\n\n useEffect(() => {\n if (!progressVisible) {\n setFocus();\n }\n }, [progressVisible]);\n\n useFocusTrap(previewRef, true, [], false);\n\n return (\n <Drawer\n data-testid={testIds.root}\n onBeforeOpen={() => {\n onBeforeOpen?.();\n }}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={previewRef}\n position='fixed'\n placement={direction.end}\n size={resizeDrawerDefaultWidth}\n aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n open={open}\n resizeable\n shadow\n nullWhenClosed\n {...restProps}\n >\n <StyledCloseButton\n data-testid={testIds.close}\n icon\n compact\n onClick={() => {\n onBeforeClose?.();\n onAfterClose?.();\n previewTriggerRef.current?.focus();\n }}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' size='font-size' />\n </StyledCloseButton>\n\n <Progress\n data-testid={testIds.progress}\n placement='local'\n visible={!!progress}\n focusOnVisible\n delay\n onTransitionStartIn={() => {\n setProgressVisible(true);\n }}\n onTransitionEndOut={() => setProgressVisible(false)}\n />\n {!progress && children}\n </Drawer>\n );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\n"]}
1
+ {"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n resizeDrawerDefaultWidth,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: auto;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-bottom-offset, 0);\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 1ms);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${StyledResizeHandle} {\n z-index: calc(${theme.base['z-index'].max - 1});\n }\n\n @media (width >= ${theme.base.breakpoints.md}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n return css`\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n border: none;\n\n /* Places above resize handle */\n z-index: ${theme.base['z-index'].max};\n box-shadow: ${theme.base.shadow.low};\n inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst StyledContentOverflow = styled(Flex)`\n min-height: 0;\n overflow-y: auto;\n`;\n\nStyledContentOverflow.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n {\n testId,\n previewLabel,\n open,\n children,\n progress,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<PreviewPanelProps>,\n ref: Ref<HTMLDivElement>\n) {\n const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n const t = useI18n();\n const direction = useDirection();\n const previewRef = useConsolidatedRef(ref);\n const { previewTriggerRef } = usePreviewContext();\n\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const [progressVisible, setProgressVisible] = useState(false);\n\n const setFocus = () => {\n if (progressVisible) return;\n\n const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n const focusable = focusables[0] ?? closeButtonEl;\n focusable?.focus();\n };\n\n useEffect(() => {\n if (!progressVisible) {\n setFocus();\n }\n }, [progressVisible]);\n\n useFocusTrap(previewRef, true, [], false);\n\n return (\n <Drawer\n data-testid={testIds.root}\n onBeforeOpen={() => {\n onBeforeOpen?.();\n }}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={previewRef}\n position='fixed'\n placement={direction.end}\n size={resizeDrawerDefaultWidth}\n aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n open={open}\n resizeable\n shadow\n nullWhenClosed\n {...restProps}\n >\n <StyledCloseButton\n data-testid={testIds.close}\n icon\n compact\n onClick={() => {\n onBeforeClose?.();\n onAfterClose?.();\n previewTriggerRef.current?.focus();\n }}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' size='font-size' />\n </StyledCloseButton>\n\n <Progress\n data-testid={testIds.progress}\n placement='local'\n visible={!!progress}\n focusOnVisible\n delay\n onTransitionStartIn={() => {\n setProgressVisible(true);\n }}\n onTransitionEndOut={() => setProgressVisible(false)}\n />\n <StyledContentOverflow item={{ grow: 1, basis: '0' }}>\n {!progress && children}\n </StyledContentOverflow>\n </Drawer>\n );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "9.15.0",
3
+ "version": "9.16.0",
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",