@pega/cosmos-react-core 9.0.0-build.6.8 → 9.0.0-build.7.0

package/lib/components/FieldGroup/FieldGroupList.js

@@ -1,75 +1,225 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useRef, useLayoutEffect, useContext, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
-import { useI18n } from '../../hooks';
+import { useDirection, useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import { getActiveElement, getFocusables } from '../../utils';
-import FieldGroup, { StyledFieldGroup } from './FieldGroup';
+import { getActiveElement, getFocusables, tryCatch } from '../../utils';
+import Flex from '../Flex';
+import EmptyState from '../EmptyState';
+import AdditionalInfo from '../AdditionalInfo';
+import Text from '../Text';
+import { nlpColors, readableHue } from '../../styles';
+import { getIndexDetails } from './FieldGroupList.utils';
+import FieldGroup, { StyledFieldGroup, StyledFieldGroupContent, StyledFieldGroupLegend, StyledGroupContainer, StyledFieldHeader } from './FieldGroup';
+import FieldGroupListContext from './FieldGroupListContext';
 registerIcon(plusIcon);
-const StyledFieldGroupList = styled.div(({ theme }) => css `
-    margin-block-start: ${theme.base.spacing};
-
-    ${StyledFieldGroup} {
-      margin-block-start: 0;
-    }
+const StyledFieldGroupList = styled.ol(() => css `
+    list-style: none;
   `);
 StyledFieldGroupList.defaultProps = defaultThemeProp;
-export const StyledListItem = styled(FieldGroup)(({ theme }) => css `
-    padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});
+export const StyledListItem = styled.li(({ theme: { base: { spacing, palette, 'border-radius': borderRadius } }, depth, listGroupIndex, shouldHighlight }) => {
+    const bgColor = tryCatch(() => readableHue(nlpColors[listGroupIndex % nlpColors.length], palette['app-background']), () => nlpColors[listGroupIndex % nlpColors.length]);
+    return css `
+      display: block;
 
-    &:not(:last-of-type) {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      margin-block-end: calc(2 * ${theme.base.spacing});
-    }
+      > ${StyledGroupContainer} {
+        position: relative;
+        padding-inline-end: ${spacing};
 
-    legend {
-      margin-block-end: 0;
-    }
-  `);
+        &::before {
+          content: '';
+          position: absolute;
+          inset-block-start: 0;
+          bottom: 0;
+          inset-inline-start: 0;
+          width: calc(0.5 * ${spacing});
+          background: ${transparentize(0.75, bgColor)};
+        }
+
+        ${depth > 1 &&
+        css `
+          margin-inline-end: -${spacing};
+        `}
+
+        ${shouldHighlight &&
+        css `
+          border-start-end-radius: calc(0.5 * ${borderRadius});
+          border-end-end-radius: calc(0.5 * ${borderRadius});
+          background: ${transparentize(0.95, palette['foreground-color'])};
+        `}
+      }
+
+      > ${StyledGroupContainer} > ${StyledFieldGroup} {
+        margin-block-start: 0;
+        padding: ${spacing} 0;
+
+        &:not(:last-of-type) {
+          border-bottom: 0.0625rem solid ${palette['border-line']};
+          margin-block-end: calc(2 * ${spacing});
+        }
+
+        legend {
+          margin-block-end: 0;
+        }
+      }
+
+      > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupContent} {
+        padding-inline-start: calc(1.5 * ${spacing});
+      }
+
+      > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupLegend} {
+        ${StyledFieldHeader} {
+          margin-inline-start: calc(0.5 * ${spacing});
+          padding-inline: ${spacing};
+          height: calc(4 * ${spacing});
+          border-start-end-radius: calc(0.5 * ${borderRadius});
+          border-end-end-radius: calc(0.5 * ${borderRadius});
+          background: ${transparentize(0.75, bgColor)};
+        }
+      }
+    `;
+});
 StyledListItem.defaultProps = defaultThemeProp;
-const StyledAddButton = styled(Button)(({ theme }) => css `
-    margin-top: ${theme.base.spacing};
+const StyledAddButton = styled(Button)(({ theme: { base: { spacing, 'hit-area': { 'mouse-min': hitAreaMouse } } } }) => css `
+    display: inline-flex;
+    align-items: center;
+    min-height: ${hitAreaMouse};
+    min-width: ${hitAreaMouse};
+    width: fit-content;
+    margin-inline-start: calc(2 * ${spacing});
   `);
 StyledAddButton.defaultProps = defaultThemeProp;
-const FieldGroupList = forwardRef(function FieldGroupList({ items, onAdd, onDelete, contextualLabel, ...restProps }, ref) {
+const StyledFieldGroupListContainer = styled.div(({ theme: { base: { spacing, palette, 'border-radius': borderRadius } }, hasAdd }) => css `
+    position: relative;
+    margin-block-start: ${spacing};
+
+    ${hasAdd &&
+    css `
+      &::before {
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+        bottom: calc(1.5 * ${spacing});
+        width: calc(1.5 * ${spacing});
+        height: calc(2.5 * ${spacing});
+        border-end-start-radius: calc(0.5 * ${borderRadius});
+        border-inline-start: calc(0.5 * ${spacing}) solid ${palette['border-line']};
+        border-bottom: calc(0.5 * ${spacing}) solid ${palette['border-line']};
+      }
+    `}
+  `);
+StyledFieldGroupListContainer.defaultProps = defaultThemeProp;
+const StyledDivider = styled.div(({ theme: { base: { spacing, palette } } }) => css `
+    flex: 1;
+    height: calc(0.5 * ${spacing});
+    background-color: ${palette['border-line']};
+  `);
+StyledDivider.defaultProps = defaultThemeProp;
+const ListItem = ({ item, index, isAddFocused, handleDelete, fieldGroupRef }) => {
+    const { id, children, name = '', isDynamic, headingTag, ...restItemProps } = item;
+    const t = useI18n();
+    const { rtl } = useDirection();
+    const { depth = 1, ancestorIndices = [], isAncestorHighlighted = false } = useContext(FieldGroupListContext);
+    const [isItemFocused, setIsItemFocused] = useState(false);
+    const [isDeleteHovered, setIsDeleteHovered] = useState(false);
+    const listIndices = [...ancestorIndices, index];
+    const { rootIndex, currentIndex, compoundIndex } = getIndexDetails(listIndices);
+    const shouldHighlight = !isAncestorHighlighted && (isAddFocused || isDeleteHovered || isItemFocused);
+    let formattedName;
+    if (isDynamic) {
+        formattedName = name;
+    }
+    else {
+        formattedName = rtl ? `${currentIndex}\u200F ${name}` : `${currentIndex} ${name}`;
+    }
+    const contextualLabel = isDynamic ? name : `${name} ${compoundIndex}`;
+    const ctxValue = useMemo(() => ({
+        depth: depth + 1,
+        isAncestorHighlighted: shouldHighlight || isAncestorHighlighted,
+        ancestorIndices: listIndices
+    }), [depth, index, shouldHighlight, isAncestorHighlighted, listIndices]);
+    return (_jsx(StyledListItem, { depth: depth, listGroupIndex: rootIndex, shouldHighlight: shouldHighlight, onFocus: () => {
+            setIsItemFocused(true);
+        }, onBlur: () => {
+            setIsItemFocused(false);
+        }, children: _jsx(FieldGroupListContext.Provider, { value: ctxValue, children: _jsx(FieldGroup, { name: formattedName, contextualLabel: contextualLabel, headingTag: headingTag, ...restItemProps, actions: handleDelete
+                    ? [
+                        {
+                            id: 'delete',
+                            text: t('delete'),
+                            icon: 'trash',
+                            iconOnly: true,
+                            onClick: () => {
+                                handleDelete(id);
+                            },
+                            onMouseEnter: () => setIsDeleteHovered(true),
+                            onMouseLeave: () => setIsDeleteHovered(false)
+                        }
+                    ]
+                    : undefined, ref: fieldGroupRef, children: children }) }) }));
+};
+const FieldGroupList = forwardRef(function FieldGroupList({ label, additionalContext, items, onAdd, onDelete, contextualLabel, ...restProps }, ref) {
     const t = useI18n();
-    const lastItemRef = useRef(null);
     const addBtnRef = useRef(null);
-    useEffect(() => {
+    const itemRefs = useRef([]);
+    const deletedItemIndexRef = useRef(null);
+    const [isAddFocused, setIsAddFocused] = useState(false);
+    const focusElement = (itemRef, focusPreference) => {
+        if (!itemRef)
+            return;
+        const focusables = getFocusables(itemRef);
+        const groupItemLegend = itemRef.querySelector(':scope > legend');
+        const groupActionButtons = focusables.filter(focusable => groupItemLegend?.contains(focusable));
+        const groupContentFocusables = focusables.filter(focusable => !groupItemLegend?.contains(focusable));
+        if (focusPreference === 'action') {
+            (groupActionButtons[0] || groupContentFocusables[0])?.focus();
+        }
+        else {
+            (groupContentFocusables[0] || groupActionButtons[0])?.focus();
+        }
+    };
+    useLayoutEffect(() => {
         const currentActiveEl = getActiveElement();
-        if (currentActiveEl === addBtnRef.current && lastItemRef.current) {
-            const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');
-            const focusables = getFocusables(lastItemRef.current);
-            const groupActionButtons = focusables.filter(focusable => groupItemLegend?.contains(focusable));
-            const groupContentFocusables = focusables.filter(focusable => !groupItemLegend?.contains(focusable));
-            if (groupContentFocusables.length > 0) {
-                groupContentFocusables[0].focus();
+        if (deletedItemIndexRef.current !== null) {
+            const deletedIndex = deletedItemIndexRef.current;
+            if (items.length === 0 && addBtnRef.current) {
+                addBtnRef.current.focus();
             }
             else {
-                groupActionButtons[0]?.focus();
+                const nextIndex = Math.min(deletedIndex, items.length - 1);
+                const nextItemRef = itemRefs.current[nextIndex];
+                focusElement(nextItemRef, 'action');
             }
+            deletedItemIndexRef.current = null;
+        }
+        if (currentActiveEl === addBtnRef.current) {
+            const lastIndex = items.length - 1;
+            const lastItemRef = itemRefs.current[lastIndex];
+            focusElement(lastItemRef, 'content');
         }
     }, [items.length]);
-    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, onDelete: itemOnDelete, ...restItemProps }, index) => {
-                const isLastItem = index === items.length - 1;
-                return (_jsx(StyledListItem, { name: name, headingTag: headingTag, ...restItemProps, actions: onDelete || itemOnDelete
-                        ? [
-                            {
-                                id: 'delete',
-                                text: t('delete'),
-                                icon: 'trash',
-                                iconOnly: true,
-                                onClick: () => {
-                                    itemOnDelete?.(id);
-                                    onDelete?.(id);
-                                }
-                            }
-                        ]
-                        : undefined, ref: isLastItem ? lastItemRef : undefined, children: children }, id));
-            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, ref: addBtnRef, children: [_jsx(Icon, { name: 'plus' }), contextualLabel ? t('add_noun', [contextualLabel]) : t('add')] }))] }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, as: StyledFieldGroupListContainer, hasAdd: !!onAdd, onFocus: (e) => {
+            e.stopPropagation();
+        }, onBlur: (e) => {
+            e.stopPropagation();
+        }, children: [label && (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: label }), additionalContext && (_jsx(AdditionalInfo, { contextualLabel: label, children: additionalContext })), _jsx(StyledDivider, { "aria-hidden": 'true' })] })), items.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledFieldGroupList, ref: ref, ...restProps, children: items.map((item, index) => {
+                    const handleDelete = onDelete || item.onDelete
+                        ? (id) => {
+                            deletedItemIndexRef.current = index;
+                            item.onDelete?.(id);
+                            onDelete?.(id);
+                        }
+                        : undefined;
+                    return (_jsx(ListItem, { item: item, index: index, isAddFocused: isAddFocused, handleDelete: handleDelete, fieldGroupRef: (el) => {
+                            itemRefs.current[index] = el;
+                        } }, item.id));
+                }) })), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, onFocus: () => {
+                    setIsAddFocused(true);
+                }, onBlur: () => setIsAddFocused(false), ref: addBtnRef, children: [_jsx(Icon, { name: 'plus' }), contextualLabel ? t('add_noun', [contextualLabel]) : t('add')] }))] }));
 });
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.js.map

package/lib/components/FieldGroup/FieldGroupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { getActiveElement, getFocusables } from '../../utils';\n\nimport FieldGroup, { StyledFieldGroup } from './FieldGroup';\nimport type { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport type FieldGroupListItemProps = FieldGroupProps & {\n  /** The ID of the field group list item */\n  id: string;\n  /** Item level onDelete callback. */\n  onDelete?: (id: string) => void;\n};\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  contextualLabel?: string;\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) => css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledFieldGroup} {\n      margin-block-start: 0;\n    }\n  `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) => css`\n    padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n\n    &:not(:last-of-type) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    legend {\n      margin-block-end: 0;\n    }\n  `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) => css`\n    margin-top: ${theme.base.spacing};\n  `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: ForwardRefForwardPropsComponent<FieldGroupListProps> = forwardRef(\n  function FieldGroupList(\n    { items, onAdd, onDelete, contextualLabel, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) {\n    const t = useI18n();\n    const lastItemRef = useRef<HTMLDivElement>(null);\n    const addBtnRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      const currentActiveEl = getActiveElement();\n      if (currentActiveEl === addBtnRef.current && lastItemRef.current) {\n        const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');\n        const focusables = getFocusables(lastItemRef.current);\n\n        const groupActionButtons = focusables.filter(focusable =>\n          groupItemLegend?.contains(focusable)\n        );\n\n        const groupContentFocusables = focusables.filter(\n          focusable => !groupItemLegend?.contains(focusable)\n        );\n\n        if (groupContentFocusables.length > 0) {\n          groupContentFocusables[0].focus();\n        } else {\n          groupActionButtons[0]?.focus();\n        }\n      }\n    }, [items.length]);\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(\n          (\n            {\n              id,\n              children,\n              name,\n              headingTag,\n              onDelete: itemOnDelete,\n              ...restItemProps\n            }: FieldGroupListItemProps,\n            index\n          ) => {\n            const isLastItem = index === items.length - 1;\n            return (\n              <StyledListItem\n                key={id}\n                name={name}\n                headingTag={headingTag}\n                {...restItemProps}\n                actions={\n                  onDelete || itemOnDelete\n                    ? [\n                        {\n                          id: 'delete',\n                          text: t('delete'),\n                          icon: 'trash',\n                          iconOnly: true,\n                          onClick: () => {\n                            itemOnDelete?.(id);\n                            onDelete?.(id);\n                          }\n                        }\n                      ]\n                    : undefined\n                }\n                ref={isLastItem ? lastItemRef : undefined}\n              >\n                {children}\n              </StyledListItem>\n            );\n          }\n        )}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd} ref={addBtnRef}>\n            <Icon name='plus' />\n            {contextualLabel ? t('add_noun', [contextualLabel]) : t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,UAAU,EAAE,EACjB,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAE5D,YAAY,CAAC,QAAQ,CAAC,CAAC;AA6BvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CACpC,GAAG,EAAE,CAAC,GAAG,CAAA;;GAER,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAKrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,EAC1D,EACD,KAAK,EACL,cAAc,EACd,eAAe,EAChB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,QAAQ,CACtB,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAC1F,GAAG,EAAE,CAAC,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,CACnD,CAAC;IAEF,OAAO,GAAG,CAAA;;;UAGJ,oBAAoB;;8BAEA,OAAO;;;;;;;;8BAQP,OAAO;wBACb,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC;;;UAG3C,KAAK,GAAG,CAAC;QACX,GAAG,CAAA;gCACqB,OAAO;SAC9B;;UAEC,eAAe;QACjB,GAAG,CAAA;gDACqC,YAAY;8CACd,YAAY;wBAClC,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;SAChE;;;UAGC,oBAAoB,MAAM,gBAAgB;;mBAEjC,OAAO;;;2CAGiB,OAAO,CAAC,aAAa,CAAC;uCAC1B,OAAO;;;;;;;;UAQpC,oBAAoB,MAAM,gBAAgB,MAAM,uBAAuB;2CACtC,OAAO;;;UAGxC,oBAAoB,MAAM,gBAAgB,MAAM,sBAAsB;UACtE,iBAAiB;4CACiB,OAAO;4BACvB,OAAO;6BACN,OAAO;gDACY,YAAY;8CACd,YAAY;wBAClC,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC;;;KAGhD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,EAC1C,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;kBAGO,YAAY;iBACb,YAAY;;oCAEO,OAAO;GACxC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,EAC1D,EACD,MAAM,EACP,EAAE,EAAE,CAAC,GAAG,CAAA;;0BAEe,OAAO;;MAE3B,MAAM;IACR,GAAG,CAAA;;;;;6BAKsB,OAAO;4BACR,OAAO;6BACN,OAAO;8CACU,YAAY;0CAChB,OAAO,WAAW,OAAO,CAAC,aAAa,CAAC;oCAC9C,OAAO,WAAW,OAAO,CAAC,aAAa,CAAC;;KAEvE;GACF,CACF,CAAC;AAEF,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;yBAEc,OAAO;wBACR,OAAO,CAAC,aAAa,CAAC;GAC3C,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAiB,EAAE,EAAE;IAC7F,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC;IAElF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EACJ,KAAK,GAAG,CAAC,EACT,eAAe,GAAG,EAAE,EACpB,qBAAqB,GAAG,KAAK,EAC9B,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEtC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,CAAC,GAAG,eAAe,EAAE,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAEhF,MAAM,eAAe,GACnB,CAAC,qBAAqB,IAAI,CAAC,YAAY,IAAI,eAAe,IAAI,aAAa,CAAC,CAAC;IAE/E,IAAI,aAAqB,CAAC;IAC1B,IAAI,SAAS,EAAE,CAAC;QACd,aAAa,GAAG,IAAI,CAAC;IACvB,CAAC;SAAM,CAAC;QACN,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,YAAY,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC;IACpF,CAAC;IACD,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,aAAa,EAAE,CAAC;IAEtE,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,KAAK,GAAG,CAAC;QAChB,qBAAqB,EAAE,eAAe,IAAI,qBAAqB;QAC/D,eAAe,EAAE,WAAW;KAC7B,CAAC,EACF,CAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,WAAW,CAAC,CACpE,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,SAAS,EACzB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,GAAG,EAAE;YACZ,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,YAED,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC7C,KAAC,UAAU,IACT,IAAI,EAAE,aAAa,EACnB,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,KAClB,aAAa,EACjB,OAAO,EACL,YAAY;oBACV,CAAC,CAAC;wBACE;4BACE,EAAE,EAAE,QAAQ;4BACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;4BACjB,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,IAAI;4BACd,OAAO,EAAE,GAAG,EAAE;gCACZ,YAAY,CAAC,EAAE,CAAC,CAAC;4BACnB,CAAC;4BACD,YAAY,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC;4BAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC;yBAC9C;qBACF;oBACH,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,aAAa,YAEjB,QAAQ,GACE,GACkB,GAClB,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAyD,UAAU,CACrF,SAAS,cAAc,CACrB,EACE,KAAK,EACL,iBAAiB,EACjB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,GAAG,SAAS,EACyB,EACvC,GAA+B;IAE/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAiC,EAAE,CAAC,CAAC;IAC5D,MAAM,mBAAmB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CACnB,OAAmC,EACnC,eAAqC,EACrC,EAAE;QACF,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,eAAe,GAAG,OAAO,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAEjE,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CACvD,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,CACrC,CAAC;QAEF,MAAM,sBAAsB,GAAG,UAAU,CAAC,MAAM,CAC9C,SAAS,CAAC,EAAE,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,CACnD,CAAC;QAEF,IAAI,eAAe,KAAK,QAAQ,EAAE,CAAC;YACjC,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QAChE,CAAC;IACH,CAAC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;QAE3C,IAAI,mBAAmB,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACzC,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAC;YAEjD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBAC5C,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAChD,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACtC,CAAC;YAED,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;QACrC,CAAC;QAED,IAAI,eAAe,KAAK,SAAS,CAAC,OAAO,EAAE,CAAC;YAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YACnC,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAChD,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,6BAA6B,EACjC,MAAM,EAAE,CAAC,CAAC,KAAK,EACf,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAa,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,aAEA,KAAK,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aACjD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAEhC,iBAAiB,IAAI,CACpB,KAAC,cAAc,IAAC,eAAe,EAAE,KAAK,YAAG,iBAAiB,GAAkB,CAC7E,EAED,KAAC,aAAa,mBAAa,MAAM,GAAG,IAC/B,CACR,EAEA,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,UAAU,KAAG,CACf,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,oBAAoB,EACxB,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACzB,MAAM,YAAY,GAChB,QAAQ,IAAI,IAAI,CAAC,QAAQ;wBACvB,CAAC,CAAC,CAAC,EAAU,EAAE,EAAE;4BACb,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;4BACpC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;4BACpB,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC;wBACH,CAAC,CAAC,SAAS,CAAC;oBAEhB,OAAO,CACL,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,CAAC,EAA8B,EAAE,EAAE;4BAChD,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;wBAC/B,CAAC,IAPI,IAAI,CAAC,EAAE,CAQZ,CACH,CAAC;gBACJ,CAAC,CAAC,GACG,CACR,EAEA,KAAK,IAAI,CACR,MAAC,eAAe,IACd,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACpC,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAC9C,CACnB,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, useRef, useLayoutEffect, useContext, useMemo, useState } from 'react';\nimport type { PropsWithoutRef, Ref, FocusEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useDirection, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { getActiveElement, getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport AdditionalInfo from '../AdditionalInfo';\nimport Text from '../Text';\nimport { nlpColors, readableHue } from '../../styles';\n\nimport { getIndexDetails } from './FieldGroupList.utils';\nimport FieldGroup, {\n  StyledFieldGroup,\n  StyledFieldGroupContent,\n  StyledFieldGroupLegend,\n  StyledGroupContainer,\n  StyledFieldHeader\n} from './FieldGroup';\nimport type { FieldGroupProps } from './FieldGroup';\nimport FieldGroupListContext from './FieldGroupListContext';\n\nregisterIcon(plusIcon);\n\nexport type FieldGroupListItemProps = FieldGroupProps & {\n  /** The ID of the field group list item */\n  id: string;\n  /** Item level onDelete callback. */\n  onDelete?: (id: string) => void;\n  /** Indicates if the item is dynamic. */\n  isDynamic?: boolean;\n};\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  contextualLabel?: string;\n  label?: string;\n  additionalContext?: string | JSX.Element;\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport interface ListItemProps {\n  item: FieldGroupListItemProps;\n  index: number;\n  isAddFocused: boolean;\n  handleDelete: FieldGroupListProps['onDelete'];\n  fieldGroupRef: (el: HTMLFieldSetElement | null) => void;\n}\n\nconst StyledFieldGroupList = styled.ol(\n  () => css`\n    list-style: none;\n  `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled.li<{\n  depth: number;\n  listGroupIndex: number;\n  shouldHighlight: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    },\n    depth,\n    listGroupIndex,\n    shouldHighlight\n  }) => {\n    const bgColor = tryCatch(\n      () => readableHue(nlpColors[listGroupIndex % nlpColors.length], palette['app-background']),\n      () => nlpColors[listGroupIndex % nlpColors.length]\n    );\n\n    return css`\n      display: block;\n\n      > ${StyledGroupContainer} {\n        position: relative;\n        padding-inline-end: ${spacing};\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: 0;\n          bottom: 0;\n          inset-inline-start: 0;\n          width: calc(0.5 * ${spacing});\n          background: ${transparentize(0.75, bgColor)};\n        }\n\n        ${depth > 1 &&\n        css`\n          margin-inline-end: -${spacing};\n        `}\n\n        ${shouldHighlight &&\n        css`\n          border-start-end-radius: calc(0.5 * ${borderRadius});\n          border-end-end-radius: calc(0.5 * ${borderRadius});\n          background: ${transparentize(0.95, palette['foreground-color'])};\n        `}\n      }\n\n      > ${StyledGroupContainer} > ${StyledFieldGroup} {\n        margin-block-start: 0;\n        padding: ${spacing} 0;\n\n        &:not(:last-of-type) {\n          border-bottom: 0.0625rem solid ${palette['border-line']};\n          margin-block-end: calc(2 * ${spacing});\n        }\n\n        legend {\n          margin-block-end: 0;\n        }\n      }\n\n      > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupContent} {\n        padding-inline-start: calc(1.5 * ${spacing});\n      }\n\n      > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupLegend} {\n        ${StyledFieldHeader} {\n          margin-inline-start: calc(0.5 * ${spacing});\n          padding-inline: ${spacing};\n          height: calc(4 * ${spacing});\n          border-start-end-radius: calc(0.5 * ${borderRadius});\n          border-end-end-radius: calc(0.5 * ${borderRadius});\n          background: ${transparentize(0.75, bgColor)};\n        }\n      }\n    `;\n  }\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'hit-area': { 'mouse-min': hitAreaMouse }\n      }\n    }\n  }) => css`\n    display: inline-flex;\n    align-items: center;\n    min-height: ${hitAreaMouse};\n    min-width: ${hitAreaMouse};\n    width: fit-content;\n    margin-inline-start: calc(2 * ${spacing});\n  `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst StyledFieldGroupListContainer = styled.div<{ hasAdd: boolean }>(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    },\n    hasAdd\n  }) => css`\n    position: relative;\n    margin-block-start: ${spacing};\n\n    ${hasAdd &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset-inline-start: 0;\n        bottom: calc(1.5 * ${spacing});\n        width: calc(1.5 * ${spacing});\n        height: calc(2.5 * ${spacing});\n        border-end-start-radius: calc(0.5 * ${borderRadius});\n        border-inline-start: calc(0.5 * ${spacing}) solid ${palette['border-line']};\n        border-bottom: calc(0.5 * ${spacing}) solid ${palette['border-line']};\n      }\n    `}\n  `\n);\n\nStyledFieldGroupListContainer.defaultProps = defaultThemeProp;\n\nconst StyledDivider = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => css`\n    flex: 1;\n    height: calc(0.5 * ${spacing});\n    background-color: ${palette['border-line']};\n  `\n);\n\nStyledDivider.defaultProps = defaultThemeProp;\n\nconst ListItem = ({ item, index, isAddFocused, handleDelete, fieldGroupRef }: ListItemProps) => {\n  const { id, children, name = '', isDynamic, headingTag, ...restItemProps } = item;\n\n  const t = useI18n();\n  const { rtl } = useDirection();\n  const {\n    depth = 1,\n    ancestorIndices = [],\n    isAncestorHighlighted = false\n  } = useContext(FieldGroupListContext);\n\n  const [isItemFocused, setIsItemFocused] = useState(false);\n  const [isDeleteHovered, setIsDeleteHovered] = useState(false);\n\n  const listIndices = [...ancestorIndices, index];\n  const { rootIndex, currentIndex, compoundIndex } = getIndexDetails(listIndices);\n\n  const shouldHighlight =\n    !isAncestorHighlighted && (isAddFocused || isDeleteHovered || isItemFocused);\n\n  let formattedName: string;\n  if (isDynamic) {\n    formattedName = name;\n  } else {\n    formattedName = rtl ? `${currentIndex}\\u200F ${name}` : `${currentIndex} ${name}`;\n  }\n  const contextualLabel = isDynamic ? name : `${name} ${compoundIndex}`;\n\n  const ctxValue = useMemo(\n    () => ({\n      depth: depth + 1,\n      isAncestorHighlighted: shouldHighlight || isAncestorHighlighted,\n      ancestorIndices: listIndices\n    }),\n    [depth, index, shouldHighlight, isAncestorHighlighted, listIndices]\n  );\n\n  return (\n    <StyledListItem\n      depth={depth}\n      listGroupIndex={rootIndex}\n      shouldHighlight={shouldHighlight}\n      onFocus={() => {\n        setIsItemFocused(true);\n      }}\n      onBlur={() => {\n        setIsItemFocused(false);\n      }}\n    >\n      <FieldGroupListContext.Provider value={ctxValue}>\n        <FieldGroup\n          name={formattedName}\n          contextualLabel={contextualLabel}\n          headingTag={headingTag}\n          {...restItemProps}\n          actions={\n            handleDelete\n              ? [\n                  {\n                    id: 'delete',\n                    text: t('delete'),\n                    icon: 'trash',\n                    iconOnly: true,\n                    onClick: () => {\n                      handleDelete(id);\n                    },\n                    onMouseEnter: () => setIsDeleteHovered(true),\n                    onMouseLeave: () => setIsDeleteHovered(false)\n                  }\n                ]\n              : undefined\n          }\n          ref={fieldGroupRef}\n        >\n          {children}\n        </FieldGroup>\n      </FieldGroupListContext.Provider>\n    </StyledListItem>\n  );\n};\n\nconst FieldGroupList: ForwardRefForwardPropsComponent<FieldGroupListProps> = forwardRef(\n  function FieldGroupList(\n    {\n      label,\n      additionalContext,\n      items,\n      onAdd,\n      onDelete,\n      contextualLabel,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) {\n    const t = useI18n();\n\n    const addBtnRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLFieldSetElement | null)[]>([]);\n    const deletedItemIndexRef = useRef<number | null>(null);\n\n    const [isAddFocused, setIsAddFocused] = useState(false);\n\n    const focusElement = (\n      itemRef: HTMLFieldSetElement | null,\n      focusPreference: 'action' | 'content'\n    ) => {\n      if (!itemRef) return;\n\n      const focusables = getFocusables(itemRef);\n      const groupItemLegend = itemRef.querySelector(':scope > legend');\n\n      const groupActionButtons = focusables.filter(focusable =>\n        groupItemLegend?.contains(focusable)\n      );\n\n      const groupContentFocusables = focusables.filter(\n        focusable => !groupItemLegend?.contains(focusable)\n      );\n\n      if (focusPreference === 'action') {\n        (groupActionButtons[0] || groupContentFocusables[0])?.focus();\n      } else {\n        (groupContentFocusables[0] || groupActionButtons[0])?.focus();\n      }\n    };\n\n    useLayoutEffect(() => {\n      const currentActiveEl = getActiveElement();\n\n      if (deletedItemIndexRef.current !== null) {\n        const deletedIndex = deletedItemIndexRef.current;\n\n        if (items.length === 0 && addBtnRef.current) {\n          addBtnRef.current.focus();\n        } else {\n          const nextIndex = Math.min(deletedIndex, items.length - 1);\n          const nextItemRef = itemRefs.current[nextIndex];\n          focusElement(nextItemRef, 'action');\n        }\n\n        deletedItemIndexRef.current = null;\n      }\n\n      if (currentActiveEl === addBtnRef.current) {\n        const lastIndex = items.length - 1;\n        const lastItemRef = itemRefs.current[lastIndex];\n        focusElement(lastItemRef, 'content');\n      }\n    }, [items.length]);\n\n    return (\n      <Flex\n        container={{ direction: 'column', gap: 1 }}\n        as={StyledFieldGroupListContainer}\n        hasAdd={!!onAdd}\n        onFocus={(e: FocusEvent) => {\n          e.stopPropagation();\n        }}\n        onBlur={(e: FocusEvent) => {\n          e.stopPropagation();\n        }}\n      >\n        {label && (\n          <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n            <Text variant='h3'>{label}</Text>\n\n            {additionalContext && (\n              <AdditionalInfo contextualLabel={label}>{additionalContext}</AdditionalInfo>\n            )}\n\n            <StyledDivider aria-hidden='true' />\n          </Flex>\n        )}\n\n        {items.length === 0 ? (\n          <EmptyState />\n        ) : (\n          <Flex\n            container={{ direction: 'column', gap: 1 }}\n            as={StyledFieldGroupList}\n            ref={ref}\n            {...restProps}\n          >\n            {items.map((item, index) => {\n              const handleDelete =\n                onDelete || item.onDelete\n                  ? (id: string) => {\n                      deletedItemIndexRef.current = index;\n                      item.onDelete?.(id);\n                      onDelete?.(id);\n                    }\n                  : undefined;\n\n              return (\n                <ListItem\n                  key={item.id}\n                  item={item}\n                  index={index}\n                  isAddFocused={isAddFocused}\n                  handleDelete={handleDelete}\n                  fieldGroupRef={(el: HTMLFieldSetElement | null) => {\n                    itemRefs.current[index] = el;\n                  }}\n                />\n              );\n            })}\n          </Flex>\n        )}\n\n        {onAdd && (\n          <StyledAddButton\n            variant='link'\n            onClick={onAdd}\n            onFocus={() => {\n              setIsAddFocused(true);\n            }}\n            onBlur={() => setIsAddFocused(false)}\n            ref={addBtnRef}\n          >\n            <Icon name='plus' />\n            {contextualLabel ? t('add_noun', [contextualLabel]) : t('add')}\n          </StyledAddButton>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}

package/lib/components/FieldGroup/FieldGroupList.utils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Converts a number to a Roman numeral.
+ * @param num - The number to convert.
+ * @returns The Roman numeral representation.
+ */
+export declare const convertToRoman: (num: number) => string;
+/**
+ * Converts a number to a base-26 alphabetic string (a, b, c... aa, ab, ac...).
+ * @param num - The 0-based index to convert.
+ * @returns The alphabetic representation.
+ */
+export declare const convertToAlphabetic: (num: number) => string;
+/**
+ * Generates a list number based on depth and index.
+ * @param levelIndex - The index of the item in the list (0-based).
+ * @param depth - The depth of the list (0-based).
+ * @returns The formatted list number.
+ */
+export declare const getFormattedListNumber: (levelIndex: number, depth: number) => string;
+/**
+ * Generates a compound index and the current list index based on the depth and index of the current item and its ancestors.
+ * @param indices - An array of indices representing the position at each depth (e.g., [0, 1, 2]).
+ * @returns An object containing:
+ * - `rootIndex`: The zero-based index at the root level (e.g., 0 for "1.", 1 for "2.").
+ * - `currentIndex`: The index at the latest depth (e.g., "a." or "i.").
+ * - `compoundIndex`: The full compound index (e.g., "1.a.i").
+ */
+export declare const getIndexDetails: (indices: number[]) => {
+    rootIndex: number;
+    currentIndex: string;
+    compoundIndex: string;
+};
+//# sourceMappingURL=FieldGroupList.utils.d.ts.map

package/lib/components/FieldGroup/FieldGroupList.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.utils.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,WA0BzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,WAQ9C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,EAAE,OAAO,MAAM,WAUvE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,EAAE,KAChB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAUlE,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.utils.js

@@ -0,0 +1,74 @@
+/**
+ * Converts a number to a Roman numeral.
+ * @param num - The number to convert.
+ * @returns The Roman numeral representation.
+ */
+export const convertToRoman = (num) => {
+    const romanMap = [
+        ['m', 1000],
+        ['cm', 900],
+        ['d', 500],
+        ['cd', 400],
+        ['c', 100],
+        ['xc', 90],
+        ['l', 50],
+        ['xl', 40],
+        ['x', 10],
+        ['ix', 9],
+        ['v', 5],
+        ['iv', 4],
+        ['i', 1]
+    ];
+    let result = '';
+    for (const [roman, value] of romanMap) {
+        while (num >= value) {
+            result += roman;
+            num -= value;
+        }
+    }
+    return result;
+};
+/**
+ * Converts a number to a base-26 alphabetic string (a, b, c... aa, ab, ac...).
+ * @param num - The 0-based index to convert.
+ * @returns The alphabetic representation.
+ */
+export const convertToAlphabetic = (num) => {
+    let result = '';
+    while (num >= 0) {
+        result = String.fromCharCode((num % 26) + 97) + result;
+        num = Math.floor(num / 26) - 1;
+    }
+    return result;
+};
+/**
+ * Generates a list number based on depth and index.
+ * @param levelIndex - The index of the item in the list (0-based).
+ * @param depth - The depth of the list (0-based).
+ * @returns The formatted list number.
+ */
+export const getFormattedListNumber = (levelIndex, depth) => {
+    if (depth % 3 === 0) {
+        return (levelIndex + 1).toString();
+    }
+    if (depth % 3 === 1) {
+        return convertToAlphabetic(levelIndex);
+    }
+    return convertToRoman(levelIndex + 1);
+};
+/**
+ * Generates a compound index and the current list index based on the depth and index of the current item and its ancestors.
+ * @param indices - An array of indices representing the position at each depth (e.g., [0, 1, 2]).
+ * @returns An object containing:
+ * - `rootIndex`: The zero-based index at the root level (e.g., 0 for "1.", 1 for "2.").
+ * - `currentIndex`: The index at the latest depth (e.g., "a." or "i.").
+ * - `compoundIndex`: The full compound index (e.g., "1.a.i").
+ */
+export const getIndexDetails = (indices) => {
+    const indexSegments = indices.map((levelIndex, index) => getFormattedListNumber(levelIndex, index));
+    const rootIndex = indices[0];
+    const currentIndex = `${indexSegments[indexSegments.length - 1]}.`;
+    const compoundIndex = indexSegments.join('.');
+    return { rootIndex, currentIndex, compoundIndex };
+};
+//# sourceMappingURL=FieldGroupList.utils.js.map

package/lib/components/FieldGroup/FieldGroupList.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.utils.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IAC5C,MAAM,QAAQ,GAAuB;QACnC,CAAC,GAAG,EAAE,IAAI,CAAC;QACX,CAAC,IAAI,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,IAAI,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,IAAI,EAAE,EAAE,CAAC;QACV,CAAC,GAAG,EAAE,EAAE,CAAC;QACT,CAAC,IAAI,EAAE,EAAE,CAAC;QACV,CAAC,GAAG,EAAE,EAAE,CAAC;QACT,CAAC,IAAI,EAAE,CAAC,CAAC;QACT,CAAC,GAAG,EAAE,CAAC,CAAC;QACR,CAAC,IAAI,EAAE,CAAC,CAAC;QACT,CAAC,GAAG,EAAE,CAAC,CAAC;KACT,CAAC;IAEF,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,QAAQ,EAAE,CAAC;QACtC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC;YAChB,GAAG,IAAI,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAChB,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC;QACvD,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAkB,EAAE,KAAa,EAAE,EAAE;IAC1E,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACrC,CAAC;IAED,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAED,OAAO,cAAc,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAiB,EACmD,EAAE;IACtE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CACtD,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,CAC1C,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,YAAY,GAAG,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC;IACnE,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACpD,CAAC,CAAC","sourcesContent":["/**\n * Converts a number to a Roman numeral.\n * @param num - The number to convert.\n * @returns The Roman numeral representation.\n */\nexport const convertToRoman = (num: number) => {\n  const romanMap: [string, number][] = [\n    ['m', 1000],\n    ['cm', 900],\n    ['d', 500],\n    ['cd', 400],\n    ['c', 100],\n    ['xc', 90],\n    ['l', 50],\n    ['xl', 40],\n    ['x', 10],\n    ['ix', 9],\n    ['v', 5],\n    ['iv', 4],\n    ['i', 1]\n  ];\n\n  let result = '';\n  for (const [roman, value] of romanMap) {\n    while (num >= value) {\n      result += roman;\n      num -= value;\n    }\n  }\n\n  return result;\n};\n\n/**\n * Converts a number to a base-26 alphabetic string (a, b, c... aa, ab, ac...).\n * @param num - The 0-based index to convert.\n * @returns The alphabetic representation.\n */\nexport const convertToAlphabetic = (num: number) => {\n  let result = '';\n  while (num >= 0) {\n    result = String.fromCharCode((num % 26) + 97) + result;\n    num = Math.floor(num / 26) - 1;\n  }\n\n  return result;\n};\n\n/**\n * Generates a list number based on depth and index.\n * @param levelIndex - The index of the item in the list (0-based).\n * @param depth - The depth of the list (0-based).\n * @returns The formatted list number.\n */\nexport const getFormattedListNumber = (levelIndex: number, depth: number) => {\n  if (depth % 3 === 0) {\n    return (levelIndex + 1).toString();\n  }\n\n  if (depth % 3 === 1) {\n    return convertToAlphabetic(levelIndex);\n  }\n\n  return convertToRoman(levelIndex + 1);\n};\n\n/**\n * Generates a compound index and the current list index based on the depth and index of the current item and its ancestors.\n * @param indices - An array of indices representing the position at each depth (e.g., [0, 1, 2]).\n * @returns An object containing:\n * - `rootIndex`: The zero-based index at the root level (e.g., 0 for \"1.\", 1 for \"2.\").\n * - `currentIndex`: The index at the latest depth (e.g., \"a.\" or \"i.\").\n * - `compoundIndex`: The full compound index (e.g., \"1.a.i\").\n */\nexport const getIndexDetails = (\n  indices: number[]\n): { rootIndex: number; currentIndex: string; compoundIndex: string } => {\n  const indexSegments = indices.map((levelIndex, index) =>\n    getFormattedListNumber(levelIndex, index)\n  );\n\n  const rootIndex = indices[0];\n  const currentIndex = `${indexSegments[indexSegments.length - 1]}.`;\n  const compoundIndex = indexSegments.join('.');\n\n  return { rootIndex, currentIndex, compoundIndex };\n};\n"]}

package/lib/components/FieldGroup/FieldGroupListContext.d.ts

@@ -0,0 +1,8 @@
+export interface FieldGroupListContextValue {
+    depth: number;
+    ancestorIndices: number[];
+    isAncestorHighlighted: boolean;
+}
+declare const FieldGroupListContext: import("react").Context<FieldGroupListContextValue>;
+export default FieldGroupListContext;
+//# sourceMappingURL=FieldGroupListContext.d.ts.map

package/lib/components/FieldGroup/FieldGroupListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupListContext.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupListContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;CAChC;AAQD,QAAA,MAAM,qBAAqB,qDAA4D,CAAC;AAExF,eAAe,qBAAqB,CAAC"}

package/lib/components/FieldGroup/FieldGroupListContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+const defaultContext = {
+    depth: 1,
+    ancestorIndices: [],
+    isAncestorHighlighted: false
+};
+const FieldGroupListContext = createContext(defaultContext);
+export default FieldGroupListContext;
+//# sourceMappingURL=FieldGroupListContext.js.map

package/lib/components/FieldGroup/FieldGroupListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupListContext.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,CAAC;IACR,eAAe,EAAE,EAAE;IACnB,qBAAqB,EAAE,KAAK;CAC7B,CAAC;AAEF,MAAM,qBAAqB,GAAG,aAAa,CAA6B,cAAc,CAAC,CAAC;AAExF,eAAe,qBAAqB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface FieldGroupListContextValue {\n  depth: number;\n  ancestorIndices: number[];\n  isAncestorHighlighted: boolean;\n}\n\nconst defaultContext = {\n  depth: 1,\n  ancestorIndices: [],\n  isAncestorHighlighted: false\n};\n\nconst FieldGroupListContext = createContext<FieldGroupListContextValue>(defaultContext);\n\nexport default FieldGroupListContext;\n"]}

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

@@ -2,4 +2,6 @@ export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup'
 export type { FieldGroupProps } from './FieldGroup';
 export { default as FieldGroupList } from './FieldGroupList';
 export type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';
+export { default as FieldGroupListContext } from './FieldGroupListContext';
+export { getIndexDetails } from './FieldGroupList.utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/FieldGroup/index.js

@@ -1,3 +1,5 @@
 export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';
 export { default as FieldGroupList } from './FieldGroupList';
+export { default as FieldGroupListContext } from './FieldGroupListContext';
+export { getIndexDetails } from './FieldGroupList.utils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';\nexport type { FieldGroupProps } from './FieldGroup';\nexport { default as FieldGroupList } from './FieldGroupList';\nexport type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default, StyledFieldGroup, StyledFieldGroupLegend } from './FieldGroup';\nexport type { FieldGroupProps } from './FieldGroup';\nexport { default as FieldGroupList } from './FieldGroupList';\nexport type { FieldGroupListProps, FieldGroupListItemProps } from './FieldGroupList';\nexport { default as FieldGroupListContext } from './FieldGroupListContext';\nexport { getIndexDetails } from './FieldGroupList.utils';\n"]}

package/lib/components/FieldValueList/FieldValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;AA8DF,wBAAqE"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;AA6EF,wBAAqE"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -86,7 +86,7 @@ const FieldValueList = forwardRef(function FieldValueList({ testId, fields, vari
                 : 'minmax(0, 1fr)',
             colGap: !detached && variant !== 'value-comparison' ? 2 : 0,
             rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5
-        }, as: StyledFieldValueList, variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ id, name, value, truncate = true, variant: fieldVariant }) => {
+        }, as: StyledFieldValueList, variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {
             const sharedProps = {
                 name,
                 variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
@@ -94,9 +94,9 @@ const FieldValueList = forwardRef(function FieldValueList({ testId, fields, vari
                     : 'inline'
             };
             if (typeof value === 'string') {
-                return (_jsx(FieldValueItem, { ...sharedProps, value: value, truncate: truncate }, id ?? name));
+                return (_jsx(FieldValueItem, { testId: fieldTestId, ...sharedProps, value: value, truncate: truncate }, id ?? name));
             }
-            return _jsx(FieldValueItem, { ...sharedProps, value: value }, id ?? name);
+            return (_jsx(FieldValueItem, { testId: fieldTestId, ...sharedProps, value: value }, id ?? name));
         }) }));
 });
 export default withTestIds(FieldValueList, getFieldValueListTestIds);

package/lib/components/FieldValueList/FieldValueList.js.map

@@ -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\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      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\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      dd:not(:last-of-type),\n      dt:not(:last-of-type),\n      dd:has(+ ${StyledStackedFieldValue}),\n      dt:has(+ dd + ${StyledStackedFieldValue}),\n      ${StyledStackedFieldValue}:has(+ dt + dd),\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}>{labelAndValue}</StyledStackedFieldValue>\n    ) : (\n      <>{labelAndValue}</>\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        variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n      >\n        {fields.map(({ 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 key={id ?? name} {...sharedProps} value={value} truncate={truncate} />\n            );\n          }\n\n          return <FieldValueItem key={id ?? name} {...sharedProps} value={value} />;\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
+{"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\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      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\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      dd:not(:last-of-type),\n      dt:not(:last-of-type),\n      dd:has(+ ${StyledStackedFieldValue}),\n      dt:has(+ dd + ${StyledStackedFieldValue}),\n      ${StyledStackedFieldValue}:has(+ dt + dd),\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}>{labelAndValue}</StyledStackedFieldValue>\n    ) : (\n      <>{labelAndValue}</>\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        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"]}