@pega/cosmos-react-core 10.0.0-build.1.12 → 10.0.0-build.1.13
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/FieldValueList/FieldValueList.js +2 -2
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/theme/theme.d.ts +6 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +4 -0
- package/lib/theme/themeOverrides.schema.json +4 -0
- package/package.json +1 -1
|
@@ -28,7 +28,7 @@ export const StyledInlineFieldValueRow = styled.div `
|
|
|
28
28
|
`;
|
|
29
29
|
export const StyledStackedFieldValue = styled.div ``;
|
|
30
30
|
export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
|
|
31
|
-
const { components: { 'field-value-list': { inline: { detached } } } } = theme;
|
|
31
|
+
const { components: { 'field-value-list': { inline: { detached, 'border-style': borderStyle } } } } = theme;
|
|
32
32
|
return css `
|
|
33
33
|
width: 100%;
|
|
34
34
|
|
|
@@ -70,7 +70,7 @@ export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
|
|
|
70
70
|
${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dt,
|
|
71
71
|
${StyledStackedFieldValue}:has(+ ${StyledInlineFieldValueRow}),
|
|
72
72
|
${StyledStackedFieldValue}:not(:last-of-type) {
|
|
73
|
-
border-bottom: 0.0625rem
|
|
73
|
+
border-bottom: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};
|
|
74
74
|
padding-bottom: calc(0.5 * ${theme.base.spacing});
|
|
75
75
|
}
|
|
76
76
|
`}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ExcludeStrict,\n ForwardProps,\n NoChildrenProp,\n TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n name: string;\n id?: string;\n variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n | (BaseFieldValueListItem & {\n value?: ExcludeStrict<ReactNode, 'string'>;\n truncate?: never;\n })\n | (BaseFieldValueListItem & {\n value: string;\n truncate?: boolean;\n });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The set of field values to render in the list. */\n fields: FieldValueListItemProps[];\n /**\n * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n * @default 'inline'\n */\n variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\n/**\n * `display: contents` wrapper around a `dt + dd` pair in the inline\n * variant. Lets CSS grid on the parent `<dl>` still see dt/dd as direct\n * layout items, while giving UI Designer / Inspector a single hit\n * target that covers label + value together. Exposed so that callers\n * which previously targeted `dt:not(:last-of-type)` / `dd:not(:last-of-type)`\n * can target the row instead.\n */\nexport const StyledInlineFieldValueRow = styled.div`\n display: contents;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment */\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dd,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dt,\n ${StyledStackedFieldValue}:has(+ ${StyledInlineFieldValueRow}),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n const displayValue =\n typeof value === 'string' && truncate ? (\n <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n ) : (\n value\n );\n\n const labelAndValue = (\n <>\n <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n {name}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value}>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root} data-editable-anchor>\n {labelAndValue}\n </StyledStackedFieldValue>\n ) : (\n <StyledInlineFieldValueRow data-editable-anchor>{labelAndValue}</StyledInlineFieldValueRow>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n role='none'\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n variant:\n (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAShD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AA8B/F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;CAEvC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAA;;CAExC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAElD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAIpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAA4B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,EACJ,UAAU,EAAE,EACV,kBAAkB,EAAE,EAClB,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,EAClD,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;MAGN,OAAO,KAAK,kBAAkB;QAChC,GAAG,CAAA;;;;;;yCAMkC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;QAKnD,WAAW;;;QAGX,yBAAyB;QACzB,yBAAyB;yCACQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qCACrC,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElD;;MAEC,QAAQ;QACV,OAAO,KAAK,QAAQ;QACpB,GAAG,CAAA;;;mCAG4B,KAAK,CAAC,IAAI,CAAC,OAAO;;QAE7C,WAAW;;;QAGX,yBAAyB;QACzB,yBAAyB;QACzB,yBAAyB,UAAU,uBAAuB;QAC1D,yBAAyB,UAAU,uBAAuB;QAC1D,uBAAuB,UAAU,yBAAyB;QAC1D,uBAAuB;mCACI,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qCAC9C,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CACvC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAA2B,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE7D,MAAM,YAAY,GAChB,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CACtC,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YAAG,KAAK,GAAgB,CAC/C,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;IAEJ,MAAM,aAAa,GAAG,CACpB,8BACE,KAAC,WAAW,mBAAc,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,eAAe,YACxD,IAAI,GACO,EACd,KAAC,gBAAgB,mBAAc,OAAO,CAAC,KAAK,YACzC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAClB,IAClB,CACJ,CAAC;IAEF,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAC7B,KAAC,uBAAuB,mBAAc,OAAO,CAAC,IAAI,0CAC/C,aAAa,GACU,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,yBAAyB,4CAAuB,aAAa,GAA6B,CAC5F,CAAC;AACJ,CAAC,EACD,wBAAwB,CACzB,CAAC;AAEF,MAAM,cAAc,GAA0D,UAAU,CACtF,SAAS,cAAc,CACrB,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAuB,EACzE,GAAwB;IAExB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE7D,MAAM,iBAAiB,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAElE,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,iBAAiB;QAChC,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,EACJ,UAAU,EAAE,EACV,kBAAkB,EAAE,EAClB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE;YACT,IAAI,EACF,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,uBAAuB;gBACzE,CAAC,CAAC,qBAAqB;gBACvB,CAAC,CAAC,gBAAgB;YACtB,MAAM,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3D,MAAM,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;SAC9D,EACD,EAAE,EAAE,oBAAoB,EACxB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAErD,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;YACnF,MAAM,WAAW,GAA2B;gBAC1C,IAAI;gBACJ,OAAO,EACL,CAAC,YAAY,IAAI,OAAO,CAAC,KAAK,SAAS,IAAI,CAAC,uBAAuB;oBACjE,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;aACf,CAAC;YAEF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,WAAW,KAEf,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAHb,EAAE,IAAI,IAAI,CAIf,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,WAAW,KAEf,WAAW,EACf,KAAK,EAAE,KAAK,IAFP,EAAE,IAAI,IAAI,CAGf,CACH,CAAC;QACJ,CAAC,CACF,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ExcludeStrict,\n ForwardProps,\n NoChildrenProp,\n TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n name: string;\n id?: string;\n variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n | (BaseFieldValueListItem & {\n value?: ExcludeStrict<ReactNode, 'string'>;\n truncate?: never;\n })\n | (BaseFieldValueListItem & {\n value: string;\n truncate?: boolean;\n });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The set of field values to render in the list. */\n fields: FieldValueListItemProps[];\n /**\n * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n * @default 'inline'\n */\n variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\n/**\n * `display: contents` wrapper around a `dt + dd` pair in the inline\n * variant. Lets CSS grid on the parent `<dl>` still see dt/dd as direct\n * layout items, while giving UI Designer / Inspector a single hit\n * target that covers label + value together. Exposed so that callers\n * which previously targeted `dt:not(:last-of-type)` / `dd:not(:last-of-type)`\n * can target the row instead.\n */\nexport const StyledInlineFieldValueRow = styled.div`\n display: contents;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached, 'border-style': borderStyle }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment */\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dd,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dt,\n ${StyledStackedFieldValue}:has(+ ${StyledInlineFieldValueRow}),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n const displayValue =\n typeof value === 'string' && truncate ? (\n <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n ) : (\n value\n );\n\n const labelAndValue = (\n <>\n <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n {name}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value}>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root} data-editable-anchor>\n {labelAndValue}\n </StyledStackedFieldValue>\n ) : (\n <StyledInlineFieldValueRow data-editable-anchor>{labelAndValue}</StyledInlineFieldValueRow>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n role='none'\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n variant:\n (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
|
package/lib/theme/theme.d.ts
CHANGED
|
@@ -1109,6 +1109,10 @@ export declare const BaseThemeMachine: ThemeMachine<{
|
|
|
1109
1109
|
$type: string;
|
|
1110
1110
|
$value: boolean;
|
|
1111
1111
|
};
|
|
1112
|
+
"border-style": {
|
|
1113
|
+
$type: string;
|
|
1114
|
+
$value: string;
|
|
1115
|
+
};
|
|
1112
1116
|
};
|
|
1113
1117
|
};
|
|
1114
1118
|
details: {
|
|
@@ -2313,6 +2317,7 @@ export declare const WorkTheme: {
|
|
|
2313
2317
|
readonly "field-value-list": {
|
|
2314
2318
|
readonly inline: {
|
|
2315
2319
|
readonly detached: boolean;
|
|
2320
|
+
readonly "border-style": string;
|
|
2316
2321
|
};
|
|
2317
2322
|
};
|
|
2318
2323
|
readonly details: {
|
|
@@ -3029,6 +3034,7 @@ export declare const defaultThemeProp: Readonly<{
|
|
|
3029
3034
|
readonly "field-value-list": {
|
|
3030
3035
|
readonly inline: {
|
|
3031
3036
|
readonly detached: boolean;
|
|
3037
|
+
readonly "border-style": string;
|
|
3032
3038
|
};
|
|
3033
3039
|
};
|
|
3034
3040
|
readonly details: {
|
package/lib/theme/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,YAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,eAAe,EAAE,CAAC;AAErD,eAAO,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,YAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,eAAe,EAAE,CAAC;AAErD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2D,CAAC;AAEzF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAyB,CAAC;AAYhD,eAAO,MAAM,UAAU,EAAE,oBAAgD,CAAC;AAE1E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAsC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAGhF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;KAAG;CACrF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "10.0.0-build.1.
|
|
3
|
+
"version": "10.0.0-build.1.13",
|
|
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
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|