@pega/cosmos-react-core 9.7.0 → 9.8.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.
- package/lib/components/AppShell/AppHeader.styles.js +2 -2
- package/lib/components/AppShell/AppHeader.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +14 -14
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShellList.styles.js +2 -2
- package/lib/components/AppShell/AppShellList.styles.js.map +1 -1
- package/lib/components/AppShell/AppShellSearch.styles.js +1 -1
- package/lib/components/AppShell/AppShellSearch.styles.js.map +1 -1
- package/lib/components/AppShell/Drawer.styles.js +1 -1
- package/lib/components/AppShell/Drawer.styles.js.map +1 -1
- package/lib/components/Button/Button.js +2 -2
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Card/Card.js +2 -2
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/DateTime/Picker/TimePicker.js +2 -2
- package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
- package/lib/components/File/FileInput.styles.js +2 -2
- package/lib/components/File/FileInput.styles.js.map +1 -1
- package/lib/components/File/FileVisual.js +1 -1
- package/lib/components/File/FileVisual.js.map +1 -1
- package/lib/components/FormControl/FormControl.js +1 -1
- package/lib/components/FormControl/FormControl.js.map +1 -1
- package/lib/components/Link/Link.js +1 -1
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/Location/LocationView.styles.js +2 -2
- package/lib/components/Location/LocationView.styles.js.map +1 -1
- package/lib/components/Menu/Menu.styles.js +2 -2
- package/lib/components/Menu/Menu.styles.js.map +1 -1
- package/lib/components/Modal/MinimizedModal.js +1 -1
- package/lib/components/Modal/MinimizedModal.js.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.js +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.js.map +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorBackground.js +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map +1 -1
- package/lib/components/Preview/PreviewPanel.js +1 -1
- package/lib/components/Preview/PreviewPanel.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.styles.js +3 -3
- package/lib/components/SearchInput/SearchInput.styles.js.map +1 -1
- package/lib/components/SelectionCard/SelectionCard.styles.js +3 -3
- package/lib/components/SelectionCard/SelectionCard.styles.js.map +1 -1
- package/lib/components/Text/Text.d.ts.map +1 -1
- package/lib/components/Text/Text.js +2 -0
- package/lib/components/Text/Text.js.map +1 -1
- package/lib/components/Toaster/Toaster.js +2 -2
- package/lib/components/Toaster/Toaster.js.map +1 -1
- package/lib/theme/theme.d.ts +132 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +84 -0
- package/lib/theme/themeOverrides.schema.json +72 -0
- package/package.json +1 -1
|
@@ -20,7 +20,7 @@ export const StyledSearchButton = styled(Button)(({ theme: { base: { spacing, 'b
|
|
|
20
20
|
border-color: ${formControl[':hover']['border-color']};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
&:focus:enabled {
|
|
23
|
+
&:focus-visible:enabled {
|
|
24
24
|
box-shadow: ${focusShadow};
|
|
25
25
|
}
|
|
26
26
|
`;
|
|
@@ -39,7 +39,7 @@ export const StyledSearchFiltersButton = styled(MenuButton)(({ theme: { base: {
|
|
|
39
39
|
border-color: ${formControl[':hover']['border-color']};
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
&:focus:enabled {
|
|
42
|
+
&:focus-visible:enabled {
|
|
43
43
|
box-shadow: ${focusShadow};
|
|
44
44
|
}
|
|
45
45
|
`;
|
|
@@ -97,7 +97,7 @@ export const StyledSearchTextInput = styled(Input)(({ theme }) => {
|
|
|
97
97
|
-webkit-appearance: none;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
&:focus:not([disabled]) {
|
|
100
|
+
&:focus-visible:not([disabled]) {
|
|
101
101
|
box-shadow: ${theme.base.shadow['focus-inset']};
|
|
102
102
|
border-color: ${theme.components['form-control']['border-color']};
|
|
103
103
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n && + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\n\n &::-ms-clear {\n display: none;\n }\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list */\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n ${hasFilters\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `}\n `}\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} * 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\n `}\n }\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}
|
|
1
|
+
{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus-visible:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus-visible:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n && + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\n\n &::-ms-clear {\n display: none;\n }\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus-visible:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list */\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n ${hasFilters\n ? css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `\n : css`\n /* stylelint-disable length-zero-no-unit */\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n /* stylelint-enable length-zero-no-unit */\n `}\n `}\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} * 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\n `}\n }\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}
|
|
@@ -26,14 +26,14 @@ export const StyledSelectionCard = styled.div(({ disabled, readOnly, onClick, th
|
|
|
26
26
|
|
|
27
27
|
${!disabled &&
|
|
28
28
|
css `
|
|
29
|
-
&:focus {
|
|
29
|
+
&:focus-visible {
|
|
30
30
|
& ${StyledPseudoRadioCheck} {
|
|
31
31
|
box-shadow: ${shadow};
|
|
32
32
|
border-color: ${focusBorderColor};
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
&:focus,
|
|
36
|
+
&:focus-visible,
|
|
37
37
|
&:not([data-main-focus]):focus-within {
|
|
38
38
|
box-shadow: ${shadow};
|
|
39
39
|
border-color: transparent;
|
|
@@ -93,7 +93,7 @@ export const StyledImageCell = styled.div(({ theme: { base: { palette, transpare
|
|
|
93
93
|
overflow: hidden;
|
|
94
94
|
`
|
|
95
95
|
: css `
|
|
96
|
-
background
|
|
96
|
+
background: ${palette['app-background']};
|
|
97
97
|
position: relative;
|
|
98
98
|
`}
|
|
99
99
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { lineClamp } from '../../styles/mixins';\nimport { calculateFontSize } from '../../styles/utils';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nconst imageContainerSizes = {\n small: '2.75rem',\n large: '8.875rem',\n flexible: 'minmax(2.5rem, auto)'\n} as const;\n\nexport const StyledSelectionCard = styled.div<\n Pick<SelectionCardProps, 'disabled' | 'onClick' | 'readOnly'>\n>(\n ({\n disabled,\n readOnly,\n onClick,\n theme: {\n base: { palette, 'disabled-opacity': disabledOpacity },\n components: {\n card,\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n return css`\n min-width: min-content;\n max-width: max-content;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${palette['border-line']};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n opacity: ${disabledOpacity};\n `}\n\n ${!disabled &&\n css`\n &:focus {\n & ${StyledPseudoRadioCheck} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n }\n\n &:focus,\n &:not([data-main-focus]):focus-within {\n box-shadow: ${shadow};\n border-color: transparent;\n outline: none;\n }\n `}\n\n ${!disabled &&\n onClick &&\n css`\n cursor: pointer;\n `}\n\n ${!disabled &&\n !readOnly &&\n onClick &&\n css`\n &:hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n placement?: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size?: ImageSize;\n}>(({ placement = 'inline-start', size = 'large' }) => {\n const imageContainerSize = imageContainerSizes[size];\n return css`\n /* stylelint-disable-next-line unit-allowed-list */\n grid-template-columns: ${placement === 'inline-end'\n ? `1fr ${imageContainerSize}`\n : `${imageContainerSize} 1fr`};\n grid-template-rows: minmax(2.75rem, auto);\n `;\n});\n\nStyledSelectionCardInline.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n size = 'large'\n}) => {\n let containerSize;\n switch (size) {\n case 'small':\n containerSize = '2.5rem';\n break;\n case 'large':\n containerSize = '15.125rem';\n break;\n default:\n containerSize = 'minmax(2.5rem, 15.125rem)';\n }\n return css`\n grid-template-columns: minmax(2.75rem, 1fr);\n grid-template-rows: ${containerSize} auto;\n `;\n});\n\nexport const StyledImageCell = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n isTile?: boolean;\n}>(\n ({\n theme: {\n base: { palette, transparency },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible',\n isTile\n }) => {\n return css`\n ${isTile\n ? css`\n overflow: hidden;\n `\n : css`\n background-color: ${palette['app-background']};\n position: relative;\n `}\n\n ${size === 'flexible' &&\n placement !== 'block-start' &&\n css`\n max-width: 8.875rem;\n min-height: 100%;\n height: var(--content-height, auto);\n `};\n\n /* Recalculation of the border radius by substracting border width */\n ${placement === 'inline-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'inline-end' &&\n css`\n border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'block-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${!isTile &&\n css`\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--bg-image) center / cover no-repeat;\n filter: blur(1rem);\n opacity: ${transparency['transparent-4']};\n pointer-events: none;\n clip-path: inset(0);\n }\n `}\n `;\n }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledImageContainer = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n}>(\n ({\n theme: {\n base: { transparency, spacing },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n aspect-ratio: 4 / 5;\n max-height: 100%;\n min-height: 2rem;\n min-width: 2rem;\n position: relative;\n padding: min(${spacing}, 10%);\n\n img {\n max-width: 100%;\n max-height: 100%;\n box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n border-radius: calc(${borderRadius} / 2);\n }\n\n ${placement === 'block-start' &&\n css`\n aspect-ratio: 16 / 9;\n > img {\n max-height: 100%;\n }\n `}\n\n ${size === 'flexible' &&\n css`\n min-height: 100%;\n `}\n\n ${size === 'large' &&\n css`\n min-height: 11.0625rem;\n `}\n\n ${size === 'small' &&\n css`\n aspect-ratio: 1 / 1;\n\n > img {\n max-width: 2rem;\n max-height: 2rem;\n }\n `}\n\n ${StyledIcon} {\n opacity: ${transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n width: 100%;\n list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n\n > ${StyledHeader} {\n min-height: 2rem;\n }\n\n ${StyledValueList}, ${StyledFieldValueList} {\n margin-block-end: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTileContent = styled.div<{\n foregroundColor: string;\n backgroundColor: string;\n size?: ImageSize;\n}>(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {\n const fg = foregroundColor;\n const bg = backgroundColor;\n const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(\n theme.base['font-size'],\n theme.base['font-scale']\n );\n const {\n components: {\n icon: { size: iconSize }\n }\n } = theme;\n return css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: calc(1.5 * ${theme.base.spacing});\n width: 100%;\n height: 100%;\n background: ${bg};\n color: ${fg};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: ${fontSizeL};\n\n ${StyledIcon} {\n width: ${iconSize.s};\n height: ${iconSize.s};\n color: inherit;\n }\n\n ${size === 'small' &&\n css`\n padding: ${theme.base.spacing};\n font-size: ${fontSizeXs};\n `}\n `;\n});\n\nStyledTileContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardFooter = styled.div(({ theme }) => {\n return css`\n margin-block-start: auto;\n padding-inline: calc(1.5 * ${theme.base.spacing});\n padding-block-end: ${theme.base.spacing};\n `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledSingleField = styled.div<{ truncate?: boolean }>`\n ${({ truncate }) => truncate && lineClamp(2)}\n`;\n\nexport const getBaseCardContainerStyles = (theme: DefaultTheme) => {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(\n auto-fit,\n minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)\n );\n grid-auto-rows: minmax(2.75rem, auto);\n\n > ${StyledSelectionCard} {\n max-width: 100%;\n }\n `;\n};\n\nconst getInlineCardColumnTrack = ({\n placement,\n size,\n contentWidth\n}: {\n placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size: ImageSize;\n contentWidth: string;\n}): string => {\n const imageContainerSize = imageContainerSizes[size];\n return placement === 'inline-end'\n ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`\n : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;\n};\n\nexport const getInlineImageCardContainerStyles = (\n theme: DefaultTheme,\n {\n placement,\n size\n }: {\n placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size: ImageSize;\n }\n) => {\n const columnTrack = getInlineCardColumnTrack({\n placement,\n size,\n contentWidth: theme.base['content-width'].sm\n });\n const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: ${columnTrack};\n\n @container (min-width: calc(2 * ${singleCardSize})) {\n grid-template-columns: repeat(2, ${columnTrack});\n }\n\n @container (min-width: calc(3 * ${singleCardSize})) {\n grid-template-columns: repeat(3, ${columnTrack});\n }\n\n @container (min-width: calc(4 * ${singleCardSize})) {\n grid-template-columns: repeat(4, ${columnTrack});\n }\n\n > ${StyledSelectionCard} {\n grid-template-columns: subgrid;\n grid-column: span 3;\n column-gap: 0;\n\n ${StyledImageCell} {\n grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};\n }\n\n ${StyledContentCell} {\n grid-column: span 2;\n }\n }\n `;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { lineClamp } from '../../styles/mixins';\nimport { calculateFontSize } from '../../styles/utils';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nconst imageContainerSizes = {\n small: '2.75rem',\n large: '8.875rem',\n flexible: 'minmax(2.5rem, auto)'\n} as const;\n\nexport const StyledSelectionCard = styled.div<\n Pick<SelectionCardProps, 'disabled' | 'onClick' | 'readOnly'>\n>(\n ({\n disabled,\n readOnly,\n onClick,\n theme: {\n base: { palette, 'disabled-opacity': disabledOpacity },\n components: {\n card,\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n return css`\n min-width: min-content;\n max-width: max-content;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${palette['border-line']};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n opacity: ${disabledOpacity};\n `}\n\n ${!disabled &&\n css`\n &:focus-visible {\n & ${StyledPseudoRadioCheck} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n }\n\n &:focus-visible,\n &:not([data-main-focus]):focus-within {\n box-shadow: ${shadow};\n border-color: transparent;\n outline: none;\n }\n `}\n\n ${!disabled &&\n onClick &&\n css`\n cursor: pointer;\n `}\n\n ${!disabled &&\n !readOnly &&\n onClick &&\n css`\n &:hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n placement?: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size?: ImageSize;\n}>(({ placement = 'inline-start', size = 'large' }) => {\n const imageContainerSize = imageContainerSizes[size];\n return css`\n /* stylelint-disable-next-line unit-allowed-list */\n grid-template-columns: ${placement === 'inline-end'\n ? `1fr ${imageContainerSize}`\n : `${imageContainerSize} 1fr`};\n grid-template-rows: minmax(2.75rem, auto);\n `;\n});\n\nStyledSelectionCardInline.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n size = 'large'\n}) => {\n let containerSize;\n switch (size) {\n case 'small':\n containerSize = '2.5rem';\n break;\n case 'large':\n containerSize = '15.125rem';\n break;\n default:\n containerSize = 'minmax(2.5rem, 15.125rem)';\n }\n return css`\n grid-template-columns: minmax(2.75rem, 1fr);\n grid-template-rows: ${containerSize} auto;\n `;\n});\n\nexport const StyledImageCell = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n isTile?: boolean;\n}>(\n ({\n theme: {\n base: { palette, transparency },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible',\n isTile\n }) => {\n return css`\n ${isTile\n ? css`\n overflow: hidden;\n `\n : css`\n background: ${palette['app-background']};\n position: relative;\n `}\n\n ${size === 'flexible' &&\n placement !== 'block-start' &&\n css`\n max-width: 8.875rem;\n min-height: 100%;\n height: var(--content-height, auto);\n `};\n\n /* Recalculation of the border radius by substracting border width */\n ${placement === 'inline-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'inline-end' &&\n css`\n border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'block-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${!isTile &&\n css`\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--bg-image) center / cover no-repeat;\n filter: blur(1rem);\n opacity: ${transparency['transparent-4']};\n pointer-events: none;\n clip-path: inset(0);\n }\n `}\n `;\n }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledImageContainer = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n}>(\n ({\n theme: {\n base: { transparency, spacing },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n aspect-ratio: 4 / 5;\n max-height: 100%;\n min-height: 2rem;\n min-width: 2rem;\n position: relative;\n padding: min(${spacing}, 10%);\n\n img {\n max-width: 100%;\n max-height: 100%;\n box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n border-radius: calc(${borderRadius} / 2);\n }\n\n ${placement === 'block-start' &&\n css`\n aspect-ratio: 16 / 9;\n > img {\n max-height: 100%;\n }\n `}\n\n ${size === 'flexible' &&\n css`\n min-height: 100%;\n `}\n\n ${size === 'large' &&\n css`\n min-height: 11.0625rem;\n `}\n\n ${size === 'small' &&\n css`\n aspect-ratio: 1 / 1;\n\n > img {\n max-width: 2rem;\n max-height: 2rem;\n }\n `}\n\n ${StyledIcon} {\n opacity: ${transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n width: 100%;\n list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n\n > ${StyledHeader} {\n min-height: 2rem;\n }\n\n ${StyledValueList}, ${StyledFieldValueList} {\n margin-block-end: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTileContent = styled.div<{\n foregroundColor: string;\n backgroundColor: string;\n size?: ImageSize;\n}>(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {\n const fg = foregroundColor;\n const bg = backgroundColor;\n const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(\n theme.base['font-size'],\n theme.base['font-scale']\n );\n const {\n components: {\n icon: { size: iconSize }\n }\n } = theme;\n return css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: calc(1.5 * ${theme.base.spacing});\n width: 100%;\n height: 100%;\n background: ${bg};\n color: ${fg};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: ${fontSizeL};\n\n ${StyledIcon} {\n width: ${iconSize.s};\n height: ${iconSize.s};\n color: inherit;\n }\n\n ${size === 'small' &&\n css`\n padding: ${theme.base.spacing};\n font-size: ${fontSizeXs};\n `}\n `;\n});\n\nStyledTileContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardFooter = styled.div(({ theme }) => {\n return css`\n margin-block-start: auto;\n padding-inline: calc(1.5 * ${theme.base.spacing});\n padding-block-end: ${theme.base.spacing};\n `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledSingleField = styled.div<{ truncate?: boolean }>`\n ${({ truncate }) => truncate && lineClamp(2)}\n`;\n\nexport const getBaseCardContainerStyles = (theme: DefaultTheme) => {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(\n auto-fit,\n minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)\n );\n grid-auto-rows: minmax(2.75rem, auto);\n\n > ${StyledSelectionCard} {\n max-width: 100%;\n }\n `;\n};\n\nconst getInlineCardColumnTrack = ({\n placement,\n size,\n contentWidth\n}: {\n placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size: ImageSize;\n contentWidth: string;\n}): string => {\n const imageContainerSize = imageContainerSizes[size];\n return placement === 'inline-end'\n ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`\n : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;\n};\n\nexport const getInlineImageCardContainerStyles = (\n theme: DefaultTheme,\n {\n placement,\n size\n }: {\n placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n size: ImageSize;\n }\n) => {\n const columnTrack = getInlineCardColumnTrack({\n placement,\n size,\n contentWidth: theme.base['content-width'].sm\n });\n const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: ${columnTrack};\n\n @container (min-width: calc(2 * ${singleCardSize})) {\n grid-template-columns: repeat(2, ${columnTrack});\n }\n\n @container (min-width: calc(3 * ${singleCardSize})) {\n grid-template-columns: repeat(3, ${columnTrack});\n }\n\n @container (min-width: calc(4 * ${singleCardSize})) {\n grid-template-columns: repeat(4, ${columnTrack});\n }\n\n > ${StyledSelectionCard} {\n grid-template-columns: subgrid;\n grid-column: span 3;\n column-gap: 0;\n\n ${StyledImageCell} {\n grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};\n }\n\n ${StyledContentCell} {\n grid-column: span 2;\n }\n }\n `;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,4PAwCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAOnD,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -23,6 +23,8 @@ export const StyledText = styled.span(props => {
|
|
|
23
23
|
font-size: ${fontSizes[text[variant]['font-size']]};
|
|
24
24
|
font-weight: ${text[variant]['font-weight']};
|
|
25
25
|
font-family: ${text[variant]['font-family'] || fontFamily};
|
|
26
|
+
text-transform: ${text[variant]['text-transform']};
|
|
27
|
+
letter-spacing: ${text[variant]['letter-spacing']};
|
|
26
28
|
color: ${color};
|
|
27
29
|
`;
|
|
28
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAShC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;mBAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAShC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;mBAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU;sBACvC,IAAI,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC;sBAC/B,IAAI,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC;aACxC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB;IAErB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAqB,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport type {\n HeadingTag,\n BaseProps,\n ForwardRefForwardPropsComponent,\n AsProp,\n PropsWithDefaults\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n /** Text content. */\n children: ReactNode;\n /**\n * Typographical sizes and styles.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | HeadingTag;\n /** Render text with semantic color based on a status. */\n status?: 'error' | 'warning' | 'success';\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n const {\n variant,\n status,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n transparency: { 'transparent-2': secondaryAlpha }\n },\n components: { text }\n }\n } = props;\n\n let color: string | undefined;\n\n if (status) {\n color = {\n error,\n warning,\n success\n }[status];\n }\n\n if (variant === 'secondary') {\n color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n }\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n font-weight: ${text[variant]['font-weight']};\n font-family: ${text[variant]['font-family'] || fontFamily};\n text-transform: ${text[variant]['text-transform']};\n letter-spacing: ${text[variant]['letter-spacing']};\n color: ${color};\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: ForwardRefForwardPropsComponent<TextProps> = forwardRef(function Text(\n { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n ref: TextProps['ref']\n) {\n // If variant is for a heading, and no as is passed, set as to heading tag.\n if (!as && /h\\d/i.test(variant)) as = variant as HeadingTag;\n return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n});\n\nexport default Text;\n"]}
|
|
@@ -31,7 +31,7 @@ const StyledToastButton = styled.button(({ theme }) => css `
|
|
|
31
31
|
background: #ffffff19;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
&:enabled:focus {
|
|
34
|
+
&:enabled:focus-visible {
|
|
35
35
|
box-shadow: ${theme.base.shadow.focus};
|
|
36
36
|
}
|
|
37
37
|
`);
|
|
@@ -69,7 +69,7 @@ const StyledToast = styled.div(({ theme }) => {
|
|
|
69
69
|
transition-timing-function: ${theme.base.animation.timing.ease};
|
|
70
70
|
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
71
71
|
|
|
72
|
-
:focus {
|
|
72
|
+
:focus-visible {
|
|
73
73
|
box-shadow: ${theme.base.shadow.focus};
|
|
74
74
|
}
|
|
75
75
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n useReducer,\n useMemo,\n useLayoutEffect,\n useRef,\n useState,\n forwardRef,\n useEffect\n} from 'react';\nimport type {\n FunctionComponent,\n CSSProperties,\n TransitionEvent,\n Context,\n PropsWithoutRef,\n Ref,\n Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport Link, { StyledLink } from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport {\n createUID,\n windowIsAvailable,\n withTestIds,\n hasProp,\n getActiveElement,\n getFocusables\n} from '../../utils';\nimport {\n useConfiguration,\n useI18n,\n useLiveLog,\n useOS,\n useShortcut,\n useTestIds,\n useConsolidatedRef,\n useEscape,\n useFocusWithin\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport '../../init';\nimport { registerAction } from '../ShortcutManager';\nimport { Keyboard } from '../Badges';\nimport { StyledKeyboard } from '../Badges/Keyboard';\n\nimport type { ToastMessage, ToasterProps, BaseToastMessage, CreatedMessage } from './Toaster.types';\nimport { ToasterContext } from './Context';\nimport type { ToasterContextValue } from './Context';\nimport { getToasterTestIds } from './Toaster.test-ids';\n\nregisterIcon(timesIcon);\nregisterAction(\n { id: 'JumpToToast', defaultKeyBinding: 'Alt+Enter' },\n { id: 'DismissToast', defaultKeyBinding: 'Alt+Q' }\n);\n\ntype ToastState = (BaseToastMessage | CreatedMessage) & {\n id: NonNullable<ToastMessage['id']>;\n dismissAfter?: number;\n};\n\ntype ToastReducerAction =\n | { type: 'push'; payload: ToastState }\n | { type: 'unmount'; payload: ToastState['id'] };\n\ntype ToastProps = ToastState & {\n // determines if this is the first toast in the list, used to dismiss the first toast with a shortcut, not exposed outside\n firstToast: boolean;\n topLevelDismiss: ToasterProps['onDismiss'];\n translateY: number;\n dispatch: Dispatch<ToastReducerAction>;\n ref: Ref<HTMLDivElement>;\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n toasterContext?: Context<ToasterContextValue>;\n }\n}\n\nconst StyledToastButton = styled.button(\n ({ theme }) => css`\n border: none;\n color: inherit;\n padding: 0;\n font-size: 1rem;\n margin-block: calc(${theme.base.spacing} / 2);\n margin-inline-end: calc(${theme.base.spacing} / 2);\n\n &:enabled:hover {\n background: #ffffff19;\n }\n\n &:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n return css`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: clip;\n text-overflow: ellipsis;\n font-size: ${theme.base['font-size']};\n margin-inline-start: calc(${theme.base['border-radius']} / 2);\n padding-inline-start: calc(${theme.base.spacing} / 2);\n\n ${StyledLink} {\n color: ${theme.base.colors.blue.light};\n }\n `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n background: ${theme.base.colors.slate['extra-dark']};\n color: ${theme.base.colors.white};\n border-radius: calc(${theme.base['border-radius']} / 2);\n opacity: var(--opacity);\n transform: translateY(var(--translateY)) scale(var(--scale));\n transition-property: transform, opacity;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n }\n `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].toast};\n width: min(40ch, calc(100% - 1rem));\n inset-inline-start: 50%;\n transform: translateX(-50%);\n top: calc(100dvh - var(--appshell-bottom-offset, 0rem));\n `;\n});\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n switch (action.type) {\n case 'push':\n return [\n ...current,\n {\n ...action.payload\n }\n ];\n\n case 'unmount':\n return current.filter(m => m.id !== action.payload);\n\n default:\n return current;\n }\n}\n\nconst Toast = forwardRef(function Toast(\n {\n id,\n firstToast,\n dispatch,\n topLevelDismiss,\n translateY,\n onDismiss,\n dismissAfter,\n ...restProps\n }: PropsWithoutRef<ToastProps>,\n ref: ToastProps['ref']\n) {\n const [dismissed, setDismissed] = useState(false);\n const timeoutRef = useRef(NaN);\n const t = useI18n();\n const { macintosh } = useOS();\n const { announcePolite } = useLiveLog();\n const content = hasProp(restProps, 'href') ? t('created') : restProps.content;\n const initiatorRef = useRef<HTMLElement | null>(null);\n const containerRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n let fullMessage = content;\n if (hasProp(restProps, 'href')) {\n // CreatedMessage\n fullMessage = restProps.caseId\n ? `${content} ${restProps.caseId} ${restProps.label}`\n : `${content} ${restProps.label}`;\n }\n\n const shortcutJumpMessage = t('keypress_instruction', [\n macintosh ? 'Option + Enter' : 'Alt + Enter',\n t('shortcut_JumpToToast')\n ]);\n\n const shortcutDismissMessage = t('keypress_instruction', [\n macintosh ? 'Option + Q' : 'Alt + Q',\n t('shortcut_DismissToast')\n ]);\n\n announcePolite({\n message: `${fullMessage}. ${shortcutJumpMessage}. ${shortcutDismissMessage}.`,\n type: 'acknowledgement'\n });\n }, []);\n\n const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n dispatch({ type: 'unmount', payload: id });\n }\n };\n\n const dismiss = (timeout: boolean) => () => {\n if (initiatorRef.current) {\n initiatorRef.current?.focus?.();\n initiatorRef.current = null;\n }\n clearTimeout(timeoutRef.current);\n if (dismissed) return;\n setDismissed(true);\n onDismiss?.({ id, timeout });\n topLevelDismiss?.({ id, timeout });\n };\n\n const startTimer = () => {\n if (dismissAfter) {\n timeoutRef.current = window.setTimeout(dismiss(true), dismissAfter);\n }\n };\n\n useEffect(() => {\n startTimer();\n return () => {\n window.clearTimeout(timeoutRef.current);\n };\n }, []);\n\n // Alt+Enter focuses on the first focusable element in the first toast.\n // Tab to the next toast if there are multiple.\n useShortcut('JumpToToast', () => {\n const activeElement = getActiveElement();\n if (activeElement && activeElement !== document.body) {\n initiatorRef.current = activeElement as HTMLElement;\n }\n if (firstToast && containerRef.current) {\n getFocusables(containerRef.current)[0]?.focus();\n }\n });\n\n // Alt+Q dismisses the first toast.\n useShortcut('DismissToast', () => {\n if (firstToast) dismiss(false)();\n });\n\n // Escape dismisses the toast and focuses the initiator.\n useEscape(() => {\n const currentFocus = getActiveElement();\n if (containerRef.current?.contains(currentFocus)) {\n dismiss(false)();\n }\n });\n\n useFocusWithin([containerRef], (focused: boolean) => {\n if (focused) {\n window.clearTimeout(timeoutRef.current);\n } else {\n startTimer();\n }\n });\n\n return (\n <Flex\n {...restProps}\n data-app-region\n container={{ alignItems: 'center', gap: 0.25 }}\n as={StyledToast}\n ref={containerRef}\n style={\n {\n '--translateY': `${-translateY}px`,\n '--opacity': dismissed ? '0' : '1',\n '--scale': dismissed ? '0' : '1'\n } as CSSProperties\n }\n onTransitionEnd={onTransitionEnd}\n >\n <Flex item={{ grow: 1 }} as={StyledToastContent}>\n {content}\n {hasProp(restProps, 'href') ? (\n <>\n \n <Link href={restProps.href}>\n {restProps.caseId ? `(${restProps.caseId}): ${restProps.label}` : restProps.label}\n </Link>\n </>\n ) : undefined}\n </Flex>\n <Flex container={{ inline: true, justify: 'end', gap: 0.5 }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='Enter' />\n </Flex>\n <Button\n as={StyledToastButton}\n variant='simple'\n onClick={dismiss(false)}\n icon\n aria-label={t('dismiss_label')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n );\n});\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n testId,\n children,\n onDismiss\n}: ToasterProps) => {\n const { portalTarget } = useConfiguration();\n const [messages, dispatch] = useReducer(reducer, []);\n const [yOffsets, setYOffsets] = useState<number[]>([]);\n const heightHashRef = useRef<{\n [id: string]: number;\n }>({});\n const testIds = useTestIds(testId, getToasterTestIds);\n\n // This effect will cause a re-render with a translateY value set for each toast.\n useLayoutEffect(() => {\n const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n setYOffsets(\n heights\n .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n .reverse()\n );\n }, [messages.length]);\n\n const providerValue = useMemo(\n () => ({\n push(incoming: ToastMessage) {\n const message: ToastState = {\n ...incoming,\n id: incoming.id ?? createUID(),\n dismissAfter: hasProp(incoming, 'href') ? 15_000 : 7_500\n };\n\n dispatch({\n type: 'push',\n payload: message\n });\n },\n initialized: true\n }),\n []\n );\n\n // Don't create additional ToasterContext.Providers.\n const context = windowIsAvailable\n ? window.cosmos.toasterContext ?? ToasterContext\n : ToasterContext;\n const priorCtx = useContext(context);\n if (priorCtx.initialized) {\n return <context.Provider value={priorCtx}>{children}</context.Provider>;\n }\n\n return (\n <>\n <context.Provider value={providerValue}>{children}</context.Provider>\n {!!messages.length &&\n portalTarget &&\n createPortal(\n <StyledToaster data-testid={testIds.root}>\n {messages.map((message, i) => {\n const sharedProps = {\n translateY: yOffsets[i] ?? 0,\n firstToast: i === 0,\n topLevelDismiss: onDismiss,\n dispatch,\n ref: el => {\n if (el) {\n heightHashRef.current[message.id] = el.offsetHeight;\n } else {\n delete heightHashRef.current[message.id];\n }\n }\n } satisfies Partial<ToastProps>;\n\n if (hasProp(message, 'href')) {\n return (\n // Toast with Link\n <Toast\n data-testid={testIds.toast}\n {...message}\n {...sharedProps}\n key={message.id}\n />\n );\n }\n\n return (\n // Base Toast\n <Toast data-testid={testIds.toast} {...message} {...sharedProps} key={message.id} />\n );\n })}\n </StyledToaster>,\n portalTarget\n )}\n </>\n );\n};\n\nexport default withTestIds(Toaster, getToasterTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n useReducer,\n useMemo,\n useLayoutEffect,\n useRef,\n useState,\n forwardRef,\n useEffect\n} from 'react';\nimport type {\n FunctionComponent,\n CSSProperties,\n TransitionEvent,\n Context,\n PropsWithoutRef,\n Ref,\n Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport Link, { StyledLink } from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport {\n createUID,\n windowIsAvailable,\n withTestIds,\n hasProp,\n getActiveElement,\n getFocusables\n} from '../../utils';\nimport {\n useConfiguration,\n useI18n,\n useLiveLog,\n useOS,\n useShortcut,\n useTestIds,\n useConsolidatedRef,\n useEscape,\n useFocusWithin\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport '../../init';\nimport { registerAction } from '../ShortcutManager';\nimport { Keyboard } from '../Badges';\nimport { StyledKeyboard } from '../Badges/Keyboard';\n\nimport type { ToastMessage, ToasterProps, BaseToastMessage, CreatedMessage } from './Toaster.types';\nimport { ToasterContext } from './Context';\nimport type { ToasterContextValue } from './Context';\nimport { getToasterTestIds } from './Toaster.test-ids';\n\nregisterIcon(timesIcon);\nregisterAction(\n { id: 'JumpToToast', defaultKeyBinding: 'Alt+Enter' },\n { id: 'DismissToast', defaultKeyBinding: 'Alt+Q' }\n);\n\ntype ToastState = (BaseToastMessage | CreatedMessage) & {\n id: NonNullable<ToastMessage['id']>;\n dismissAfter?: number;\n};\n\ntype ToastReducerAction =\n | { type: 'push'; payload: ToastState }\n | { type: 'unmount'; payload: ToastState['id'] };\n\ntype ToastProps = ToastState & {\n // determines if this is the first toast in the list, used to dismiss the first toast with a shortcut, not exposed outside\n firstToast: boolean;\n topLevelDismiss: ToasterProps['onDismiss'];\n translateY: number;\n dispatch: Dispatch<ToastReducerAction>;\n ref: Ref<HTMLDivElement>;\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n toasterContext?: Context<ToasterContextValue>;\n }\n}\n\nconst StyledToastButton = styled.button(\n ({ theme }) => css`\n border: none;\n color: inherit;\n padding: 0;\n font-size: 1rem;\n margin-block: calc(${theme.base.spacing} / 2);\n margin-inline-end: calc(${theme.base.spacing} / 2);\n\n &:enabled:hover {\n background: #ffffff19;\n }\n\n &:enabled:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n return css`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: clip;\n text-overflow: ellipsis;\n font-size: ${theme.base['font-size']};\n margin-inline-start: calc(${theme.base['border-radius']} / 2);\n padding-inline-start: calc(${theme.base.spacing} / 2);\n\n ${StyledLink} {\n color: ${theme.base.colors.blue.light};\n }\n `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n background: ${theme.base.colors.slate['extra-dark']};\n color: ${theme.base.colors.white};\n border-radius: calc(${theme.base['border-radius']} / 2);\n opacity: var(--opacity);\n transform: translateY(var(--translateY)) scale(var(--scale));\n transition-property: transform, opacity;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n\n :focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n }\n `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].toast};\n width: min(40ch, calc(100% - 1rem));\n inset-inline-start: 50%;\n transform: translateX(-50%);\n top: calc(100dvh - var(--appshell-bottom-offset, 0rem));\n `;\n});\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n switch (action.type) {\n case 'push':\n return [\n ...current,\n {\n ...action.payload\n }\n ];\n\n case 'unmount':\n return current.filter(m => m.id !== action.payload);\n\n default:\n return current;\n }\n}\n\nconst Toast = forwardRef(function Toast(\n {\n id,\n firstToast,\n dispatch,\n topLevelDismiss,\n translateY,\n onDismiss,\n dismissAfter,\n ...restProps\n }: PropsWithoutRef<ToastProps>,\n ref: ToastProps['ref']\n) {\n const [dismissed, setDismissed] = useState(false);\n const timeoutRef = useRef(NaN);\n const t = useI18n();\n const { macintosh } = useOS();\n const { announcePolite } = useLiveLog();\n const content = hasProp(restProps, 'href') ? t('created') : restProps.content;\n const initiatorRef = useRef<HTMLElement | null>(null);\n const containerRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n let fullMessage = content;\n if (hasProp(restProps, 'href')) {\n // CreatedMessage\n fullMessage = restProps.caseId\n ? `${content} ${restProps.caseId} ${restProps.label}`\n : `${content} ${restProps.label}`;\n }\n\n const shortcutJumpMessage = t('keypress_instruction', [\n macintosh ? 'Option + Enter' : 'Alt + Enter',\n t('shortcut_JumpToToast')\n ]);\n\n const shortcutDismissMessage = t('keypress_instruction', [\n macintosh ? 'Option + Q' : 'Alt + Q',\n t('shortcut_DismissToast')\n ]);\n\n announcePolite({\n message: `${fullMessage}. ${shortcutJumpMessage}. ${shortcutDismissMessage}.`,\n type: 'acknowledgement'\n });\n }, []);\n\n const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n dispatch({ type: 'unmount', payload: id });\n }\n };\n\n const dismiss = (timeout: boolean) => () => {\n if (initiatorRef.current) {\n initiatorRef.current?.focus?.();\n initiatorRef.current = null;\n }\n clearTimeout(timeoutRef.current);\n if (dismissed) return;\n setDismissed(true);\n onDismiss?.({ id, timeout });\n topLevelDismiss?.({ id, timeout });\n };\n\n const startTimer = () => {\n if (dismissAfter) {\n timeoutRef.current = window.setTimeout(dismiss(true), dismissAfter);\n }\n };\n\n useEffect(() => {\n startTimer();\n return () => {\n window.clearTimeout(timeoutRef.current);\n };\n }, []);\n\n // Alt+Enter focuses on the first focusable element in the first toast.\n // Tab to the next toast if there are multiple.\n useShortcut('JumpToToast', () => {\n const activeElement = getActiveElement();\n if (activeElement && activeElement !== document.body) {\n initiatorRef.current = activeElement as HTMLElement;\n }\n if (firstToast && containerRef.current) {\n getFocusables(containerRef.current)[0]?.focus();\n }\n });\n\n // Alt+Q dismisses the first toast.\n useShortcut('DismissToast', () => {\n if (firstToast) dismiss(false)();\n });\n\n // Escape dismisses the toast and focuses the initiator.\n useEscape(() => {\n const currentFocus = getActiveElement();\n if (containerRef.current?.contains(currentFocus)) {\n dismiss(false)();\n }\n });\n\n useFocusWithin([containerRef], (focused: boolean) => {\n if (focused) {\n window.clearTimeout(timeoutRef.current);\n } else {\n startTimer();\n }\n });\n\n return (\n <Flex\n {...restProps}\n data-app-region\n container={{ alignItems: 'center', gap: 0.25 }}\n as={StyledToast}\n ref={containerRef}\n style={\n {\n '--translateY': `${-translateY}px`,\n '--opacity': dismissed ? '0' : '1',\n '--scale': dismissed ? '0' : '1'\n } as CSSProperties\n }\n onTransitionEnd={onTransitionEnd}\n >\n <Flex item={{ grow: 1 }} as={StyledToastContent}>\n {content}\n {hasProp(restProps, 'href') ? (\n <>\n \n <Link href={restProps.href}>\n {restProps.caseId ? `(${restProps.caseId}): ${restProps.label}` : restProps.label}\n </Link>\n </>\n ) : undefined}\n </Flex>\n <Flex container={{ inline: true, justify: 'end', gap: 0.5 }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='Enter' />\n </Flex>\n <Button\n as={StyledToastButton}\n variant='simple'\n onClick={dismiss(false)}\n icon\n aria-label={t('dismiss_label')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n );\n});\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n testId,\n children,\n onDismiss\n}: ToasterProps) => {\n const { portalTarget } = useConfiguration();\n const [messages, dispatch] = useReducer(reducer, []);\n const [yOffsets, setYOffsets] = useState<number[]>([]);\n const heightHashRef = useRef<{\n [id: string]: number;\n }>({});\n const testIds = useTestIds(testId, getToasterTestIds);\n\n // This effect will cause a re-render with a translateY value set for each toast.\n useLayoutEffect(() => {\n const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n setYOffsets(\n heights\n .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n .reverse()\n );\n }, [messages.length]);\n\n const providerValue = useMemo(\n () => ({\n push(incoming: ToastMessage) {\n const message: ToastState = {\n ...incoming,\n id: incoming.id ?? createUID(),\n dismissAfter: hasProp(incoming, 'href') ? 15_000 : 7_500\n };\n\n dispatch({\n type: 'push',\n payload: message\n });\n },\n initialized: true\n }),\n []\n );\n\n // Don't create additional ToasterContext.Providers.\n const context = windowIsAvailable\n ? window.cosmos.toasterContext ?? ToasterContext\n : ToasterContext;\n const priorCtx = useContext(context);\n if (priorCtx.initialized) {\n return <context.Provider value={priorCtx}>{children}</context.Provider>;\n }\n\n return (\n <>\n <context.Provider value={providerValue}>{children}</context.Provider>\n {!!messages.length &&\n portalTarget &&\n createPortal(\n <StyledToaster data-testid={testIds.root}>\n {messages.map((message, i) => {\n const sharedProps = {\n translateY: yOffsets[i] ?? 0,\n firstToast: i === 0,\n topLevelDismiss: onDismiss,\n dispatch,\n ref: el => {\n if (el) {\n heightHashRef.current[message.id] = el.offsetHeight;\n } else {\n delete heightHashRef.current[message.id];\n }\n }\n } satisfies Partial<ToastProps>;\n\n if (hasProp(message, 'href')) {\n return (\n // Toast with Link\n <Toast\n data-testid={testIds.toast}\n {...message}\n {...sharedProps}\n key={message.id}\n />\n );\n }\n\n return (\n // Base Toast\n <Toast data-testid={testIds.toast} {...message} {...sharedProps} key={message.id} />\n );\n })}\n </StyledToaster>,\n portalTarget\n )}\n </>\n );\n};\n\nexport default withTestIds(Toaster, getToasterTestIds);\n"]}
|