@pega/cosmos-react-core 7.0.0-build.27.0 → 7.0.0-build.27.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/AIButton/AIButton.js +2 -2
- package/lib/components/AIButton/AIButton.js.map +1 -1
- package/lib/components/AppShell/AppHeader.js +2 -2
- package/lib/components/AppShell/AppHeader.js.map +1 -1
- package/lib/components/Configuration/ThemeOverride.d.ts +11 -0
- package/lib/components/Configuration/ThemeOverride.d.ts.map +1 -0
- package/lib/components/Configuration/ThemeOverride.js +23 -0
- package/lib/components/Configuration/ThemeOverride.js.map +1 -0
- package/lib/components/Configuration/index.d.ts +1 -0
- package/lib/components/Configuration/index.d.ts.map +1 -1
- package/lib/components/Configuration/index.js +1 -0
- package/lib/components/Configuration/index.js.map +1 -1
- package/lib/components/DangerButton/DangerButton.js +2 -2
- package/lib/components/DangerButton/DangerButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,16 +4,16 @@ import styled from 'styled-components';
|
|
|
4
4
|
import { defaultThemeProp } from '../../theme';
|
|
5
5
|
import { useTheme } from '../../hooks';
|
|
6
6
|
import Button from '../Button';
|
|
7
|
-
import Configuration from '../Configuration';
|
|
8
7
|
import Flex from '../Flex';
|
|
9
8
|
import Icon, { registerIcon } from '../Icon';
|
|
10
9
|
import * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';
|
|
10
|
+
import { ThemeOverride } from '../Configuration';
|
|
11
11
|
registerIcon(polarisSolidIcon);
|
|
12
12
|
export const StyledAIButton = styled(Button) ``;
|
|
13
13
|
StyledAIButton.defaultProps = defaultThemeProp;
|
|
14
14
|
export default forwardRef(function AIButton({ label, icon = 'polaris-solid', disabled = false, iconOnly, variant = 'secondary', ...restProps }, ref) {
|
|
15
15
|
const theme = useTheme();
|
|
16
|
-
return (_jsx(
|
|
16
|
+
return (_jsx(ThemeOverride, { theme: {
|
|
17
17
|
components: {
|
|
18
18
|
button: {
|
|
19
19
|
color: theme.base.palette.ai,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AIButton.js","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"AIButton.js","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,gBAAgB,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAwC/B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAE/C,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,UAAU,CACvB,SAAS,QAAQ,CACf,EACE,KAAK,EACL,IAAI,GAAG,eAAe,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAC5B,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBACxC,sBAAsB,EAAE,SAAS;iBAClC;aACF;SACF,YAED,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YAEnC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC5B,CAAC,QAAQ,IAAI,yBAAO,KAAK,GAAQ,IAC7B,GACQ,GACH,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useTheme } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';\nimport { ThemeOverride } from '../Configuration';\n\nregisterIcon(polarisSolidIcon);\n\nexport type AIButtonProps = WithAttributes<\n 'button',\n NoChildrenProp & {\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary';\n /** The text content of the AIButton. */\n label: string;\n } & (\n | {\n /**\n * Icon name. Set to null to render button without an icon.\n * @default 'polaris-solid'\n */\n icon?: string;\n /**\n * Only display the icon. The label prop will be forwarded to a tooltip.\n * @default false\n */\n iconOnly: true;\n }\n | {\n /**\n * Icon name. Set to null to render button without an icon.\n * @default 'polaris-solid'\n */\n icon?: string | null;\n /**\n * Only display the icon. The label prop will be forwarded to a tooltip.\n * @default false\n */\n iconOnly?: false;\n }\n )\n>;\n\nexport const StyledAIButton = styled(Button)``;\n\nStyledAIButton.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<AIButtonProps>, PropsWithoutRef<AIButtonProps>>(\n function AIButton(\n {\n label,\n icon = 'polaris-solid',\n disabled = false,\n iconOnly,\n variant = 'secondary',\n ...restProps\n },\n ref\n ) {\n const theme = useTheme();\n return (\n <ThemeOverride\n theme={{\n components: {\n button: {\n color: theme.base.palette.ai,\n 'secondary-color': theme.base.palette.ai,\n 'secondary-fill-style': 'outline'\n }\n }\n }}\n >\n <StyledAIButton\n {...restProps}\n variant={variant}\n ref={ref}\n disabled={disabled}\n icon={iconOnly}\n label={iconOnly ? label : undefined}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n {icon && <Icon name={icon} />}\n {!iconOnly && <span>{label}</span>}\n </Flex>\n </StyledAIButton>\n </ThemeOverride>\n );\n }\n);\n"]}
|
|
@@ -5,7 +5,7 @@ import Image from '../Image';
|
|
|
5
5
|
import SearchInput from '../SearchInput';
|
|
6
6
|
import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
|
|
7
7
|
import VisuallyHiddenText from '../VisuallyHiddenText';
|
|
8
|
-
import
|
|
8
|
+
import { ThemeOverride } from '../Configuration';
|
|
9
9
|
import AppShellOperator from './Operator';
|
|
10
10
|
import ContextSwitcher from './ContextSwitcher';
|
|
11
11
|
import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
|
|
@@ -29,7 +29,7 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
|
|
|
29
29
|
let appInfoAs = 'div';
|
|
30
30
|
if (href)
|
|
31
31
|
appInfoAs = 'a';
|
|
32
|
-
return (_jsx(
|
|
32
|
+
return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: t('application_logo'), "aria-hidden": !!href }), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }) }));
|
|
33
33
|
});
|
|
34
34
|
export default AppHeader;
|
|
35
35
|
//# sourceMappingURL=AppHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,aAAa,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n StyledAppHeader,\n StyledAppHeaderInfo,\n StyledAppHeaderSearchForm,\n StyledAppHeaderSpacer,\n StyledAppHeaderText,\n StyledAppHeaderOperator\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n {\n appName,\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n fullImageSrc,\n imageSrc,\n href,\n onClick,\n portalName,\n target,\n appNameHidden,\n operator,\n searchInput,\n searchLabel,\n searchPage\n }: AppHeaderProps,\n ref: Ref<Element>\n) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n const theme = useTheme();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n useEffect(() => {\n if (searchPage && searchContainer) {\n setSearchContainerEl(searchContainer);\n } else {\n setSearchContainerEl(null);\n }\n }, [searchPage, searchContainer, setSearchContainerEl]);\n\n let appInfoAs: ElementType = 'div';\n if (href) appInfoAs = 'a';\n return (\n <ThemeOverride theme={headerTheme}>\n <Flex\n as={StyledAppHeader}\n container={{ alignItems: 'center', pad: 1 }}\n hideTitle={!isMediumOrAbove}\n drawerOpen={drawerOpen}\n ref={ref}\n >\n {contexts && contexts.length > 1 && onContextClick && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n\n <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n <Flex\n container={{ inline: true, alignItems: 'center', gap: 1 }}\n as={appInfoAs}\n href={href}\n onClick={href ? onClick : undefined}\n target={target}\n >\n <Image\n src={fullImageSrc || imageSrc}\n alt={t('application_logo')}\n aria-hidden={!!href}\n />\n <StyledAppHeaderText\n as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n variant='primary'\n >\n {appName}\n </StyledAppHeaderText>\n {portalName && (\n <StyledAppHeaderText\n as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n variant='secondary'\n >\n {portalName}\n </StyledAppHeaderText>\n )}\n </Flex>\n </StyledAppHeaderInfo>\n <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n {searchInput ? (\n <StyledAppHeaderSearchForm\n ref={setSearchContainer}\n role='search'\n aria-label={searchLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n {!searchPage && <SearchInput {...searchInput} />}\n </StyledAppHeaderSearchForm>\n ) : (\n <StyledAppHeaderSpacer />\n )}\n </Flex>\n\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n {operator.avatar}\n </AppShellOperator>\n </Flex>\n </ThemeOverride>\n );\n});\n\nexport default AppHeader;\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { DefaultSettableTheme } from '../../theme';
|
|
3
|
+
export interface ThemeOverrideProps {
|
|
4
|
+
/** Content that will inherit theming overrides. */
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Theme object used to override theme properties. */
|
|
7
|
+
theme: DefaultSettableTheme;
|
|
8
|
+
}
|
|
9
|
+
declare const ThemeOverride: ({ children, theme }: ThemeOverrideProps) => JSX.Element;
|
|
10
|
+
export default ThemeOverride;
|
|
11
|
+
//# sourceMappingURL=ThemeOverride.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeOverride.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/ThemeOverride.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,aAAa,CAAC;AAKhF,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,KAAK,EAAE,oBAAoB,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,wBAAyB,kBAAkB,gBAoB7D,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { ThemeProvider } from 'styled-components';
|
|
4
|
+
import { ThemeMachine } from '../../theme';
|
|
5
|
+
import { windowIsAvailable } from '../../utils';
|
|
6
|
+
import { ConfigurationContext } from './Configuration';
|
|
7
|
+
const ThemeOverride = ({ children, theme }) => {
|
|
8
|
+
const context = windowIsAvailable
|
|
9
|
+
? window.cosmos.configurationContext ?? ConfigurationContext
|
|
10
|
+
: ConfigurationContext;
|
|
11
|
+
const ctx = useContext(context);
|
|
12
|
+
const themeMachine = new ThemeMachine({
|
|
13
|
+
theme,
|
|
14
|
+
parent: ctx.themeMachine
|
|
15
|
+
});
|
|
16
|
+
return (_jsx(context.Provider
|
|
17
|
+
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
18
|
+
, {
|
|
19
|
+
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
20
|
+
value: { ...ctx, themeMachine }, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: children }) }));
|
|
21
|
+
};
|
|
22
|
+
export default ThemeOverride;
|
|
23
|
+
//# sourceMappingURL=ThemeOverride.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeOverride.js","sourceRoot":"","sources":["../../../src/components/Configuration/ThemeOverride.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AASvD,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAsB,EAAE,EAAE;IAChE,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,oBAAoB,IAAI,oBAAoB;QAC5D,CAAC,CAAC,oBAAoB,CAAC;IAEzB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEhC,MAAM,YAAY,GAAG,IAAI,YAAY,CAAyB;QAC5D,KAAK;QACL,MAAM,EAAE,GAAG,CAAC,YAAY;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ;IACf,mEAAmE;;QAAnE,mEAAmE;QACnE,KAAK,EAAE,EAAE,GAAG,GAAG,EAAE,YAAY,EAAE,YAE/B,KAAC,aAAa,IAAC,KAAK,EAAE,YAAY,CAAC,KAAK,YAAG,QAAQ,GAAiB,GACnD,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useContext } from 'react';\nimport type { ReactNode } from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport { ThemeMachine } from '../../theme';\nimport type { DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport { windowIsAvailable } from '../../utils';\n\nimport { ConfigurationContext } from './Configuration';\n\nexport interface ThemeOverrideProps {\n /** Content that will inherit theming overrides. */\n children: ReactNode;\n /** Theme object used to override theme properties. */\n theme: DefaultSettableTheme;\n}\n\nconst ThemeOverride = ({ children, theme }: ThemeOverrideProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n\n const ctx = useContext(context);\n\n const themeMachine = new ThemeMachine<DefaultThemeDefinition>({\n theme,\n parent: ctx.themeMachine\n });\n\n return (\n <context.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{ ...ctx, themeMachine }}\n >\n <ThemeProvider theme={themeMachine.theme}>{children}</ThemeProvider>\n </context.Provider>\n );\n};\n\nexport default ThemeOverride;\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default } from './Configuration';
|
|
2
2
|
export type { ConfigurationProps } from './Configuration';
|
|
3
3
|
export { default as withConfiguration } from './withConfiguration';
|
|
4
|
+
export { default as ThemeOverride } from './ThemeOverride';
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Configuration';\nexport type { ConfigurationProps } from './Configuration';\nexport { default as withConfiguration } from './withConfiguration';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './Configuration';\nexport type { ConfigurationProps } from './Configuration';\nexport { default as withConfiguration } from './withConfiguration';\nexport { default as ThemeOverride } from './ThemeOverride';\n"]}
|
|
@@ -3,13 +3,13 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { defaultThemeProp } from '../../theme';
|
|
5
5
|
import Button from '../Button';
|
|
6
|
-
import
|
|
6
|
+
import { ThemeOverride } from '../Configuration';
|
|
7
7
|
import { useTheme } from '../../hooks';
|
|
8
8
|
export const StyledDangerButton = styled(Button) ``;
|
|
9
9
|
StyledDangerButton.defaultProps = defaultThemeProp;
|
|
10
10
|
export default forwardRef(function DangerButton({ label, primary = false, ...restProps }, ref) {
|
|
11
11
|
const theme = useTheme();
|
|
12
|
-
return (_jsx(
|
|
12
|
+
return (_jsx(ThemeOverride, { theme: {
|
|
13
13
|
base: {
|
|
14
14
|
palette: {
|
|
15
15
|
interactive: theme.base.palette.urgent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DangerButton.js","sourceRoot":"","sources":["../../../src/components/DangerButton/DangerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"DangerButton.js","sourceRoot":"","sources":["../../../src/components/DangerButton/DangerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAevC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAEnD,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,eAAe,UAAU,CACvB,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE;oBACP,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;iBACvC;aACF;SACF,YAED,KAAC,kBAAkB,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,YAClF,KAAK,GACa,GACP,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport { ThemeOverride } from '../Configuration';\nimport { useTheme } from '../../hooks';\n\nexport type DangerButtonProps = WithAttributes<\n 'button',\n NoChildrenProp & {\n /** Text content for the button. */\n label: NonNullable<HTMLButtonElement['textContent']>;\n /**\n * Elevates emphasis for button style.\n * @default false\n */\n primary?: boolean;\n }\n>;\n\nexport const StyledDangerButton = styled(Button)``;\n\nStyledDangerButton.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<DangerButtonProps>, PropsWithoutRef<DangerButtonProps>>(\n function DangerButton({ label, primary = false, ...restProps }, ref) {\n const theme = useTheme();\n\n return (\n <ThemeOverride\n theme={{\n base: {\n palette: {\n interactive: theme.base.palette.urgent\n }\n }\n }}\n >\n <StyledDangerButton {...restProps} variant={primary ? 'primary' : undefined} ref={ref}>\n {label}\n </StyledDangerButton>\n </ThemeOverride>\n );\n }\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "7.0.0-build.27.
|
|
3
|
+
"version": "7.0.0-build.27.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",
|