@pega/cosmos-react-build 9.0.0-build.9.8 → 9.0.0

package/lib/components/ExpressionBuilder/ExpressionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAiB/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AA2HrE,wBAAsE"}
+{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgB/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AA+HrE,wBAAsE"}

package/lib/components/ExpressionBuilder/ExpressionItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
-import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { useContext, useMemo, useRef } from 'react';
+import { Button, ExpandCollapse, Flex, Icon, registerIcon, StyledLabel, Text, useDirection, useHighlight, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
 import { StyledPrimaryText, StyledExpandCollapseContent, StyledExpressionExplanation, StyledExpressionItem } from './ExpressionBuilder.styles';
@@ -13,19 +13,23 @@ const ExpressionItem = ({ id, testId, primary, type, onAdd, onExpand, onCollapse
     const t = useI18n();
     const testIds = useTestIds(testId, getExpressionItemsTestIds);
     const { accent } = useContext(ExpressionBuilderContext);
-    const accentedText = (text) => {
-        if (accent) {
-            const accentRegex = typeof accent === 'function' ? accent(text) : accent;
-            return replaceMatchWithElement(text, accentRegex, str => {
-                return _jsx(Mark, { children: str });
-            });
-        }
-        return text;
-    };
+    const primaryRef = useRef(null);
+    const metaRef = useRef(null);
+    const primaryPattern = useMemo(() => {
+        if (!accent || matchedField)
+            return undefined;
+        return typeof accent === 'function' ? accent(primary) : accent;
+    }, [accent, matchedField, primary]);
+    const metaPattern = useMemo(() => {
+        if (!accent || !matchedField || expanded)
+            return undefined;
+        return typeof accent === 'function' ? accent(matchedField.value) : accent;
+    }, [accent, matchedField, expanded]);
+    useHighlight(primaryRef, primaryPattern);
+    useHighlight(metaRef, metaPattern);
     const caretIcon = useMemo(() => {
         return expanded ? 'caret-down' : `caret-${caretDirection}`;
     }, [expanded, caretDirection]);
-    const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;
     return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledExpressionExplanation, id: id, container: { gap: 1, alignItems: 'start' }, children: [_jsx(Button, { "data-testid": testIds.collapseItemButton, icon: true, variant: 'simple', onClick: onCollapse || onExpand
                             ? () => {
                                 if (expanded) {
@@ -35,7 +39,7 @@ const ExpressionItem = ({ id, testId, primary, type, onAdd, onExpand, onCollapse
                                     onExpand?.(id);
                                 }
                             }
-                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(StyledPrimaryText, { variant: 'primary', children: !matchedField ? accentedText(primary) : primary }), accentedMeta ? (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'span', children: [matchedField?.name, ":"] }), accentedMeta] })) : (_jsx(Text, { variant: 'secondary', children: type }))] }), !expanded && (_jsx(Button, { "data-testid": testIds.addItemButton, icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { testId: testIds.root, ...details }), _jsx(Button, { "data-testid": testIds.addItem, variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
+                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(StyledPrimaryText, { variant: 'primary', children: _jsx("span", { ref: primaryRef, children: primary }) }), matchedField && !expanded ? (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'span', children: [matchedField?.name, ":"] }), _jsx("span", { ref: metaRef, children: matchedField.value })] })) : (_jsx(Text, { variant: 'secondary', children: type }))] }), !expanded && (_jsx(Button, { "data-testid": testIds.addItemButton, icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { testId: testIds.root, ...details }), _jsx(Button, { "data-testid": testIds.addItem, variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
 };
 export default withTestIds(ExpressionItem, getExpressionItemsTestIds);
 //# sourceMappingURL=ExpressionItem.js.map

package/lib/components/ExpressionBuilder/ExpressionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n  Button,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  Mark,\n  registerIcon,\n  replaceMatchWithElement,\n  StyledLabel,\n  Text,\n  useDirection,\n  useI18n,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport type { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n  StyledPrimaryText,\n  StyledExpandCollapseContent,\n  StyledExpressionExplanation,\n  StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\nimport { getExpressionItemsTestIds } from './ExpressionBuilder.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n  id,\n  testId,\n  primary,\n  type,\n  onAdd,\n  onExpand,\n  onCollapse,\n  details,\n  matchedField,\n  expanded = false,\n  ...restProps\n}) => {\n  const { end: caretDirection } = useDirection();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getExpressionItemsTestIds);\n\n  const { accent } = useContext(ExpressionBuilderContext);\n\n  const accentedText = (text: string) => {\n    if (accent) {\n      const accentRegex = typeof accent === 'function' ? accent(text) : accent;\n      return replaceMatchWithElement(text, accentRegex, str => {\n        return <Mark>{str}</Mark>;\n      });\n    }\n    return text;\n  };\n\n  const caretIcon = useMemo(() => {\n    return expanded ? 'caret-down' : `caret-${caretDirection}`;\n  }, [expanded, caretDirection]);\n\n  const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;\n\n  return (\n    <StyledExpressionItem expanded={expanded}>\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledExpressionExplanation}\n        id={id}\n        container={{ gap: 1, alignItems: 'start' }}\n      >\n        <Button\n          data-testid={testIds.collapseItemButton}\n          icon\n          variant='simple'\n          onClick={\n            onCollapse || onExpand\n              ? () => {\n                  if (expanded) {\n                    onCollapse?.(id);\n                  } else {\n                    onExpand?.(id);\n                  }\n                }\n              : undefined\n          }\n          aria-label={`${type}: ${primary}`}\n          aria-expanded={expanded}\n          label={expanded ? t('collapse') : t('expand')}\n        >\n          <Icon name={caretIcon} />\n        </Button>\n\n        <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n          <StyledPrimaryText variant='primary'>\n            {!matchedField ? accentedText(primary) : primary}\n          </StyledPrimaryText>\n          {accentedMeta ? (\n            <div>\n              <StyledLabel as='span'>{matchedField?.name}:</StyledLabel>\n              {accentedMeta}\n            </div>\n          ) : (\n            <Text variant='secondary'>{type}</Text>\n          )}\n        </Flex>\n\n        {!expanded && (\n          <Button\n            data-testid={testIds.addItemButton}\n            icon\n            variant='simple'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n            label={t('add')}\n          >\n            <Icon name='plus' />\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!expanded}>\n        <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n          {details && <ExpressionDetails testId={testIds.root} {...details} />}\n          <Button\n            data-testid={testIds.addItem}\n            variant='primary'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n          >\n            {t('add')}\n          </Button>\n        </Flex>\n      </ExpandCollapse>\n    </StyledExpressionItem>\n  );\n};\n\nexport default withTestIds(ExpressionItem, getExpressionItemsTestIds);\n"]}
+{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useMemo, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n  Button,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledLabel,\n  Text,\n  useDirection,\n  useHighlight,\n  useI18n,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport type { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n  StyledPrimaryText,\n  StyledExpandCollapseContent,\n  StyledExpressionExplanation,\n  StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\nimport { getExpressionItemsTestIds } from './ExpressionBuilder.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n  id,\n  testId,\n  primary,\n  type,\n  onAdd,\n  onExpand,\n  onCollapse,\n  details,\n  matchedField,\n  expanded = false,\n  ...restProps\n}) => {\n  const { end: caretDirection } = useDirection();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getExpressionItemsTestIds);\n\n  const { accent } = useContext(ExpressionBuilderContext);\n\n  const primaryRef = useRef<HTMLSpanElement>(null);\n  const metaRef = useRef<HTMLSpanElement>(null);\n\n  const primaryPattern = useMemo(() => {\n    if (!accent || matchedField) return undefined;\n    return typeof accent === 'function' ? accent(primary) : accent;\n  }, [accent, matchedField, primary]);\n\n  const metaPattern = useMemo(() => {\n    if (!accent || !matchedField || expanded) return undefined;\n    return typeof accent === 'function' ? accent(matchedField.value) : accent;\n  }, [accent, matchedField, expanded]);\n\n  useHighlight(primaryRef, primaryPattern);\n  useHighlight(metaRef, metaPattern);\n\n  const caretIcon = useMemo(() => {\n    return expanded ? 'caret-down' : `caret-${caretDirection}`;\n  }, [expanded, caretDirection]);\n\n  return (\n    <StyledExpressionItem expanded={expanded}>\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledExpressionExplanation}\n        id={id}\n        container={{ gap: 1, alignItems: 'start' }}\n      >\n        <Button\n          data-testid={testIds.collapseItemButton}\n          icon\n          variant='simple'\n          onClick={\n            onCollapse || onExpand\n              ? () => {\n                  if (expanded) {\n                    onCollapse?.(id);\n                  } else {\n                    onExpand?.(id);\n                  }\n                }\n              : undefined\n          }\n          aria-label={`${type}: ${primary}`}\n          aria-expanded={expanded}\n          label={expanded ? t('collapse') : t('expand')}\n        >\n          <Icon name={caretIcon} />\n        </Button>\n\n        <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n          <StyledPrimaryText variant='primary'>\n            <span ref={primaryRef}>{primary}</span>\n          </StyledPrimaryText>\n          {matchedField && !expanded ? (\n            <div>\n              <StyledLabel as='span'>{matchedField?.name}:</StyledLabel>\n              <span ref={metaRef}>{matchedField.value}</span>\n            </div>\n          ) : (\n            <Text variant='secondary'>{type}</Text>\n          )}\n        </Flex>\n\n        {!expanded && (\n          <Button\n            data-testid={testIds.addItemButton}\n            icon\n            variant='simple'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n            label={t('add')}\n          >\n            <Icon name='plus' />\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!expanded}>\n        <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n          {details && <ExpressionDetails testId={testIds.root} {...details} />}\n          <Button\n            data-testid={testIds.addItem}\n            variant='primary'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n          >\n            {t('add')}\n          </Button>\n        </Flex>\n      </ExpandCollapse>\n    </StyledExpressionItem>\n  );\n};\n\nexport default withTestIds(ExpressionItem, getExpressionItemsTestIds);\n"]}

package/lib/components/ExpressionBuilder/ExpressionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AAiF1F,wBAAqE"}
+{"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AA0F1F,wBAAqE"}

package/lib/components/ExpressionBuilder/ExpressionList.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { EmptyState, useItemIntersection, useConsolidatedRef, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
+import { EmptyState, useItemIntersection, useTestIds, withTestIds, Progress } from '@pega/cosmos-react-core';
 import ExpressionItem from './ExpressionItem';
 import { StyledExpressionList } from './ExpressionBuilder.styles';
 import { getExpressionListTestIds } from './ExpressionBuilder.test-ids';
 const LIST_OFFSET = 20;
-const ExpressionList = forwardRef(function ExpressionList({ testId, items = [], emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) {
+const ExpressionList = forwardRef(function ExpressionList({ testId, items = [], emptyText, onItemAdd, onItemExpand, onItemCollapse, details, scrollableRef, loading, ...restProps }, ref) {
     const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));
-    const listRef = useRef(null);
     useEffect(() => {
-        setCount(Math.min(LIST_OFFSET, items.length));
+        if (items.length > 0) {
+            setCount(Math.min(LIST_OFFSET, items.length));
+        }
     }, [items]);
-    const consolidatedRef = useConsolidatedRef(ref, listRef);
-    useItemIntersection(consolidatedRef, count - 1, () => {
+    const testIds = useTestIds(testId, getExpressionListTestIds);
+    useItemIntersection(scrollableRef, count - 1, () => {
         setCount(prev => Math.min(items.length, prev + LIST_OFFSET));
-    }, ':scope > li');
+    }, `ul[data-testid="${testIds.root}"] > li`);
     const [expandedItems, setExpandedItems] = useState([]);
     const handleItemExpand = (id) => {
         setExpandedItems(prev => {
@@ -35,10 +36,14 @@ const ExpressionList = forwardRef(function ExpressionList({ testId, items = [],
             return prev.filter(itemId => itemId !== id);
         });
     };
-    const testIds = useTestIds(testId, getExpressionListTestIds);
-    return (_jsx(StyledExpressionList, { ...restProps, ref: consolidatedRef, "data-testid": testIds.root, children: items && items.length > 0 ? (items.slice(0, count).map(item => {
-            return (_createElement(ExpressionItem, { ...item, onAdd: onItemAdd, onExpand: handleItemExpand, onCollapse: handleItemCollapse, expanded: expandedItems.includes(item.id), key: item.id, details: details?.[item.id] }));
-        })) : (_jsx(EmptyState, { message: emptyText })) }));
+    const getLoadingOrEmptyState = () => {
+        return loading ? (_jsx(Progress, { placement: 'block', message: emptyText })) : (_jsx(EmptyState, { message: emptyText }));
+    };
+    return (_jsx(StyledExpressionList, { ...restProps, ref: ref, "data-testid": testIds.root, children: items && items.length > 0
+            ? items.slice(0, count).map(item => {
+                return (_createElement(ExpressionItem, { ...item, onAdd: onItemAdd, onExpand: handleItemExpand, onCollapse: handleItemCollapse, expanded: expandedItems.includes(item.id), key: item.id, details: details?.[item.id] }));
+            })
+            : getLoadingOrEmptyState() }));
 });
 export default withTestIds(ExpressionList, getExpressionListTestIds);
 //# sourceMappingURL=ExpressionList.js.map

package/lib/components/ExpressionBuilder/ExpressionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAEtF,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAIjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAExE,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,cAAc,GAAyD,UAAU,CACrF,SAAS,cAAc,CACrB,EACE,MAAM,EACN,KAAK,GAAG,EAAE,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,cAAc,EACd,OAAO,EACP,GAAG,SAAS,EACyB,EACvC,GAA+B;IAE/B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAEzD,mBAAmB,CACjB,eAAe,EACf,KAAK,GAAG,CAAC,EACT,GAAG,EAAE;QACH,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC;IAC/D,CAAC,EACD,aAAa,CACd,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,EAA6B,EAAE,EAAE;QACzD,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAA6B,EAAE,EAAE;QAC3D,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAC7D,OAAO,CACL,KAAC,oBAAoB,OAAK,SAAS,EAAE,GAAG,EAAE,eAAe,iBAAe,OAAO,CAAC,IAAI,YACjF,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO,CACL,eAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,SAAS,GAAI,CACnC,GACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { forwardRef, useState, useRef, useEffect, type PropsWithoutRef } from 'react';\n\nimport {\n  EmptyState,\n  useItemIntersection,\n  useConsolidatedRef,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\nimport { getExpressionListTestIds } from './ExpressionBuilder.test-ids';\n\nconst LIST_OFFSET = 20;\nconst ExpressionList: ForwardRefForwardPropsComponent<ExpressionListProps> = forwardRef(\n  function ExpressionList(\n    {\n      testId,\n      items = [],\n      emptyText,\n      onItemAdd,\n      onItemExpand,\n      onItemCollapse,\n      details,\n      ...restProps\n    }: PropsWithoutRef<ExpressionListProps>,\n    ref: ExpressionListProps['ref']\n  ) {\n    const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));\n    const listRef = useRef<HTMLUListElement>(null);\n\n    useEffect(() => {\n      setCount(Math.min(LIST_OFFSET, items.length));\n    }, [items]);\n\n    const consolidatedRef = useConsolidatedRef(ref, listRef);\n\n    useItemIntersection(\n      consolidatedRef,\n      count - 1,\n      () => {\n        setCount(prev => Math.min(items.length, prev + LIST_OFFSET));\n      },\n      ':scope > li'\n    );\n    const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n    const handleItemExpand = (id: ExpressionItemProps['id']) => {\n      setExpandedItems(prev => {\n        const itemIndex = prev.indexOf(id);\n        if (itemIndex !== -1) return prev;\n        onItemExpand?.(id);\n        return [...prev, id];\n      });\n    };\n\n    const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n      setExpandedItems(prev => {\n        const itemIndex = prev.indexOf(id);\n        if (itemIndex === -1) return prev;\n        onItemCollapse?.(id);\n        return prev.filter(itemId => itemId !== id);\n      });\n    };\n    const testIds = useTestIds(testId, getExpressionListTestIds);\n    return (\n      <StyledExpressionList {...restProps} ref={consolidatedRef} data-testid={testIds.root}>\n        {items && items.length > 0 ? (\n          items.slice(0, count).map(item => {\n            return (\n              <ExpressionItem\n                {...item}\n                onAdd={onItemAdd}\n                onExpand={handleItemExpand}\n                onCollapse={handleItemCollapse}\n                expanded={expandedItems.includes(item.id)}\n                key={item.id}\n                details={details?.[item.id]}\n              />\n            );\n          })\n        ) : (\n          <EmptyState message={emptyText} />\n        )}\n      </StyledExpressionList>\n    );\n  }\n);\n\nexport default withTestIds(ExpressionList, getExpressionListTestIds);\n"]}
+{"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, type PropsWithoutRef } from 'react';\n\nimport {\n  EmptyState,\n  useItemIntersection,\n  useTestIds,\n  withTestIds,\n  Progress\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\nimport { getExpressionListTestIds } from './ExpressionBuilder.test-ids';\n\nconst LIST_OFFSET = 20;\nconst ExpressionList: ForwardRefForwardPropsComponent<ExpressionListProps> = forwardRef(\n  function ExpressionList(\n    {\n      testId,\n      items = [],\n      emptyText,\n      onItemAdd,\n      onItemExpand,\n      onItemCollapse,\n      details,\n      scrollableRef,\n      loading,\n      ...restProps\n    }: PropsWithoutRef<ExpressionListProps>,\n    ref: ExpressionListProps['ref']\n  ) {\n    const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));\n\n    useEffect(() => {\n      if (items.length > 0) {\n        setCount(Math.min(LIST_OFFSET, items.length));\n      }\n    }, [items]);\n\n    const testIds = useTestIds(testId, getExpressionListTestIds);\n\n    useItemIntersection(\n      scrollableRef,\n      count - 1,\n      () => {\n        setCount(prev => Math.min(items.length, prev + LIST_OFFSET));\n      },\n      `ul[data-testid=\"${testIds.root}\"] > li`\n    );\n    const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n    const handleItemExpand = (id: ExpressionItemProps['id']) => {\n      setExpandedItems(prev => {\n        const itemIndex = prev.indexOf(id);\n        if (itemIndex !== -1) return prev;\n        onItemExpand?.(id);\n        return [...prev, id];\n      });\n    };\n\n    const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n      setExpandedItems(prev => {\n        const itemIndex = prev.indexOf(id);\n        if (itemIndex === -1) return prev;\n        onItemCollapse?.(id);\n        return prev.filter(itemId => itemId !== id);\n      });\n    };\n\n    const getLoadingOrEmptyState = () => {\n      return loading ? (\n        <Progress placement='block' message={emptyText} />\n      ) : (\n        <EmptyState message={emptyText} />\n      );\n    };\n\n    return (\n      <StyledExpressionList {...restProps} ref={ref} data-testid={testIds.root}>\n        {items && items.length > 0\n          ? items.slice(0, count).map(item => {\n              return (\n                <ExpressionItem\n                  {...item}\n                  onAdd={onItemAdd}\n                  onExpand={handleItemExpand}\n                  onCollapse={handleItemCollapse}\n                  expanded={expandedItems.includes(item.id)}\n                  key={item.id}\n                  details={details?.[item.id]}\n                />\n              );\n            })\n          : getLoadingOrEmptyState()}\n      </StyledExpressionList>\n    );\n  }\n);\n\nexport default withTestIds(ExpressionList, getExpressionListTestIds);\n"]}

package/lib/components/ExpressionBuilder/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './ExpressionBuilder';
 export type { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue, InputParams } from './ExpressionBuilder.types';
-export type { EditorState, CodeEditorProps, AutoCompleteTriggerChar, SuggestionType, CursorPosition, CustomPositionProps } from './CodeEditor/CodeEditor.types';
+export type { EditorState, CodeEditorProps, AutoCompleteTriggerChar, SuggestionType, CursorPosition, CustomPositionProps, LintError } from './CodeEditor/CodeEditor.types';
 export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';

package/lib/components/ExpressionBuilder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,WAAW,EACX,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,WAAW,EACX,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,SAAS,EACV,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/ExpressionBuilder/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAgB9C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default } from './ExpressionBuilder';\nexport type {\n  ExpressionListProps,\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  HandleValue,\n  InputParams\n} from './ExpressionBuilder.types';\nexport type {\n  EditorState,\n  CodeEditorProps,\n  AutoCompleteTriggerChar,\n  SuggestionType,\n  CursorPosition,\n  CustomPositionProps\n} from './CodeEditor/CodeEditor.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\nexport { default as CodeEditor } from './CodeEditor/CodeEditor';\nexport { default as ExpressionBuilderContext } from './ExpressionBuilderContext';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAiB9C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default } from './ExpressionBuilder';\nexport type {\n  ExpressionListProps,\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  HandleValue,\n  InputParams\n} from './ExpressionBuilder.types';\nexport type {\n  EditorState,\n  CodeEditorProps,\n  AutoCompleteTriggerChar,\n  SuggestionType,\n  CursorPosition,\n  CustomPositionProps,\n  LintError\n} from './CodeEditor/CodeEditor.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\nexport { default as CodeEditor } from './CodeEditor/CodeEditor';\nexport { default as ExpressionBuilderContext } from './ExpressionBuilderContext';\n"]}

package/lib/components/FieldReference/FieldReference.styles.d.ts

@@ -1,14 +1,23 @@
-export declare const StyledFieldReferenceDisplay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFieldReferenceDisplayGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFieldReferenceInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFieldReferenceDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFieldReferenceDisplayGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFieldReferenceInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
     restingState?: boolean;
-}, never>;
-export declare const StyledSelection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledLeadingDot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFieldReferencePicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("@pega/cosmos-react-core").FormControlProps, keyof import("@pega/cosmos-react-core").FormControlProps> & Required<Pick<import("@pega/cosmos-react-core").FormControlProps, never>> & {
+}>> & string;
+export declare const StyledSelection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLeadingDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFieldReferencePicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@pega/cosmos-react-core").FormControlProps | "hasSuggestion"> & Pick<import("@pega/cosmos-react-core").FormControlProps, keyof import("@pega/cosmos-react-core").FormControlProps> & Required<Pick<import("@pega/cosmos-react-core").FormControlProps, never>> & {
     hasSuggestion?: boolean;
-}, never>;
-export declare const StyledFieldReferenceMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledMenuListContainer: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPathSegment: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledFieldReferenceMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledMenuListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLFieldSetElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLFieldSetElement> | null | undefined;
+}, never>> & string;
+export declare const StyledPathSegment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledFieldValueList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps, never>> & string & Omit<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=FieldReference.styles.d.ts.map

package/lib/components/FieldReference/FieldReference.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldReference.styles.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReference.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,2BAA2B,yGAoDtC,CAAC;AAIH,eAAO,MAAM,+BAA+B,yGAqB1C,CAAC;AAIH,eAAO,MAAM,yBAAyB;mBAA8C,OAAO;SAuCzF,CAAC;AAIH,eAAO,MAAM,eAAe,yGAM1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAI3B,CAAC;AAIH,eAAO,MAAM,0BAA0B;;SAcrC,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAyBnC,CAAC;AAIH,eAAO,MAAM,uBAAuB,8GAEnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,0GAU5B,CAAC"}
+{"version":3,"file":"FieldReference.styles.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReference.styles.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,2BAA2B,6NAoDtC,CAAC;AAIH,eAAO,MAAM,+BAA+B,6NAqB1C,CAAC;AAIH,eAAO,MAAM,yBAAyB;;;mBAA8C,OAAO;YAwCzF,CAAC;AAIH,eAAO,MAAM,eAAe,6NAM1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,6NAI3B,CAAC;AAIH,eAAO,MAAM,0BAA0B;;;;mBAcrC,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAyBnC,CAAC;AAIH,eAAO,MAAM,uBAAuB;;mBAEnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,+NAU5B,CAAC;AAIH,eAAO,MAAM,oBAAoB;2BAtGT,CAAC;iDA4GvB,CAAC"}

package/lib/components/FieldReference/FieldReference.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { StyledFlex, StyledText, defaultThemeProp, StyledFormControl, StyledPopover, StyledMenuListWrapper, StyledMenuItem, StyledSummaryItem, StyledSummaryItemActions, StyledMenuListContainer as StyledCoreMenuListContainer, useDirection, StyledButton, StyledLink, StyledGrid } from '@pega/cosmos-react-core';
+import { StyledFlex, StyledText, defaultThemeProp, StyledFormControl, StyledPopover, StyledMenuListWrapper, StyledMenuItem, StyledSummaryItem, StyledSummaryItemActions, StyledMenuListContainer as StyledCoreMenuListContainer, useDirection, StyledButton, StyledLink, StyledGrid, FieldValueList, StyledLabel } from '@pega/cosmos-react-core';
 import { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';
 import { StyledMenu, StyledMenuGroupHeader } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
@@ -83,6 +83,7 @@ export const StyledFieldReferenceInput = styled(StyledSelectInput)(({ restingSta
 
       ${restingState &&
         css `
+        color: transparent;
         caret-color: transparent;
       `}
     }
@@ -180,4 +181,12 @@ export const StyledPathSegment = styled.span(({ theme }) => {
   `;
 });
 StyledPathSegment.defaultProps = defaultThemeProp;
+export const StyledFieldValueList = styled(FieldValueList)(({ theme }) => {
+    return css `
+    ${StyledLabel} {
+      color: ${theme.components.tooltip['foreground-color']};
+    }
+  `;
+});
+StyledFieldValueList.defaultProps = defaultThemeProp;
 //# sourceMappingURL=FieldReference.styles.js.map

package/lib/components/FieldReference/FieldReference.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldReference.styles.js","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReference.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  StyledFlex,\n  StyledText,\n  defaultThemeProp,\n  StyledFormControl,\n  StyledPopover,\n  StyledMenuListWrapper,\n  StyledMenuItem,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledMenuListContainer as StyledCoreMenuListContainer,\n  useDirection,\n  StyledButton,\n  StyledLink,\n  StyledGrid\n} from '@pega/cosmos-react-core';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';\nimport {\n  StyledMenu,\n  StyledMenuGroupHeader\n} from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport const StyledFieldReferenceDisplay = styled.div(({ theme }) => {\n  const {\n    base: { 'border-radius': baseBorderRadius, 'content-width': contentWidth, 'hit-area': hitArea },\n    components: {\n      input: { height },\n      'form-control': {\n        'border-radius': formBorderRadius,\n        'foreground-color': fgColor,\n        'border-width': borderWidth\n      }\n    }\n  } = theme;\n\n  return css`\n    width: 100%;\n    cursor: default;\n\n    & > ${StyledFlex} {\n      & > ${StyledFlex} {\n        & > ${StyledIconShape} {\n          flex-shrink: 0;\n        }\n        min-width: 0;\n        min-height: ${theme.components.icon.size.s};\n        height: 100%;\n      }\n\n      & > ${StyledText} {\n        max-width: ${contentWidth.xs};\n      }\n\n      ${StyledLink},\n      ${StyledText} {\n        ${ellipsisOverflow};\n      }\n    }\n\n    ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n      width: calc(${height} - 2 * ${borderWidth});\n      @media (pointer: coarse) {\n        min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n        width: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n      }\n    }\n  `;\n});\n\nStyledFieldReferenceDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceDisplayGrid = styled.div(({ theme }) => {\n  return css`\n    max-width: 100%;\n    flex-grow: 1;\n\n    & > ${StyledFlex} {\n      overflow: hidden;\n      & > ${StyledIconShape} {\n        min-width: ${theme.components.icon.size.s};\n      }\n\n      ${StyledLink},\n      ${StyledText} {\n        ${ellipsisOverflow};\n      }\n    }\n\n    & > ${StyledText} {\n      ${ellipsisOverflow};\n    }\n  `;\n});\n\nStyledFieldReferenceDisplayGrid.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceInput = styled(StyledSelectInput)<{ restingState?: boolean }>(({\n  restingState,\n  theme\n}) => {\n  return css`\n    min-height: ${theme.components.input.height};\n\n    & > ${StyledGrid} > * {\n      grid-row: 1;\n    }\n\n    input {\n      height: 1.125rem;\n\n      ${restingState &&\n      css`\n        caret-color: transparent;\n      `}\n    }\n\n    div {\n      min-height: unset;\n    }\n\n    ${StyledFieldReferenceDisplay} {\n      padding-inline-start: calc(0.5 * ${theme.base.spacing});\n      padding-inline-end: calc(0.5 * ${theme.base.spacing});\n      position: relative;\n      z-index: 1;\n\n      &:not(&:has(${StyledButton})) {\n        padding-inline-end: ${theme.base.spacing};\n      }\n    }\n\n    div + input {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledFieldReferenceInput.defaultProps = defaultThemeProp;\n\nexport const StyledSelection = styled.div(() => {\n  const { rtl } = useDirection();\n  return css`\n    direction: ${rtl ? 'ltr' : 'rtl'};\n    overflow: hidden;\n  `;\n});\n\nStyledSelection.defaultProps = defaultThemeProp;\n\nexport const StyledLeadingDot = styled.div(({ theme }) => {\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledLeadingDot.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferencePicker = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledFieldReferencePicker.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceMenu = styled.div(({ theme }) => {\n  return css`\n    ${StyledMenuItem} {\n      ${StyledSummaryItem} > ${StyledSummaryItemActions} > ${StyledFlex} {\n        & > :not(${StyledButton}) {\n          margin-inline: calc(\n            (${theme.base['hit-area']['mouse-min']} - ${theme.components.icon.size.s}) / 2\n          );\n\n          @media (pointer: coarse) {\n            margin-inline: calc(\n              (${theme.base['hit-area']['finger-min']} - ${theme.components.icon.size.s}) / 2\n            );\n          }\n        }\n      }\n    }\n\n    ${StyledMenuGroupHeader} {\n      padding-inline-start: calc(1.125rem + 2 * ${theme.base.spacing});\n      border-block-start: solid 0.0625rem ${theme.base.palette['border-line']};\n      background-color: transparent;\n      font-weight: ${theme.base['font-weight'].bold};\n    }\n  `;\n});\n\nStyledFieldReferenceMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled(StyledCoreMenuListContainer)`\n  height: 100%;\n`;\n\nexport const StyledPathSegment = styled.span(({ theme }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    border: solid 0.125rem ${theme.base.colors.gray.light};\n    color: ${theme.base.colors.black};\n    line-height: 1.375rem;\n    padding-inline: calc(${theme.base.spacing} / 2);\n    white-space: nowrap;\n  `;\n});\n\nStyledPathSegment.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"FieldReference.styles.js","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReference.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  StyledFlex,\n  StyledText,\n  defaultThemeProp,\n  StyledFormControl,\n  StyledPopover,\n  StyledMenuListWrapper,\n  StyledMenuItem,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledMenuListContainer as StyledCoreMenuListContainer,\n  useDirection,\n  StyledButton,\n  StyledLink,\n  StyledGrid,\n  FieldValueList,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';\nimport {\n  StyledMenu,\n  StyledMenuGroupHeader\n} from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport const StyledFieldReferenceDisplay = styled.div(({ theme }) => {\n  const {\n    base: { 'border-radius': baseBorderRadius, 'content-width': contentWidth, 'hit-area': hitArea },\n    components: {\n      input: { height },\n      'form-control': {\n        'border-radius': formBorderRadius,\n        'foreground-color': fgColor,\n        'border-width': borderWidth\n      }\n    }\n  } = theme;\n\n  return css`\n    width: 100%;\n    cursor: default;\n\n    & > ${StyledFlex} {\n      & > ${StyledFlex} {\n        & > ${StyledIconShape} {\n          flex-shrink: 0;\n        }\n        min-width: 0;\n        min-height: ${theme.components.icon.size.s};\n        height: 100%;\n      }\n\n      & > ${StyledText} {\n        max-width: ${contentWidth.xs};\n      }\n\n      ${StyledLink},\n      ${StyledText} {\n        ${ellipsisOverflow};\n      }\n    }\n\n    ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n      width: calc(${height} - 2 * ${borderWidth});\n      @media (pointer: coarse) {\n        min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n        width: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n      }\n    }\n  `;\n});\n\nStyledFieldReferenceDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceDisplayGrid = styled.div(({ theme }) => {\n  return css`\n    max-width: 100%;\n    flex-grow: 1;\n\n    & > ${StyledFlex} {\n      overflow: hidden;\n      & > ${StyledIconShape} {\n        min-width: ${theme.components.icon.size.s};\n      }\n\n      ${StyledLink},\n      ${StyledText} {\n        ${ellipsisOverflow};\n      }\n    }\n\n    & > ${StyledText} {\n      ${ellipsisOverflow};\n    }\n  `;\n});\n\nStyledFieldReferenceDisplayGrid.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceInput = styled(StyledSelectInput)<{ restingState?: boolean }>(({\n  restingState,\n  theme\n}) => {\n  return css`\n    min-height: ${theme.components.input.height};\n\n    & > ${StyledGrid} > * {\n      grid-row: 1;\n    }\n\n    input {\n      height: 1.125rem;\n\n      ${restingState &&\n      css`\n        color: transparent;\n        caret-color: transparent;\n      `}\n    }\n\n    div {\n      min-height: unset;\n    }\n\n    ${StyledFieldReferenceDisplay} {\n      padding-inline-start: calc(0.5 * ${theme.base.spacing});\n      padding-inline-end: calc(0.5 * ${theme.base.spacing});\n      position: relative;\n      z-index: 1;\n\n      &:not(&:has(${StyledButton})) {\n        padding-inline-end: ${theme.base.spacing};\n      }\n    }\n\n    div + input {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledFieldReferenceInput.defaultProps = defaultThemeProp;\n\nexport const StyledSelection = styled.div(() => {\n  const { rtl } = useDirection();\n  return css`\n    direction: ${rtl ? 'ltr' : 'rtl'};\n    overflow: hidden;\n  `;\n});\n\nStyledSelection.defaultProps = defaultThemeProp;\n\nexport const StyledLeadingDot = styled.div(({ theme }) => {\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledLeadingDot.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferencePicker = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledFieldReferencePicker.defaultProps = defaultThemeProp;\n\nexport const StyledFieldReferenceMenu = styled.div(({ theme }) => {\n  return css`\n    ${StyledMenuItem} {\n      ${StyledSummaryItem} > ${StyledSummaryItemActions} > ${StyledFlex} {\n        & > :not(${StyledButton}) {\n          margin-inline: calc(\n            (${theme.base['hit-area']['mouse-min']} - ${theme.components.icon.size.s}) / 2\n          );\n\n          @media (pointer: coarse) {\n            margin-inline: calc(\n              (${theme.base['hit-area']['finger-min']} - ${theme.components.icon.size.s}) / 2\n            );\n          }\n        }\n      }\n    }\n\n    ${StyledMenuGroupHeader} {\n      padding-inline-start: calc(1.125rem + 2 * ${theme.base.spacing});\n      border-block-start: solid 0.0625rem ${theme.base.palette['border-line']};\n      background-color: transparent;\n      font-weight: ${theme.base['font-weight'].bold};\n    }\n  `;\n});\n\nStyledFieldReferenceMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled(StyledCoreMenuListContainer)`\n  height: 100%;\n`;\n\nexport const StyledPathSegment = styled.span(({ theme }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    border: solid 0.125rem ${theme.base.colors.gray.light};\n    color: ${theme.base.colors.black};\n    line-height: 1.375rem;\n    padding-inline: calc(${theme.base.spacing} / 2);\n    white-space: nowrap;\n  `;\n});\n\nStyledPathSegment.defaultProps = defaultThemeProp;\n\nexport const StyledFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    ${StyledLabel} {\n      color: ${theme.components.tooltip['foreground-color']};\n    }\n  `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/FieldReference/FieldReferenceDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldReferenceDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceDisplay.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAS,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;;;;AAoGhF,wBAAmF"}
+{"version":3,"file":"FieldReferenceDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceDisplay.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAS,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;;;;AAqGhF,wBAAmF"}

package/lib/components/FieldReference/FieldReferenceDisplay.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useTestIds, Flex, Text, Icon, Grid, NoValue, withTestIds, hasProp, Actions, Link, FieldValueList, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { useTestIds, Flex, Text, Icon, Grid, NoValue, withTestIds, hasProp, Actions, Link, Tooltip, useElement } from '@pega/cosmos-react-core';
 import { getFieldReferenceDisplayTestIds } from './FieldReference.test-ids';
-import { StyledFieldReferenceDisplay, StyledFieldReferenceDisplayGrid } from './FieldReference.styles';
+import { StyledFieldReferenceDisplay, StyledFieldReferenceDisplayGrid, StyledFieldValueList } from './FieldReference.styles';
 const FieldReferenceDisplay = forwardRef(function FieldReferenceDisplay({ testId, fieldPath, link, actions, tooltipData }, ref) {
     const testIds = useTestIds(testId, getFieldReferenceDisplayTestIds);
     const [displayEl, setDisplayEl] = useElement();
@@ -28,7 +28,7 @@ const FieldReferenceDisplay = forwardRef(function FieldReferenceDisplay({ testId
                                                 }
                                                 : undefined, children: fieldPath.map(field => field.name).join(' . ') })) : (_jsx(Text, { "data-testid": testIds.fieldPath, children: fieldPath.map(field => field.name).join(' . ') }))] }), type && (_jsx(Flex, { container: {
                                         justify: 'end'
-                                    }, item: { grow: 1 }, children: _jsx(Text, { "data-testid": testIds.type, variant: 'secondary', children: type }) }))] }), actions && _jsx(Actions, { items: actions })] })) : (_jsx(NoValue, {})) }), tooltipData && (_jsx(Tooltip, { target: displayEl, ignoredElements: [linkEl], hideDelay: 'none', describeTarget: true, children: _jsx(FieldValueList, { fields: tooltipData }) }))] }));
+                                    }, item: { grow: 1 }, children: _jsx(Text, { "data-testid": testIds.type, variant: 'secondary', children: type }) }))] }), actions && _jsx(Actions, { items: actions })] })) : (_jsx(NoValue, {})) }), tooltipData && (_jsx(Tooltip, { target: displayEl, ignoredElements: [linkEl], hideDelay: 'none', describeTarget: true, children: _jsx(StyledFieldValueList, { fields: tooltipData }) }))] }));
 });
 export default withTestIds(FieldReferenceDisplay, getFieldReferenceDisplayTestIds);
 //# sourceMappingURL=FieldReferenceDisplay.js.map

package/lib/components/FieldReference/FieldReferenceDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldReferenceDisplay.js","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceDisplay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n  useTestIds,\n  Flex,\n  Text,\n  Icon,\n  Grid,\n  NoValue,\n  withTestIds,\n  hasProp,\n  Actions,\n  Link,\n  FieldValueList,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport type { Field, FieldReferenceDisplayProps } from './FieldReference.types';\nimport { getFieldReferenceDisplayTestIds } from './FieldReference.test-ids';\nimport {\n  StyledFieldReferenceDisplay,\n  StyledFieldReferenceDisplayGrid\n} from './FieldReference.styles';\n\nconst FieldReferenceDisplay = forwardRef(function FieldReferenceDisplay(\n  { testId, fieldPath, link, actions, tooltipData }: PropsWithoutRef<FieldReferenceDisplayProps>,\n  ref: FieldReferenceDisplayProps['ref']\n) {\n  const testIds = useTestIds(testId, getFieldReferenceDisplayTestIds);\n  const [displayEl, setDisplayEl] = useElement<HTMLDivElement>();\n  const [linkEl, setLinkEl] = useElement<HTMLAnchorElement>();\n\n  const icon =\n    !!fieldPath.at(-1) && hasProp(fieldPath.at(-1)!, 'icon')\n      ? (fieldPath.at(-1)! as Field).icon\n      : undefined;\n  const type =\n    !!fieldPath.at(-1) && hasProp(fieldPath.at(-1)!, 'type')\n      ? (fieldPath.at(-1)! as Field).type\n      : undefined;\n\n  return (\n    <>\n      <Flex\n        as={StyledFieldReferenceDisplay}\n        data-testid={testIds.root}\n        ref={ref}\n        container={{\n          justify: 'between',\n          alignItems: 'center',\n          colGap: 0.5\n        }}\n      >\n        {fieldPath.length ? (\n          <>\n            <Grid\n              ref={setDisplayEl}\n              as={StyledFieldReferenceDisplayGrid}\n              container={{\n                alignItems: 'center',\n                gap: 1,\n                cols: type ? 'auto 1fr' : 'auto',\n                areas: type ? '\"primary secondary\"' : '\"primary\"'\n              }}\n            >\n              <Flex container={{ alignItems: 'center', colGap: 1 }}>\n                {icon && <Icon data-testid={testIds.icon} {...icon} size='s' />}\n                {link ? (\n                  <Link\n                    data-testid={testIds.fieldPath}\n                    ref={setLinkEl}\n                    {...link}\n                    onClick={\n                      link.onClick\n                        ? (e: MouseEvent) => {\n                            link.onClick?.(e);\n                          }\n                        : undefined\n                    }\n                  >\n                    {fieldPath.map(field => field.name).join(' . ')}\n                  </Link>\n                ) : (\n                  <Text data-testid={testIds.fieldPath}>\n                    {fieldPath.map(field => field.name).join(' . ')}\n                  </Text>\n                )}\n              </Flex>\n              {type && (\n                <Flex\n                  container={{\n                    justify: 'end'\n                  }}\n                  item={{ grow: 1 }}\n                >\n                  <Text data-testid={testIds.type} variant='secondary'>\n                    {type}\n                  </Text>\n                </Flex>\n              )}\n            </Grid>\n            {actions && <Actions items={actions} />}\n          </>\n        ) : (\n          <NoValue />\n        )}\n      </Flex>\n\n      {tooltipData && (\n        <Tooltip target={displayEl} ignoredElements={[linkEl]} hideDelay='none' describeTarget>\n          <FieldValueList fields={tooltipData} />\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default withTestIds(FieldReferenceDisplay, getFieldReferenceDisplayTestIds);\n"]}
+{"version":3,"file":"FieldReferenceDisplay.js","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceDisplay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n  useTestIds,\n  Flex,\n  Text,\n  Icon,\n  Grid,\n  NoValue,\n  withTestIds,\n  hasProp,\n  Actions,\n  Link,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport type { Field, FieldReferenceDisplayProps } from './FieldReference.types';\nimport { getFieldReferenceDisplayTestIds } from './FieldReference.test-ids';\nimport {\n  StyledFieldReferenceDisplay,\n  StyledFieldReferenceDisplayGrid,\n  StyledFieldValueList\n} from './FieldReference.styles';\n\nconst FieldReferenceDisplay = forwardRef(function FieldReferenceDisplay(\n  { testId, fieldPath, link, actions, tooltipData }: PropsWithoutRef<FieldReferenceDisplayProps>,\n  ref: FieldReferenceDisplayProps['ref']\n) {\n  const testIds = useTestIds(testId, getFieldReferenceDisplayTestIds);\n  const [displayEl, setDisplayEl] = useElement<HTMLDivElement>();\n  const [linkEl, setLinkEl] = useElement<HTMLAnchorElement>();\n\n  const icon =\n    !!fieldPath.at(-1) && hasProp(fieldPath.at(-1)!, 'icon')\n      ? (fieldPath.at(-1)! as Field).icon\n      : undefined;\n  const type =\n    !!fieldPath.at(-1) && hasProp(fieldPath.at(-1)!, 'type')\n      ? (fieldPath.at(-1)! as Field).type\n      : undefined;\n\n  return (\n    <>\n      <Flex\n        as={StyledFieldReferenceDisplay}\n        data-testid={testIds.root}\n        ref={ref}\n        container={{\n          justify: 'between',\n          alignItems: 'center',\n          colGap: 0.5\n        }}\n      >\n        {fieldPath.length ? (\n          <>\n            <Grid\n              ref={setDisplayEl}\n              as={StyledFieldReferenceDisplayGrid}\n              container={{\n                alignItems: 'center',\n                gap: 1,\n                cols: type ? 'auto 1fr' : 'auto',\n                areas: type ? '\"primary secondary\"' : '\"primary\"'\n              }}\n            >\n              <Flex container={{ alignItems: 'center', colGap: 1 }}>\n                {icon && <Icon data-testid={testIds.icon} {...icon} size='s' />}\n                {link ? (\n                  <Link\n                    data-testid={testIds.fieldPath}\n                    ref={setLinkEl}\n                    {...link}\n                    onClick={\n                      link.onClick\n                        ? (e: MouseEvent) => {\n                            link.onClick?.(e);\n                          }\n                        : undefined\n                    }\n                  >\n                    {fieldPath.map(field => field.name).join(' . ')}\n                  </Link>\n                ) : (\n                  <Text data-testid={testIds.fieldPath}>\n                    {fieldPath.map(field => field.name).join(' . ')}\n                  </Text>\n                )}\n              </Flex>\n              {type && (\n                <Flex\n                  container={{\n                    justify: 'end'\n                  }}\n                  item={{ grow: 1 }}\n                >\n                  <Text data-testid={testIds.type} variant='secondary'>\n                    {type}\n                  </Text>\n                </Flex>\n              )}\n            </Grid>\n            {actions && <Actions items={actions} />}\n          </>\n        ) : (\n          <NoValue />\n        )}\n      </Flex>\n\n      {tooltipData && (\n        <Tooltip target={displayEl} ignoredElements={[linkEl]} hideDelay='none' describeTarget>\n          <StyledFieldValueList fields={tooltipData} />\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default withTestIds(FieldReferenceDisplay, getFieldReferenceDisplayTestIds);\n"]}

package/lib/components/FieldReference/FieldReferenceInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldReferenceInput.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceInput.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,wBAAwB,MAAM,wBAAwB,CAAC;;;;AAypBnE,wBAA+E"}
+{"version":3,"file":"FieldReferenceInput.d.ts","sourceRoot":"","sources":["../../../src/components/FieldReference/FieldReferenceInput.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,wBAAwB,MAAM,wBAAwB,CAAC;;;;AAoqBnE,wBAA+E"}

package/lib/components/FieldReference/FieldReferenceInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { registerIcon, navigatorIsAvailable, useUID, useTestIds, useI18n, useElement, useConsolidatedRef, useFocusWithin, Icon, useEscape, Button, Flex, Grid, StyledFormControl, VisuallyHiddenText, FieldValueList, Popover, getFocusables, Menu, FormField, withTestIds } from '@pega/cosmos-react-core';
+import { registerIcon, navigatorIsAvailable, useUID, useTestIds, useI18n, useElement, useConsolidatedRef, useFocusWithin, Icon, useEscape, Button, Flex, Grid, StyledFormControl, VisuallyHiddenText, Popover, getFocusables, Menu, FormField, withTestIds } from '@pega/cosmos-react-core';
 import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
 import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
 import { fitToContent } from '@pega/cosmos-react-core/lib/components/Popover/modifiers';
-import { StyledFieldReferenceInput, StyledFieldReferencePicker, StyledPathSegment, StyledSelection, StyledFieldReferenceMenu, StyledLeadingDot } from './FieldReference.styles';
+import { StyledFieldReferenceInput, StyledFieldReferencePicker, StyledPathSegment, StyledSelection, StyledFieldReferenceMenu, StyledLeadingDot, StyledFieldValueList } from './FieldReference.styles';
 import { getFieldReferenceInputTestIds } from './FieldReference.test-ids';
 import FieldReferenceDisplay from './FieldReferenceDisplay';
 import FieldReferenceMenuList from './FieldReferenceMenuList';
@@ -97,7 +97,7 @@ const FieldReferenceInput = forwardRef(function FieldReferenceInput(props, ref)
                 primary: item.name,
                 secondary: item.type ? [item.type] : undefined,
                 items: item.items ? formatMenuItems({ items: item.items, context: item }) : undefined,
-                tooltip: showTooltips ? (_jsx(FieldValueList, { fields: tooltipData, truncate: false })) : undefined,
+                tooltip: showTooltips ? (_jsx(StyledFieldValueList, { fields: tooltipData, truncate: false })) : undefined,
                 selected: item.selected
             };
         });
@@ -331,7 +331,15 @@ const FieldReferenceInput = forwardRef(function FieldReferenceInput(props, ref)
                                     colStart: !!selected.length && open ? '3' : '1',
                                     colEnd: '4',
                                     alignSelf: 'center'
-                                }, as: 'input', size: 1, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": !pauseSelectedDescendantEvaluation ? listId : ariaControls, "aria-haspopup": 'menu', "aria-describedby": ariaDescribedBy, value: open ? filterValue : '', id: id, onChange: (e) => {
+                                }, as: 'input', size: 1, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": !pauseSelectedDescendantEvaluation ? listId : ariaControls, "aria-haspopup": 'menu', "aria-describedby": ariaDescribedBy, value: (() => {
+                                    if (open) {
+                                        return filterValue;
+                                    }
+                                    if (selected.length > 0) {
+                                        return selected.map(({ name }) => name).join('.');
+                                    }
+                                    return '';
+                                })(), id: id, onChange: (e) => {
                                     if (e.target.value !== '.') {
                                         if (e.target.value.endsWith('.')) {
                                             const search = e.target.value.replace('.', '');
@@ -358,7 +366,7 @@ const FieldReferenceInput = forwardRef(function FieldReferenceInput(props, ref)
                                         setOpen(true);
                                         toggleMenuDescendantsActive(true);
                                     }
-                                }, onClick: onInputClick, onKeyDown: onInputKeyDown, onKeyUp: onInputKeyUp, readOnly: readOnly, disabled: disabled, placeholder: !selected.length && !showDot ? placeholder : undefined, autoComplete: 'off', required: undefined })] }), dropdownButton] }), _jsx(Popover, { ref: popoverRef, show: open, target: containerRef.current, placement: 'bottom-start', modifiers: [fitToContent], strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), onKeyDown: (e) => {
+                                }, onClick: onInputClick, onKeyDown: onInputKeyDown, onKeyUp: onInputKeyUp, readOnly: readOnly, disabled: disabled, placeholder: !selected.length && !showDot ? placeholder : undefined, autoComplete: 'off', required: required })] }), dropdownButton] }), _jsx(Popover, { ref: popoverRef, show: open, target: containerRef.current, placement: 'bottom-start', modifiers: [fitToContent], strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), onKeyDown: (e) => {
                     if (!inputRef.current)
                         return;
                     if (e.key === 'Tab') {