@pega/cosmos-react-work 5.0.0-dev.9.1 → 5.0.0-dev.9.3
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.
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
import type { FC, ReactNode, Ref } from 'react';
|
|
2
2
|
import type { AdditionalInfoProps, ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
|
|
3
|
-
export
|
|
3
|
+
export type DetailsProps = TestIdProp & {
|
|
4
4
|
highlightedData?: ReactNode[];
|
|
5
5
|
children?: ReactNode;
|
|
6
|
-
/** Text used as heading of list */
|
|
7
|
-
name?: string;
|
|
8
6
|
/** Copy placed in paragraph below the name */
|
|
9
7
|
description?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Whether the items children can be collapsed (only applies if name is provided)
|
|
12
|
-
* @default false
|
|
13
|
-
*/
|
|
14
|
-
collapsible?: boolean;
|
|
15
8
|
/**
|
|
16
9
|
* Number of columns in detail layout
|
|
17
10
|
* @default 1
|
|
@@ -29,13 +22,25 @@ export interface DetailsProps extends TestIdProp {
|
|
|
29
22
|
* @default false
|
|
30
23
|
*/
|
|
31
24
|
valueComparison?: boolean;
|
|
25
|
+
ref?: Ref<HTMLDListElement>;
|
|
26
|
+
} & ({
|
|
27
|
+
/** Text used as heading of list */
|
|
28
|
+
name: string;
|
|
32
29
|
/** Pass a heading and content to show additional information on the list. */
|
|
33
30
|
additionalInfo?: {
|
|
34
|
-
heading
|
|
31
|
+
heading?: AdditionalInfoProps['heading'];
|
|
35
32
|
content: AdditionalInfoProps['children'];
|
|
36
33
|
};
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Whether the items children can be collapsed (only applies if name is provided)
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
collapsible?: boolean;
|
|
39
|
+
} | {
|
|
40
|
+
name?: undefined;
|
|
41
|
+
additionalInfo?: never;
|
|
42
|
+
collapsible?: never;
|
|
43
|
+
});
|
|
39
44
|
declare const _default: FC<DetailsProps & ForwardProps> & {
|
|
40
45
|
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
|
|
41
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EAEZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAajC,MAAM,
|
|
1
|
+
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EAEZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAajC,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,CAAC;;;;AAqNJ,wBAAuD"}
|
|
@@ -66,8 +66,8 @@ const Details = forwardRef(function Details({ testId, highlightedData, children,
|
|
|
66
66
|
return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
|
|
67
67
|
}, [name, headingDepth]);
|
|
68
68
|
const additionalInfo = useMemo(() => {
|
|
69
|
-
return additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, children: additionalInfoProp.content })) : undefined;
|
|
70
|
-
}, [additionalInfoProp?.heading, additionalInfoProp?.content]);
|
|
69
|
+
return name && additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, contextualLabel: name, children: additionalInfoProp.content })) : undefined;
|
|
70
|
+
}, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);
|
|
71
71
|
const details = useMemo(() => {
|
|
72
72
|
return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, forwardedAs: nested ? 'div' : 'dl', container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
|
|
73
73
|
// eslint-disable-next-line react/no-array-index-key
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n AdditionalInfoProps,\n ForwardProps,\n HeadingTag,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list */\n name?: string;\n /** Copy placed in paragraph below the name */\n description?: string;\n /**\n * Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n */\n collapsible?: boolean;\n /**\n * Number of columns in detail layout\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /** Whether detail list is rendering within another detail list\n * @default false\n */\n nested?: boolean;\n /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n * @default false\n */\n asFlex?: boolean;\n /** Whether to apply `value-comparison` styles to list items\n * @default false\n */\n valueComparison?: boolean;\n /** Pass a heading and content to show additional information on the list. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n {\n testId,\n highlightedData,\n children,\n name,\n description,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false,\n collapsible = false,\n additionalInfo: additionalInfoProp\n },\n ref\n) {\n const {\n longestLabelLength,\n mobileView: inMobileView,\n depth,\n ...context\n } = useContext(DetailsContext);\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const isSmallOrAbove = useBreakpoint('sm');\n const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n const isXsContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const isMdContentWidthOrAbove = useBreakpoint('md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const t = useI18n();\n const testIds = useTestIds(testId, getDetailsTestIds);\n\n const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n const [open, setOpen] = useState(true);\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const headingDepth = depth ?? 1;\n const applyMobileView =\n inMobileView ||\n !isSmallOrAbove ||\n !isXsContentWidthOrAbove ||\n (asFlex && flexRow && flexContextMobileView);\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n // Mount resize observer to update flex context mobile view & run initial check.\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n const oneRemInPx = parseInt(remToPx(1), 10);\n const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (listRef.current) {\n checkBreakpoint(listRef.current.offsetWidth);\n resizeObserver.observe(listRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [listRef, columnCount]);\n\n const contextValue = useMemo(() => {\n return {\n mobileView: applyMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n longestLabelLength,\n ...context\n };\n }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n const nameText = useMemo(() => {\n return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n }, [name, headingDepth]);\n\n const additionalInfo = useMemo(() => {\n return additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\n forwardedAs={nested ? 'div' : 'dl'}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n >\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </Flex>\n\n <hr />\n </>\n )}\n\n {children ? (\n <StyledDetailList\n data-testid={testIds.data}\n ref={listRef}\n as={nested ? 'div' : 'dl'}\n columnCount={columnCount}\n labelLength={labelLength}\n stacked={applyMobileView}\n nested={nested}\n flex={asFlex}\n wrapped={asFlex ? !flexRow : false}\n variant={valueComparison ? 'value-comparison' : undefined}\n narrow={!isMdContentWidthOrAbove}\n >\n {children}\n </StyledDetailList>\n ) : null}\n </>\n );\n }, [\n highlightedData,\n nested,\n columnCount,\n labelLength,\n applyMobileView,\n name,\n asFlex,\n flexRow,\n valueComparison,\n children,\n testIds\n ]);\n\n if (!name && !children && !highlightedData && !description) return null;\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails data-testid={testIds.root}>\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n {collapsible ? (\n <>\n <Button\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 container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n {additionalInfo}\n </>\n ) : (\n <>\n {nameText}\n {additionalInfo}\n </>\n )}\n </Flex>\n </StyledFieldValueGroupLabel>\n )}\n\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {details}\n </ExpandCollapse>\n ) : (\n details\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n AdditionalInfoProps,\n ForwardProps,\n HeadingTag,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n StyledDetailDescription\n} from './Details.styles';\n\nexport type DetailsProps = TestIdProp & {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Copy placed in paragraph below the name */\n description?: string;\n /**\n * Number of columns in detail layout\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /** Whether detail list is rendering within another detail list\n * @default false\n */\n nested?: boolean;\n /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n * @default false\n */\n asFlex?: boolean;\n /** Whether to apply `value-comparison` styles to list items\n * @default false\n */\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n} & (\n | {\n /** Text used as heading of list */\n name: string;\n /** Pass a heading and content to show additional information on the list. */\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /**\n * Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n */\n collapsible?: boolean;\n }\n | {\n name?: undefined;\n additionalInfo?: never;\n collapsible?: never;\n }\n );\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n {\n testId,\n highlightedData,\n children,\n name,\n description,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false,\n collapsible = false,\n additionalInfo: additionalInfoProp\n },\n ref\n) {\n const {\n longestLabelLength,\n mobileView: inMobileView,\n depth,\n ...context\n } = useContext(DetailsContext);\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const isSmallOrAbove = useBreakpoint('sm');\n const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n const isXsContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const isMdContentWidthOrAbove = useBreakpoint('md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const t = useI18n();\n const testIds = useTestIds(testId, getDetailsTestIds);\n\n const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n const [open, setOpen] = useState(true);\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const headingDepth = depth ?? 1;\n const applyMobileView =\n inMobileView ||\n !isSmallOrAbove ||\n !isXsContentWidthOrAbove ||\n (asFlex && flexRow && flexContextMobileView);\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n // Mount resize observer to update flex context mobile view & run initial check.\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n const oneRemInPx = parseInt(remToPx(1), 10);\n const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (listRef.current) {\n checkBreakpoint(listRef.current.offsetWidth);\n resizeObserver.observe(listRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [listRef, columnCount]);\n\n const contextValue = useMemo(() => {\n return {\n mobileView: applyMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n longestLabelLength,\n ...context\n };\n }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n const nameText = useMemo(() => {\n return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n }, [name, headingDepth]);\n\n const additionalInfo = useMemo(() => {\n return name && additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\n forwardedAs={nested ? 'div' : 'dl'}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n >\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </Flex>\n\n <hr />\n </>\n )}\n\n {children ? (\n <StyledDetailList\n data-testid={testIds.data}\n ref={listRef}\n as={nested ? 'div' : 'dl'}\n columnCount={columnCount}\n labelLength={labelLength}\n stacked={applyMobileView}\n nested={nested}\n flex={asFlex}\n wrapped={asFlex ? !flexRow : false}\n variant={valueComparison ? 'value-comparison' : undefined}\n narrow={!isMdContentWidthOrAbove}\n >\n {children}\n </StyledDetailList>\n ) : null}\n </>\n );\n }, [\n highlightedData,\n nested,\n columnCount,\n labelLength,\n applyMobileView,\n name,\n asFlex,\n flexRow,\n valueComparison,\n children,\n testIds\n ]);\n\n if (!name && !children && !highlightedData && !description) return null;\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails data-testid={testIds.root}>\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n {collapsible ? (\n <>\n <Button\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 container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n {additionalInfo}\n </>\n ) : (\n <>\n {nameText}\n {additionalInfo}\n </>\n )}\n </Flex>\n </StyledFieldValueGroupLabel>\n )}\n\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {details}\n </ExpandCollapse>\n ) : (\n details\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "5.0.0-dev.9.
|
|
3
|
+
"version": "5.0.0-dev.9.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -12,15 +12,13 @@
|
|
|
12
12
|
"main": "lib/index.js",
|
|
13
13
|
"types": "lib/index.d.ts",
|
|
14
14
|
"files": [
|
|
15
|
-
"LICENSE",
|
|
16
|
-
"README.md",
|
|
17
15
|
"lib"
|
|
18
16
|
],
|
|
19
17
|
"scripts": {
|
|
20
|
-
"build": "tsc -b"
|
|
18
|
+
"build": "tsc -b tsconfig.build.json"
|
|
21
19
|
},
|
|
22
20
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "5.0.0-dev.9.
|
|
21
|
+
"@pega/cosmos-react-core": "5.0.0-dev.9.3",
|
|
24
22
|
"@types/react": "^17.0.62",
|
|
25
23
|
"@types/react-dom": "^17.0.20",
|
|
26
24
|
"@types/styled-components": "^5.1.26",
|
|
@@ -33,7 +31,7 @@
|
|
|
33
31
|
"@storybook/addon-actions": "~7.5.3",
|
|
34
32
|
"@storybook/react": "~7.5.3",
|
|
35
33
|
"@testing-library/react": "^12.1.3",
|
|
36
|
-
"@testing-library/user-event": "^
|
|
34
|
+
"@testing-library/user-event": "^14.5.1",
|
|
37
35
|
"@types/dompurify": "^3.0.2",
|
|
38
36
|
"dompurify": "^3.0.5",
|
|
39
37
|
"typescript": "~5.2.2"
|