@pega/cosmos-react-core 4.2.0 → 4.2.2
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/Button/Button.js +8 -8
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Configuration/Configuration.d.ts +3 -0
- package/lib/components/Configuration/Configuration.d.ts.map +1 -1
- package/lib/components/Configuration/Configuration.js +14 -7
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/package.json +1 -1
|
@@ -44,7 +44,7 @@ const baseStyles = (theme) => {
|
|
|
44
44
|
`;
|
|
45
45
|
};
|
|
46
46
|
export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
|
|
47
|
-
const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'secondary-color':
|
|
47
|
+
const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'secondary-color': secondaryColor, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
|
|
48
48
|
const contrastColor = tryCatch(() => readableColor(color));
|
|
49
49
|
// Base
|
|
50
50
|
const base = baseStyles(theme);
|
|
@@ -115,15 +115,15 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
|
|
|
115
115
|
}
|
|
116
116
|
`;
|
|
117
117
|
// Secondary
|
|
118
|
-
const backgroundUsable = meetsContrastGuidelines(color,
|
|
119
|
-
const
|
|
120
|
-
const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor,
|
|
121
|
-
const secondaryHoverForegroundColor = readableHue(
|
|
118
|
+
const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;
|
|
119
|
+
const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);
|
|
120
|
+
const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, usableColor));
|
|
121
|
+
const secondaryHoverForegroundColor = readableHue(usableColor, secondaryHoverBackgroundColor ?? 'transparent');
|
|
122
122
|
const secondary = css `
|
|
123
123
|
--button-background-color: ${secondaryColor};
|
|
124
|
-
color: ${
|
|
124
|
+
color: ${usableColor};
|
|
125
125
|
background-color: ${secondaryColor};
|
|
126
|
-
border-color: ${
|
|
126
|
+
border-color: ${usableColor};
|
|
127
127
|
|
|
128
128
|
@media (hover: hover) {
|
|
129
129
|
&:hover {
|
|
@@ -137,7 +137,7 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
|
|
|
137
137
|
// Simple
|
|
138
138
|
const simple = css `
|
|
139
139
|
--button-background-color: ${icon ? 'transparent' : backgroundColor};
|
|
140
|
-
color: ${icon ? 'currentColor' :
|
|
140
|
+
color: ${icon ? 'currentColor' : usableColor};
|
|
141
141
|
background-color: ${icon ? 'transparent' : backgroundColor};
|
|
142
142
|
|
|
143
143
|
@media (hover: hover) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps, readableHue } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, box-shadow;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n 'secondary-color': buttonSecondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n const contrastColor = tryCatch(() => readableColor(color));\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n line-height: 1;\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `;\n\n // Primary\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n const primary = css`\n --button-background-color: ${color};\n color: ${contrastColor};\n background-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n }\n }\n `;\n\n // Secondary\n const backgroundUsable = meetsContrastGuidelines(color, buttonSecondaryColor).AA;\n const secondaryColor = backgroundUsable ? buttonSecondaryColor : readableColor(color);\n const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, color));\n const secondaryHoverForegroundColor = readableHue(\n color,\n secondaryHoverBackgroundColor ?? 'transparent'\n );\n const secondary = css`\n --button-background-color: ${secondaryColor};\n color: ${color};\n background-color: ${secondaryColor};\n border-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n color: ${secondaryHoverForegroundColor};\n background-color: ${secondaryHoverBackgroundColor};\n text-decoration: none;\n border-color: ${secondaryHoverForegroundColor};\n }\n }\n `;\n\n // Simple\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : color};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${secondaryHoverBackgroundColor};\n color: ${secondaryHoverForegroundColor};\n border-color: ${secondaryHoverForegroundColor};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${variant === 'primary' && primary}\n ${variant === 'secondary' && secondary}\n ${variant === 'simple' && simple}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ theme, variant }) => {\n const {\n base: {\n palette: { 'foreground-color': textColor }\n },\n components: {\n link: { color: linkColor }\n }\n } = theme;\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkColor};\n `;\n\n const text = css`\n color: ${textColor};\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n }\n);\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n) {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps, readableHue } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, box-shadow;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n const contrastColor = tryCatch(() => readableColor(color));\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n line-height: 1;\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `;\n\n // Primary\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n const primary = css`\n --button-background-color: ${color};\n color: ${contrastColor};\n background-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n }\n }\n `;\n\n // Secondary\n const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;\n const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);\n const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, usableColor));\n const secondaryHoverForegroundColor = readableHue(\n usableColor,\n secondaryHoverBackgroundColor ?? 'transparent'\n );\n const secondary = css`\n --button-background-color: ${secondaryColor};\n color: ${usableColor};\n background-color: ${secondaryColor};\n border-color: ${usableColor};\n\n @media (hover: hover) {\n &:hover {\n color: ${secondaryHoverForegroundColor};\n background-color: ${secondaryHoverBackgroundColor};\n text-decoration: none;\n border-color: ${secondaryHoverForegroundColor};\n }\n }\n `;\n\n // Simple\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : usableColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${secondaryHoverBackgroundColor};\n color: ${secondaryHoverForegroundColor};\n border-color: ${secondaryHoverForegroundColor};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${variant === 'primary' && primary}\n ${variant === 'secondary' && secondary}\n ${variant === 'simple' && simple}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ theme, variant }) => {\n const {\n base: {\n palette: { 'foreground-color': textColor }\n },\n components: {\n link: { color: linkColor }\n }\n } = theme;\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkColor};\n `;\n\n const text = css`\n color: ${textColor};\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n }\n);\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n) {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
+
import { StyleSheetManager } from 'styled-components';
|
|
3
4
|
import type { StyleSheetManagerProps } from 'styled-components';
|
|
4
5
|
import '../../init';
|
|
5
6
|
import { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
|
|
@@ -51,6 +52,8 @@ export interface ConfigurationContextValue {
|
|
|
51
52
|
renderNativeControls: boolean;
|
|
52
53
|
testIds: NonNullable<ConfigurationProps['testIds']>;
|
|
53
54
|
/** @internal */
|
|
55
|
+
mountedStyleSheetManagers?: (typeof StyleSheetManager)[];
|
|
56
|
+
/** @internal */
|
|
54
57
|
initialized: boolean;
|
|
55
58
|
}
|
|
56
59
|
export declare const ConfigurationContext: Context<ConfigurationContextValue>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,SAAS,EAGT,OAAO,EACP,gBAAgB,EACjB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,SAAS,EAGT,OAAO,EACP,gBAAgB,EACjB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAiB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,YAAY,CAAC;AAEpB,OAAO,EAEL,gBAAgB,EAEhB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AAKpB,MAAM,WAAW,kBAAkB;IACjC,+GAA+G;IAC/G,QAAQ,EAAE,SAAS,CAAC;IACpB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,wEAAwE;IACxE,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,0GAA0G;IAC1G,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IACxD,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IACzD,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC;IACpD,gBAAgB;IAChB,yBAAyB,CAAC,EAAE,CAAC,OAAO,iBAAiB,CAAC,EAAE,CAAC;IACzD,gBAAgB;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,oCAY/B,CAAC;AAEH,QAAA,MAAM,aAAa,eAAiD,CAAC;AAErE,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,CAAC,aAAa,CAAC,CAAC,EAAE;YAChB,IAAI,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;SAC/C,CAAC;KACH;CACF;AAID,UAAU,cAAe,SAAQ,mBAAmB;IAClD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AA4BD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,CAAC,cAAc,GAAG,mBAAmB,CAAC,EAAE,CAAC;QACrD,oBAAoB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;KAC3D;CACF;AAuBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAyIxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useMemo, useEffect } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import { ThemeProvider, StyleSheetManager } from 'styled-components';
|
|
@@ -20,6 +20,7 @@ export const ConfigurationContext = createContext({
|
|
|
20
20
|
loadedRef: { current: false },
|
|
21
21
|
renderNativeControls: false,
|
|
22
22
|
testIds: true,
|
|
23
|
+
mountedStyleSheetManagers: [],
|
|
23
24
|
initialized: false
|
|
24
25
|
});
|
|
25
26
|
const legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');
|
|
@@ -93,6 +94,8 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
93
94
|
}, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);
|
|
94
95
|
// Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.
|
|
95
96
|
const reinitialize = useMemo(() => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()), [wrapperEl]);
|
|
97
|
+
// Check if this StyleSheetManager is mounted above this Configuration.
|
|
98
|
+
const stylesheetManagerMounted = useMemo(() => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager), [ctx.mountedStyleSheetManagers]);
|
|
96
99
|
useEffect(() => {
|
|
97
100
|
const sym = Symbol(id);
|
|
98
101
|
mountConfig(sym);
|
|
@@ -100,9 +103,14 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
100
103
|
unmountConfig(sym);
|
|
101
104
|
};
|
|
102
105
|
}, [id]);
|
|
103
|
-
const wrappedChildren = ctx.initialized && !reinitialize ? (children) : (_jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
|
|
106
|
+
const wrappedChildren = ctx.initialized && !reinitialize ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
|
|
104
107
|
resolvedStyleSheetTarget &&
|
|
105
108
|
createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap', "data-cosmos-global-style": true }), resolvedStyleSheetTarget), _jsx(GlobalStyle, {}), children] }));
|
|
109
|
+
const styledWrappedChildren = stylesheetManagerMounted ? (wrappedChildren) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target:
|
|
110
|
+
// Target must be undefined in a JSDOM environment due to Styled Components server mode handling.
|
|
111
|
+
navigatorIsAvailable && !navigator.userAgent.includes('jsdom')
|
|
112
|
+
? resolvedStyleSheetTarget
|
|
113
|
+
: undefined, children: wrappedChildren }));
|
|
106
114
|
return (_jsx("div", {
|
|
107
115
|
// Need to use inline styles because the StyleSheetManager is configured within this div.
|
|
108
116
|
style: { display: 'contents' }, ref: setWrapperEl, children: _jsx(context.Provider
|
|
@@ -119,12 +127,11 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
119
127
|
loadedRef: ctx.loadedRef,
|
|
120
128
|
renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
|
|
121
129
|
testIds: testIds ?? ctx.testIds,
|
|
130
|
+
mountedStyleSheetManagers: stylesheetManagerMounted
|
|
131
|
+
? ctx.mountedStyleSheetManagers
|
|
132
|
+
: [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],
|
|
122
133
|
initialized: true
|
|
123
|
-
}, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children:
|
|
124
|
-
// Target must be undefined in a JSDOM environment due to Styled Components server mode handling.
|
|
125
|
-
navigatorIsAvailable && !navigator.userAgent.includes('jsdom')
|
|
126
|
-
? resolvedStyleSheetTarget
|
|
127
|
-
: undefined, children: _jsx(_Fragment, { children: wrappedChildren }) }) }) }) }));
|
|
134
|
+
}, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: styledWrappedChildren }) }) }));
|
|
128
135
|
};
|
|
129
136
|
export default Configuration;
|
|
130
137
|
//# sourceMappingURL=Configuration.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ReactNode,\n useMemo,\n useEffect,\n Context,\n MutableRefObject\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n children: ReactNode;\n /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n locale?: string;\n /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n direction?: 'ltr' | 'rtl';\n /** Object with (partial) translations. */\n translations?: Translation;\n /** Theme object used to override any or all Cosmos theme properties. */\n theme?: DefaultSettableTheme;\n /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n * @deprecated\n */\n styleSheetTarget?: StyleSheetManagerProps['target'];\n /**\n * Target element for rendering a `ReactDOM` portal.\n * @deprecated\n */\n portalTarget?: Parameters<typeof createPortal>[1];\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /** String to identify this configuration instance. */\n id?: string;\n /**\n * Enable/disable testId attribute rendering for all components.\n * @default true\n */\n testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: NonNullable<ConfigurationProps['direction']>;\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n portalTarget: ConfigurationProps['portalTarget'];\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n testIds: NonNullable<ConfigurationProps['testIds']>;\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n loadedRef: { current: false },\n renderNativeControls: false,\n testIds: true,\n initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [legacyMetaKey]?: {\n push: (instance: LegacyCosmosInstace) => void;\n };\n }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: (CosmosInstance | LegacyCosmosInstace)[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n\n if (Array.isArray(window[legacyMetaKey])) {\n window.cosmos.instances.push(...window[legacyMetaKey]);\n delete window[legacyMetaKey];\n }\n\n if (!window[legacyMetaKey]) {\n window[legacyMetaKey] = {\n push: inst => {\n window.cosmos.instances?.push(inst);\n }\n };\n }\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n renderNativeControls,\n testIds,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n // Determine valid style sheet and portal target with ShadowDOM handling.\n const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n // When rendering on the server, or before the wrapper is in the DOM, just bail.\n if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n const rootNode = wrapperEl.getRootNode();\n\n // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n // Currently passed prop or previous context value\n const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n return [\n rootNode.contains(requestedStyleSheetTarget ?? null)\n ? requestedStyleSheetTarget\n : defaultStyleSheetTarget,\n rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n ];\n }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n // Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.\n const reinitialize = useMemo(\n () => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n [wrapperEl]\n );\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren =\n ctx.initialized && !reinitialize ? (\n children\n ) : (\n <>\n {!disableDefaultFontLoading &&\n resolvedStyleSheetTarget &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n data-cosmos-global-style\n />,\n resolvedStyleSheetTarget\n )}\n <GlobalStyle />\n {children}\n </>\n );\n\n return (\n <div\n // Need to use inline styles because the StyleSheetManager is configured within this div.\n style={{ display: 'contents' }}\n ref={setWrapperEl}\n >\n <context.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n locale: locale ?? ctx.locale,\n direction:\n direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: resolvedStyleSheetTarget,\n portalTarget: resolvedPortalTarget,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n testIds: testIds ?? ctx.testIds,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>\n <StyleSheetManager\n disableVendorPrefixes\n target={\n // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n navigatorIsAvailable && !navigator.userAgent.includes('jsdom')\n ? resolvedStyleSheetTarget\n : undefined\n }\n >\n <>{wrappedChildren}</>\n </StyleSheetManager>\n </ThemeProvider>\n </context.Provider>\n </div>\n );\n};\n\nexport default Configuration;\n"]}
|
|
1
|
+
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ReactNode,\n useMemo,\n useEffect,\n Context,\n MutableRefObject\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n children: ReactNode;\n /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n locale?: string;\n /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n direction?: 'ltr' | 'rtl';\n /** Object with (partial) translations. */\n translations?: Translation;\n /** Theme object used to override any or all Cosmos theme properties. */\n theme?: DefaultSettableTheme;\n /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n * @deprecated\n */\n styleSheetTarget?: StyleSheetManagerProps['target'];\n /**\n * Target element for rendering a `ReactDOM` portal.\n * @deprecated\n */\n portalTarget?: Parameters<typeof createPortal>[1];\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /** String to identify this configuration instance. */\n id?: string;\n /**\n * Enable/disable testId attribute rendering for all components.\n * @default true\n */\n testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: NonNullable<ConfigurationProps['direction']>;\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n portalTarget: ConfigurationProps['portalTarget'];\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n testIds: NonNullable<ConfigurationProps['testIds']>;\n /** @internal */\n mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n loadedRef: { current: false },\n renderNativeControls: false,\n testIds: true,\n mountedStyleSheetManagers: [],\n initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [legacyMetaKey]?: {\n push: (instance: LegacyCosmosInstace) => void;\n };\n }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: (CosmosInstance | LegacyCosmosInstace)[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n\n if (Array.isArray(window[legacyMetaKey])) {\n window.cosmos.instances.push(...window[legacyMetaKey]);\n delete window[legacyMetaKey];\n }\n\n if (!window[legacyMetaKey]) {\n window[legacyMetaKey] = {\n push: inst => {\n window.cosmos.instances?.push(inst);\n }\n };\n }\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n renderNativeControls,\n testIds,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n // Determine valid style sheet and portal target with ShadowDOM handling.\n const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n // When rendering on the server, or before the wrapper is in the DOM, just bail.\n if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n const rootNode = wrapperEl.getRootNode();\n\n // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n // Currently passed prop or previous context value\n const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n return [\n rootNode.contains(requestedStyleSheetTarget ?? null)\n ? requestedStyleSheetTarget\n : defaultStyleSheetTarget,\n rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n ];\n }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n // Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.\n const reinitialize = useMemo(\n () => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n [wrapperEl]\n );\n\n // Check if this StyleSheetManager is mounted above this Configuration.\n const stylesheetManagerMounted = useMemo(\n () => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager),\n [ctx.mountedStyleSheetManagers]\n );\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren =\n ctx.initialized && !reinitialize ? (\n <>{children}</>\n ) : (\n <>\n {!disableDefaultFontLoading &&\n resolvedStyleSheetTarget &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n data-cosmos-global-style\n />,\n resolvedStyleSheetTarget\n )}\n <GlobalStyle />\n {children}\n </>\n );\n\n const styledWrappedChildren = stylesheetManagerMounted ? (\n wrappedChildren\n ) : (\n <StyleSheetManager\n disableVendorPrefixes\n target={\n // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n navigatorIsAvailable && !navigator.userAgent.includes('jsdom')\n ? resolvedStyleSheetTarget\n : undefined\n }\n >\n {wrappedChildren}\n </StyleSheetManager>\n );\n\n return (\n <div\n // Need to use inline styles because the StyleSheetManager is configured within this div.\n style={{ display: 'contents' }}\n ref={setWrapperEl}\n >\n <context.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n locale: locale ?? ctx.locale,\n direction:\n direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: resolvedStyleSheetTarget,\n portalTarget: resolvedPortalTarget,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n testIds: testIds ?? ctx.testIds,\n mountedStyleSheetManagers: stylesheetManagerMounted\n ? ctx.mountedStyleSheetManagers\n : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{styledWrappedChildren}</ThemeProvider>\n </context.Provider>\n </div>\n );\n};\n\nexport default Configuration;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.2",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|