@pega/cosmos-react-core 4.0.0-dev.15.5 → 4.0.0-dev.16.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/AIButton/AIButton.d.ts +9 -0
- package/lib/components/AIButton/AIButton.d.ts.map +1 -0
- package/lib/components/AIButton/AIButton.js +25 -0
- package/lib/components/AIButton/AIButton.js.map +1 -0
- package/lib/components/AIButton/index.d.ts +4 -0
- package/lib/components/AIButton/index.d.ts.map +1 -0
- package/lib/components/AIButton/index.js +3 -0
- package/lib/components/AIButton/index.js.map +1 -0
- package/lib/components/AppShell/AppShell.js +1 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.js +106 -55
- package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.js +11 -3
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/DateTime/Input/DateInput.d.ts +9 -7
- package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateInput.js +5 -7
- package/lib/components/DateTime/Input/DateInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.js +7 -9
- package/lib/components/DateTime/Input/DateRangeInput.js.map +1 -1
- package/lib/components/Dialog/Dialog.styles.d.ts.map +1 -1
- package/lib/components/Dialog/Dialog.styles.js +3 -8
- package/lib/components/Dialog/Dialog.styles.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.d.ts +6 -8
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +9 -10
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/Link/Link.js +1 -1
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/Menu/MenuItem.d.ts.map +1 -1
- package/lib/components/Menu/MenuItem.js +4 -1
- package/lib/components/Menu/MenuItem.js.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.d.ts.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.js +1 -10
- package/lib/components/MultiStepForm/MultiStepForm.js.map +1 -1
- package/lib/components/Popover/Popover.d.ts.map +1 -1
- package/lib/components/Popover/Popover.js +8 -2
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Progress/Progress.d.ts.map +1 -1
- package/lib/components/Progress/Progress.js +1 -1
- package/lib/components/Progress/Progress.js.map +1 -1
- package/lib/components/SummaryList/SummaryList.js +1 -1
- package/lib/components/SummaryList/SummaryList.js.map +1 -1
- package/lib/hooks/useFocusWithin.d.ts.map +1 -1
- package/lib/hooks/useFocusWithin.js +29 -13
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +1 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +1 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +3 -1
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +1 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/lib/theme/theme.d.ts +6 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +4 -0
- package/lib/theme/themes/darkTheme.json +1 -0
- package/lib/types/types.d.ts +9 -1
- package/lib/types/types.d.ts.map +1 -1
- package/lib/types/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import Text from '../Text';
|
|
5
5
|
import Button from '../Button';
|
|
@@ -31,11 +31,11 @@ const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) =
|
|
|
31
31
|
});
|
|
32
32
|
StyledExpandButton.defaultProps = defaultThemeProp;
|
|
33
33
|
export const StyledFieldGroupName = styled.span ``;
|
|
34
|
-
export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('
|
|
34
|
+
export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ collapsed, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
|
|
35
35
|
return css `
|
|
36
36
|
width: 100%;
|
|
37
37
|
margin-bottom: 0;
|
|
38
|
-
${
|
|
38
|
+
${!collapsed &&
|
|
39
39
|
css `
|
|
40
40
|
margin-block-end: calc(1.5 * ${spacing});
|
|
41
41
|
`}
|
|
@@ -78,17 +78,16 @@ export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size':
|
|
|
78
78
|
`;
|
|
79
79
|
});
|
|
80
80
|
StyledFieldGroup.defaultProps = defaultThemeProp;
|
|
81
|
-
const FieldGroupLegend = ({ children,
|
|
82
|
-
return (_jsx(StyledFieldGroupLegend, {
|
|
81
|
+
const FieldGroupLegend = ({ children, collapsed, actions, additionalInfo, ...restProps }) => {
|
|
82
|
+
return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
|
|
83
83
|
};
|
|
84
|
-
const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions,
|
|
85
|
-
const [open, setOpen] = useState(!defaultCollapsed);
|
|
84
|
+
const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, ...restProps }, ref) => {
|
|
86
85
|
const t = useI18n();
|
|
87
86
|
const uid = useUID();
|
|
88
87
|
const descAndChildren = (_jsxs(Grid, { container: { cols: 'minmax(0, 1fr)', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
|
|
89
|
-
return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, {
|
|
90
|
-
|
|
91
|
-
}, "aria-expanded":
|
|
88
|
+
return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
|
|
89
|
+
onToggleCollapsed?.();
|
|
90
|
+
}, "aria-expanded": collapsed ? 'false' : 'true', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }));
|
|
92
91
|
});
|
|
93
92
|
export default FieldGroup;
|
|
94
93
|
//# sourceMappingURL=FieldGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /**\n * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n */\n collapsible?: boolean;\n /**\n * If true, the Field Group will be collapsed on the first render.\n * @default false\n */\n defaultCollapsed?: boolean;\n /** Select the heading tag for header */\n headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** The name associated with the Field Group. */\n name?: string;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n omitProps('open')\n)(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n headingTag,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Grid>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n {collapsible ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
|
|
1
|
+
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /**\n * Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n */\n collapsed?: boolean;\n /**\n * Called when user clicks the toggle button.\n */\n onToggleCollapsed?: () => void;\n /** Select the heading tag for header */\n headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** The name associated with the Field Group. */\n name?: string;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n omitProps('collapsed')\n)(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n collapsed,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Grid>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend collapsed={collapsed} actions={actions} additionalInfo={additionalInfo}>\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={collapsed ? 'false' : 'true'}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
|
|
@@ -170,7 +170,7 @@ const Link = forwardRef(({ href, variant = 'link', icon = false, previewable, on
|
|
|
170
170
|
setPopoverHideDelay('none');
|
|
171
171
|
setPreviewPopover(false);
|
|
172
172
|
setPopover(false);
|
|
173
|
-
}, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), !icon &&
|
|
173
|
+
}, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), !icon && target === '_blank' && _jsx(Icon, { name: 'open' })] }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, portal: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, portal: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
|
|
174
174
|
});
|
|
175
175
|
export default Link;
|
|
176
176
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n ReactNode,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n useState,\n useRef,\n KeyboardEvent,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useBreakpoint,\n useConsolidatedRef,\n useI18n,\n useUID,\n useModalContext,\n useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n /** Text or content for the Link. */\n children: ReactNode;\n /** URL or DOM id to navigate to. */\n href: string;\n /**\n * Controls the styling of the Link.\n * @default 'link'\n */\n variant?: ButtonProps['variant'];\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: ButtonProps['icon'];\n /** Determines if the Link should render a popover when focused or hovered over. */\n previewable?: boolean;\n /** Callback function that is run when the preview popover is interacted with. */\n onPreview?: (e: { href: string }) => void;\n /** Specifies where to open the link href. */\n target?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n ({ theme, preview }) => css`\n background-color: ${theme.components.tooltip['background-color']};\n z-index: ${theme.base['z-index'].tooltip};\n\n ${preview &&\n css`\n padding: ${theme.base.spacing};\n `}\n `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n z-index: 1;\n padding: 0 ${theme.base.spacing};\n min-height: 1.5rem;\n line-height: 1;\n color: ${contrastColor};\n font-size: ${fontSize.xs};\n text-decoration: none;\n\n /* FIXME: Button selector specificity... */\n & + & {\n margin: 0;\n }\n\n & + &::before {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n width: 1px; /* stylelint-disable-line unit-allowed-list */\n background-color: ${contrastColor};\n opacity: ${theme.base.transparency['transparent-3']};\n }\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n 0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n }\n `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n return css`\n width: 100%;\n padding: unset;\n\n &:hover,\n &:active {\n text-decoration: none;\n ${StyledText} span {\n text-decoration: underline;\n }\n }\n\n ${StyledText} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${theme.base.spacing};\n }\n }\n `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n (\n {\n href,\n variant = 'link',\n icon = false,\n previewable,\n onPreview,\n target: targetProp,\n children,\n ...restProps\n }: PropsWithoutRef<LinkProps>,\n ref: LinkProps['ref']\n ) => {\n const { initialized: inModal } = useModalContext();\n const { previewTriggerRef } = useContext(AppShellContext);\n const uid = useUID();\n const linkRef = useConsolidatedRef(ref);\n const [popover, setPopover] = useState(false);\n const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n const [previewPopover, setPreviewPopover] = useState(false);\n const previewBtnRef = useRef<HTMLButtonElement>(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const t = useI18n();\n const { macintosh } = useOS();\n const contextMenuOpened = useRef(false);\n\n const url = new URL(href, document.location.href);\n const crossOrigin = documentIsAvailable\n ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n : false;\n const target = crossOrigin ? '_blank' : targetProp;\n\n const showPopover = () => {\n if (isSmallOrAbove) {\n setPopover(true);\n setPreviewPopover(false);\n }\n };\n\n const showPreviewPopover = () => {\n if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n };\n\n const hidePopover = () => {\n setPopover(false);\n };\n\n const hidePreviewPopover = () => {\n setPreviewPopover(false);\n };\n\n const onEnterLink = () => {\n if (previewable) showPopover();\n };\n\n const onFocusLink = () => {\n if (previewable) showPreviewPopover();\n };\n\n const onBlurLink = () => {\n contextMenuOpened.current = false;\n hidePreviewPopover();\n };\n\n const onPreviewClick = () => {\n previewTriggerRef.current = linkRef.current;\n onPreview?.({ href });\n };\n\n const onKeyUp = (e: KeyboardEvent) => {\n if (e.getModifierState('Alt') && e.code === 'KeyP') {\n onPreviewClick();\n }\n };\n\n useEffect(() => {\n if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n setPopoverHideDelay('short');\n }\n }, [popoverHideDelay, popover, previewPopover]);\n\n return (\n <>\n <StyledLink\n href={href}\n variant={variant}\n ref={linkRef as any}\n target={target}\n {...restProps}\n onMouseEnter={onEnterLink}\n onMouseLeave={hidePopover}\n onFocus={onFocusLink}\n onBlur={onBlurLink}\n onKeyUp={onKeyUp}\n onContextMenu={() => {\n contextMenuOpened.current = true;\n\n setPopoverHideDelay('none');\n setPreviewPopover(false);\n setPopover(false);\n }}\n >\n {children}\n {target === '_blank' && (\n <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n )}\n {!icon && crossOrigin && <Icon name='open' />}\n </StyledLink>\n\n {!inModal && (\n <Popover\n show={previewPopover}\n groupId='link_preview'\n showDelay='short'\n hideDelay={popoverHideDelay}\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={showPreviewPopover}\n onMouseLeave={hidePreviewPopover}\n as={StyledLinkPopover}\n arrow\n preview\n portal\n onHide={hidePreviewPopover}\n >\n <StyledLinkPreviewPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n <Text>\n <span>{t('preview')}</span>\n <Flex container={{ inline: true, justify: 'end' }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='P' />\n </Flex>\n </Text>\n </StyledLinkPreviewPopoverBtn>\n </Popover>\n )}\n\n <Popover\n show={popover}\n groupId='link_preview'\n showDelay='short'\n hideDelay={popoverHideDelay}\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={showPopover}\n onMouseLeave={hidePopover}\n as={StyledLinkPopover}\n arrow\n portal\n >\n {!inModal && (\n <StyledLinkPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n {t('preview')}\n </StyledLinkPopoverBtn>\n )}\n <StyledLinkPopoverBtn\n forwardedAs='a'\n href={href}\n target='_blank'\n rel='noreferrer'\n tabIndex='-1'\n >\n {t('link_open_in_tab_text')}\n </StyledLinkPopoverBtn>\n </Popover>\n\n {previewable && (\n <span id={`${uid}-preview-instructions`} hidden>\n {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n </span>\n )}\n </>\n );\n }\n);\n\nexport default Link;\n"]}
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n ReactNode,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n useState,\n useRef,\n KeyboardEvent,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useBreakpoint,\n useConsolidatedRef,\n useI18n,\n useUID,\n useModalContext,\n useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n /** Text or content for the Link. */\n children: ReactNode;\n /** URL or DOM id to navigate to. */\n href: string;\n /**\n * Controls the styling of the Link.\n * @default 'link'\n */\n variant?: ButtonProps['variant'];\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: ButtonProps['icon'];\n /** Determines if the Link should render a popover when focused or hovered over. */\n previewable?: boolean;\n /** Callback function that is run when the preview popover is interacted with. */\n onPreview?: (e: { href: string }) => void;\n /** Specifies where to open the link href. */\n target?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n ({ theme, preview }) => css`\n background-color: ${theme.components.tooltip['background-color']};\n z-index: ${theme.base['z-index'].tooltip};\n\n ${preview &&\n css`\n padding: ${theme.base.spacing};\n `}\n `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n z-index: 1;\n padding: 0 ${theme.base.spacing};\n min-height: 1.5rem;\n line-height: 1;\n color: ${contrastColor};\n font-size: ${fontSize.xs};\n text-decoration: none;\n\n /* FIXME: Button selector specificity... */\n & + & {\n margin: 0;\n }\n\n & + &::before {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n width: 1px; /* stylelint-disable-line unit-allowed-list */\n background-color: ${contrastColor};\n opacity: ${theme.base.transparency['transparent-3']};\n }\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n 0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n }\n `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n return css`\n width: 100%;\n padding: unset;\n\n &:hover,\n &:active {\n text-decoration: none;\n ${StyledText} span {\n text-decoration: underline;\n }\n }\n\n ${StyledText} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${theme.base.spacing};\n }\n }\n `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n (\n {\n href,\n variant = 'link',\n icon = false,\n previewable,\n onPreview,\n target: targetProp,\n children,\n ...restProps\n }: PropsWithoutRef<LinkProps>,\n ref: LinkProps['ref']\n ) => {\n const { initialized: inModal } = useModalContext();\n const { previewTriggerRef } = useContext(AppShellContext);\n const uid = useUID();\n const linkRef = useConsolidatedRef(ref);\n const [popover, setPopover] = useState(false);\n const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n const [previewPopover, setPreviewPopover] = useState(false);\n const previewBtnRef = useRef<HTMLButtonElement>(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const t = useI18n();\n const { macintosh } = useOS();\n const contextMenuOpened = useRef(false);\n\n const url = new URL(href, document.location.href);\n const crossOrigin = documentIsAvailable\n ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n : false;\n const target = crossOrigin ? '_blank' : targetProp;\n\n const showPopover = () => {\n if (isSmallOrAbove) {\n setPopover(true);\n setPreviewPopover(false);\n }\n };\n\n const showPreviewPopover = () => {\n if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n };\n\n const hidePopover = () => {\n setPopover(false);\n };\n\n const hidePreviewPopover = () => {\n setPreviewPopover(false);\n };\n\n const onEnterLink = () => {\n if (previewable) showPopover();\n };\n\n const onFocusLink = () => {\n if (previewable) showPreviewPopover();\n };\n\n const onBlurLink = () => {\n contextMenuOpened.current = false;\n hidePreviewPopover();\n };\n\n const onPreviewClick = () => {\n previewTriggerRef.current = linkRef.current;\n onPreview?.({ href });\n };\n\n const onKeyUp = (e: KeyboardEvent) => {\n if (e.getModifierState('Alt') && e.code === 'KeyP') {\n onPreviewClick();\n }\n };\n\n useEffect(() => {\n if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n setPopoverHideDelay('short');\n }\n }, [popoverHideDelay, popover, previewPopover]);\n\n return (\n <>\n <StyledLink\n href={href}\n variant={variant}\n ref={linkRef as any}\n target={target}\n {...restProps}\n onMouseEnter={onEnterLink}\n onMouseLeave={hidePopover}\n onFocus={onFocusLink}\n onBlur={onBlurLink}\n onKeyUp={onKeyUp}\n onContextMenu={() => {\n contextMenuOpened.current = true;\n\n setPopoverHideDelay('none');\n setPreviewPopover(false);\n setPopover(false);\n }}\n >\n {children}\n {target === '_blank' && (\n <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n )}\n {!icon && target === '_blank' && <Icon name='open' />}\n </StyledLink>\n\n {!inModal && (\n <Popover\n show={previewPopover}\n groupId='link_preview'\n showDelay='short'\n hideDelay={popoverHideDelay}\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={showPreviewPopover}\n onMouseLeave={hidePreviewPopover}\n as={StyledLinkPopover}\n arrow\n preview\n portal\n onHide={hidePreviewPopover}\n >\n <StyledLinkPreviewPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n <Text>\n <span>{t('preview')}</span>\n <Flex container={{ inline: true, justify: 'end' }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='P' />\n </Flex>\n </Text>\n </StyledLinkPreviewPopoverBtn>\n </Popover>\n )}\n\n <Popover\n show={popover}\n groupId='link_preview'\n showDelay='short'\n hideDelay={popoverHideDelay}\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={showPopover}\n onMouseLeave={hidePopover}\n as={StyledLinkPopover}\n arrow\n portal\n >\n {!inModal && (\n <StyledLinkPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n {t('preview')}\n </StyledLinkPopoverBtn>\n )}\n <StyledLinkPopoverBtn\n forwardedAs='a'\n href={href}\n target='_blank'\n rel='noreferrer'\n tabIndex='-1'\n >\n {t('link_open_in_tab_text')}\n </StyledLinkPopoverBtn>\n </Popover>\n\n {previewable && (\n <span id={`${uid}-preview-instructions`} hidden>\n {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n </span>\n )}\n </>\n );\n }\n);\n\nexport default Link;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgB3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAgExE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgB3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAgExE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA4M7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -112,9 +112,12 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual, count, it
|
|
|
112
112
|
idString = '';
|
|
113
113
|
return idString;
|
|
114
114
|
}, [items, secondary, itemCountId, secondaryId]);
|
|
115
|
-
return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, tabIndex:
|
|
115
|
+
return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, tabIndex: -1, disabled: disabled, onMouseDown: (e) => {
|
|
116
116
|
e.preventDefault();
|
|
117
117
|
}, onClick: (e) => {
|
|
118
|
+
if (disabled) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
118
121
|
/** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */
|
|
119
122
|
if (e.detail === 0 && selected !== undefined) {
|
|
120
123
|
announcePolite({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionComponent, MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, useDirection, useLiveLog, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const { announcePolite } = useLiveLog();\n\n const selectionMode = mode === 'single-select' || mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${id}-count`;\n const secondaryId = `${id}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n items || count ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n let label = '';\n let collapsedLabel = '';\n if (selectableParent && selectionMode) {\n const selectedParentItemLabel = selected\n ? t('selected_noun', [primary])\n : t('unselected_noun', [primary]);\n collapsedLabel = t('menu_collapsed', [selectedParentItemLabel]);\n } else {\n collapsedLabel = t('menu_collapsed', [primary]);\n }\n if (selectionMode && !items) {\n label = selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]);\n } else {\n label = primary;\n }\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return label;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n disabled={disabled}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n /** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */\n if (e.detail === 0 && selected !== undefined) {\n announcePolite({\n /** selected is still not updated so putting the reverse logic. */\n message: !selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]),\n type: 'acknowledgement'\n });\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={!!selected}\n selectableParent={selectableParent}\n >\n {selectionMode && (!items || selectableParent) && (\n <Icon as={StyledCheckMarkIcon} name='check' />\n )}\n\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionComponent, MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, useDirection, useLiveLog, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const { announcePolite } = useLiveLog();\n\n const selectionMode = mode === 'single-select' || mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${id}-count`;\n const secondaryId = `${id}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n items || count ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n let label = '';\n let collapsedLabel = '';\n if (selectableParent && selectionMode) {\n const selectedParentItemLabel = selected\n ? t('selected_noun', [primary])\n : t('unselected_noun', [primary]);\n collapsedLabel = t('menu_collapsed', [selectedParentItemLabel]);\n } else {\n collapsedLabel = t('menu_collapsed', [primary]);\n }\n if (selectionMode && !items) {\n label = selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]);\n } else {\n label = primary;\n }\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return label;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex={-1}\n disabled={disabled}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n if (disabled) {\n return;\n }\n /** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */\n if (e.detail === 0 && selected !== undefined) {\n announcePolite({\n /** selected is still not updated so putting the reverse logic. */\n message: !selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]),\n type: 'acknowledgement'\n });\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={!!selected}\n selectableParent={selectableParent}\n >\n {selectionMode && (!items || selectableParent) && (\n <Icon as={StyledCheckMarkIcon} name='check' />\n )}\n\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU,0GAAgB,CAAC;AAExC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,iKAqBpC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA4H9E,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -12,16 +12,7 @@ import Grid from '../Grid';
|
|
|
12
12
|
import { defaultThemeProp } from '../../theme';
|
|
13
13
|
import VerticalFormProgress from './VerticalFormProgress';
|
|
14
14
|
import HorizontalFormProgress from './HorizontalFormProgress';
|
|
15
|
-
export const StyledForm = styled.form
|
|
16
|
-
const { base: { spacing } } = theme;
|
|
17
|
-
return css `
|
|
18
|
-
height: 100%;
|
|
19
|
-
width: 100%;
|
|
20
|
-
flex-grow: 1;
|
|
21
|
-
overflow-y: auto;
|
|
22
|
-
padding: ${spacing};
|
|
23
|
-
`;
|
|
24
|
-
});
|
|
15
|
+
export const StyledForm = styled.form ``;
|
|
25
16
|
export const StyledFormContent = styled.div ``;
|
|
26
17
|
export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
|
|
27
18
|
const { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { urgent } } } = theme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid from '../Grid';\nimport { defaultThemeProp } from '../../theme';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n return css`\n height: 100%;\n width: 100%;\n flex-grow: 1;\n overflow-y: auto;\n padding: ${spacing};\n `;\n});\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n (\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) => {\n const multiStepContentRef = useRef(null);\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n useEffect(() => {\n if (previousId === undefined) return;\n\n if (previousId !== currentStepId) {\n const focusableElements = getFocusables(multiStepContentRef);\n\n if (focusableElements.length) focusableElements[0].focus();\n }\n }, [currentStepId, previousId]);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator =\n stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n if (heading) areaDef += '\"heading\" ';\n areaDef += '\"stepIndicator\" \"content\"';\n if (currentStep.actions) areaDef += ' \"actions\"';\n break;\n case 'vertical':\n if (heading) areaDef += '\"heading stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n if (currentStep.actions) areaDef += ' \"actions actions\"';\n break;\n default:\n if (heading) areaDef += '\"heading\" ';\n areaDef += '\"content\"';\n if (currentStep.actions) areaDef += ' \"actions\"';\n }\n\n return (\n <Grid\n ref={ref}\n as={StyledForm}\n {...restProps}\n container={{\n cols:\n stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 3\n }}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n >\n {(heading || steps.length > 1) && (\n <>\n {heading && (\n <Grid item={{ area: 'heading' }}>\n <Text id={headingId} variant='h3'>\n {heading}\n </Text>\n </Grid>\n )}\n {steps.length > 1 && (\n <>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </>\n )}\n </>\n )}\n\n <Grid item={{ area: 'content' }} container={{ gap: 3 }}>\n {currentStep.banners}\n\n {currentStep.description && (\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n )}\n\n <StyledFormContent ref={multiStepContentRef}>{currentStep.content}</StyledFormContent>\n </Grid>\n {currentStep.actions && (\n <Grid item={{ area: 'actions' }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {currentStep.actions}\n </Flex>\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
|
|
1
|
+
{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid from '../Grid';\nimport { defaultThemeProp } from '../../theme';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form``;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n (\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) => {\n const multiStepContentRef = useRef(null);\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n useEffect(() => {\n if (previousId === undefined) return;\n\n if (previousId !== currentStepId) {\n const focusableElements = getFocusables(multiStepContentRef);\n\n if (focusableElements.length) focusableElements[0].focus();\n }\n }, [currentStepId, previousId]);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator =\n stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n if (heading) areaDef += '\"heading\" ';\n areaDef += '\"stepIndicator\" \"content\"';\n if (currentStep.actions) areaDef += ' \"actions\"';\n break;\n case 'vertical':\n if (heading) areaDef += '\"heading stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n if (currentStep.actions) areaDef += ' \"actions actions\"';\n break;\n default:\n if (heading) areaDef += '\"heading\" ';\n areaDef += '\"content\"';\n if (currentStep.actions) areaDef += ' \"actions\"';\n }\n\n return (\n <Grid\n ref={ref}\n as={StyledForm}\n {...restProps}\n container={{\n cols:\n stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 3\n }}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n >\n {(heading || steps.length > 1) && (\n <>\n {heading && (\n <Grid item={{ area: 'heading' }}>\n <Text id={headingId} variant='h3'>\n {heading}\n </Text>\n </Grid>\n )}\n {steps.length > 1 && (\n <>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </>\n )}\n </>\n )}\n\n <Grid item={{ area: 'content' }} container={{ gap: 3 }}>\n {currentStep.banners}\n\n {currentStep.description && (\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n )}\n\n <StyledFormContent ref={multiStepContentRef}>{currentStep.content}</StyledFormContent>\n </Grid>\n {currentStep.actions && (\n <Grid item={{ area: 'actions' }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {currentStep.actions}\n </Flex>\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAwJnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -73,17 +73,23 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement = '
|
|
|
73
73
|
if (forceUpdate)
|
|
74
74
|
forceUpdateRef.current = forceUpdate;
|
|
75
75
|
useEffect(() => {
|
|
76
|
+
const controller = new AbortController();
|
|
76
77
|
const observer = new ResizeObserver(() => {
|
|
77
|
-
|
|
78
|
+
requestAnimationFrame(() => {
|
|
79
|
+
if (!controller.signal.aborted) {
|
|
80
|
+
forceUpdateRef.current?.();
|
|
81
|
+
}
|
|
82
|
+
});
|
|
78
83
|
});
|
|
79
84
|
if (popperRef.current)
|
|
80
85
|
observer.observe(popperRef.current);
|
|
81
86
|
if (target instanceof Element)
|
|
82
87
|
observer.observe(target);
|
|
83
88
|
return () => {
|
|
89
|
+
controller.abort();
|
|
84
90
|
observer.disconnect();
|
|
85
91
|
};
|
|
86
|
-
}
|
|
92
|
+
});
|
|
87
93
|
useEffect(() => {
|
|
88
94
|
if (groupId && show)
|
|
89
95
|
setActive(uid, groupId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n (\n {\n show = true,\n portal = false,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n ) => {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n\n const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n forceUpdateRef.current?.();\n });\n\n if (popperRef.current) observer.observe(popperRef.current);\n if (target instanceof Element) observer.observe(target);\n\n return () => {\n observer.disconnect();\n };\n }, [forceUpdate, popperRef.current, target]);\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n const content = (\n <StyledPopover\n {...restProps}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Popover;\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAKV,MAAM,EAEN,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,SAAS,EAAe,MAAM,cAAc,CAAC;AAKtD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA6D9C,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,OAAO,GAEc,UAAU,CACnC,CACE,EACE,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,MAAM,EACN,SAAS,GAAG,QAAQ,EACpB,QAAQ,GAAG,OAAO,EAClB,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,KAAK,EACb,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,SAAS,GAAG,MAAM,EAClB,kBAAkB,GAAG,KAAK,EAC1B,QAAQ,EACR,MAAM,EACN,GAAG,SAAS,EAC8C,EAC5D,GAAwB,EACxB,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACjE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC/E,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IACrD,MAAM,SAAS,GAAG,kBAAkB,CAAiB,GAAG,EAAE,WAAW,CAAC,CAAC;IACvE,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,MAAM,EAAU,CAAC;IACjC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;IAEhF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS;aAC5B,KAAK,EAAE;aACP,OAAO,EAAE;aACT,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,MAAM,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS,CAAC,EAAE,OAAO,CAAC;QAEzF,OAAO;YACL;gBACE,IAAI,EAAE,eAAe;gBACrB,OAAO,EAAE;oBACP,eAAe,EAAE,KAAK;iBACvB;aACF;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE;oBACP,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC7B;aACF;YACD,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE;YAC7C,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE;YACzE;gBACE,IAAI,EAAE,iBAAiB;gBACvB,OAAO,EAAE;oBACP,MAAM,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC;oBACpD,OAAO,EAAE,EAAE;iBACZ;aACF;YACD;gBACE,GAAG,eAAe;gBAClB,OAAO,EAAE,CAAC,WAAW;aACtB;YACD,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3C,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,MAAM,cAAc,GAAG,CAAC,GAAG,eAAe,CAAC;aACxC,OAAO,EAAE;aACT,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK,CAA+B,CAAC;QACvF,OAAO,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,CAAC;YACnD,CAAC,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YACzC,CAAC,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE;QAC/E,SAAS;QACT,QAAQ;QACR,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,IAAI,WAAW;QAAE,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;oBAC9B,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC;iBAC5B;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,SAAS,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,MAAM,YAAY,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAExD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,IAAI;YAAE,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAE7C,IAAI,iBAAiB,EAAE;YACrB,IAAI,OAAO,CAAC,OAAO;gBAAE,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACnD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACvC,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;SAC1C;aAAM;YACL,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE;YAChB,MAAM,EAAE,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;YAC7D,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,CACd,MAAC,aAAa,OACR,SAAS,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,KACjC,UAAU,CAAC,MAAM,aAEpB,KAAK,IAAI,KAAC,kBAAkB,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAI,EAC1E,QAAQ,IACK,CACjB,CAAC;IAEF,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpF,OAAO,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAChF,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n (\n {\n show = true,\n portal = false,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n ) => {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n\n const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n useEffect(() => {\n const controller = new AbortController();\n\n const observer = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n if (!controller.signal.aborted) {\n forceUpdateRef.current?.();\n }\n });\n });\n\n if (popperRef.current) observer.observe(popperRef.current);\n if (target instanceof Element) observer.observe(target);\n\n return () => {\n controller.abort();\n observer.disconnect();\n };\n });\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n const content = (\n <StyledPopover\n {...restProps}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Popover;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAgL9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -106,7 +106,7 @@ const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible:
|
|
|
106
106
|
if (nullRender)
|
|
107
107
|
return null;
|
|
108
108
|
const CompVariant = variantMap[variant];
|
|
109
|
-
let indicator = (_jsx(CompVariant, { "aria-label": typeof value !== 'number' ? label : t('loading'), ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
|
|
109
|
+
let indicator = (_jsx(CompVariant, { "aria-label": typeof value !== 'number' ? label : t('loading'), as: placement === 'inline' ? 'span' : undefined, ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
|
|
110
110
|
if (placement !== 'inline') {
|
|
111
111
|
indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": 'true', children: message }))] }));
|
|
112
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n ) => {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' || placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' ? label : t('loading')}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.5}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Progress;\n"]}
|
|
1
|
+
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n ) => {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' || placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' ? label : t('loading')}\n as={placement === 'inline' ? 'span' : undefined}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.5}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Progress;\n"]}
|