@pega/cosmos-react-core 10.0.0-build.2.9 → 10.0.0-build.3.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/ClassificationMarking/ClassificationMarking.styles.d.ts.map +1 -1
- package/lib/components/ClassificationMarking/ClassificationMarking.styles.js +5 -3
- package/lib/components/ClassificationMarking/ClassificationMarking.styles.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +1 -1
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.styles.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.styles.js +14 -2
- package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.d.ts +2 -0
- package/lib/components/ComboBox/ComboBox.types.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.js.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.d.ts +1 -0
- package/lib/components/ComboBox/ComboBoxInput.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +9 -3
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts +2 -0
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +28 -9
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts +2 -0
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.js.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.js +1 -2
- package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.js +2 -1
- package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
- package/lib/components/DateTime/Input/QuarterInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/QuarterInput.js +2 -2
- package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.styles.js +5 -0
- package/lib/components/DateTime/Picker/DatePicker.styles.js.map +1 -1
- package/lib/components/EmptyState/EmptyState.d.ts +6 -1
- package/lib/components/EmptyState/EmptyState.d.ts.map +1 -1
- package/lib/components/EmptyState/EmptyState.js +18 -11
- package/lib/components/EmptyState/EmptyState.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/File/FileVisual.js +1 -1
- package/lib/components/File/FileVisual.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.styles.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.styles.js +1 -0
- package/lib/components/Lightbox/Lightbox.styles.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +1 -1
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.styles.d.ts +64 -62
- package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.styles.js +43 -37
- package/lib/components/ListToolbar/ListToolbar.styles.js.map +1 -1
- package/lib/components/Number/NumberDisplay.d.ts +5 -0
- package/lib/components/Number/NumberDisplay.d.ts.map +1 -1
- package/lib/components/Number/NumberDisplay.js +3 -2
- package/lib/components/Number/NumberDisplay.js.map +1 -1
- package/lib/components/Number/utils.d.ts +3 -1
- package/lib/components/Number/utils.d.ts.map +1 -1
- package/lib/components/Number/utils.js +10 -8
- package/lib/components/Number/utils.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/PreviewManager.d.ts.map +1 -1
- package/lib/components/Preview/PreviewManager.js +10 -1
- package/lib/components/Preview/PreviewManager.js.map +1 -1
- package/lib/components/Preview/PreviewPanel.d.ts.map +1 -1
- package/lib/components/Preview/PreviewPanel.js +7 -2
- package/lib/components/Preview/PreviewPanel.js.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js +44 -23
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
- package/lib/components/ResponsiveActions/ResponsiveActions.d.ts.map +1 -1
- package/lib/components/ResponsiveActions/ResponsiveActions.js +1 -0
- package/lib/components/ResponsiveActions/ResponsiveActions.js.map +1 -1
- package/lib/components/SelectionCard/SelectionCard.styles.js +1 -1
- package/lib/components/SelectionCard/SelectionCard.styles.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +10 -1
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +10 -1
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +12 -2
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +10 -1
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/index.d.ts +2 -0
- package/lib/theme/index.d.ts.map +1 -1
- package/lib/theme/index.js +2 -0
- package/lib/theme/index.js.map +1 -1
- package/lib/theme/theme.d.ts +24 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +12 -0
- package/lib/theme/themeOverrides.schema.json +18 -0
- package/lib/theme/themes/aurigaDarkTheme.json +146 -0
- package/lib/theme/themes/aurigaTheme.json +143 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,eAAO,MAAM,wBAAwB;;iKAAmB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,6NAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;YA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;oBAAgC,OAAO;YAsBpE,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;uRAWlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAYnC,CAAC;AAIH,eAAO,MAAM,eAAe,kYAK3B,CAAC;AAIF,eAAO,MAAM,aAAa;eACb,OAAO;cACR,OAAO;gBACL,UAAU;YAwDtB,CAAC;AAIH,eAAO,MAAM,eAAe;;;;mBAM1B,CAAC;AAIH,eAAO,MAAM,UAAU,qQAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAQjC,CAAC"}
|
|
@@ -20,7 +20,6 @@ export const StyledSearchForm = styled.div `
|
|
|
20
20
|
}
|
|
21
21
|
`;
|
|
22
22
|
export const StyledViewSelector = styled.button(({ theme, required }) => {
|
|
23
|
-
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
24
23
|
const { urgent } = theme.base.palette;
|
|
25
24
|
const hitAreaMouse = theme.base['hit-area']['mouse-min'];
|
|
26
25
|
const hitAreaFinger = theme.base['hit-area']['finger-min'];
|
|
@@ -31,7 +30,6 @@ export const StyledViewSelector = styled.button(({ theme, required }) => {
|
|
|
31
30
|
|
|
32
31
|
${StyledText} {
|
|
33
32
|
white-space: nowrap;
|
|
34
|
-
font-size: ${fontSizes[theme.components.text.h2['font-size']]};
|
|
35
33
|
line-height: ${hitAreaMouse};
|
|
36
34
|
word-break: break-word;
|
|
37
35
|
@media (pointer: coarse) {
|
|
@@ -102,52 +100,60 @@ export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
|
|
|
102
100
|
margin-inline-end: ${theme.base.spacing};
|
|
103
101
|
`);
|
|
104
102
|
StyledErrorIcon.defaultProps = defaultThemeProp;
|
|
105
|
-
export const StyledHeading = styled.div(({ theme, required, showName }) => {
|
|
103
|
+
export const StyledHeading = styled.div(({ theme, required, showName, headingTag }) => {
|
|
106
104
|
const { urgent } = theme.base.palette;
|
|
107
105
|
const hitAreaCompact = theme.base['hit-area'].compact;
|
|
106
|
+
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
107
|
+
const fontSizeKeys = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
|
|
108
|
+
const headingFontSizeKey = theme.components.text[headingTag]['font-size'];
|
|
109
|
+
const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];
|
|
108
110
|
return css `
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
111
|
+
min-width: 0;
|
|
112
|
+
position: relative;
|
|
113
|
+
line-height: ${hitAreaCompact};
|
|
114
|
+
word-break: break-word;
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
115
117
|
|
|
116
|
-
|
|
118
|
+
${required &&
|
|
117
119
|
css `
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
padding-inline-end: calc(1.5 * ${theme.base.spacing});
|
|
121
|
+
`}
|
|
122
|
+
&::after {
|
|
123
|
+
display: ${required ? 'inline' : 'none'};
|
|
124
|
+
content: '\\00a0*';
|
|
125
|
+
vertical-align: top;
|
|
126
|
+
color: ${urgent};
|
|
127
|
+
position: absolute;
|
|
128
|
+
inset-inline-end: 0;
|
|
129
|
+
inset-block-start: 0;
|
|
130
|
+
}
|
|
129
131
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
132
|
+
${StyledErrorIcon} {
|
|
133
|
+
margin-inline-end: calc(0.5 * ${theme.base.spacing});
|
|
134
|
+
}
|
|
133
135
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
136
|
+
${StyledText} {
|
|
137
|
+
line-height: ${hitAreaCompact};
|
|
138
|
+
${ellipsisOverflow};
|
|
139
|
+
}
|
|
138
140
|
|
|
139
|
-
|
|
141
|
+
${StyledViewSelector} {
|
|
142
|
+
font-size: ${headingFontSize};
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
${!required &&
|
|
140
146
|
!showName &&
|
|
141
147
|
css `
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
148
|
+
> ${StyledText} {
|
|
149
|
+
${hideVisually}
|
|
150
|
+
}
|
|
145
151
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
152
|
+
&:not(:has(${StyledViewSelector})) {
|
|
153
|
+
margin-inline-end: -${theme.base.spacing};
|
|
154
|
+
}
|
|
155
|
+
`}
|
|
156
|
+
`;
|
|
151
157
|
});
|
|
152
158
|
StyledHeading.defaultProps = defaultThemeProp;
|
|
153
159
|
export const StyledCountMeta = styled(StyledCount)(({ theme }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { urgent } = theme.base.palette;\n const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n return css`\n flex-shrink: initial;\n white-space: initial;\n max-width: 100%;\n\n ${StyledText} {\n white-space: nowrap;\n font-size: ${fontSizes[theme.components.text.h2['font-size'] as FontSize]};\n line-height: ${hitAreaMouse};\n word-break: break-word;\n @media (pointer: coarse) {\n line-height: ${hitAreaFinger};\n }\n }\n\n ${StyledText}::after {\n display: ${required ? 'inline-block' : 'none'};\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n ({ theme, isSmallOrAbove }) => {\n return css`\n width: 100%;\n margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n ${isSmallOrAbove &&\n css`\n ${StyledExpandSearchButton} {\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n }\n\n ${StyledSearchInput} {\n margin-inline-start: ${theme.base.spacing};\n\n input {\n min-width: 20ch;\n }\n }\n `}\n `;\n }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n return css`\n min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n ${StyledDialogContent} {\n @media (height >= 31.25rem) {\n min-height: 2rem;\n }\n }\n `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n return css`\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n ${StyledButton}:focus {\n z-index: 1;\n }\n `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n margin-inline-end: ${theme.base.spacing};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{ required?: boolean; showName: boolean }>(\n ({ theme, required, showName }) => {\n const { urgent } = theme.base.palette;\n const hitAreaCompact = theme.base['hit-area'].compact;\n\n return css`\n min-width: 0;\n position: relative;\n line-height: ${hitAreaCompact};\n word-break: break-word;\n display: flex;\n align-items: center;\n\n ${required &&\n css`\n padding-inline-end: calc(1.5 * ${theme.base.spacing});\n `}\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n position: absolute;\n inset-inline-end: 0;\n inset-block-start: 0;\n }\n\n ${StyledErrorIcon} {\n margin-inline-end: calc(0.5 * ${theme.base.spacing});\n }\n\n ${StyledText} {\n line-height: ${hitAreaCompact};\n ${ellipsisOverflow};\n }\n\n ${!required &&\n !showName &&\n css`\n > ${StyledText} {\n ${hideVisually}\n }\n\n &:not(:has(${StyledViewSelector})) {\n margin-inline-end: -${theme.base.spacing};\n }\n `}\n `;\n }\n);\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n return css`\n white-space: nowrap;\n margin-inline-end: ${theme.base.spacing};\n width: fit-content;\n `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n components: { 'form-field': formField }\n }\n }) => css`\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n ({ theme }) => css`\n margin-block: calc(0.5 * ${theme.base.spacing});\n\n ${StyledSearchInput} {\n max-width: 100%;\n }\n `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport type { HeadingTag } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n const { urgent } = theme.base.palette;\n const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n return css`\n flex-shrink: initial;\n white-space: initial;\n max-width: 100%;\n\n ${StyledText} {\n white-space: nowrap;\n line-height: ${hitAreaMouse};\n word-break: break-word;\n @media (pointer: coarse) {\n line-height: ${hitAreaFinger};\n }\n }\n\n ${StyledText}::after {\n display: ${required ? 'inline-block' : 'none'};\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n ({ theme, isSmallOrAbove }) => {\n return css`\n width: 100%;\n margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n ${isSmallOrAbove &&\n css`\n ${StyledExpandSearchButton} {\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n }\n\n ${StyledSearchInput} {\n margin-inline-start: ${theme.base.spacing};\n\n input {\n min-width: 20ch;\n }\n }\n `}\n `;\n }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n return css`\n min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n ${StyledDialogContent} {\n @media (height >= 31.25rem) {\n min-height: 2rem;\n }\n }\n `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n return css`\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n ${StyledButton}:focus {\n z-index: 1;\n }\n `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n margin-inline-end: ${theme.base.spacing};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{\n required?: boolean;\n showName: boolean;\n headingTag: HeadingTag;\n}>(({ theme, required, showName, headingTag }) => {\n const { urgent } = theme.base.palette;\n const hitAreaCompact = theme.base['hit-area'].compact;\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const fontSizeKeys: FontSize[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];\n const headingFontSizeKey = theme.components.text[headingTag]['font-size'];\n const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];\n\n return css`\n min-width: 0;\n position: relative;\n line-height: ${hitAreaCompact};\n word-break: break-word;\n display: flex;\n align-items: center;\n\n ${required &&\n css`\n padding-inline-end: calc(1.5 * ${theme.base.spacing});\n `}\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n position: absolute;\n inset-inline-end: 0;\n inset-block-start: 0;\n }\n\n ${StyledErrorIcon} {\n margin-inline-end: calc(0.5 * ${theme.base.spacing});\n }\n\n ${StyledText} {\n line-height: ${hitAreaCompact};\n ${ellipsisOverflow};\n }\n\n ${StyledViewSelector} {\n font-size: ${headingFontSize};\n }\n\n ${!required &&\n !showName &&\n css`\n > ${StyledText} {\n ${hideVisually}\n }\n\n &:not(:has(${StyledViewSelector})) {\n margin-inline-end: -${theme.base.spacing};\n }\n `}\n `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n return css`\n white-space: nowrap;\n margin-inline-end: ${theme.base.spacing};\n width: fit-content;\n `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n components: { 'form-field': formField }\n }\n }) => css`\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n ({ theme }) => css`\n margin-block: calc(0.5 * ${theme.base.spacing});\n\n ${StyledSearchInput} {\n max-width: 100%;\n }\n `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -21,6 +21,11 @@ export type NumberDisplayProps = WithAttributes<'span', NoChildrenProp & {
|
|
|
21
21
|
* @default true
|
|
22
22
|
*/
|
|
23
23
|
groupSeparators?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Determines negative value notation: using minus sign or parentheses (accounting format).
|
|
26
|
+
* @default 'minus-sign'
|
|
27
|
+
*/
|
|
28
|
+
negative?: 'minus-sign' | 'parentheses';
|
|
24
29
|
};
|
|
25
30
|
}>;
|
|
26
31
|
declare const _default: import("react").ForwardRefExoticComponent<Omit<NumberDisplayProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;WAGG;QACH,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;KACzC,CAAC;CACH,CACF,CAAC;;AAEF,wBAiCE"}
|
|
@@ -3,13 +3,14 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { useConfiguration } from '../../hooks';
|
|
4
4
|
import NoValue from '../NoValue/NoValue';
|
|
5
5
|
import { getFraction, getFormattedValue } from './utils';
|
|
6
|
-
export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) {
|
|
6
|
+
export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true, negative } = {}, ...restProps }, ref) {
|
|
7
7
|
const { locale } = useConfiguration();
|
|
8
8
|
return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (getFormattedValue(value.toString(), locale, unit, {
|
|
9
9
|
notation,
|
|
10
10
|
useGrouping: groupSeparators,
|
|
11
11
|
maximumFractionDigits: fractionDigits,
|
|
12
|
-
minimumFractionDigits: fractionDigits
|
|
12
|
+
minimumFractionDigits: fractionDigits,
|
|
13
|
+
negative
|
|
13
14
|
})) : (_jsx(NoValue, {})) }));
|
|
14
15
|
});
|
|
15
16
|
//# sourceMappingURL=NumberDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoCzD,eAAe,UAAU,CACvB,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,QAAQ,EACT,GAAG,EAAE,EACN,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;YACrC,QAAQ;SACT,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport type NumberDisplayProps = WithAttributes<\n 'span',\n NoChildrenProp & {\n /** Number value */\n value?: number | bigint;\n /** Unit to be included in the text, for example '%' */\n unit?: string;\n\n formattingOptions?: {\n /**\n * Value display notation.\n * @default 'standard'\n */\n notation?: 'standard' | 'compact';\n /**\n * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n */\n fractionDigits?: number;\n /**\n * Determines whether group separators should be shown.\n * @default true\n */\n groupSeparators?: boolean;\n /**\n * Determines negative value notation: using minus sign or parentheses (accounting format).\n * @default 'minus-sign'\n */\n negative?: 'minus-sign' | 'parentheses';\n };\n }\n>;\n\nexport default forwardRef<RefElement<NumberDisplayProps>, PropsWithoutRef<NumberDisplayProps>>(\n function NumberDisplay(\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true,\n negative\n } = {},\n ...restProps\n },\n ref\n ) {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value || value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits,\n negative\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export declare function getDecimalSign(locale: Intl.UnicodeBCP47LocaleIdentifier, options?: Intl.NumberFormatOptions): string;
|
|
2
2
|
export declare function getFraction(value: string): string;
|
|
3
3
|
export declare function getCleanedValue(value: string, decimalSign: string, maximumFractionDigits: number): string;
|
|
4
|
-
export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits">
|
|
4
|
+
export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits, negative }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits"> & {
|
|
5
|
+
negative?: "minus-sign" | "parentheses";
|
|
6
|
+
}) => string;
|
|
5
7
|
export declare function isValueInRange(value: number, min?: number, max?: number): boolean;
|
|
6
8
|
export declare function getIncrementedValue(value: string, min: number, max: number, step: number): string;
|
|
7
9
|
export declare function getDecrementedValue(value: string, min: number, max: number, step: number): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,oFAMG,IAAI,CACL,IAAI,CAAC,mBAAmB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC/E,GAAG;IAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;CAAO,WA2CrD,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}
|
|
@@ -29,9 +29,11 @@ const isValidUnit = (unit) => {
|
|
|
29
29
|
return false;
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits } = {}) => {
|
|
32
|
+
export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits, negative = 'minus-sign' } = {}) => {
|
|
33
33
|
const isUnit = unit ? isValidUnit(unit) : false;
|
|
34
|
-
const
|
|
34
|
+
const isNegative = value.startsWith('-');
|
|
35
|
+
const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;
|
|
36
|
+
const [integer = '0', fractionPart] = formattingValue.split('.', 2);
|
|
35
37
|
const formatter = new Intl.NumberFormat(locale, {
|
|
36
38
|
notation,
|
|
37
39
|
useGrouping,
|
|
@@ -41,10 +43,10 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
|
|
|
41
43
|
unit: isUnit ? unit : undefined,
|
|
42
44
|
numberingSystem: 'latn'
|
|
43
45
|
});
|
|
44
|
-
let formatted =
|
|
45
|
-
if (
|
|
46
|
+
let formatted = formattingValue;
|
|
47
|
+
if (formattingValue && !Number.isNaN(parseFloat(integer))) {
|
|
46
48
|
const endsWithDot = fractionPart === '';
|
|
47
|
-
const valueNumber = endsWithDot ? `${
|
|
49
|
+
const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;
|
|
48
50
|
formatted =
|
|
49
51
|
formatter
|
|
50
52
|
.formatToParts(valueNumber)
|
|
@@ -57,12 +59,12 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
|
|
|
57
59
|
else if (unit) {
|
|
58
60
|
if (isUnit)
|
|
59
61
|
formatted = formatter
|
|
60
|
-
.formatToParts(
|
|
62
|
+
.formatToParts(formattingValue.startsWith('-') ? -1 : 1)
|
|
61
63
|
.reduce((result, { type, value: part }) => ['unit', 'minusSign'].includes(type) ? result + part : result, '');
|
|
62
64
|
else
|
|
63
|
-
formatted =
|
|
65
|
+
formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;
|
|
64
66
|
}
|
|
65
|
-
return formatted;
|
|
67
|
+
return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;
|
|
66
68
|
};
|
|
67
69
|
export function isValueInRange(value, min, max) {
|
|
68
70
|
return !((min !== undefined && value < min) || (max !== undefined && value > max));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,UAAU,cAAc,CAC5B,MAAyC,EACzC,OAAkC;IAElC,OAAO,CACL,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;SACnC,aAAa,CAAC,GAAG,CAAC;SAClB,MAAM,CAAC,CAAC,IAAqC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAC9F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3D,OAAO,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,KAAa,EACb,WAAmB,EACnB,qBAA6B;IAE7B,IAAI,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,KAAK,WAAW,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,IAAI,WAAW,IAAI,WAAW,KAAK,GAAG;QAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IACtF,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,mBAAmB,qBAAqB,KAAK,CAAC,CAAC,CAAC;IACxF,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;IACnC,IAAI,CAAC;QACH,kCAAkC;QAClC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAa,EACb,MAAc,EACd,IAAa,EACb,EACE,QAAQ,GAAG,UAAU,EACrB,WAAW,GAAG,KAAK,EACnB,qBAAqB,EACrB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n locale: Intl.UnicodeBCP47LocaleIdentifier,\n options?: Intl.NumberFormatOptions\n): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits,\n negative = 'minus-sign'\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' | 'useGrouping' | 'maximumFractionDigits' | 'minimumFractionDigits'\n > & { negative?: 'minus-sign' | 'parentheses' } = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const isNegative = value.startsWith('-');\n const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;\n const [integer = '0', fractionPart] = formattingValue.split('.', 2);\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined,\n numberingSystem: 'latn'\n });\n\n let formatted = formattingValue;\n\n if (formattingValue && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;\n formatted =\n formatter\n .formatToParts(valueNumber as `${number}`)\n .reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(formattingValue.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;\n }\n\n return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}
|
|
@@ -43,7 +43,7 @@ const StyledPageBreak = styled.div(({ containerPadding, rowHeight, theme, margin
|
|
|
43
43
|
font-size: 0.75rem;
|
|
44
44
|
line-height: 1;
|
|
45
45
|
transform: translate(0, -50%);
|
|
46
|
-
background
|
|
46
|
+
background: ${palette['app-background']};
|
|
47
47
|
color: ${palette['border-line']};
|
|
48
48
|
padding-inline-end: 0.25rem;
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,mBAAmB,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAEzE,OAAO,GAAG,CAAA;;0BAEY,WAAW;oBACjB,UAAU;oBACV,SAAS;uBACN,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;KACxD,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;IACpE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;4BAEc,gBAAgB,CAAC,CAAC,CAAC;0BACrB,gBAAgB,CAAC,CAAC,CAAC;2BAClB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;;4BAExD,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;;uCAEP,OAAO,CAAC,aAAa,CAAC;;;oBAGzC,MAAM;;;;;
|
|
1
|
+
{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,mBAAmB,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAEzE,OAAO,GAAG,CAAA;;0BAEY,WAAW;oBACjB,UAAU;oBACV,SAAS;uBACN,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;KACxD,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;IACpE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;4BAEc,gBAAgB,CAAC,CAAC,CAAC;0BACrB,gBAAgB,CAAC,CAAC,CAAC;2BAClB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;;4BAExD,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;;uCAEP,OAAO,CAAC,aAAa,CAAC;;;oBAGzC,MAAM;;;;;sBAKJ,OAAO,CAAC,gBAAgB,CAAC;iBAC9B,OAAO,CAAC,aAAa,CAAC;;;KAGlC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAUhD;;;GAGG;AACH,MAAM,gBAAgB,GAA8B,CAAC,EACnD,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAE/D,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,WAAW,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;IAC7C,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAExD,wFAAwF;IACxF,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,UAAU,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aACrF,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACd,KAAC,cAAc,IAEb,SAAS,EAAE,SAAS;gBACpB,yDAAyD;gBACzD,WAAW,EAAE,WAAW,IAAI,CAAC,GAAG,YAAY,GAAG,UAAU,IAHpD,CAAC,CAIN,CACH,CAAC,EACD,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACnB,KAAC,eAAe,IAEd,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,WAAY,EACjC,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAL5B,CAAC,CAMN,CACH,CAAC,IACS,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n position: absolute;\n z-index: -1;\n pointer-events: none;\n inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n ({ theme, highlighted, rowHeight }) => {\n const {\n base: { palette }\n } = theme;\n const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n return css`\n /* stylelint-disable-next-line unit-allowed-list */\n border: 1px solid ${borderColor};\n background: ${background};\n block-size: ${rowHeight}px;\n border-radius: ${theme.components.card['border-radius']};\n `;\n }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n rowsAbove: number;\n rowHeight: number;\n margin: [number, number];\n containerPadding: [number, number];\n prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n const {\n base: { palette }\n } = theme;\n return css`\n position: absolute;\n inset-inline-start: ${containerPadding[0]}px;\n inset-inline-end: ${containerPadding[0]}px;\n inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n /* stylelint-disable-next-line unit-allowed-list */\n margin-block-start: ${-margin[1] / 2 - 1}px;\n /* stylelint-disable-next-line unit-allowed-list */\n border-block-start: 2px dashed ${palette['border-line']};\n\n &::before {\n content: '${prefix}';\n position: absolute;\n font-size: 0.75rem;\n line-height: 1;\n transform: translate(0, -50%);\n background: ${palette['app-background']};\n color: ${palette['border-line']};\n padding-inline-end: 0.25rem;\n }\n `;\n }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n layout?: Layout[];\n numColumns: number;\n rowHeight: number;\n rowsPerPage: number | null; // null when not applying auto-fit\n highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n layout,\n numColumns,\n rowHeight,\n rowsPerPage,\n highlighted\n}) => {\n const t = useI18n();\n const { margin, containerPadding } = useGridLayoutConfig(true);\n\n const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n const numGridCells = (maxY + 1) * numColumns;\n const cells = getArrayFromRange(0, numGridCells, false);\n\n // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n return (\n <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n {cells.map(n => (\n <StyledGridCell\n key={n}\n rowHeight={rowHeight}\n // Highlight all cells except the dummy row at the bottom\n highlighted={highlighted && n < numGridCells - numColumns}\n />\n ))}\n {pageBreaks.map(n => (\n <StyledPageBreak\n key={n}\n rowsAbove={(n + 1) * rowsPerPage!}\n rowHeight={rowHeight}\n margin={margin}\n containerPadding={containerPadding}\n prefix={t('page_number', [n + 1])}\n />\n ))}\n </StyledGrid>\n );\n};\n\nexport default EditorBackground;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewManager.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2B,OAAO,EAAoC,MAAM,OAAO,CAAC;AAIhG,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAK,EAEV,0BAA0B,EAG1B,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC;KAC7D;CACF;
|
|
1
|
+
{"version":3,"file":"PreviewManager.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2B,OAAO,EAAoC,MAAM,OAAO,CAAC;AAIhG,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAK,EAEV,0BAA0B,EAG1B,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC;KAC7D;CACF;AA8GD,QAAA,MAAM,cAAc,GAAI,cAAc,mBAAmB,4CA0FxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } fr
|
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
import { createUID, windowIsAvailable } from '../../utils';
|
|
6
6
|
import '../../init';
|
|
7
|
-
import { useConfiguration } from '../../hooks';
|
|
7
|
+
import { useBreakpoint, useConfiguration } from '../../hooks';
|
|
8
8
|
import PreviewPanel from './PreviewPanel';
|
|
9
9
|
import { PreviewContext, PreviewManagerContext } from './Contexts';
|
|
10
10
|
const reducer = (previews, payload) => {
|
|
@@ -30,6 +30,8 @@ const reducer = (previews, payload) => {
|
|
|
30
30
|
: preview);
|
|
31
31
|
case 'unmount':
|
|
32
32
|
return previews.filter(preview => preview.id !== payload.id);
|
|
33
|
+
case 'clear':
|
|
34
|
+
return [];
|
|
33
35
|
default:
|
|
34
36
|
return previews;
|
|
35
37
|
}
|
|
@@ -76,6 +78,13 @@ const PreviewManager = ({ children }) => {
|
|
|
76
78
|
const [previewActive, setPreviewActive] = useState(false);
|
|
77
79
|
const previewTriggerRef = useRef(null);
|
|
78
80
|
const { portalTarget } = useConfiguration();
|
|
81
|
+
const isSmallOrAbove = useBreakpoint('sm');
|
|
82
|
+
// Dismiss all previews when screen size reflows below sm breakpoint
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
if (!isSmallOrAbove && previews.length > 0) {
|
|
85
|
+
dispatch({ type: 'clear' });
|
|
86
|
+
}
|
|
87
|
+
}, [isSmallOrAbove, previews.length]);
|
|
79
88
|
const providerValue = useMemo(() => ({
|
|
80
89
|
previewActive,
|
|
81
90
|
setPreviewActive,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,YAAY,CAAC;AACpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAQ1C,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAanE,MAAM,OAAO,GAAG,CACd,QAA8B,EAC9B,OAAiC,EACR,EAAE;IAC3B,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;QACrB,KAAK,QAAQ;YACX,oCAAoC;YACpC,6EAA6E;YAC7E,OAAO,CAAC,OAAO,CAAC,OAA2C,CAAC,CAAC;QAE/D,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAC5B,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE;gBACvB,CAAC,CAAC;oBACE,GAAG,OAAO;oBACV,KAAK,EAAE,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE;oBAC7C,OAAO,EAAE;wBACP,GAAG,OAAO,CAAC,OAAO;wBAClB,GAAG,OAAO,CAAC,OAAO;wBAClB,YAAY,EAAE;4BACZ,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY;4BAChC,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY;yBACjC;qBACF;iBACF;gBACH,CAAC,CAAC,OAAO,CACZ,CAAC;QAEJ,KAAK,SAAS;YACZ,OAAO,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;QAE/D;YACE,OAAO,QAAQ,CAAC;IACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,IAAI,CACzB,CAAC,EACC,SAAS,EACT,KAAK,EACL,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EAIR,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,mEAAmE;IACnE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;QAClD,OAAO,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,qFAAqF;YACrF,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;gBACnD,cAAc,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ;IACtB,mEAAmE;;QAAnE,mEAAmE;QACnE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,iBAAiB;YACjB,GAAG,OAAO;SACX,YAED,KAAC,YAAY,IACX,IAAI,EAAE,IAAI,KACN,OAAO,EAAE,YAAY,EACzB,YAAY,EAAE,GAAG,EAAE;gBACjB,cAAc,EAAE,CAAC;YACnB,CAAC,YAED,KAAC,SAAS,OAAM,KAAiC,GAAI,GACxC,GACS,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAuB,EAAE,EAAE;IAC3D,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,iBAAiB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC3D,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5C,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,aAAa;QACb,gBAAgB;QAChB,aAAa,EAAE,CACb,SAA2B,EAC3B,KAAqB,EACrB,OAAwB,EACL,EAAE;YACrB,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YAEvB,MAAM,OAAO,GAAG;gBACd,aAAa,EAAE,CAAC,YAAwB,EAAE,cAAwC,EAAE,EAAE;oBACnF,QAA+C,CAAC;wBAC/C,IAAI,EAAE,QAAQ;wBACd,EAAE;wBACF,KAAK,EAAE,YAAY;wBACnB,OAAO,EAAE,cAAc;qBACxB,CAAC,CAAC;gBACL,CAAC;gBACD,cAAc,EAAE,GAAG,EAAE;oBACnB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBACpC,CAAC;aACF,CAAC;YAED,QAA+C,CAAC;gBAC/C,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE;oBACP,EAAE;oBACF,SAAS;oBACT,OAAO;oBACP,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,CAAM;oBACzB,OAAO;iBACR;aACF,CAAC,CAAC;YAEH,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,cAAc;QACd,WAAW,EAAE,IAAI;KAClB,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,IAAI,qBAAqB;QAC9D,CAAC,CAAC,qBAAqB,CAAC;IAC1B,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAErC,4CAA4C;IAC5C,IAAI,QAAQ,CAAC,WAAW;QAAE,OAAO,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,GAAoB,CAAC;IAElG,MAAM,aAAa,GACjB,YAAY,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;QACjC,CAAC,CAAC,YAAY,CACV,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACtB,eAAC,cAAc,OACT,OAAO,EACX,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,kBAAkB,EAAE,gBAAgB,EACpC,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC,EACF,YAAY,CACb;QACH,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAEpC,MAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,iBAAiB,EAAE,aACtE,QAAQ,EACR,aAAa,IACU,GACT,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } from 'react';\nimport type { ComponentType, Dispatch, Context, MutableRefObject, SetStateAction } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, windowIsAvailable } from '../../utils';\nimport '../../init';\nimport { useConfiguration } from '../../hooks';\nimport type { DeferInfer } from '../../types';\n\nimport PreviewPanel from './PreviewPanel';\nimport type {\n PreviewOptions,\n PreviewManagerContextValue,\n PreviewMethods,\n PreviewObject,\n PreviewManagerProps\n} from './Preview.types';\nimport { PreviewContext, PreviewManagerContext } from './Contexts';\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n previewManagerContext?: Context<PreviewManagerContextValue>;\n }\n}\n\ntype PreviewReducerPayload<P extends object> =\n | { type: 'create'; preview: PreviewObject<P> }\n | { type: 'update'; id: string; props: Partial<P>; options?: Partial<PreviewOptions> }\n | { type: 'unmount'; id: string };\n\nconst reducer = <P extends object>(\n previews: PreviewObject[] | [],\n payload: PreviewReducerPayload<P>\n): PreviewObject<object>[] => {\n switch (payload.type) {\n case 'create':\n // Stub for multiple preview support\n // return [...previews, payload.preview as unknown as PreviewObject<object>];\n return [payload.preview as unknown as PreviewObject<object>];\n\n case 'update':\n return previews.map(preview =>\n preview.id === payload.id\n ? {\n ...preview,\n props: { ...preview.props, ...payload.props },\n options: {\n ...preview.options,\n ...payload.options,\n previewProps: {\n ...preview.options?.previewProps,\n ...payload.options?.previewProps\n }\n }\n }\n : preview\n );\n\n case 'unmount':\n return previews.filter(preview => preview.id !== payload.id);\n\n default:\n return previews;\n }\n};\n\nconst WrappedPreview = memo(\n ({\n Component,\n props,\n options,\n previewStateSetter,\n previewTriggerRef,\n methods\n }: PreviewObject & {\n previewStateSetter: Dispatch<SetStateAction<boolean>>;\n previewTriggerRef: MutableRefObject<HTMLElement | null>;\n }) => {\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // This state change is required to transition the case preview in.\n const [open, setOpen] = useState(false);\n const openRef = useRef(false);\n\n const cleanupPreview = () => {\n setOpen(false);\n openRef.current = false;\n previewStateSetter(false);\n optionsRef.current?.previewProps.onAfterClose?.();\n methods.unmountPreview();\n };\n\n useEffect(() => {\n setOpen(true);\n openRef.current = true;\n previewStateSetter(true);\n return () => {\n // Guard with openRef so we don't double-fire if already closed via the close button.\n if (openRef.current) {\n optionsRef.current?.previewProps.onBeforeClose?.();\n cleanupPreview();\n }\n };\n }, []);\n\n return (\n <PreviewContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n initialized: true,\n previewTriggerRef,\n ...methods\n }}\n >\n <PreviewPanel\n open={open}\n {...options?.previewProps}\n onAfterClose={() => {\n cleanupPreview();\n }}\n >\n <Component {...(props as Record<string, unknown>)} />\n </PreviewPanel>\n </PreviewContext.Provider>\n );\n }\n);\n\nconst PreviewManager = ({ children }: PreviewManagerProps) => {\n const [previews, dispatch] = useReducer(reducer, []);\n const [previewActive, setPreviewActive] = useState(false);\n const previewTriggerRef = useRef<HTMLElement | null>(null);\n const { portalTarget } = useConfiguration();\n\n const providerValue = useMemo(\n () => ({\n previewActive,\n setPreviewActive,\n createPreview: <P extends object>(\n Component: ComponentType<P>,\n props?: DeferInfer<P>,\n options?: PreviewOptions\n ): PreviewMethods<P> => {\n const id = createUID();\n\n const methods = {\n updatePreview: (updatedProps: Partial<P>, updatedOptions?: Partial<PreviewOptions>) => {\n (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n type: 'update',\n id,\n props: updatedProps,\n options: updatedOptions\n });\n },\n unmountPreview: () => {\n dispatch({ type: 'unmount', id });\n }\n };\n\n (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n type: 'create',\n preview: {\n id,\n Component,\n methods,\n props: (props ?? {}) as P,\n options\n }\n });\n\n return methods;\n },\n PreviewContext,\n initialized: true\n }),\n [previewActive]\n );\n\n const context = windowIsAvailable\n ? window.cosmos.previewManagerContext ?? PreviewManagerContext\n : PreviewManagerContext;\n const priorCtx = useContext(context);\n\n // Don't create additional Preview managers.\n if (priorCtx.initialized) return <context.Provider value={priorCtx}>{children}</context.Provider>;\n\n const previewPortal =\n portalTarget && previews.length > 0\n ? createPortal(\n previews.map(preview => (\n <WrappedPreview\n {...preview}\n key={preview.id}\n previewStateSetter={setPreviewActive}\n previewTriggerRef={previewTriggerRef}\n />\n )),\n portalTarget\n )\n : null;\n\n return (\n <context.Provider value={providerValue}>\n {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}\n <PreviewContext.Provider value={{ initialized: false, previewTriggerRef }}>\n {children}\n {previewPortal}\n </PreviewContext.Provider>\n </context.Provider>\n );\n};\n\nexport default PreviewManager;\n"]}
|
|
1
|
+
{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } from 'react';\nimport type { ComponentType, Dispatch, Context, MutableRefObject, SetStateAction } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, windowIsAvailable } from '../../utils';\nimport '../../init';\nimport { useBreakpoint, useConfiguration } from '../../hooks';\nimport type { DeferInfer } from '../../types';\n\nimport PreviewPanel from './PreviewPanel';\nimport type {\n PreviewOptions,\n PreviewManagerContextValue,\n PreviewMethods,\n PreviewObject,\n PreviewManagerProps\n} from './Preview.types';\nimport { PreviewContext, PreviewManagerContext } from './Contexts';\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n previewManagerContext?: Context<PreviewManagerContextValue>;\n }\n}\n\ntype PreviewReducerPayload<P extends object> =\n | { type: 'create'; preview: PreviewObject<P> }\n | { type: 'update'; id: string; props: Partial<P>; options?: Partial<PreviewOptions> }\n | { type: 'unmount'; id: string }\n | { type: 'clear' };\n\nconst reducer = <P extends object>(\n previews: PreviewObject[] | [],\n payload: PreviewReducerPayload<P>\n): PreviewObject<object>[] => {\n switch (payload.type) {\n case 'create':\n // Stub for multiple preview support\n // return [...previews, payload.preview as unknown as PreviewObject<object>];\n return [payload.preview as unknown as PreviewObject<object>];\n\n case 'update':\n return previews.map(preview =>\n preview.id === payload.id\n ? {\n ...preview,\n props: { ...preview.props, ...payload.props },\n options: {\n ...preview.options,\n ...payload.options,\n previewProps: {\n ...preview.options?.previewProps,\n ...payload.options?.previewProps\n }\n }\n }\n : preview\n );\n\n case 'unmount':\n return previews.filter(preview => preview.id !== payload.id);\n\n case 'clear':\n return [];\n\n default:\n return previews;\n }\n};\n\nconst WrappedPreview = memo(\n ({\n Component,\n props,\n options,\n previewStateSetter,\n previewTriggerRef,\n methods\n }: PreviewObject & {\n previewStateSetter: Dispatch<SetStateAction<boolean>>;\n previewTriggerRef: MutableRefObject<HTMLElement | null>;\n }) => {\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // This state change is required to transition the case preview in.\n const [open, setOpen] = useState(false);\n const openRef = useRef(false);\n\n const cleanupPreview = () => {\n setOpen(false);\n openRef.current = false;\n previewStateSetter(false);\n optionsRef.current?.previewProps.onAfterClose?.();\n methods.unmountPreview();\n };\n\n useEffect(() => {\n setOpen(true);\n openRef.current = true;\n previewStateSetter(true);\n return () => {\n // Guard with openRef so we don't double-fire if already closed via the close button.\n if (openRef.current) {\n optionsRef.current?.previewProps.onBeforeClose?.();\n cleanupPreview();\n }\n };\n }, []);\n\n return (\n <PreviewContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n initialized: true,\n previewTriggerRef,\n ...methods\n }}\n >\n <PreviewPanel\n open={open}\n {...options?.previewProps}\n onAfterClose={() => {\n cleanupPreview();\n }}\n >\n <Component {...(props as Record<string, unknown>)} />\n </PreviewPanel>\n </PreviewContext.Provider>\n );\n }\n);\n\nconst PreviewManager = ({ children }: PreviewManagerProps) => {\n const [previews, dispatch] = useReducer(reducer, []);\n const [previewActive, setPreviewActive] = useState(false);\n const previewTriggerRef = useRef<HTMLElement | null>(null);\n const { portalTarget } = useConfiguration();\n const isSmallOrAbove = useBreakpoint('sm');\n\n // Dismiss all previews when screen size reflows below sm breakpoint\n useEffect(() => {\n if (!isSmallOrAbove && previews.length > 0) {\n dispatch({ type: 'clear' });\n }\n }, [isSmallOrAbove, previews.length]);\n\n const providerValue = useMemo(\n () => ({\n previewActive,\n setPreviewActive,\n createPreview: <P extends object>(\n Component: ComponentType<P>,\n props?: DeferInfer<P>,\n options?: PreviewOptions\n ): PreviewMethods<P> => {\n const id = createUID();\n\n const methods = {\n updatePreview: (updatedProps: Partial<P>, updatedOptions?: Partial<PreviewOptions>) => {\n (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n type: 'update',\n id,\n props: updatedProps,\n options: updatedOptions\n });\n },\n unmountPreview: () => {\n dispatch({ type: 'unmount', id });\n }\n };\n\n (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n type: 'create',\n preview: {\n id,\n Component,\n methods,\n props: (props ?? {}) as P,\n options\n }\n });\n\n return methods;\n },\n PreviewContext,\n initialized: true\n }),\n [previewActive]\n );\n\n const context = windowIsAvailable\n ? window.cosmos.previewManagerContext ?? PreviewManagerContext\n : PreviewManagerContext;\n const priorCtx = useContext(context);\n\n // Don't create additional Preview managers.\n if (priorCtx.initialized) return <context.Provider value={priorCtx}>{children}</context.Provider>;\n\n const previewPortal =\n portalTarget && previews.length > 0\n ? createPortal(\n previews.map(preview => (\n <WrappedPreview\n {...preview}\n key={preview.id}\n previewStateSetter={setPreviewActive}\n previewTriggerRef={previewTriggerRef}\n />\n )),\n portalTarget\n )\n : null;\n\n return (\n <context.Provider value={providerValue}>\n {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}\n <PreviewContext.Provider value={{ initialized: false, previewTriggerRef }}>\n {children}\n {previewPortal}\n </PreviewContext.Provider>\n </context.Provider>\n );\n};\n\nexport default PreviewManager;\n"]}
|
|
@@ -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;;;;
|
|
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"}
|
|
@@ -27,7 +27,7 @@ export const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {
|
|
|
27
27
|
min-width: ${resizeDrawerMinWidth};
|
|
28
28
|
max-width: ${resizeDrawerMaxWidth};
|
|
29
29
|
width: var(--resize-drawer-width);
|
|
30
|
-
background
|
|
30
|
+
background: ${theme.base.palette['app-background']};
|
|
31
31
|
height: auto;
|
|
32
32
|
inset-block-start: var(--appshell-top-offset, 0);
|
|
33
33
|
inset-block-end: var(--appshell-bottom-offset, 0);
|
|
@@ -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
|
|
@@ -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-color: ${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"]}
|
|
@@ -6,7 +6,7 @@ import type { RadioCheckProps } from '../RadioCheck';
|
|
|
6
6
|
import type { elements } from '../FormField/FormField.test-ids';
|
|
7
7
|
export type RadioCheckGroupProps = WithAttributes<'fieldset', TestIdProp<typeof elements> & {
|
|
8
8
|
/** Accepts Checkboxes or RadioButtons as children. */
|
|
9
|
-
children
|
|
9
|
+
children?: ReactElement | ReactElement[];
|
|
10
10
|
/**
|
|
11
11
|
* Conveniently pass an onChange handler to the group to be notified when any of the inputs change.
|
|
12
12
|
* Additionally, onChange can be passed to individual children.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;AAqNH,wBAAuE"}
|