@pega/cosmos-react-core 10.0.0-build.2.9 → 10.0.0-build.3.1
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 +37 -5
- 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/MenuButton/MenuButton.d.ts.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +1 -0
- package/lib/components/MenuButton/MenuButton.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 +12 -1
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +12 -1
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +15 -3
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +12 -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
|
@@ -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"}
|
|
@@ -9,8 +9,9 @@ import { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '.
|
|
|
9
9
|
import { StyledImageContainer, StyledSelectionCard, StyledSelectionCardInline } from '../SelectionCard/SelectionCard.styles';
|
|
10
10
|
import { getActiveElement, withTestIds } from '../../utils';
|
|
11
11
|
import { StyledRadioCheck } from '../RadioCheck/RadioCheck';
|
|
12
|
+
import EmptyState, { StyledEmptyState } from '../EmptyState';
|
|
12
13
|
import { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';
|
|
13
|
-
export const StyledRadioCheckGroup = styled.fieldset(() => {
|
|
14
|
+
export const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {
|
|
14
15
|
return css `
|
|
15
16
|
container-type: inline-size;
|
|
16
17
|
flex-wrap: nowrap;
|
|
@@ -33,8 +34,15 @@ export const StyledRadioCheckGroup = styled.fieldset(() => {
|
|
|
33
34
|
${StyledRadioCheck} > ${StyledFormFieldInfo} {
|
|
34
35
|
display: none;
|
|
35
36
|
}
|
|
37
|
+
|
|
38
|
+
${StyledEmptyState} {
|
|
39
|
+
border: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
40
|
+
border-radius: ${theme.components.card['border-radius']};
|
|
41
|
+
padding: calc(2 * ${theme.base.spacing});
|
|
42
|
+
}
|
|
36
43
|
`;
|
|
37
44
|
});
|
|
45
|
+
StyledRadioCheckGroup.defaultProps = defaultThemeProp;
|
|
38
46
|
const getCardGridColumns = (cardWidth) => css `
|
|
39
47
|
@container (min-width: calc(2 * ${cardWidth})) {
|
|
40
48
|
grid-template-columns: repeat(2, 1fr);
|
|
@@ -123,22 +131,30 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
|
|
|
123
131
|
};
|
|
124
132
|
}
|
|
125
133
|
}, [optionsEl, inline, autoStack]);
|
|
126
|
-
const mapChildren = useMemo(() =>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
134
|
+
const mapChildren = useMemo(() => {
|
|
135
|
+
if (!children || Children.toArray(children).filter(Boolean).length === 0)
|
|
136
|
+
return;
|
|
137
|
+
return Children.map(children, child => {
|
|
138
|
+
if (!child)
|
|
139
|
+
return null;
|
|
140
|
+
return cloneElement(child, {
|
|
141
|
+
name,
|
|
142
|
+
status: restProps.status,
|
|
143
|
+
disabled: disabled || child.props.disabled,
|
|
144
|
+
readOnly: readOnly || child.props.readOnly,
|
|
145
|
+
variant: variant === 'card-grid' ? 'card' : variant,
|
|
146
|
+
suppressAnnouncements: true,
|
|
147
|
+
onChange: onChange
|
|
148
|
+
? (e) => {
|
|
149
|
+
if (!(readOnly || child.props.readOnly)) {
|
|
150
|
+
child.props.onChange?.(e);
|
|
151
|
+
onChange(e);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
: child.props.onChange
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
}, [children, name, disabled, readOnly, variant, onChange]);
|
|
142
158
|
return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, isRadioCheck: true, onClear: onClear,
|
|
143
159
|
// Prevents blur when any input within the group is actively focused.
|
|
144
160
|
onMouseDown: (e) => {
|
|
@@ -150,12 +166,17 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
|
|
|
150
166
|
if (!(e.target instanceof Element) || !e.target.closest('label'))
|
|
151
167
|
return;
|
|
152
168
|
e.preventDefault();
|
|
153
|
-
}, children:
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
169
|
+
}, children: (() => {
|
|
170
|
+
if (!mapChildren) {
|
|
171
|
+
return _jsx(EmptyState, { variant: 'bordered' });
|
|
172
|
+
}
|
|
173
|
+
return variant === 'card-grid' ? (_jsx(StyledCardGrid, { ref: setOptionsEl, renderInline: renderInline, autoStack: autoStack, childCount: Children.count(children), children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
|
|
174
|
+
direction: renderInline ? 'row' : 'column',
|
|
175
|
+
colGap: renderInline ? 1.5 : 2,
|
|
176
|
+
rowGap: variant === 'card' ? 1 : 0,
|
|
177
|
+
wrap: 'wrap'
|
|
178
|
+
}, children: mapChildren }));
|
|
179
|
+
})() }));
|
|
159
180
|
});
|
|
160
181
|
export default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);
|
|
161
182
|
//# sourceMappingURL=RadioCheckGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQjG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAqB,MAAM,mBAAmB,CAAC;AAGnE,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5F,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AA0DvE,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE;IACxD,OAAO,GAAG,CAAA;;;;;UAKF,eAAe;;;;;MAKnB,mBAAmB;;;;MAInB,yBAAyB,IAAI,oBAAoB;;;;;MAKjD,gBAAgB,MAAM,mBAAmB;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,GAAG,CAAA;oCACjB,SAAS;;;;oCAIT,SAAS;;;;oCAIT,SAAS;;;CAG5C,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAmB,EAAE,EAAE;IACzD,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC;IACxD,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC;IAC5D,OAAO,GAAG,CAAA;;WAED,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAIvB,kBAAkB,CAAC,gBAAgB,CAAC;;YAE9B,yBAAyB;QAC7B,kBAAkB,CAAC,oBAAoB,CAAC;;GAE7C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAI9B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IACpD,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,GAAG,CAAA;;aAED,KAAK,CAAC,IAAI,CAAC,OAAO;;;KAG1B,CAAC;IACJ,CAAC;IAED,OAAO,SAAS;QACd,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;QACnC,CAAC,CAAC,GAAG,CAAA;;eAEM,KAAK,CAAC,IAAI,CAAC,OAAO;wCACO,UAAU;;OAE3C,CAAC;AACR,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,QAAQ,EAClB,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,yBAAyB,CAAC,CAAC;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAE/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE1C,SAAS,CACP,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,EACxC;QACE,QAAQ,EAAE,mBAAmB;QAC7B,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,MAAM;KACZ,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,MAAM,IAAI,SAAS,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC;YAC5D,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;gBACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;oBACrC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU;wBAAE,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;oBACpF,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;oBAChC,eAAe,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC,EACD,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,CAClC,CAAC;YAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAClD,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC;oBACtF,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC/B,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,SAAoB,CAAC,CAAC;YAC7D,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAElC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;gBAClC,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC7B,YAAY,CAAC,KAAK,EAAE;QAClB,IAAI;QACJ,MAAM,EAAE,SAAS,CAAC,MAAM;QACxB,QAAQ,EAAE,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ;QAC1C,QAAQ,EAAE,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ;QAC1C,OAAO,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACnD,qBAAqB,EAAE,IAAI;QAC3B,QAAQ,EAAE,QAAQ;YAChB,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBACnC,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACxC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;oBAC1B,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC;YACH,CAAC;YACH,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;KACzB,CAAC,CACH,EACH,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CACxD,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,MAAM,EAAE,KAAK,EACb,YAAY,QACZ,OAAO,EAAE,OAAO;QAChB,qEAAqE;QACrE,WAAW,EAAE,CAAC,CAAuC,EAAE,EAAE;YACvD,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;YAE3B,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAElC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;gBAAE,OAAO;YAE/D,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;gBAAE,OAAO;YAEzE,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,YAEA,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,CACzB,KAAC,cAAc,IACb,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,YAEnC,WAAW,GACG,CAClB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE;gBACT,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAC1C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC9B,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClC,IAAI,EAAE,MAAM;aACb,YAEA,WAAW,GACP,CACR,GACS,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. */\n children: ReactElement | ReactElement[];\n /**\n * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: FormFieldProps['onClear'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: FormFieldProps['inline'];\n /** Used to toggle the auto stacking feature of an inlined group.\n * @default true\n */\n autoStack?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /**\n * Controls the styling of the child RadioChecks.\n * @default 'simple'\n */\n variant?: RadioCheckProps['variant'] | 'card-grid';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /**\n * Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n */\n arrowNavigation?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n /* To enlarge the image containers to the size of the biggest one */\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n `;\n});\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(\n () =>\n Children.map(children, child =>\n cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled || child.props.disabled,\n readOnly: readOnly || child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly || child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n ),\n [children, name, disabled, readOnly, variant, onChange]\n );\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n )}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. */\n children?: ReactElement | ReactElement[];\n /**\n * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: FormFieldProps['onClear'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: FormFieldProps['inline'];\n /** Used to toggle the auto stacking feature of an inlined group.\n * @default true\n */\n autoStack?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /**\n * Controls the styling of the child RadioChecks.\n * @default 'simple'\n */\n variant?: RadioCheckProps['variant'] | 'card-grid';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /**\n * Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n */\n arrowNavigation?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n /* To enlarge the image containers to the size of the biggest one */\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n\n ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(() => {\n if (!children || Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled || child.props.disabled,\n readOnly: readOnly || child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly || child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n });\n });\n }, [children, name, disabled, readOnly, variant, onChange]);\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n );\n })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;
|
|
1
|
+
{"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;YAwB7E,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6CAA6C,sBAAsB,4CAoE7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -23,6 +23,7 @@ export const StyledResponsiveActionsContainer = styled.div(({ stacked }) => css
|
|
|
23
23
|
&[aria-hidden='true'] {
|
|
24
24
|
position: fixed;
|
|
25
25
|
visibility: hidden;
|
|
26
|
+
inset-inline-end: 100lvi;
|
|
26
27
|
}
|
|
27
28
|
`);
|
|
28
29
|
const ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAazC,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CACxD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChB,YAAY,MAAM,YAAY;;;;;;;;MAQ9B,CAAC,OAAO;IACV,GAAG,CAAA;;;;;KAKF
|
|
1
|
+
{"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledButton } from '../Button';\nimport type { AsProp, WithAttributes } from '../../types';\n\ntype ResponsiveActionsProps = WithAttributes<\n 'div',\n AsProp & {\n /* Ref assigned to the actions region. */\n actionsRef: RefObject<HTMLElement>;\n /* Actions region content. */\n actionsEl: ReactNode;\n }\n>;\n\nexport const StyledResponsiveActionsContainer = styled.div<{ stacked?: boolean }>(\n ({ stacked }) => css`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: unset;\n }\n\n & > :not(a, button) {\n display: contents;\n }\n\n ${!stacked &&\n css`\n & > :is(a, button):first-child:not(:last-child),\n & > :first-child:not(:last-child) :is(a, button):first-child {\n margin-inline-end: auto;\n }\n `}\n\n &[aria-hidden='true'] {\n position: fixed;\n visibility: hidden;\n inset-inline-end: 100lvi;\n }\n `\n);\n\nconst ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }: ResponsiveActionsProps) => {\n const hiddenActionsRef = useRef<HTMLDivElement>(null);\n const [stacked, setStacked] = useState(false);\n\n useLayoutEffect(() => {\n if (hiddenActionsRef.current && actionsRef.current) {\n const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;\n\n const resizeObserver = new ResizeObserver(entries => {\n setTimeout(() => {\n if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {\n setStacked(false);\n } else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {\n setStacked(true);\n }\n }, 0);\n });\n\n resizeObserver.observe(actionsRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n });\n\n useLayoutEffect(() => {\n hiddenActionsRef.current?.querySelectorAll('a, button').forEach(action => {\n if (action.hasAttribute('id')) {\n action.removeAttribute('id');\n }\n if (action.hasAttribute('data-testid')) {\n action.removeAttribute('data-testid');\n }\n action.setAttribute('role', 'none');\n });\n });\n\n return (\n <>\n <Flex\n {...restProps}\n as={StyledResponsiveActionsContainer}\n forwardedAs={as}\n ref={actionsRef}\n stacked={stacked}\n container={{\n gap: 1,\n ...(stacked ? { direction: 'column' } : { justify: 'end' })\n }}\n >\n {actionsEl}\n </Flex>\n <Flex\n as={StyledResponsiveActionsContainer}\n ref={hiddenActionsRef}\n aria-hidden\n inert=''\n container={{\n gap: 1,\n direction: 'row',\n justify: 'end'\n }}\n >\n {actionsEl}\n </Flex>\n </>\n );\n};\n\nexport default ResponsiveActions;\n"]}
|
|
@@ -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-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-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"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -78,6 +78,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
78
78
|
panel: string;
|
|
79
79
|
other: string;
|
|
80
80
|
columns: string;
|
|
81
|
+
application: string;
|
|
81
82
|
remove: string;
|
|
82
83
|
follow: string;
|
|
83
84
|
unfollow: string;
|
|
@@ -165,6 +166,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
165
166
|
resize_noun: string;
|
|
166
167
|
search_noun: string;
|
|
167
168
|
actions_for: string;
|
|
169
|
+
edit_for: string;
|
|
168
170
|
edited: string;
|
|
169
171
|
deleted: string;
|
|
170
172
|
done: string;
|
|
@@ -332,6 +334,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
332
334
|
multiselect_instructions: string;
|
|
333
335
|
multiselect_instructions_with_links: string;
|
|
334
336
|
selected_items: string;
|
|
337
|
+
combobox_loading_selected_items: string;
|
|
335
338
|
composite_input_open_button_a11y: string;
|
|
336
339
|
composite_input_close_button_a11y: string;
|
|
337
340
|
list_toolbar_add_view: string;
|
|
@@ -1511,6 +1514,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1511
1514
|
remove_goto_references: string;
|
|
1512
1515
|
process_node_task: string;
|
|
1513
1516
|
process_node_assignment: string;
|
|
1517
|
+
process_node_collect_info: string;
|
|
1514
1518
|
process_node_automation: string;
|
|
1515
1519
|
process_node_decision: string;
|
|
1516
1520
|
process_node_goto: string;
|
|
@@ -1521,7 +1525,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1521
1525
|
process_connector_submit: string;
|
|
1522
1526
|
process_connector_default: string;
|
|
1523
1527
|
process_connector_otherwise: string;
|
|
1524
|
-
process_decision_description: string;
|
|
1525
1528
|
process_icon_assignment: string;
|
|
1526
1529
|
process_icon_automation: string;
|
|
1527
1530
|
process_icon_decision: string;
|
|
@@ -1656,6 +1659,10 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1656
1659
|
custom_caption: string;
|
|
1657
1660
|
add_label: string;
|
|
1658
1661
|
custom_add_label: string;
|
|
1662
|
+
search_label: string;
|
|
1663
|
+
custom_search_label: string;
|
|
1664
|
+
default_label_option: string;
|
|
1665
|
+
field_required_error: string;
|
|
1659
1666
|
instruction_text_label: string;
|
|
1660
1667
|
paragraph_already_exists_error: string;
|
|
1661
1668
|
paragraph_create_modal_heading: string;
|
|
@@ -1673,6 +1680,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1673
1680
|
input_format_label: string;
|
|
1674
1681
|
format_name_label: string;
|
|
1675
1682
|
format_pattern_label: string;
|
|
1683
|
+
format_pattern_helper_text: string;
|
|
1676
1684
|
format_already_exists_error: string;
|
|
1677
1685
|
override_parameters: string;
|
|
1678
1686
|
component_not_found_error: string;
|
|
@@ -1718,6 +1726,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1718
1726
|
first_n_fields: string;
|
|
1719
1727
|
learn_about_primary_fields: string;
|
|
1720
1728
|
show_lifecycle: string;
|
|
1729
|
+
show_case_type_in_subheading: string;
|
|
1721
1730
|
use_only_primary_fields: string;
|
|
1722
1731
|
use_only_primary_fields_info: string;
|
|
1723
1732
|
new_tab_heading: string;
|
|
@@ -1869,6 +1878,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1869
1878
|
app_info_view_content: string;
|
|
1870
1879
|
app_info_switch_branch: string;
|
|
1871
1880
|
app_info_update_from_main: string;
|
|
1881
|
+
app_info_commit_private_changes: string;
|
|
1882
|
+
app_info_merge_to_main: string;
|
|
1872
1883
|
app_info_view_branches: string;
|
|
1873
1884
|
app_info_application_version: string;
|
|
1874
1885
|
app_preview_loading: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -74,6 +74,7 @@ declare const _default: {
|
|
|
74
74
|
panel: string;
|
|
75
75
|
other: string;
|
|
76
76
|
columns: string;
|
|
77
|
+
application: string;
|
|
77
78
|
remove: string;
|
|
78
79
|
follow: string;
|
|
79
80
|
unfollow: string;
|
|
@@ -161,6 +162,7 @@ declare const _default: {
|
|
|
161
162
|
resize_noun: string;
|
|
162
163
|
search_noun: string;
|
|
163
164
|
actions_for: string;
|
|
165
|
+
edit_for: string;
|
|
164
166
|
edited: string;
|
|
165
167
|
deleted: string;
|
|
166
168
|
done: string;
|
|
@@ -328,6 +330,7 @@ declare const _default: {
|
|
|
328
330
|
multiselect_instructions: string;
|
|
329
331
|
multiselect_instructions_with_links: string;
|
|
330
332
|
selected_items: string;
|
|
333
|
+
combobox_loading_selected_items: string;
|
|
331
334
|
composite_input_open_button_a11y: string;
|
|
332
335
|
composite_input_close_button_a11y: string;
|
|
333
336
|
list_toolbar_add_view: string;
|
|
@@ -1507,6 +1510,7 @@ declare const _default: {
|
|
|
1507
1510
|
remove_goto_references: string;
|
|
1508
1511
|
process_node_task: string;
|
|
1509
1512
|
process_node_assignment: string;
|
|
1513
|
+
process_node_collect_info: string;
|
|
1510
1514
|
process_node_automation: string;
|
|
1511
1515
|
process_node_decision: string;
|
|
1512
1516
|
process_node_goto: string;
|
|
@@ -1517,7 +1521,6 @@ declare const _default: {
|
|
|
1517
1521
|
process_connector_submit: string;
|
|
1518
1522
|
process_connector_default: string;
|
|
1519
1523
|
process_connector_otherwise: string;
|
|
1520
|
-
process_decision_description: string;
|
|
1521
1524
|
process_icon_assignment: string;
|
|
1522
1525
|
process_icon_automation: string;
|
|
1523
1526
|
process_icon_decision: string;
|
|
@@ -1653,6 +1656,10 @@ declare const _default: {
|
|
|
1653
1656
|
custom_caption: string;
|
|
1654
1657
|
add_label: string;
|
|
1655
1658
|
custom_add_label: string;
|
|
1659
|
+
search_label: string;
|
|
1660
|
+
custom_search_label: string;
|
|
1661
|
+
default_label_option: string;
|
|
1662
|
+
field_required_error: string;
|
|
1656
1663
|
instruction_text_label: string;
|
|
1657
1664
|
paragraph_already_exists_error: string;
|
|
1658
1665
|
paragraph_create_modal_heading: string;
|
|
@@ -1670,6 +1677,7 @@ declare const _default: {
|
|
|
1670
1677
|
input_format_label: string;
|
|
1671
1678
|
format_name_label: string;
|
|
1672
1679
|
format_pattern_label: string;
|
|
1680
|
+
format_pattern_helper_text: string;
|
|
1673
1681
|
format_already_exists_error: string;
|
|
1674
1682
|
override_parameters: string;
|
|
1675
1683
|
component_not_found_error: string;
|
|
@@ -1715,6 +1723,7 @@ declare const _default: {
|
|
|
1715
1723
|
first_n_fields: string;
|
|
1716
1724
|
learn_about_primary_fields: string;
|
|
1717
1725
|
show_lifecycle: string;
|
|
1726
|
+
show_case_type_in_subheading: string;
|
|
1718
1727
|
use_only_primary_fields: string;
|
|
1719
1728
|
use_only_primary_fields_info: string;
|
|
1720
1729
|
new_tab_heading: string;
|
|
@@ -1872,6 +1881,8 @@ declare const _default: {
|
|
|
1872
1881
|
app_info_view_content: string;
|
|
1873
1882
|
app_info_switch_branch: string;
|
|
1874
1883
|
app_info_update_from_main: string;
|
|
1884
|
+
app_info_commit_private_changes: string;
|
|
1885
|
+
app_info_merge_to_main: string;
|
|
1875
1886
|
app_info_view_branches: string;
|
|
1876
1887
|
app_info_application_version: string;
|
|
1877
1888
|
/** studio-dx-components: Preview */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuvDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyPxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;;;IAWpC,oCAAoC;;;;;;IAOpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhtE3C,wBAgwEE"}
|