npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.28.1 → 9.0.0-build.28.3 - Mend

@pega/cosmos-react-core 9.0.0-build.28.1 → 9.0.0-build.28.3

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

Files changed (31) hide show

package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
package/lib/components/ComboBox/ComboBox.js +2 -3
package/lib/components/ComboBox/ComboBox.js.map +1 -1
package/lib/components/ComboBox/ComboBox.styles.d.ts +3 -0
package/lib/components/ComboBox/ComboBox.styles.d.ts.map +1 -1
package/lib/components/ComboBox/ComboBox.styles.js +33 -31
package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
package/lib/components/FieldGroup/FieldGroup.d.ts +2 -0
package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
package/lib/components/FieldGroup/FieldGroup.js +10 -4
package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
package/lib/components/FieldGroup/FieldGroupList.js +7 -1
package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
package/lib/components/SummaryList/SummaryList.d.ts +5 -0
package/lib/components/SummaryList/SummaryList.d.ts.map +1 -1
package/lib/components/SummaryList/SummaryList.js +2 -2
package/lib/components/SummaryList/SummaryList.js.map +1 -1
package/lib/components/SummaryList/ViewAll.d.ts +1 -1
package/lib/components/SummaryList/ViewAll.d.ts.map +1 -1
package/lib/components/SummaryList/ViewAll.js +5 -4
package/lib/components/SummaryList/ViewAll.js.map +1 -1
package/lib/hooks/useI18n.d.ts +1 -0
package/lib/hooks/useI18n.d.ts.map +1 -1
package/lib/i18n/default.d.ts +1 -0
package/lib/i18n/default.d.ts.map +1 -1
package/lib/i18n/default.js +2 -1
package/lib/i18n/default.js.map +1 -1
package/lib/i18n/i18n.d.ts +1 -0
package/lib/i18n/i18n.d.ts.map +1 -1
package/package.json +1 -1

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"~~AA0CA~~,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAsXE"}
1	+ {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAsXE"}

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

@@ -8,13 +8,12 @@ import Popover from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import Menu from '../Menu';
-import Button from '../Button';
 import { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import { fitToContent } from '../Popover/modifiers';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import ComboBoxInput from './ComboBoxInput';
-import { StyledComboBox } from './ComboBox.styles';
+import { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';
 import { getComboBoxTestIds } from './ComboxBox.test-ids';
 registerIcon(caretDownIcon, caretUpIcon);
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
@@ -118,7 +117,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
         setOpen(!open);
     }, [open, onDropdownButtonClickProp]);
     const dropdownButton = useMemo(() => {
-        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, onMouseDown: (e) => {
+        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(StyledDropdownButton, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, onMouseDown: (e) => {
                 e.preventDefault();
                 inputRef.current?.focus();
             }, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }) })) : null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport type {\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n MutableRefObject,\n MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useUID,\n useElement,\n useDirection,\n useTestIds,\n useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n function ComboBox(props, ref) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onResolveSuggestion,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onMenuOpen,\n onClick,\n onKeyDown,\n menu,\n visual,\n className,\n handle,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getComboBoxTestIds);\n const bodyRef = useRef<Element>(document.body);\n\n const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n useState(false);\n const t = useI18n();\n const listId = `${id}-list`;\n const inputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n const { start } = useDirection();\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n setPauseMenuDescendantEvaluation(!bool);\n setPauseSelectedDescendantEvaluation(bool);\n }, []);\n\n const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n setPauseSelectedDescendantEvaluation(!bool);\n setPauseMenuDescendantEvaluation(bool);\n }, []);\n\n const focus = useFocusWithin([containerRef, popoverRef], focused => {\n if (!focused) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n if (open) {\n e.stopPropagation();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n },\n [open]\n );\n\n useEscape(handleEscape, containerRef, [handleEscape]);\n\n useImperativeHandle(handle, () => ({\n focusInput: () => {\n inputRef.current?.focus();\n }\n }));\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu \|\| readOnly) return;\n if (onKeyDown?.(e) === false) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowUp':\n if (e.altKey) {\n e.preventDefault();\n if (open) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!open) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(popoverRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n break;\n }\n }\n\n setOpen(false);\n toggleMenuDescendantsActive(false);\n\n break;\n }\n default:\n }\n },\n [open, readOnly, menu, value, onKeyDown]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items \|\| onDropdownButtonClickProp \|\| !onChange) && !readOnly ? (\n <Button\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </Button>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const ariaDescribedBy = useMemo(() => {\n let idString = `${id}-inputDescription`;\n\n if (info) {\n idString = idString.concat(` ${id}-info`);\n }\n if (onChange) {\n idString = idString.concat(` ${id}-searchDescription`);\n }\n if (mode === 'multi-select') {\n idString = idString.concat(` ${id}-multiselectDescription`);\n }\n\n return idString;\n }, [info, id, mode, onChange]);\n\n const onInputClick = useCallback(\n (e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) return;\n setOpen(true);\n toggleMenuDescendantsActive(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n }, [menu, value, focus]);\n\n useEffect(() => {\n if (open) onMenuOpen?.();\n }, [open]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox\n ref={containerRef}\n as={StyledFormControl}\n id={`${id}-combobox`}\n data-testid={label ? undefined : testIds.root}\n >\n <ComboBoxInput\n data-testid={testIds.control}\n ref={inputRef}\n role='combobox'\n aria-autocomplete='list'\n aria-expanded={!readOnly && !disabled && open}\n aria-controls={\n open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n }\n aria-haspopup='listbox'\n aria-describedby={ariaDescribedBy}\n className={createClassName('combo-box', className, { mode })}\n selected={selected?.items}\n spellCheck={false}\n id={id}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n value={value}\n mode={mode}\n status={status}\n onResolveSuggestion={onResolveSuggestion}\n actions={inputActions}\n visual={visual}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n required={required}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n onSelectedFocus={() => {\n toggleSelectedDescendantsActive(true);\n }}\n onSelectedBlur={() => {\n toggleSelectedDescendantsActive(false);\n }}\n {...restProps}\n />\n\n <Popover\n hideOnTargetHidden\n ref={popoverRef}\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[fitToContent]}\n // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n strategy='fixed'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(popoverRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n >\n {menu && (\n <Menu\n ref={menuRef}\n listId={listId}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current \|\| undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n toggleMenuDescendantsActive(true);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n aria-label={t('menu_option_list')}\n pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n arrowNavigationUnsupported\n cycle={false}\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return (\n <>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n )}\n <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n {t(\n Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n ? 'multiselect_instructions_with_links'\n : 'multiselect_instructions',\n [start]\n )}\n </VisuallyHiddenText>\n </>\n );\n }\n ),\n getComboBoxTestIds\n);\n"]}
1	+ {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport type {\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n MutableRefObject,\n MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useUID,\n useElement,\n useDirection,\n useTestIds,\n useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n function ComboBox(props, ref) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onResolveSuggestion,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onMenuOpen,\n onClick,\n onKeyDown,\n menu,\n visual,\n className,\n handle,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getComboBoxTestIds);\n const bodyRef = useRef<Element>(document.body);\n\n const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n useState(false);\n const t = useI18n();\n const listId = `${id}-list`;\n const inputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n const { start } = useDirection();\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n setPauseMenuDescendantEvaluation(!bool);\n setPauseSelectedDescendantEvaluation(bool);\n }, []);\n\n const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n setPauseSelectedDescendantEvaluation(!bool);\n setPauseMenuDescendantEvaluation(bool);\n }, []);\n\n const focus = useFocusWithin([containerRef, popoverRef], focused => {\n if (!focused) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n if (open) {\n e.stopPropagation();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n },\n [open]\n );\n\n useEscape(handleEscape, containerRef, [handleEscape]);\n\n useImperativeHandle(handle, () => ({\n focusInput: () => {\n inputRef.current?.focus();\n }\n }));\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu \|\| readOnly) return;\n if (onKeyDown?.(e) === false) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowUp':\n if (e.altKey) {\n e.preventDefault();\n if (open) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!open) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(popoverRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n break;\n }\n }\n\n setOpen(false);\n toggleMenuDescendantsActive(false);\n\n break;\n }\n default:\n }\n },\n [open, readOnly, menu, value, onKeyDown]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items \|\| onDropdownButtonClickProp \|\| !onChange) && !readOnly ? (\n <StyledDropdownButton\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </StyledDropdownButton>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const ariaDescribedBy = useMemo(() => {\n let idString = `${id}-inputDescription`;\n\n if (info) {\n idString = idString.concat(` ${id}-info`);\n }\n if (onChange) {\n idString = idString.concat(` ${id}-searchDescription`);\n }\n if (mode === 'multi-select') {\n idString = idString.concat(` ${id}-multiselectDescription`);\n }\n\n return idString;\n }, [info, id, mode, onChange]);\n\n const onInputClick = useCallback(\n (e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) return;\n setOpen(true);\n toggleMenuDescendantsActive(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n }, [menu, value, focus]);\n\n useEffect(() => {\n if (open) onMenuOpen?.();\n }, [open]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox\n ref={containerRef}\n as={StyledFormControl}\n id={`${id}-combobox`}\n data-testid={label ? undefined : testIds.root}\n >\n <ComboBoxInput\n data-testid={testIds.control}\n ref={inputRef}\n role='combobox'\n aria-autocomplete='list'\n aria-expanded={!readOnly && !disabled && open}\n aria-controls={\n open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n }\n aria-haspopup='listbox'\n aria-describedby={ariaDescribedBy}\n className={createClassName('combo-box', className, { mode })}\n selected={selected?.items}\n spellCheck={false}\n id={id}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n value={value}\n mode={mode}\n status={status}\n onResolveSuggestion={onResolveSuggestion}\n actions={inputActions}\n visual={visual}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n required={required}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n onSelectedFocus={() => {\n toggleSelectedDescendantsActive(true);\n }}\n onSelectedBlur={() => {\n toggleSelectedDescendantsActive(false);\n }}\n {...restProps}\n />\n\n <Popover\n hideOnTargetHidden\n ref={popoverRef}\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[fitToContent]}\n // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n strategy='fixed'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(popoverRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n >\n {menu && (\n <Menu\n ref={menuRef}\n listId={listId}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current \|\| undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n toggleMenuDescendantsActive(true);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n aria-label={t('menu_option_list')}\n pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n arrowNavigationUnsupported\n cycle={false}\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return (\n <>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n )}\n <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n {t(\n Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n ? 'multiselect_instructions_with_links'\n : 'multiselect_instructions',\n [start]\n )}\n </VisuallyHiddenText>\n </>\n );\n }\n ),\n getComboBoxTestIds\n);\n"]}

package/lib/components/ComboBox/ComboBox.styles.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+export declare const StyledDropdownButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledSelectInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledComboBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../FormControl").FormControlProps | "hasSuggestion"> & Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
     hasSuggestion?: boolean;

package/lib/components/ComboBox/ComboBox.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,~~6NAyE5B~~,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}
1	+ {"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NA0C5B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js CHANGED Viewed

@@ -1,12 +1,42 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { StyledButton } from '../Button';
+import Button from '../Button';
 import { StyledFormControl } from '../FormControl';
 import { StyledPopover } from '../Popover';
 import { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';
+export const StyledDropdownButton = styled(Button)(({ theme }) => {
+    const baseBorderRadius = theme.base['border-radius'];
+    const formControlBorderRadius = theme.components['form-control']['border-radius'];
+    return css `
+    align-self: stretch;
+    height: auto;
+    margin-block: -0.0625rem;
+    margin-inline-end: -0.0625rem;
+    border-start-start-radius: 0;
+    border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    border-end-start-radius: 0;
+    border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    &::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      z-index: 1;
+      inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);
+      inset-block: 0;
+      width: ${theme.components['form-control']['border-width']};
+      background-color: ${theme.components['form-control']['border-color']};
+      transform: scaleY(0.5);
+      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+    }
+    &:hover::after {
+      transform: scaleY(1);
+    }
+  `;
+});
+StyledDropdownButton.defaultProps = defaultThemeProp;
 export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
-    const baseBorderRadius = base['border-radius'];
-    const formControlBorderRadius = components['form-control']['border-radius'];
     return css `
     @media (pointer: coarse) {
       min-height: ${base['hit-area']['finger-min']};
@@ -47,34 +77,6 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
         cursor: default;
       }
     }
-    & > ${StyledButton} {
-      align-self: stretch;
-      height: auto;
-      margin-block: -0.0625rem;
-      margin-inline-end: -0.0625rem;
-      border-start-start-radius: 0;
-      border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
-      border-end-start-radius: 0;
-      border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
-      &:hover::after {
-        transform: scaleY(1);
-      }
-      &::after {
-        content: '';
-        pointer-events: none;
-        position: absolute;
-        z-index: 1;
-        inset-inline-start: calc(${components['form-control']['border-width']} * -1);
-        inset-block: 0;
-        width: ${components['form-control']['border-width']};
-        background-color: ${components['form-control']['border-color']};
-        transform: scaleY(0.5);
-        transition: transform ${base.animation.speed} ${base.animation.timing.ease};
-      }
-    }
   `;
 });
 StyledSelectInput.defaultProps = defaultThemeProp;

package/lib/components/ComboBox/ComboBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,~~EAAE~~,~~YAAY,EAAE,~~MAAM,WAAW,CAAC;~~AACzC~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,~~iBAAiB~~,GAAG,MAAM,CAAC,~~GAAG~~,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,~~IAAI,~~EAAE~~,UAAU,EAAE,EAAE,EAAE,EAAE~~;~~IAC9E~~,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;~~IAC/C~~,MAAM,uBAAuB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;~~IAE5E~~,OAAO,GAAG,CAAA;;~~oBAEQ~~,~~IAAI~~,CAAC,UAAU,CAAC,CAAC,~~YAAY~~,CAAC~~;;;;;UAKxC~~,UAAU,CAAC,~~KAAK~~,CAAC,~~MAAM~~,~~UAAU~~,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC~~;;;;;sBAK/D~~,~~UAAU~~,CAAC,~~cAAc~~,CAAC,CAAC,~~QAAQ~~,CAAC,CAAC,~~cAAc~~,CAAC~~;oBACtD~~,~~UAAU~~,CAAC,~~cAAc~~,CAAC,CAAC,~~QAAQ~~,CAAC,CAAC,YAAY,~~CAAC;;;;;;;;;;qBAUjD~~,~~UAAU~~,CAAC,~~KAAK~~,CAAC,MAAM,~~UAAU~~,~~UAAU~~,CAAC,~~cAAc~~,CAAC,CAAC,~~cAAc~~,~~CAAC;eACjF~~,UAAU,~~CAAC~~,~~cAAc~~,~~CAAC~~,~~CAAC~~,~~kBAAkB~~,~~CAAC~~;;~~uBAEtC~~,IAAI,CAAC,~~OAAO;;;;;;;;;;;;;;;UAezB~~,YAAY~~;;;;;;sCAMgB~~,~~gBAAgB~~,~~MAAM~~,~~uBAAuB;;oCAE/C~~,~~gBAAgB~~,MAAM,~~uBAAuB;;;;;;;;;;;mCAW9C~~,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC~~;;iBAE5D~~,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;~~4BAC/B~~,UAAU,CAAC,cAAc,CAAC,CAAC,~~cAAc~~,CAAC~~;;gCAEtC~~,~~IAAI~~,CAAC,~~SAAS~~,CAAC,KAAK,~~IAAI~~,~~IAAI~~,CAAC,~~SAAS~~,CAAC,~~MAAM~~,CAAC,IAAI~~;;;GAG/E~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ~~StyledButton }~~ from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const ~~StyledSelectInput~~ = styled~~.div~~(({ theme: ~~{ base, components~~ } }) => {\n const baseBorderRadius = base['border-radius'];\n const formControlBorderRadius = components['form-control']['border-radius'];\n\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n div {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n margin-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n & > ${StyledButton} {\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &:hover::after {\n transform: scaleY(1);\n }\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${components['form-control']['border-width']};\n background-color: ${components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;UAKxC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;sBAK/D,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAchC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n const baseBorderRadius = theme.base['border-radius'];\n const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n return css`\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${theme.components['form-control']['border-width']};\n background-color: ${theme.components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &:hover::after {\n transform: scaleY(1);\n }\n `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n div {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n margin-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts CHANGED Viewed

@@ -12,6 +12,8 @@ export type FieldGroupProps = BaseProps & {
     banner?: BannerProps;
     /** The display and markup variant to apply to the group. */
     variant?: 'form-group';
+    /** Indicates validation status for error display in the header. */
+    status?: 'error';
     /** A reference to the wrapping element. */
     ref?: Ref<HTMLFieldSetElement>;
 } & ({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;~~AAG7C~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;~~AAK7D~~,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;~~AAgCJ~~,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,+OAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAkB/D,CAAC;AAiCH,eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,~~CA2F~~/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA4CJ,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,+OAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAkB/D,CAAC;AAiCH,eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA8F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

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

@@ -10,12 +10,14 @@ import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import Banner from '../Banner';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
+import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
 import { useDirection, useI18n, useUID } from '../../hooks';
 import { calculateFontSize, omitProps } from '../../styles';
 import AdditionalInfo from '../AdditionalInfo';
 registerIcon(caretRightIcon);
+registerIcon(warnSolidIcon);
 // Styles
 const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
     const { rtl } = useDirection();
@@ -23,15 +25,19 @@ const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) =
     ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
     }
-    &[aria-expanded='true'] ${StyledIcon} {
+    &[aria-expanded='true'] ${StyledIcon}:first-child {
       transform: rotate(90deg);
     }
-    &[aria-expanded='false'] ${StyledIcon} {
+    &[aria-expanded='false'] ${StyledIcon}:first-child {
       transform: rotate(${rtl ? 180 : 0}deg);
     }
   `;
 });
 StyledExpandButton.defaultProps = defaultThemeProp;
+const StyledErrorIcon = styled(Icon)(({ theme: { base: { palette } } }) => css `
+    color: ${palette.urgent};
+  `);
+StyledErrorIcon.defaultProps = defaultThemeProp;
 export const StyledFieldGroupName = styled.span ``;
 export const StyledFieldHeader = styled(Flex) `
   word-break: break-word;
@@ -104,7 +110,7 @@ export const StyledDescription = styled(HTML) `
   width: 0;
   min-width: 100%;
 `;
-const FieldGroup = forwardRef(function FieldGroup({ children, description, banner, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, ...restProps }, ref) {
+const FieldGroup = forwardRef(function FieldGroup({ children, description, banner, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, status, ...restProps }, ref) {
     const t = useI18n();
     const uid = useUID();
     const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [banner && _jsx(Banner, { ...banner }), description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx("div", { children: children })] }));
@@ -112,7 +118,7 @@ const FieldGroup = forwardRef(function FieldGroup({ children, description, banne
                             onToggleCollapsed?.();
                         }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [
                             contextualLabel || name
-                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
+                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsxs(_Fragment, { children: [status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /* A banner to be displayed above the controls. /\n banner?: BannerProps;\n /* The display and markup variant to apply to the group. /\n variant?: 'form-group';\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n \| {\n /* The name associated with the Field Group. /\n name: string;\n /* Provides a contextual label for the name. /\n contextualLabel?: string;\n /* Select the heading tag for header /\n headingTag?: HeadingTag;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /\n Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n /\n collapsed?: boolean;\n /\n Called when user clicks the toggle button.\n /\n onToggleCollapsed?: () => void;\n }\n \| {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n spacing,\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\n }\n } = theme;\n if (!border) return null;\n\n return css`\n padding: ${spacing};\n border-radius: calc(${baseBorderRadius} / 2);\n border: ${borderWidth} solid ${borderColor};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel \|\| name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nexport const StyledDescription = styled(HTML)`\n /* Prevent instruction text from contributing to modal width calculation */\n width: 0;\n min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <div>{children}</div>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel \|\| name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel \|\| name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /* A banner to be displayed above the controls. /\n banner?: BannerProps;\n /* The display and markup variant to apply to the group. /\n variant?: 'form-group';\n /* Indicates validation status for error display in the header. /\n status?: 'error';\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n \| {\n /* The name associated with the Field Group. /\n name: string;\n /* Provides a contextual label for the name. /\n contextualLabel?: string;\n /* Select the heading tag for header /\n headingTag?: HeadingTag;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /\n Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n /\n collapsed?: boolean;\n /\n Called when user clicks the toggle button.\n /\n onToggleCollapsed?: () => void;\n }\n \| {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon}:first-child {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon}:first-child {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n ({\n theme: {\n base: { palette }\n }\n }) => css`\n color: ${palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n spacing,\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\n }\n } = theme;\n if (!border) return null;\n\n return css`\n padding: ${spacing};\n border-radius: calc(${baseBorderRadius} / 2);\n border: ${borderWidth} solid ${borderColor};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel \|\| name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nexport const StyledDescription = styled(HTML)`\n /* Prevent instruction text from contributing to modal width calculation */\n width: 0;\n min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n status,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <div>{children}</div>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel \|\| name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel \|\| name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAI9D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAqBnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC9C,aAAa,EAAE,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAUD,eAAO,MAAM,cAAc;WAClB,MAAM;oBACG,MAAM;qBACL,OAAO;~~YAiFxB~~,CAAC;AAuJH,QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAkJxE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAI9D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAqBnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC9C,aAAa,EAAE,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAUD,eAAO,MAAM,cAAc;WAClB,MAAM;oBACG,MAAM;qBACL,OAAO;YAuFxB,CAAC;AAuJH,QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAkJxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -74,7 +74,13 @@ export const StyledListItem = styled.li(({ theme, depth, listGroupIndex, shouldH
       }
     }
-    > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupContent} {
+    > ${StyledGroupContainer}
+      > ${StyledFieldGroup}
+      > ${StyledFieldGroupContent},
+      > ${StyledGroupContainer}
+      > ${StyledFieldGroup}
+      > div
+      > ${StyledFieldGroupContent} {
       padding-inline-start: calc(1.5 * ${spacing});
     }

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} > ${StyledFieldGroup} > ${StyledFieldGroupContent} {\n padding-inline-start: calc(1.5 * ${spacing});\n }\n\n > ${StyledGroupContainer} > ${StyledFieldGroup} > ${StyledFieldGroupLegend} {\n ${StyledFieldHeader} {\n margin-inline-start: calc(0.5 * ${spacing});\n padding-inline: ${spacing};\n height: calc(4 * ${spacing});\n border-start-end-radius: calc(0.5 * ${borderRadius});\n border-end-end-radius: calc(0.5 * ${borderRadius});\n background: ${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 />\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/SummaryList/SummaryList.d.ts CHANGED Viewed

@@ -13,6 +13,11 @@ export interface SummaryListProps extends NoChildrenProp {
      * @default 'h2'
      */
     headingTag?: HeadingTag;
+    /**
+     * Hides the header while still allowing 'name' prop to supply aria attributes
+     * @default false
+     */
+    hideHeader?: boolean;
     /** Identifier for the icon within Pega icons. */
     icon?: IconProps['name'] | IconProps;
     /** Integer representing the total count of items for a list utility dataset. */