npm - @pega/cosmos-react-core - Versions diffs - 9.13.0 → 9.15.0 - Mend

@pega/cosmos-react-core 9.13.0 → 9.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","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, useLiveLog } 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 { supplementalColors, 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}>(({ theme, depth, listGroupIndex, shouldHighlight }) => {\n const spacing = theme.base.spacing;\n const palette = theme.base.palette;\n const borderRadius = theme.base['border-radius'];\n const groupColors = theme.components['field-group-list']['group-colors'];\n const supplementalColorList = supplementalColors(theme);\n\n const bgColor = groupColors\n ? tryCatch(\n () =>\n transparentize(\n 0.75,\n readableHue(\n supplementalColorList[listGroupIndex % supplementalColorList.length],\n palette['app-background']\n )\n ),\n () => theme.base.palette['border-line']\n )\n : theme.base.palette['border-line'];\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: ${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}\n > ${StyledFieldGroup}\n > ${StyledFieldGroupContent},\n > ${StyledGroupContainer}\n > ${StyledFieldGroup}\n > div\n > ${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: ${bgColor};\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 { announcePolite } = useLiveLog();\n\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 announcePolite({ message: t('deleted', [contextualLabel]) });\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 aria-label={label}\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"]}
1	+ {"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","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, useLiveLog } 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 { supplementalColors, 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}>(({ theme, depth, listGroupIndex, shouldHighlight }) => {\n const spacing = theme.base.spacing;\n const palette = theme.base.palette;\n const borderRadius = theme.base['border-radius'];\n const groupColors = theme.components['field-group-list']['group-colors'];\n const supplementalColorList = supplementalColors(theme);\n\n const bgColor = groupColors\n ? tryCatch(\n () =>\n transparentize(\n 0.75,\n readableHue(\n supplementalColorList[listGroupIndex % supplementalColorList.length],\n palette['app-background']\n )\n ),\n () => theme.base.palette['border-line']\n )\n : theme.base.palette['border-line'];\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: ${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}\n > ${StyledFieldGroup}\n > ${StyledFieldGroupContent},\n > ${StyledGroupContainer}\n > ${StyledFieldGroup}\n > div\n > ${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: ${bgColor};\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 { announcePolite } = useLiveLog();\n\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 announcePolite({ message: t('deleted', [contextualLabel]) });\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 variant='bordered' />\n ) : (\n <Flex\n container={{ direction: 'column', gap: 1 }}\n as={StyledFieldGroupList}\n ref={ref}\n aria-label={label}\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/FieldValueList/FieldValueList.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import type { ReactNode, FunctionComponent } from 'react';
 import type { BaseProps, ExcludeStrict, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
+import type { AdditionalInfoProps } from '../AdditionalInfo';
 export type FieldValueVariant = 'inline' | 'stacked';
 interface BaseFieldValueListItem extends TestIdProp {
     name: string;
     id?: string;
     variant?: FieldValueVariant;
+    additionalInfo?: Pick<AdditionalInfoProps, 'heading' | 'children'>;
 }
 export type FieldValueListItemProps = (BaseFieldValueListItem & {
     value?: ExcludeStrict<ReactNode, 'string'>;
@@ -36,7 +38,7 @@ export declare const StyledInlineFieldValueRow: import("styled-components/dist/t
 export declare const StyledStackedFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;
 export declare const StyledFieldValueList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, StyledFieldValueListProps>> & string;
-export declare const FieldValueItem: (({ testId, name, value, variant, truncate }: FieldValueListItemProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const FieldValueItem: (({ testId, name, value, variant, truncate, additionalInfo }: FieldValueListItemProps) => import("react/jsx-runtime").JSX.Element) & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["name", "value"]>;
 };
 declare const _default: FunctionComponent<FieldValueListProps & ForwardProps> & {

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

	@@ -1 +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,~~uNAE3B~~,CAAC;~~AAEF~~,eAAO,MAAM,gBAAgB,uNAE5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,6NAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,kQAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,~~gDACsC~~,uBAAuB;;~~CA8BvF~~,CAAC;;;;~~AA8EF~~,wBAAqE"}
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;AAIrB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAS7D,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;IAC5B,cAAc,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACpE;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,uNAQ1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uNAE5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,6NAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,kQAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,gEAQtB,uBAAuB;;CAuC3B,CAAC;;;;AAuFF,wBAAqE"}

package/lib/components/FieldValueList/FieldValueList.js CHANGED Viewed

@@ -3,15 +3,23 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Grid from '../Grid';
 import { StyledLabel } from '../Label';
+import AdditionalInfo from '../AdditionalInfo';
 import { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import ShowMoreLess from '../ShowMoreLess';
 import { withTestIds } from '../../utils';
 import NoValue from '../NoValue/NoValue';
 import { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';
-export const StyledFieldName = styled.dt `
-  word-break: break-word;
-`;
+export const StyledFieldName = styled.dt(({ theme }) => {
+    return css `
+    word-break: break-word;
+    display: inline-flex;
+    align-items: flex-start;
+    column-gap: ${theme.base.spacing};
+    max-width: 100%;
+  `;
+});
+StyledFieldName.defaultProps = defaultThemeProp;
 export const StyledFieldValue = styled.dd `
   word-break: break-word;
 `;
@@ -77,10 +85,10 @@ export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
   `;
 });
 StyledFieldValueList.defaultProps = defaultThemeProp;
-export const FieldValueItem = withTestIds(({ testId, name, value, variant = 'inline', truncate = true }) => {
+export const FieldValueItem = withTestIds(({ testId, name, value, variant = 'inline', truncate = true, additionalInfo }) => {
     const testIds = useTestIds(testId, getFieldValueItemTestIds);
     const displayValue = typeof value === 'string' && truncate ? (_jsx(ShowMoreLess, { lines: 3, children: value })) : (value);
-    const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { "data-testid": testIds.value, children: value ? displayValue : _jsx(NoValue, {}) })] }));
+    const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, children: additionalInfo ? (_jsxs(_Fragment, { children: [_jsx("span", { children: name }), _jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: name, children: additionalInfo.children })] })) : (name) }), _jsx(StyledFieldValue, { "data-testid": testIds.value, children: value ? displayValue : _jsx(NoValue, {}) })] }));
     return variant === 'stacked' ? (_jsx(StyledStackedFieldValue, { "data-testid": testIds.root, "data-editable-anchor": true, children: labelAndValue })) : (_jsx(StyledInlineFieldValueRow, { "data-editable-anchor": true, children: labelAndValue }));
 }, getFieldValueItemTestIds);
 const FieldValueList = forwardRef(function FieldValueList({ testId, fields, variant = 'inline', ...restProps }, ref) {
@@ -97,9 +105,10 @@ 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, role: 'none', variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {
+        }, as: StyledFieldValueList, role: 'none', variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant, additionalInfo }) => {
             const sharedProps = {
                 name,
+                additionalInfo,
                 variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
                     ? 'stacked'
                     : 'inline'

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAShD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AA8B/F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;CAEvC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAA;;CAExC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAElD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAIpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAA4B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,EACJ,UAAU,EAAE,EACV,kBAAkB,EAAE,EAClB,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,EAClD,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;MAGN,OAAO,KAAK,kBAAkB;QAChC,GAAG,CAAA;;;;;;yCAMkC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;QAKnD,WAAW;;;QAGX,yBAAyB;QACzB,yBAAyB;yCACQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qCACrC,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElD;;MAEC,QAAQ;QACV,OAAO,KAAK,QAAQ;QACpB,GAAG,CAAA;;;mCAG4B,KAAK,CAAC,IAAI,CAAC,OAAO;;QAE7C,WAAW;;;QAGX,yBAAyB;QACzB,yBAAyB;QACzB,yBAAyB,UAAU,uBAAuB;QAC1D,yBAAyB,UAAU,uBAAuB;QAC1D,uBAAuB,UAAU,yBAAyB;QAC1D,uBAAuB;mCACI,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qCAC9C,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CACvC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAA2B,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE7D,MAAM,YAAY,GAChB,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CACtC,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YAAG,KAAK,GAAgB,CAC/C,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;IAEJ,MAAM,aAAa,GAAG,CACpB,8BACE,KAAC,WAAW,mBAAc,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,eAAe,YACxD,IAAI,GACO,EACd,KAAC,gBAAgB,mBAAc,OAAO,CAAC,KAAK,YACzC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAClB,IAClB,CACJ,CAAC;IAEF,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAC7B,KAAC,uBAAuB,mBAAc,OAAO,CAAC,IAAI,0CAC/C,aAAa,GACU,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,yBAAyB,4CAAuB,aAAa,GAA6B,CAC5F,CAAC;AACJ,CAAC,EACD,wBAAwB,CACzB,CAAC;AAEF,MAAM,cAAc,GAA0D,UAAU,CACtF,SAAS,cAAc,CACrB,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAuB,EACzE,GAAwB;IAExB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE7D,MAAM,iBAAiB,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAElE,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,iBAAiB;QAChC,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,EACJ,UAAU,EAAE,EACV,kBAAkB,EAAE,EAClB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE;YACT,IAAI,EACF,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,uBAAuB;gBACzE,CAAC,CAAC,qBAAqB;gBACvB,CAAC,CAAC,gBAAgB;YACtB,MAAM,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3D,MAAM,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;SAC9D,EACD,EAAE,EAAE,oBAAoB,EACxB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAErD,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;YACnF,MAAM,WAAW,GAA2B;gBAC1C,IAAI;gBACJ,OAAO,EACL,CAAC,YAAY,IAAI,OAAO,CAAC,KAAK,SAAS,IAAI,CAAC,uBAAuB;oBACjE,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;aACf,CAAC;YAEF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,WAAW,KAEf,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAHb,EAAE,IAAI,IAAI,CAIf,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,WAAW,KAEf,WAAW,EACf,KAAK,EAAE,KAAK,IAFP,EAAE,IAAI,IAAI,CAGf,CACH,CAAC;QACJ,CAAC,CACF,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ExcludeStrict,\n ForwardProps,\n NoChildrenProp,\n TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' \| 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n name: string;\n id?: string;\n variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n \| (BaseFieldValueListItem & {\n value?: ExcludeStrict<ReactNode, 'string'>;\n truncate?: never;\n })\n \| (BaseFieldValueListItem & {\n value: string;\n truncate?: boolean;\n });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The set of field values to render in the list. /\n fields: FieldValueListItemProps[];\n /\n Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n * @default 'inline'\n /\n variant?: FieldValueVariant \| 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\n/\n `display: contents` wrapper around a `dt + dd` pair in the inline\n * variant. Lets CSS grid on the parent `<dl>` still see dt/dd as direct\n * layout items, while giving UI Designer / Inspector a single hit\n * target that covers label + value together. Exposed so that callers\n * which previously targeted `dt:not(:last-of-type)` / `dd:not(:last-of-type)`\n * can target the row instead.\n /\nexport const StyledInlineFieldValueRow = styled.div`\n display: contents;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached, 'border-style': borderStyle }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment /\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dd,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dt,\n ${StyledStackedFieldValue}:has(+ ${StyledInlineFieldValueRow}),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n const displayValue =\n typeof value === 'string' && truncate ? (\n <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n ) : (\n value\n );\n\n const labelAndValue = (\n <>\n <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n {name}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value}>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root} data-editable-anchor>\n {labelAndValue}\n </StyledStackedFieldValue>\n ) : (\n <StyledInlineFieldValueRow data-editable-anchor>{labelAndValue}</StyledInlineFieldValueRow>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n role='none'\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n variant:\n (fieldVariant ?? variant) === 'stacked' \|\| !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
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 AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\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 additionalInfo?: Pick<AdditionalInfoProps, 'heading' \| 'children'>;\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(({ theme }) => {\n return css`\n word-break: break-word;\n display: inline-flex;\n align-items: flex-start;\n column-gap: ${theme.base.spacing};\n max-width: 100%;\n `;\n});\n\nStyledFieldName.defaultProps = defaultThemeProp;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\n/\n `display: contents` wrapper around a `dt + dd` pair in the inline\n * variant. Lets CSS grid on the parent `<dl>` still see dt/dd as direct\n * layout items, while giving UI Designer / Inspector a single hit\n * target that covers label + value together. Exposed so that callers\n * which previously targeted `dt:not(:last-of-type)` / `dd:not(:last-of-type)`\n * can target the row instead.\n /\nexport const StyledInlineFieldValueRow = styled.div`\n display: contents;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached, 'border-style': borderStyle }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment /\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n ${StyledInlineFieldValueRow}:not(:last-child) > dd,\n ${StyledInlineFieldValueRow}:not(:last-child) > dt,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dd,\n ${StyledInlineFieldValueRow}:has(+ ${StyledStackedFieldValue}) > dt,\n ${StyledStackedFieldValue}:has(+ ${StyledInlineFieldValueRow}),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({\n testId,\n name,\n value,\n variant = 'inline',\n truncate = true,\n additionalInfo\n }: 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 {additionalInfo ? (\n <>\n <span>{name}</span>\n <AdditionalInfo heading={additionalInfo.heading} contextualLabel={name}>\n {additionalInfo.children}\n </AdditionalInfo>\n </>\n ) : (\n name\n )}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value}>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root} data-editable-anchor>\n {labelAndValue}\n </StyledStackedFieldValue>\n ) : (\n <StyledInlineFieldValueRow data-editable-anchor>{labelAndValue}</StyledInlineFieldValueRow>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n role='none'\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({\n testId: fieldTestId,\n id,\n name,\n value,\n truncate = true,\n variant: fieldVariant,\n additionalInfo\n }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n additionalInfo,\n variant:\n (fieldVariant ?? variant) === 'stacked' \|\| !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}

package/lib/components/Fullscreen/Fullscreen.js CHANGED Viewed

@@ -12,12 +12,12 @@ export const StyledFullscreen = styled.div(({ theme, fullscreen }) => {
     ${fullscreen &&
         css `
       --content-height-in-view: calc(
-        100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
+        100dvh - var(--appshell-hard-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
       );
       position: fixed;
       z-index: ${theme.base['z-index'].backdrop};
       inset-inline: 0;
-      inset-block-start: var(--appshell-top-offset, 0);
+      inset-block-start: var(--appshell-hard-top-offset, 0);
       inset-block-end: var(--appshell-hard-bottom-offset, 0);
       background: ${theme.base.palette['primary-background']};
     `}

package/lib/components/Fullscreen/Fullscreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAU7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;MACN,UAAU;QACZ,GAAG,CAAA;;;;;iBAKU,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;;oBAI3B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;KACvD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAIjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB,SAAS,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,2CAA2C;IAC3C,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,WAAW,EAIZ,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1B,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC;QAChB,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY;QACjB,CAAC,CAAC,YAAY,CACV,KAAC,aAAa,IAAC,YAAY,EAAE,WAAW,CAAC,OAAO,IAAI,SAAS,YAAG,SAAS,GAAiB,EAC1F,YAAY,CACb;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,WAAW,CACxB,UAAU,CAAgE,SAAS,UAAU,CAC3F,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAClC,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,gGAAgG;IAChG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IAEzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAE7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE7E,MAAM,QAAQ,GAA2B,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO;YACL,UAAU;YACV,GAAG,EAAE;gBACH,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAExD,MAAM,SAAS,GAAG,CAChB,KAAC,gBAAgB,mBACF,OAAO,CAAC,IAAI,6BACA,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAClD,SAAS,EACb,GAAG,EAAE,WAAW,EAChB,UAAU,EAAE,CAAC,CAAC,UAAU,qBACP,SAAS,YAEzB,QAAQ,GACQ,CACpB,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACxC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,CACxB,8BAEE,cAAK,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAI,EACrD,KAAC,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,GAAI,IAC/D,CACJ,CAAC,CAAC,CAAC,CACF,SAAS,CACV,GAC0B,CAC9B,CAAC;AACJ,CAAC,CAAC,EACF,oBAAoB,CACrB,CAAC","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useFocusTrap,\n usePopoverMap,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n 'div',\n {\n children: ReactNode;\n }\n> &\n TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n return css`\n ${fullscreen &&\n css`\n --content-height-in-view: calc(\n 100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n );\n position: fixed;\n z-index: ${theme.base['z-index'].backdrop};\n inset-inline: 0;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-hard-bottom-offset, 0);\n background: ${theme.base.palette['primary-background']};\n `}\n `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean \| undefined, () => void] \| undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n // Ensure easier/safer destructuring in use\n return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n parentJSX,\n parentElRef\n}: {\n parentJSX: ReactElement;\n parentElRef: RefObject<HTMLDivElement>;\n}) => {\n const { portalTarget } = useConfiguration();\n useFocusTrap(parentElRef);\n const { disableScroll, enableScroll } = useScrollToggle();\n\n useEffect(() => {\n disableScroll();\n return enableScroll;\n }, []);\n\n return portalTarget\n ? createPortal(\n <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n portalTarget\n )\n : null;\n};\n\nexport default withTestIds(\n forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n { children, testId, ...restProps },\n ref\n ) {\n const testIds = useTestIds(testId, getFullscreenTestIds);\n // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n const [fullscreen, setFullscreen] = useState<boolean \| undefined>(undefined);\n\n const ctxValue: FullscreenContextValue = useMemo(() => {\n return [\n fullscreen,\n () => {\n setFullscreen(cur => !cur);\n }\n ];\n }, [fullscreen]);\n\n const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n const parentJSX = (\n <StyledFullscreen\n data-testid={testIds.root}\n data-fullscreen-enabled={fullscreen ? true : undefined}\n {...restProps}\n ref={parentElRef}\n fullscreen={!!fullscreen}\n data-popover-id={popoverId}\n >\n {children}\n </StyledFullscreen>\n );\n\n return (\n <FullscreenContext.Provider value={ctxValue}>\n {fullscreen && parentEl ? (\n <>\n {/* DOM element required for outer event management. */}\n <div ref={setTargetEl} style={{ display: 'none' }} />\n <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n </>\n ) : (\n parentJSX\n )}\n </FullscreenContext.Provider>\n );\n }),\n getFullscreenTestIds\n);\n"]}
1	+ {"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useFocusTrap,\n usePopoverMap,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n 'div',\n {\n children: ReactNode;\n }\n> &\n TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n return css`\n ${fullscreen &&\n css`\n --content-height-in-view: calc(\n 100dvh - var(--appshell-hard-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n );\n position: fixed;\n z-index: ${theme.base['z-index'].backdrop};\n inset-inline: 0;\n inset-block-start: var(--appshell-hard-top-offset, 0);\n inset-block-end: var(--appshell-hard-bottom-offset, 0);\n background: ${theme.base.palette['primary-background']};\n `}\n `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean \| undefined, () => void] \| undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n // Ensure easier/safer destructuring in use\n return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n parentJSX,\n parentElRef\n}: {\n parentJSX: ReactElement;\n parentElRef: RefObject<HTMLDivElement>;\n}) => {\n const { portalTarget } = useConfiguration();\n useFocusTrap(parentElRef);\n const { disableScroll, enableScroll } = useScrollToggle();\n\n useEffect(() => {\n disableScroll();\n return enableScroll;\n }, []);\n\n return portalTarget\n ? createPortal(\n <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n portalTarget\n )\n : null;\n};\n\nexport default withTestIds(\n forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n { children, testId, ...restProps },\n ref\n ) {\n const testIds = useTestIds(testId, getFullscreenTestIds);\n // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n const [fullscreen, setFullscreen] = useState<boolean \| undefined>(undefined);\n\n const ctxValue: FullscreenContextValue = useMemo(() => {\n return [\n fullscreen,\n () => {\n setFullscreen(cur => !cur);\n }\n ];\n }, [fullscreen]);\n\n const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n const parentJSX = (\n <StyledFullscreen\n data-testid={testIds.root}\n data-fullscreen-enabled={fullscreen ? true : undefined}\n {...restProps}\n ref={parentElRef}\n fullscreen={!!fullscreen}\n data-popover-id={popoverId}\n >\n {children}\n </StyledFullscreen>\n );\n\n return (\n <FullscreenContext.Provider value={ctxValue}>\n {fullscreen && parentEl ? (\n <>\n {/* DOM element required for outer event management. */}\n <div ref={setTargetEl} style={{ display: 'none' }} />\n <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n </>\n ) : (\n parentJSX\n )}\n </FullscreenContext.Provider>\n );\n }),\n getFullscreenTestIds\n);\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.js CHANGED Viewed

@@ -261,7 +261,7 @@ export const StyledTemplateRow = styled.div(({ theme }) => {
 StyledTemplateRow.defaultProps = defaultThemeProp;
 export const StyledTemplate = styled.div(({ theme }) => {
     const { base: { breakpoints } } = theme;
-    const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    const templateHeight = 'calc(100dvh - var(--appshell-top-offset, 0rem))';
     return css `
     height: 100%;
     min-height: 0;

package/lib/components/PageTemplates/CategorySubPage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: absolute;\n top: ${spacing};\n left: -200vw;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing});\n\n &:focus,\n &:active {\n left: ${spacing};\n }\n `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { interactive, 'app-background': hoverBase },\n spacing\n }\n } = theme;\n const hoverColors = getHoverColors(hoverBase);\n\n return css`\n height: auto;\n\n a,\n button {\n display: block;\n width: 100%;\n padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n }\n\n &[aria-current='page'] {\n a {\n color: ${interactive};\n }\n\n &::after {\n background: ${interactive};\n }\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n a,\n button {\n text-transform: uppercase;\n padding: calc(1.5 ${spacing}) 0;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n /* md or above / \"Desktop\" /\n @media all and (min-width: ${breakpoints.md}) {\n padding-left: 0;\n padding-right: 0;\n border: none;\n\n &::after {\n content: none;\n }\n\n a,\n button {\n &:hover,\n &:focus {\n background: ${hoverColors.background};\n color: ${hoverColors.foreground};\n text-decoration: none;\n }\n }\n }\n `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n const {\n base: { spacing, breakpoints }\n } = theme;\n\n return css`\n padding: calc(1.5 ${spacing}) calc(2 * ${spacing});\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n display: none;\n }\n `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n margin: calc(2 ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin: 0;\n }\n `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n &&,\n li {\n list-style-type: none;\n }\n\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n white-space: nowrap;\n\n li,\n > div {\n display: inline-block;\n }\n }\n\n > ${StyledNavGroup}:first-child {\n margin-top: 0;\n }\n `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': brandPrimary },\n 'border-radius': baseBorderRadius,\n spacing\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background: ${brandPrimary};\n width: 2rem;\n height: 2rem;\n margin-inline-end: ${spacing};\n border-radius: calc(0.5 ${baseBorderRadius});\n\n svg {\n color: ${color};\n }\n `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n padding: 0 calc(2 * ${spacing});\n margin-bottom: calc(2 * ${spacing});\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin-bottom: ${spacing};\n }\n `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'app-background': appBackground },\n breakpoints,\n spacing\n }\n } = theme;\n\n return css`\n background-color: ${appBackground};\n position: sticky;\n top: 0;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n width: 100%;\n padding: calc(2 ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n position: static;\n padding-bottom: 0;\n }\n\n / md or above /\n @media all and (min-width: ${breakpoints.md}) {\n max-width: 14.438rem;\n }\n\n / lg or above /\n @media all and (min-width: ${breakpoints.lg}) {\n max-width: 17.563rem;\n }\n\n / xl or above /\n @media all and (min-width: ${breakpoints.xl}) {\n max-width: 20.75rem;\n }\n `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n const {\n base: {\n 'font-weight': { 'semi-bold': fontWeight },\n 'font-size': fontSize,\n 'font-scale': fontScale\n }\n } = theme;\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes['m' as FontSize]};\n font-weight: ${fontWeight};\n `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${primaryBackground};\n padding: calc(2 ${spacing}) 0 calc(3 * ${spacing});\n `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: relative;\n background-color: ${primaryBackground};\n width: 100%;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n &:focus {\n outline: none;\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n padding: 0 calc(2 ${spacing}) calc(2 * ${spacing});\n }\n `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n position: relative;\n height: 100%;\n min-height: 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n flex-direction: column;\n height: auto;\n min-height: inherit;\n }\n `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';\n\n return css`\n height: 100%;\n min-height: 0;\n\n / md or above / split-scroll layout */\n @media all and (min-width: ${breakpoints.md}) {\n height: ${templateHeight};\n min-height: ${templateHeight};\n max-height: ${templateHeight};\n overflow: hidden;\n }\n `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: absolute;\n top: ${spacing};\n left: -200vw;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing});\n\n &:focus,\n &:active {\n left: ${spacing};\n }\n `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { interactive, 'app-background': hoverBase },\n spacing\n }\n } = theme;\n const hoverColors = getHoverColors(hoverBase);\n\n return css`\n height: auto;\n\n a,\n button {\n display: block;\n width: 100%;\n padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n }\n\n &[aria-current='page'] {\n a {\n color: ${interactive};\n }\n\n &::after {\n background: ${interactive};\n }\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n a,\n button {\n text-transform: uppercase;\n padding: calc(1.5 ${spacing}) 0;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n /* md or above / \"Desktop\" /\n @media all and (min-width: ${breakpoints.md}) {\n padding-left: 0;\n padding-right: 0;\n border: none;\n\n &::after {\n content: none;\n }\n\n a,\n button {\n &:hover,\n &:focus {\n background: ${hoverColors.background};\n color: ${hoverColors.foreground};\n text-decoration: none;\n }\n }\n }\n `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n const {\n base: { spacing, breakpoints }\n } = theme;\n\n return css`\n padding: calc(1.5 ${spacing}) calc(2 * ${spacing});\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n display: none;\n }\n `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n margin: calc(2 ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin: 0;\n }\n `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n &&,\n li {\n list-style-type: none;\n }\n\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n white-space: nowrap;\n\n li,\n > div {\n display: inline-block;\n }\n }\n\n > ${StyledNavGroup}:first-child {\n margin-top: 0;\n }\n `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': brandPrimary },\n 'border-radius': baseBorderRadius,\n spacing\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background: ${brandPrimary};\n width: 2rem;\n height: 2rem;\n margin-inline-end: ${spacing};\n border-radius: calc(0.5 ${baseBorderRadius});\n\n svg {\n color: ${color};\n }\n `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n padding: 0 calc(2 * ${spacing});\n margin-bottom: calc(2 * ${spacing});\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin-bottom: ${spacing};\n }\n `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'app-background': appBackground },\n breakpoints,\n spacing\n }\n } = theme;\n\n return css`\n background-color: ${appBackground};\n position: sticky;\n top: 0;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n width: 100%;\n padding: calc(2 ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n position: static;\n padding-bottom: 0;\n }\n\n / md or above /\n @media all and (min-width: ${breakpoints.md}) {\n max-width: 14.438rem;\n }\n\n / lg or above /\n @media all and (min-width: ${breakpoints.lg}) {\n max-width: 17.563rem;\n }\n\n / xl or above /\n @media all and (min-width: ${breakpoints.xl}) {\n max-width: 20.75rem;\n }\n `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n const {\n base: {\n 'font-weight': { 'semi-bold': fontWeight },\n 'font-size': fontSize,\n 'font-scale': fontScale\n }\n } = theme;\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes['m' as FontSize]};\n font-weight: ${fontWeight};\n `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${primaryBackground};\n padding: calc(2 ${spacing}) 0 calc(3 * ${spacing});\n `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: relative;\n background-color: ${primaryBackground};\n width: 100%;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n &:focus {\n outline: none;\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n padding: 0 calc(2 ${spacing}) calc(2 * ${spacing});\n }\n `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n position: relative;\n height: 100%;\n min-height: 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) /\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n flex-direction: column;\n height: auto;\n min-height: inherit;\n }\n `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n const templateHeight = 'calc(100dvh - var(--appshell-top-offset, 0rem))';\n\n return css`\n height: 100%;\n min-height: 0;\n\n / md or above / split-scroll layout */\n @media all and (min-width: ${breakpoints.md}) {\n height: ${templateHeight};\n min-height: ${templateHeight};\n max-height: ${templateHeight};\n overflow: hidden;\n }\n `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/DashboardPage.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const StyledDashboardRegion = styled(StyledRegion) `
 `;
 StyledDashboardRegion.defaultProps = defaultThemeProp;
 export const StyledDashboardPageLayout = styled(StyledPageLayout)(({ fitToViewport, theme: { base: { palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground } }, components: { tabs: { detached: detachedTabs } } } }) => {
-    const height = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    const height = 'calc(100dvh - var(--appshell-top-offset, 0rem))';
     return css `
     min-height: ${height};
     background-color: ${detachedTabs ? primaryBackground : secondaryBackground};

package/lib/components/PageTemplates/DashboardPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Tabs, { TabPanel } from '../Tabs';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({\n fitToViewport,\n theme: {\n base: {\n palette: {\n 'primary-background': primaryBackground,\n 'secondary-background': secondaryBackground\n }\n },\n components: {\n tabs: { detached: detachedTabs }\n }\n }\n}) => {\n const height = 'calc(100dvh - var(--appshell-offset, 0rem))';\n\n return css`\n min-height: ${height};\n background-color: ${detachedTabs ? primaryBackground : secondaryBackground};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n\n [role='tabpanel'] & {\n padding: 0;\n }\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: ForwardRefForwardPropsComponent<DashboardPageLayoutProps> = forwardRef(\n function DashboardPageLayout(\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n utilities,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: DashboardPageLayoutProps['ref']\n ) {\n const pageRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n const isMediumOrAbove = useBreakpoint('md');\n\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const renderFilters =\n filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0;\n const renderHeader = !!path \|\| !!icon \|\| !!title \|\| !!actions;\n const renderBanners = !!banners;\n\n const gridAreas = useMemo(() => {\n if (renderFilters && renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderBanners) {\n return `\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderHeader) {\n return `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters) {\n return `\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners) {\n return `${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderHeader) {\n return `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n return `${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners, renderHeader, renderFilters, renderBanners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n return 'fit-content(100%)';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={pageRef}\n >\n {renderHeader && (isMediumOrAbove \|\| (!isMediumOrAbove && !utilities)) && (\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n )}\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n ${StyledDashboardPageLayout} {\n padding: 0;\n min-height: unset;\n height: unset;\n }\n `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nconst DashboardPage: ForwardRefForwardPropsComponent<DashboardPageProps> = forwardRef(\n function DashboardPage(\n {\n a,\n b,\n c,\n filters,\n fitToViewport,\n utilities,\n path,\n icon,\n title,\n actions,\n ...restProps\n }: PropsWithoutRef<DashboardPageProps>,\n ref: DashboardPageProps['ref']\n ) {\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageContent = (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n utilities={utilities}\n path={path}\n icon={icon}\n title={title}\n actions={actions}\n ref={ref}\n />\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex container={{ gap: 0.5 }}>\n <Flex item={{ grow: 1 }}>{pageContent}</Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Flex container={{ direction: 'column', pad: [2, 2, undefined] }} as={StyledPageHeader}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n </Flex>\n\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StylePageTabContent>{tab.content}</StylePageTabContent>\n </TabPanel>\n ))}\n </Flex>\n );\n }\n\n return pageContent;\n }\n);\n\nexport default DashboardPage;\n"]}
1	+ {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Tabs, { TabPanel } from '../Tabs';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({\n fitToViewport,\n theme: {\n base: {\n palette: {\n 'primary-background': primaryBackground,\n 'secondary-background': secondaryBackground\n }\n },\n components: {\n tabs: { detached: detachedTabs }\n }\n }\n}) => {\n const height = 'calc(100dvh - var(--appshell-top-offset, 0rem))';\n\n return css`\n min-height: ${height};\n background-color: ${detachedTabs ? primaryBackground : secondaryBackground};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n\n [role='tabpanel'] & {\n padding: 0;\n }\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: ForwardRefForwardPropsComponent<DashboardPageLayoutProps> = forwardRef(\n function DashboardPageLayout(\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n utilities,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: DashboardPageLayoutProps['ref']\n ) {\n const pageRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n const isMediumOrAbove = useBreakpoint('md');\n\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const renderFilters =\n filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0;\n const renderHeader = !!path \|\| !!icon \|\| !!title \|\| !!actions;\n const renderBanners = !!banners;\n\n const gridAreas = useMemo(() => {\n if (renderFilters && renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderBanners) {\n return `\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters && renderHeader) {\n return `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners && renderHeader) {\n return `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderFilters) {\n return `\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderBanners) {\n return `${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n if (renderHeader) {\n return `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n\n return `${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners, renderHeader, renderFilters, renderBanners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n return 'fit-content(100%)';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={pageRef}\n >\n {renderHeader && (isMediumOrAbove \|\| (!isMediumOrAbove && !utilities)) && (\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n )}\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n ${StyledDashboardPageLayout} {\n padding: 0;\n min-height: unset;\n height: unset;\n }\n `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nconst DashboardPage: ForwardRefForwardPropsComponent<DashboardPageProps> = forwardRef(\n function DashboardPage(\n {\n a,\n b,\n c,\n filters,\n fitToViewport,\n utilities,\n path,\n icon,\n title,\n actions,\n ...restProps\n }: PropsWithoutRef<DashboardPageProps>,\n ref: DashboardPageProps['ref']\n ) {\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageContent = (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n utilities={utilities}\n path={path}\n icon={icon}\n title={title}\n actions={actions}\n ref={ref}\n />\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex container={{ gap: 0.5 }}>\n <Flex item={{ grow: 1 }}>{pageContent}</Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Flex container={{ direction: 'column', pad: [2, 2, undefined] }} as={StyledPageHeader}>\n {path && path.length > 0 && <Breadcrumbs path={path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n </Flex>\n\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StylePageTabContent>{tab.content}</StylePageTabContent>\n </TabPanel>\n ))}\n </Flex>\n );\n }\n\n return pageContent;\n }\n);\n\nexport default DashboardPage;\n"]}

package/lib/components/Preview/PreviewPanel.js CHANGED Viewed

@@ -29,7 +29,7 @@ export const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {
     width: var(--resize-drawer-width);
     background: ${theme.base.palette['app-background']};
     height: auto;
-    inset-block-start: calc(var(--app-header-height, 0rem) + var(--appshell-top-offset, 0rem));
+    inset-block-start: var(--appshell-top-offset, 0);
     inset-block-end: var(--appshell-bottom-offset, 0);
     z-index: calc(${theme.base['z-index'].backdrop} - 1);
     transition-property: transform, box-shadow, opacity, border-inline-start;

package/lib/components/Preview/PreviewPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n resizeDrawerDefaultWidth,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: auto;\n inset-block-start: calc(var(--app-header-height, 0rem) + var(--appshell-top-offset, 0rem));\n inset-block-end: var(--appshell-bottom-offset, 0);\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 1ms);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${StyledResizeHandle} {\n z-index: calc(${theme.base['z-index'].max - 1});\n }\n\n @media (width >= ${theme.base.breakpoints.md}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n return css`\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n border: none;\n\n /* Places above resize handle /\n z-index: ${theme.base['z-index'].max};\n box-shadow: ${theme.base.shadow.low};\n inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n inset-block-start: calc(2 ${theme.base.spacing} + var(--half-btn-compact-difference));\n `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n {\n testId,\n previewLabel,\n open,\n children,\n progress,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<PreviewPanelProps>,\n ref: Ref<HTMLDivElement>\n) {\n const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n const t = useI18n();\n const direction = useDirection();\n const previewRef = useConsolidatedRef(ref);\n const { previewTriggerRef } = usePreviewContext();\n\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const [progressVisible, setProgressVisible] = useState(false);\n\n const setFocus = () => {\n if (progressVisible) return;\n\n const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n const focusable = focusables[0] ?? closeButtonEl;\n focusable?.focus();\n };\n\n useEffect(() => {\n if (!progressVisible) {\n setFocus();\n }\n }, [progressVisible]);\n\n useFocusTrap(previewRef, true, [], false);\n\n return (\n <Drawer\n data-testid={testIds.root}\n onBeforeOpen={() => {\n onBeforeOpen?.();\n }}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={previewRef}\n position='fixed'\n placement={direction.end}\n size={resizeDrawerDefaultWidth}\n aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n open={open}\n resizeable\n shadow\n nullWhenClosed\n {...restProps}\n >\n <StyledCloseButton\n data-testid={testIds.close}\n icon\n compact\n onClick={() => {\n onBeforeClose?.();\n onAfterClose?.();\n previewTriggerRef.current?.focus();\n }}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' size='font-size' />\n </StyledCloseButton>\n\n <Progress\n data-testid={testIds.progress}\n placement='local'\n visible={!!progress}\n focusOnVisible\n delay\n onTransitionStartIn={() => {\n setProgressVisible(true);\n }}\n onTransitionEndOut={() => setProgressVisible(false)}\n />\n {!progress && children}\n </Drawer>\n );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\n"]}
1	+ {"version":3,"file":"PreviewPanel.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport getFocusables from '../../utils/getFocusables';\nimport Icon, { registerIcon } from '../Icon';\nimport Progress from '../Progress';\nimport { readableHue } from '../../styles/utils';\nimport {\n resizeDrawerDefaultWidth,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\nimport { StyledResizeHandle } from '../Drawer/ResizeHandle';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport useConsolidatedRef from '../../hooks/useConsolidatedRef';\nimport useDirection from '../../hooks/useDirection';\nimport useElement from '../../hooks/useElement';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport useI18n from '../../hooks/useI18n';\nimport usePreviewContext from '../../hooks/usePreviewContext';\nimport useTestIds from '../../hooks/useTestIds';\nimport { withTestIds } from '../../utils';\n\nimport { getPreviewPanelTestIds } from './PreviewPanel.test-ids';\nimport type { PreviewPanelProps } from './Preview.types';\n\nregisterIcon(timesIcon);\n\nexport const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: auto;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-bottom-offset, 0);\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 1ms);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${StyledResizeHandle} {\n z-index: calc(${theme.base['z-index'].max - 1});\n }\n\n @media (width >= ${theme.base.breakpoints.md}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst StyledCloseButton = styled(Button)(({ theme }) => {\n return css`\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n border: none;\n\n /* Places above resize handle /\n z-index: ${theme.base['z-index'].max};\n box-shadow: ${theme.base.shadow.low};\n inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);\n inset-block-start: calc(2 ${theme.base.spacing} + var(--half-btn-compact-difference));\n `;\n});\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nconst PreviewPanel = forwardRef(function PreviewPanel(\n {\n testId,\n previewLabel,\n open,\n children,\n progress,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<PreviewPanelProps>,\n ref: Ref<HTMLDivElement>\n) {\n const testIds = useTestIds(testId, getPreviewPanelTestIds);\n\n const t = useI18n();\n const direction = useDirection();\n const previewRef = useConsolidatedRef(ref);\n const { previewTriggerRef } = usePreviewContext();\n\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const [progressVisible, setProgressVisible] = useState(false);\n\n const setFocus = () => {\n if (progressVisible) return;\n\n const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n const focusable = focusables[0] ?? closeButtonEl;\n focusable?.focus();\n };\n\n useEffect(() => {\n if (!progressVisible) {\n setFocus();\n }\n }, [progressVisible]);\n\n useFocusTrap(previewRef, true, [], false);\n\n return (\n <Drawer\n data-testid={testIds.root}\n onBeforeOpen={() => {\n onBeforeOpen?.();\n }}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={previewRef}\n position='fixed'\n placement={direction.end}\n size={resizeDrawerDefaultWidth}\n aria-label={previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview')}\n open={open}\n resizeable\n shadow\n nullWhenClosed\n {...restProps}\n >\n <StyledCloseButton\n data-testid={testIds.close}\n icon\n compact\n onClick={() => {\n onBeforeClose?.();\n onAfterClose?.();\n previewTriggerRef.current?.focus();\n }}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' size='font-size' />\n </StyledCloseButton>\n\n <Progress\n data-testid={testIds.progress}\n placement='local'\n visible={!!progress}\n focusOnVisible\n delay\n onTransitionStartIn={() => {\n setProgressVisible(true);\n }}\n onTransitionEndOut={() => setProgressVisible(false)}\n />\n {!progress && children}\n </Drawer>\n );\n});\n\nexport default withTestIds(PreviewPanel, getPreviewPanelTestIds);\n"]}