npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.5.4 → 10.0.0-build.5.6 - Mend

@pega/cosmos-react-core 10.0.0-build.5.4 → 10.0.0-build.5.6

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 (39) hide show

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

@@ -2,21 +2,37 @@ export declare const StyledAIRewriteDialog: import("styled-components/dist/types
     onDismiss?: () => void;
     onCancel: import("../Dialog/Dialog.types").FormAction;
     onSubmit: import("../Dialog/Dialog.types").FormAction;
+} & {
+    compact: true;
+} & {
+    'aria-label': string;
+    heading?: never;
+    additionalInfo?: never;
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}) | (Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
+    onDismiss?: () => void;
+    onCancel: import("../Dialog/Dialog.types").FormAction;
+    onSubmit: import("../Dialog/Dialog.types").FormAction;
+} & {
+    compact?: false | undefined;
 } & {
     heading: string;
     additionalInfo?: import("../AdditionalInfo").AdditionalInfoProps;
     'aria-label'?: never;
-} & Omit<import("../..").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }) | (Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
     onDismiss?: () => void;
     onCancel: import("../Dialog/Dialog.types").FormAction;
     onSubmit: import("../Dialog/Dialog.types").FormAction;
 } & {
-    heading?: never;
+    compact?: false | undefined;
+} & {
     'aria-label': string;
+    heading?: never;
     additionalInfo?: never;
-} & Omit<import("../..").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("../Dialog").FormDialogProps> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AIRewrite.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB~~;;;;;;;;;;;;;;;;;;;;~~uRAIhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAIrC,CAAC"}
1	+ {"version":3,"file":"AIRewrite.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uRAIhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAIrC,CAAC"}

package/lib/components/AppShell/AppHeader.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;oBACpB,MAAM,GAAG,MAAM,GAAG,WAAW;YAkF7C,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAIH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAQhE,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;aACrB,SAAS,CAAC,SAAS,CAAC;cACnB,OAAO;~~8HAwCjB~~,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;aAA4B,OAAO;gBAAc,OAAO;YAmEnF,CAAC"}
1	+ {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;oBACpB,MAAM,GAAG,MAAM,GAAG,WAAW;YAkF7C,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAIH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAQhE,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;aACrB,SAAS,CAAC,SAAS,CAAC;cACnB,OAAO;8HA+CjB,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;aAA4B,OAAO;gBAAc,OAAO;YAmEnF,CAAC"}

package/lib/components/AppShell/AppHeader.styles.js CHANGED Viewed

@@ -136,7 +136,9 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant, stacked }) =>
     const foregroundColor = theme.components['app-shell'].header['app-name-color'] === 'auto'
         ? calculateForegroundColor(headerBg, headerFgColor, theme)
         : theme.components['app-shell'].header['app-name-color'];
-    const secondaryColor = tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    const secondaryColor = theme.components['app-shell'].header['portal-name-color'] === 'auto'
+        ? tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']))
+        : theme.components['app-shell'].header['portal-name-color'];
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     display: inline-block;
@@ -156,8 +158,11 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant, stacked }) =>
     ${variant === 'secondary' &&
         css `
-      font-size: ${fontSize};
-      align-self: ${stacked ? 'flex-start' : 'flex-end'};
+      font-size: ${fontSize[theme.components.text.secondary['font-size']]};
+      ${stacked &&
+            css `
+        align-self: flex-start;
+      `}
     `}
   `;
 });

package/lib/components/AppShell/AppHeader.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n getHoverColors,\n calculateForegroundColor,\n type FontSize\n} from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n StyledSearchButton,\n StyledSearchFiltersButton,\n StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n return css`\n width: calc(${navWidth} - 2 * ${theme.base.spacing});\n `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n return css`\n & > :first-child {\n vertical-align: top;\n }\n\n & > :is(a, button) {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n }\n\n & > :is(a, button):focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n ${StyledImage} {\n height: 1.0725rem;\n\n ${centerLogo &&\n css`\n padding-inline-start: ${theme.base.spacing};\n `}\n }\n `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{\n searchDisplay?: 'icon' \| 'grow' \| 'fullWidth';\n}>(({ searchDisplay, theme }) => {\n const {\n base: { animation },\n components: {\n 'app-shell': { header },\n input\n }\n } = theme;\n\n const {\n background: headerBg,\n 'search-input': {\n 'background-color': searchInputBg,\n 'foreground-color': searchInputFg,\n 'border-color': searchInputBorder\n }\n } = header;\n\n const searchBg = searchInputBg;\n const searchFg = calculateForegroundColor(headerBg, searchInputFg, theme);\n const searchBorder = calculateForegroundColor(headerBg, searchInputBorder, theme);\n\n return css`\n max-width: 33vw;\n min-width: 10rem;\n width: 100%;\n justify-self: center;\n margin-inline-start: 0;\n margin-inline-end: auto;\n transition: max-width ${animation.speed} ${animation.timing.ease};\n\n ${StyledSearchInput} input::placeholder {\n color: ${transparentize(0.4, searchFg)};\n }\n\n ${searchDisplay === 'icon' &&\n css`\n max-width: ${input.height};\n min-width: ${input.height};\n width: auto;\n margin-inline-start: auto;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'grow' &&\n css`\n flex-grow: 1;\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'fullWidth' &&\n css`\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n &:not([focused]) {\n ${StyledSearchInput} {\n background: ${searchBg};\n border-color: ${searchBorder};\n ${StyledSearchButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchTextInput} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchFiltersButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n }\n }\n `;\n});\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n return css`\n max-width: min(${theme.base['content-width'].sm}, 25vw);\n `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\n// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.\nexport const StyledAppHeaderName = styled.div<{ stacked?: boolean }>(\n ({ theme, stacked }) => css`\n display: flex;\n flex-direction: ${stacked ? 'column' : 'row'};\n align-items: ${stacked ? 'stretch' : 'baseline'};\n gap: ${stacked ? 0 : theme.base.spacing};\n min-width: 0;\n `\n);\nStyledAppHeaderName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{\n variant: TextProps['variant'];\n stacked?: boolean;\n}>(({ theme, variant, stacked }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor =\n theme.components['app-shell'].header['app-name-color'] === 'auto'\n ? calculateForegroundColor(headerBg, headerFgColor, theme)\n : theme.components['app-shell'].header['app-name-color'];\n\n const secondaryColor = tryCatch(() =>\n rgba(\n foregroundColor ?? theme.base.palette['foreground-color'],\n theme.base.transparency['transparent-2']\n )\n );\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: inline-block;\n max-width: 100%;\n min-width: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n font-family: ${theme.components.text['brand-primary']['font-family']};\n\n ${variant === 'primary' &&\n css`\n font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n font-weight: ${theme.components.text['brand-primary']['font-weight']};\n `}\n\n ${variant === 'secondary' &&\n css`\n font-size: ${fontSize};\n align-self: ${stacked ? 'flex-start' : 'flex-end'};\n `}\n `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ stacked: boolean; drawerOpen: boolean }>(\n ({ stacked, drawerOpen, theme }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor, theme);\n\n const hoverColors = getHoverColors(\n tryCatch(\n () => mix(0.01, theme.base.palette.interactive, headerBg),\n () => theme.base.palette.interactive\n ),\n theme.base['min-contrast']\n );\n\n return css`\n position: sticky;\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n ${drawerOpen &&\n css`\n z-index: calc(${theme.base['z-index'].backdrop} - 2);\n `}\n top: var(--appshell-hard-top-offset, 0);\n gap: ${theme.base.spacing};\n max-width: 100%;\n height: ${headerHeight};\n background: ${headerBg};\n color: ${foregroundColor};\n border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n ${StyledAppHeaderInfo} {\n justify-self: flex-start;\n min-width: 33vw;\n\n ${stacked &&\n css`\n min-width: 0;\n `}\n }\n\n ${StyledSearchFiltersButton} {\n color: ${foregroundColor};\n }\n\n > ${StyledAppHeaderOperator} {\n justify-self: flex-end;\n\n + ${StyledPopover} {\n &,\n ${StyledMenuListContainer} {\n background: ${headerBg};\n }\n\n ${StyledMenuListContainer} li {\n color: ${foregroundColor};\n background-color: transparent;\n\n &:hover,\n &[data-current='true'] {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n }\n }\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n getHoverColors,\n calculateForegroundColor,\n type FontSize\n} from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n StyledSearchButton,\n StyledSearchFiltersButton,\n StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n return css`\n width: calc(${navWidth} - 2 * ${theme.base.spacing});\n `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n return css`\n & > :first-child {\n vertical-align: top;\n }\n\n & > :is(a, button) {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n }\n\n & > :is(a, button):focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n ${StyledImage} {\n height: 1.0725rem;\n\n ${centerLogo &&\n css`\n padding-inline-start: ${theme.base.spacing};\n `}\n }\n `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{\n searchDisplay?: 'icon' \| 'grow' \| 'fullWidth';\n}>(({ searchDisplay, theme }) => {\n const {\n base: { animation },\n components: {\n 'app-shell': { header },\n input\n }\n } = theme;\n\n const {\n background: headerBg,\n 'search-input': {\n 'background-color': searchInputBg,\n 'foreground-color': searchInputFg,\n 'border-color': searchInputBorder\n }\n } = header;\n\n const searchBg = searchInputBg;\n const searchFg = calculateForegroundColor(headerBg, searchInputFg, theme);\n const searchBorder = calculateForegroundColor(headerBg, searchInputBorder, theme);\n\n return css`\n max-width: 33vw;\n min-width: 10rem;\n width: 100%;\n justify-self: center;\n margin-inline-start: 0;\n margin-inline-end: auto;\n transition: max-width ${animation.speed} ${animation.timing.ease};\n\n ${StyledSearchInput} input::placeholder {\n color: ${transparentize(0.4, searchFg)};\n }\n\n ${searchDisplay === 'icon' &&\n css`\n max-width: ${input.height};\n min-width: ${input.height};\n width: auto;\n margin-inline-start: auto;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'grow' &&\n css`\n flex-grow: 1;\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'fullWidth' &&\n css`\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n &:not([focused]) {\n ${StyledSearchInput} {\n background: ${searchBg};\n border-color: ${searchBorder};\n ${StyledSearchButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchTextInput} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchFiltersButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n }\n }\n `;\n});\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n return css`\n max-width: min(${theme.base['content-width'].sm}, 25vw);\n `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\n// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.\nexport const StyledAppHeaderName = styled.div<{ stacked?: boolean }>(\n ({ theme, stacked }) => css`\n display: flex;\n flex-direction: ${stacked ? 'column' : 'row'};\n align-items: ${stacked ? 'stretch' : 'baseline'};\n gap: ${stacked ? 0 : theme.base.spacing};\n min-width: 0;\n `\n);\nStyledAppHeaderName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{\n variant: TextProps['variant'];\n stacked?: boolean;\n}>(({ theme, variant, stacked }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor =\n theme.components['app-shell'].header['app-name-color'] === 'auto'\n ? calculateForegroundColor(headerBg, headerFgColor, theme)\n : theme.components['app-shell'].header['app-name-color'];\n\n const secondaryColor =\n theme.components['app-shell'].header['portal-name-color'] === 'auto'\n ? tryCatch(() =>\n rgba(\n foregroundColor ?? theme.base.palette['foreground-color'],\n theme.base.transparency['transparent-2']\n )\n )\n : theme.components['app-shell'].header['portal-name-color'];\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: inline-block;\n max-width: 100%;\n min-width: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n font-family: ${theme.components.text['brand-primary']['font-family']};\n\n ${variant === 'primary' &&\n css`\n font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n font-weight: ${theme.components.text['brand-primary']['font-weight']};\n `}\n\n ${variant === 'secondary' &&\n css`\n font-size: ${fontSize[theme.components.text.secondary['font-size'] as FontSize]};\n ${stacked &&\n css`\n align-self: flex-start;\n `}\n `}\n `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ stacked: boolean; drawerOpen: boolean }>(\n ({ stacked, drawerOpen, theme }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor, theme);\n\n const hoverColors = getHoverColors(\n tryCatch(\n () => mix(0.01, theme.base.palette.interactive, headerBg),\n () => theme.base.palette.interactive\n ),\n theme.base['min-contrast']\n );\n\n return css`\n position: sticky;\n z-index: calc(${theme.base['z-index'].backdrop} - 1);\n ${drawerOpen &&\n css`\n z-index: calc(${theme.base['z-index'].backdrop} - 2);\n `}\n top: var(--appshell-hard-top-offset, 0);\n gap: ${theme.base.spacing};\n max-width: 100%;\n height: ${headerHeight};\n background: ${headerBg};\n color: ${foregroundColor};\n border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n ${StyledAppHeaderInfo} {\n justify-self: flex-start;\n min-width: 33vw;\n\n ${stacked &&\n css`\n min-width: 0;\n `}\n }\n\n ${StyledSearchFiltersButton} {\n color: ${foregroundColor};\n }\n\n > ${StyledAppHeaderOperator} {\n justify-self: flex-end;\n\n + ${StyledPopover} {\n &,\n ${StyledMenuListContainer} {\n background: ${headerBg};\n }\n\n ${StyledMenuListContainer} li {\n color: ${foregroundColor};\n background-color: transparent;\n\n &:hover,\n &[data-current='true'] {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n }\n }\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Dialog/Dialog.types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { OmitStrict, WithAttributes } from '../../types';
+import type { ExcludeStrict, OmitStrict, WithAttributes } from '../../types';
 import type { PopoverProps } from '../Popover';
 import type { ProgressProps } from '../Progress';
 import type { AdditionalInfoProps } from '../AdditionalInfo';
@@ -14,7 +14,7 @@ export interface BaseDialogProps {
      * An element the dialog is contextually and visually associated with. Normally a triggering button.
      * Components rendering Dialog should mount and unmount instances based on this value.
      */
-    target: HTMLElement;
+    target: NonNullable<PopoverProps['target']>;
     /** Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog. */
     children: PopoverProps['children'];
     /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */
@@ -43,6 +43,18 @@ export type FormAction = (() => void) | {
     disabled?: boolean;
     handler: () => void;
 };
+type HeadingOrARIALabel = {
+    /** A string to indicate context for the dialog. The dialog will be labelled by this value. */
+    heading: string;
+    /** Show additional info in form dialog header. */
+    additionalInfo?: AdditionalInfoProps;
+    'aria-label'?: never;
+} | {
+    /** Provide a contextually sufficient aria label if a visible heading is not provided. */
+    'aria-label': string;
+    heading?: never;
+    additionalInfo?: never;
+};
 export type FormDialogProps = WithAttributes<'div', BaseDialogProps & {
     /** Called when the user presses escape or clicks away. */
     onDismiss?: () => void;
@@ -57,18 +69,15 @@ export type FormDialogProps = WithAttributes<'div', BaseDialogProps & {
      * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.
      */
     onSubmit: FormAction;
-} & ({
-    /** A string to indicate context for the dialog. The dialog will be labelled by this value. */
+} & (({
+    /** Renders in a visually compact manner with icon action buttons. */
+    compact: true;
+} & ExcludeStrict<HeadingOrARIALabel, {
     heading: string;
-    /** Show additional info in form dialog header. */
-    additionalInfo?: AdditionalInfoProps;
-    'aria-label'?: never;
-} | {
-    heading?: never;
-    /** Provide a contextually sufficient aria label if a visible heading is not provided. */
-    'aria-label': string;
-    additionalInfo?: never;
-})>;
+}>) | ({
+    /** Renders in a visually compact manner with icon action buttons. */
+    compact?: false | undefined;
+} & HeadingOrARIALabel))>;
 export type InfoDialogProps = WithAttributes<'div', OmitStrict<BaseDialogProps, 'arrow'> & {
     /** A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. */
     heading?: string | {
@@ -87,4 +96,5 @@ export interface DialogHandleValue {
     open: () => void;
     close: () => void;
 }
+export {};
 //# sourceMappingURL=Dialog.types.d.ts.map

package/lib/components/Dialog/Dialog.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;~~AAC9D~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAE9B;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;~~IAEpB~~,6IAA6I;IAC7I,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE9C,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEpC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AAEjE,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAClB,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,eAAe,GAAG;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,EAAE,UAAU,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,UAAU,CAAC;CACtB,GAAG,CACE;~~IACE~~,~~8FAA8F~~;~~IAC9F~~,OAAO,EAAE,~~MAAM~~,CAAC;~~IAChB~~,~~kDAAkD;IAClD~~,~~cAAc~~,CAAC,EAAE,~~mBAAmB~~,~~CAAC~~;~~IACrC~~,~~YAAY~~,CAAC,~~EAAE~~,~~KAAK,~~CAAC;~~CACtB~~,~~GACD~~;~~IACE~~,OAAO,CAAC,EAAE,KAAK,~~CAAC;IAChB~~,~~yFAAyF;IACzF~~,~~YAAY,EAAE,MAAM,~~CAAC;~~IACrB~~,~~cAAc~~,~~CAAC~~,~~EAAE,KAAK,~~CAAC~~;CACxB~~,~~CACJ~~,CACJ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IACrC,6JAA6J;IAC7J,OAAO,CAAC,EACJ,MAAM,GACN;QACE,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB,CAAC;IAEN,2IAA2I;IAC3I,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}
1	+ {"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Dialog/Dialog.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { OmitStrict, WithAttributes } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport type { ProgressProps } from '../Progress';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface BaseDialogProps {\n /*\n Certain uses of dialogs require a linear edge with an input like control.\n * There an arrow is not desired.\n * @default true\n /\n arrow?: PopoverProps['arrow'];\n\n /\n An element the dialog is contextually and visually associated with. Normally a triggering button.\n * Components rendering Dialog should mount and unmount instances based on this value.\n /\n target: ~~HTMLElement;\~~n\n /* Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog. /\n children: PopoverProps['children'];\n\n /* If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n\n /* Optionally render the dialog element at the end of the body or within a specified element. /\n portal?: PopoverProps['portal'];\n\n /* Positioning strategy for solving rendering scenarios. /\n strategy?: PopoverProps['strategy'];\n\n /\n Intended positioning placement for the dialog element.\n * Placement may auto adjust based on screen position and other layout variables.\n /\n placement?: PopoverProps['placement'];\n /\n Optionally determines whether to trap the focus inside the dialog, preventing it from being moved outside until the dialog is closed.\n * @default false\n /\n focusTrap?: boolean;\n\n /* Reference to the dialog's root element. /\n ref?: PopoverProps['ref'];\n}\n\nexport type DialogProps = WithAttributes<'div', BaseDialogProps>;\n\n/* A simple callback or an object to customize a subset button properties. /\nexport type FormAction =\n \| (() => void)\n \| {\n text?: string;\n disabled?: boolean;\n handler: () => void;\n };\n\nexport type FormDialogProps = WithAttributes<\n 'div',\n BaseDialogProps & {\n /* Called when the user presses escape or clicks away. /\n onDismiss?: () => void;\n\n /\n Renders a standard design system cancel button.\n * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n /\n onCancel: FormAction;\n\n /\n Renders a standard design system submit button.\n * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n /\n onSubmit: FormAction;\n } & (\n \| {\n /* A ~~string~~ to ~~indicate~~ ~~context~~ ~~for~~ ~~the~~ ~~dialog.~~ ~~The~~ ~~dialog~~ ~~will~~ be ~~labelled~~ by ~~this~~ ~~value. /\n~~ heading: string;\n /* ~~Show~~ ~~additional~~ ~~info~~ in ~~form~~ ~~dialog~~ ~~header.~~ /\n additionalInfo?: ~~AdditionalInfoProps;\n '~~aria-label~~'?:~~ ~~never;\~~n ~~}\n~~ \| {\n ~~heading?: never;\n~~ /* ~~Provide~~ a ~~contextually~~ ~~sufficient~~ ~~aria~~ ~~label~~ if a ~~visible heading is not provided~~. /\n ~~'aria-label': string;\n additionalInfo~~?: ~~never~~;\n }\n )\n>;\n\nexport type InfoDialogProps = WithAttributes<\n 'div',\n OmitStrict<BaseDialogProps, 'arrow'> & {\n /* A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. /\n heading?:\n \| string\n \| {\n primary: string;\n secondary?: string;\n visual?: ReactNode;\n };\n\n /* Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away. /\n onDismiss: () => void;\n }\n>;\n\n/\n Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n open: () => void;\n close: () => void;\n}\n"]}
1	+ {"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ExcludeStrict, OmitStrict, WithAttributes } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport type { ProgressProps } from '../Progress';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface BaseDialogProps {\n /*\n Certain uses of dialogs require a linear edge with an input like control.\n * There an arrow is not desired.\n * @default true\n /\n arrow?: PopoverProps['arrow'];\n\n /\n An element the dialog is contextually and visually associated with. Normally a triggering button.\n * Components rendering Dialog should mount and unmount instances based on this value.\n /\n target: NonNullable<PopoverProps['target']>;\n\n /* Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog. /\n children: PopoverProps['children'];\n\n /* If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n\n /* Optionally render the dialog element at the end of the body or within a specified element. /\n portal?: PopoverProps['portal'];\n\n /* Positioning strategy for solving rendering scenarios. /\n strategy?: PopoverProps['strategy'];\n\n /\n Intended positioning placement for the dialog element.\n * Placement may auto adjust based on screen position and other layout variables.\n /\n placement?: PopoverProps['placement'];\n /\n Optionally determines whether to trap the focus inside the dialog, preventing it from being moved outside until the dialog is closed.\n * @default false\n /\n focusTrap?: boolean;\n\n /* Reference to the dialog's root element. /\n ref?: PopoverProps['ref'];\n}\n\nexport type DialogProps = WithAttributes<'div', BaseDialogProps>;\n\n/* A simple callback or an object to customize a subset button properties. /\nexport type FormAction =\n \| (() => void)\n \| {\n text?: string;\n disabled?: boolean;\n handler: () => void;\n };\n\ntype HeadingOrARIALabel =\n \| {\n /* A string to indicate context for the dialog. The dialog will be labelled by this value. /\n heading: string;\n /* Show additional info in form dialog header. /\n additionalInfo?: AdditionalInfoProps;\n\n 'aria-label'?: never;\n }\n \| {\n /* Provide a contextually sufficient aria label if a visible heading is not provided. /\n 'aria-label': string;\n\n heading?: never;\n additionalInfo?: never;\n };\n\nexport type FormDialogProps = WithAttributes<\n 'div',\n BaseDialogProps & {\n /* Called when the user presses escape or clicks away. /\n onDismiss?: () => void;\n\n /\n Renders a standard design system cancel button.\n * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n /\n onCancel: FormAction;\n\n /\n Renders a standard design system submit button.\n * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n /\n onSubmit: FormAction;\n } & (\n \| ({\n /* Renders in a visually compact manner with icon action buttons. /\n compact: true;\n } & ExcludeStrict<HeadingOrARIALabel, { heading: string }>) // Heading is not supported in compact mode, but an aria-label is required for accessibility.\n \| ({\n /* Renders in a visually compact manner with icon action buttons. /\n compact?: false \| undefined;\n } & HeadingOrARIALabel) // Heading and aria-label are both supported in non-compact mode.\n )\n>;\n\nexport type InfoDialogProps = WithAttributes<\n 'div',\n OmitStrict<BaseDialogProps, 'arrow'> & {\n /* A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. /\n heading?:\n \| string\n \| {\n primary: string;\n secondary?: string;\n visual?: ReactNode;\n };\n\n /* Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away. /\n onDismiss: () => void;\n }\n>;\n\n/\n Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n open: () => void;\n close: () => void;\n}\n"]}

package/lib/components/Dialog/FormDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;~~AAyB7C~~,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;~~AAGtD~~,eAAO,MAAM,gBAAgB;;uNAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,~~6HAwKf~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AA2B7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,eAAO,MAAM,gBAAgB;;uNAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,6HA0Of,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js CHANGED Viewed

@@ -1,29 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useConsolidatedRef, useContentTabIndex, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
-import { getActiveElement, focusNonInteractiveElement } from '../../utils';
-import Button from '../Button';
+import { getActiveElement, focusNonInteractiveElement, getFocusables } from '../../utils';
+import Button, { StyledButton } from '../Button';
 import Text from '../Text';
 import Progress from '../Progress';
 import AdditionalInfo from '../AdditionalInfo';
 import Flex from '../Flex';
+import getResolvedTarget from '../Popover/getResolvedTarget';
+import Icon from '../Icon';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogFooter, StyledDialogHeader } from './Dialog.styles';
 import Dialog from './Dialog';
+const StyledCompactDialogContent = styled.div ``;
+const StyledCompactActions = styled.div `
+  ${StyledButton} {
+    margin-inline-start: unset;
+  }
+`;
 export const StyledFormDialog = styled(Dialog) ``;
-const FormDialog = forwardRef(function FormDialog({ arrow = true, target, heading, 'aria-label': ariaLabel, children, progress, onDismiss, onCancel, onSubmit, additionalInfo, ...restProps }, ref) {
+const FormDialog = forwardRef(function FormDialog({ arrow = true, compact, target, heading, 'aria-label': ariaLabel, children, progress, onDismiss, onCancel, onSubmit, additionalInfo, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
     const headingRef = useRef(null);
     const dialogRef = useConsolidatedRef(ref);
     const dialogContentRef = useRef(null);
     const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progress]);
+    const resolvedTarget = getResolvedTarget(target);
     const setFocus = () => {
         if (progress || !dialogRef.current)
             return;
         if (headingRef.current) {
             focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);
         }
+        else if (compact) {
+            const focusables = getFocusables(dialogContentRef);
+            if (focusables[0]) {
+                focusables[0].focus();
+            }
+            else {
+                focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);
+            }
+        }
         else {
             focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);
         }
@@ -38,7 +56,7 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
         }
         e.stopPropagation();
     }, dialogRef, [onDismiss, onCancelHandler]);
-    useOuterEvent('mousedown', [target, dialogRef], () => {
+    useOuterEvent('mousedown', [resolvedTarget, dialogRef], () => {
         if (onDismiss) {
             onDismiss();
         }
@@ -72,22 +90,36 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
                 // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.
             }, 0);
         };
-        target.addEventListener('click', closeDialog);
+        resolvedTarget?.addEventListener('click', closeDialog);
         return () => {
-            target.removeEventListener('click', closeDialog);
+            resolvedTarget?.removeEventListener('click', closeDialog);
         };
-    }, []);
-    return (_jsxs(StyledFormDialog, { ...restProps, ...(heading === undefined
+    }, [resolvedTarget, onDismiss, onCancelHandler]);
+    const cancelButton = (() => {
+        const label = typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel');
+        return (_jsx(Button, { icon: compact, label: compact ? label : undefined, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, onClick: () => {
+                onCancelHandler();
+            }, children: compact ? _jsx(Icon, { name: 'times' }) : label }));
+    })();
+    const submitButton = (() => {
+        const label = typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit');
+        return (_jsx(Button, { icon: compact, label: compact ? label : undefined, variant: 'primary', disabled: typeof onSubmit !== 'function' ? onSubmit.disabled : undefined, onClick: () => {
+                (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();
+            }, children: compact ? _jsx(Icon, { name: 'check' }) : label }));
+    })();
+    const layout = (() => {
+        if (compact) {
+            return (_jsxs(Flex, { container: { alignItems: 'start', pad: 0.75, colGap: 1 }, as: StyledCompactDialogContent, ref: dialogContentRef, children: [progress && (_jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })), children && (_jsx(Flex, { item: { grow: 1 }, as: StyledChildrenWrap, inert: progress ? '' : undefined, children: children })), _jsxs(Flex, { container: { alignItems: 'start', colGap: 0.5 }, item: { shrink: 0 }, as: StyledCompactActions, children: [cancelButton, submitButton] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [heading !== undefined && (_jsxs(Flex, { container: {
+                        alignItems: 'center',
+                        gap: additionalInfo?.heading ? 1 : undefined,
+                        pad: [2, 2, 1]
+                    }, item: { shrink: 0 }, as: StyledDialogHeader, children: [_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: heading }), additionalInfo?.heading && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.children }))] })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, tabIndex: contentTabIndex, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [cancelButton, submitButton] })] }));
+    })();
+    return (_jsx(StyledFormDialog, { ...restProps, ...(heading === undefined
             ? { 'aria-label': ariaLabel }
-            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsxs(Flex, { container: {
-                    alignItems: 'center',
-                    gap: additionalInfo?.heading ? 1 : undefined,
-                    pad: [2, 2, 1]
-                }, item: { shrink: 0 }, as: StyledDialogHeader, children: [_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: heading }), additionalInfo?.heading && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.children }))] })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, tabIndex: contentTabIndex, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
-                            onCancelHandler();
-                        }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
-                            (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();
-                        }, disabled: typeof onSubmit !== 'function' ? onSubmit.disabled : undefined, children: typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit') })] })] }));
+            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: layout }));
 });
 export default FormDialog;
 //# sourceMappingURL=FormDialog.js.map

package/lib/components/Dialog/FormDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,aAAa,EACb,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAEjD,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,KAAK,GAAG,IAAI,EACZ,MAAM,EACN,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAO;QAC3C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,0BAA0B,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,0BAA0B,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;QACtE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;IAErF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,EAAE,eAAe,CAAC,CAC7B,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,SAAS,EAAE,CAAC;oBACd,SAAS,EAAE,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,eAAe,EAAE,CAAC;gBACpB,CAAC;gBACD,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,KAAK,SAAS;YACxB,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE;YAC7B,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,EACrC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,aAEb,OAAO,KAAK,SAAS,IAAI,CACxB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;oBAC5C,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;iBACf,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAEtB,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,OAAO,GACH,EACN,cAAc,EAAE,OAAO,IAAI,CAC1B,KAAC,cAAc,IAAC,OAAO,EAAE,cAAc,CAAC,OAAO,YAC5C,cAAc,CAAC,QAAQ,GACT,CAClB,IACI,CACR,EAED,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,eAAe,aAExB,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAAG,QAAQ,GAAsB,CACtF,EACD,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EAEP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAEtB,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;4BACZ,eAAe,EAAE,CAAC;wBACpB,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAEvE,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,EAET,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;4BACZ,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACnE,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAEvE,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,IACJ,IACU,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport { getActiveElement, focusNonInteractiveElement } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogFooter,\n StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n function FormDialog(\n {\n arrow = true,\n target,\n heading,\n 'aria-label': ariaLabel,\n children,\n progress,\n onDismiss,\n onCancel,\n onSubmit,\n additionalInfo,\n ...restProps\n },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement>(null);\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progress]);\n\n const setFocus = () => {\n if (progress \|\| !dialogRef.current) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);\n } else {\n focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);\n }\n };\n\n const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n useEscape(\n e => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss, onCancelHandler]\n );\n\n useOuterEvent('mousedown', [target, dialogRef], () => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n target.addEventListener('click', closeDialog);\n\n return () => {\n target.removeEventListener('click', closeDialog);\n };\n }, []);\n\n return (\n <StyledFormDialog\n {...restProps}\n {...(heading === undefined\n ? { 'aria-label': ariaLabel }\n : { 'aria-labelledby': headingId })}\n arrow={arrow}\n target={target}\n progress={progress}\n ref={dialogRef}\n >\n {heading !== undefined && (\n <Flex\n container={{\n alignItems: 'center',\n gap: additionalInfo?.heading ? 1 : undefined,\n pad: [2, 2, 1]\n }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n <Text ref={headingRef} id={headingId} variant='h2'>\n {heading}\n </Text>\n {additionalInfo?.heading && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.children}\n </AdditionalInfo>\n )}\n </Flex>\n )}\n\n <Flex\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {children && (\n <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n )}\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Flex>\n\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n item={{ shrink: 0 }}\n as={StyledDialogFooter}\n >\n <Button\n onClick={() => {\n onCancelHandler();\n }}\n disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n >\n {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n </Button>\n\n <Button\n variant='primary'\n onClick={() => {\n (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n }}\n disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n >\n {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n </Button>\n </Flex>\n </StyledFormDialog>\n );\n }\n);\n\nexport default FormDialog;\n"]}
1	+ {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport { getActiveElement, focusNonInteractiveElement, getFocusables } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\nimport getResolvedTarget from '../Popover/getResolvedTarget';\nimport Icon from '../Icon';\n\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogFooter,\n StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nconst StyledCompactDialogContent = styled.div``;\n\nconst StyledCompactActions = styled.div`\n ${StyledButton} {\n margin-inline-start: unset;\n }\n`;\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n function FormDialog(\n {\n arrow = true,\n compact,\n target,\n heading,\n 'aria-label': ariaLabel,\n children,\n progress,\n onDismiss,\n onCancel,\n onSubmit,\n additionalInfo,\n ...restProps\n },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement>(null);\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progress]);\n const resolvedTarget = getResolvedTarget(target);\n\n const setFocus = () => {\n if (progress \|\| !dialogRef.current) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);\n } else if (compact) {\n const focusables = getFocusables(dialogContentRef);\n if (focusables[0]) {\n focusables[0].focus();\n } else {\n focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);\n }\n } else {\n focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);\n }\n };\n\n const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n useEscape(\n e => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss, onCancelHandler]\n );\n\n useOuterEvent('mousedown', [resolvedTarget, dialogRef], () => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n resolvedTarget?.addEventListener('click', closeDialog);\n\n return () => {\n resolvedTarget?.removeEventListener('click', closeDialog);\n };\n }, [resolvedTarget, onDismiss, onCancelHandler]);\n\n const cancelButton = (() => {\n const label = typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel');\n\n return (\n <Button\n icon={compact}\n label={compact ? label : undefined}\n disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n onClick={() => {\n onCancelHandler();\n }}\n >\n {compact ? <Icon name='times' /> : label}\n </Button>\n );\n })();\n\n const submitButton = (() => {\n const label = typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit');\n\n return (\n <Button\n icon={compact}\n label={compact ? label : undefined}\n variant='primary'\n disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n onClick={() => {\n (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n }}\n >\n {compact ? <Icon name='check' /> : label}\n </Button>\n );\n })();\n\n const layout = (() => {\n if (compact) {\n return (\n <Flex\n container={{ alignItems: 'start', pad: 0.75, colGap: 1 }}\n as={StyledCompactDialogContent}\n ref={dialogContentRef}\n >\n {progress && (\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n )}\n {children && (\n <Flex item={{ grow: 1 }} as={StyledChildrenWrap} inert={progress ? '' : undefined}>\n {children}\n </Flex>\n )}\n <Flex\n container={{ alignItems: 'start', colGap: 0.5 }}\n item={{ shrink: 0 }}\n as={StyledCompactActions}\n >\n {cancelButton}\n {submitButton}\n </Flex>\n </Flex>\n );\n }\n\n return (\n <>\n {heading !== undefined && (\n <Flex\n container={{\n alignItems: 'center',\n gap: additionalInfo?.heading ? 1 : undefined,\n pad: [2, 2, 1]\n }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n <Text ref={headingRef} id={headingId} variant='h2'>\n {heading}\n </Text>\n {additionalInfo?.heading && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.children}\n </AdditionalInfo>\n )}\n </Flex>\n )}\n <Flex\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {children && (\n <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n )}\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Flex>\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n item={{ shrink: 0 }}\n as={StyledDialogFooter}\n >\n {cancelButton}\n {submitButton}\n </Flex>\n </>\n );\n })();\n\n return (\n <StyledFormDialog\n {...restProps}\n {...(heading === undefined\n ? { 'aria-label': ariaLabel }\n : { 'aria-labelledby': headingId })}\n arrow={arrow}\n target={target}\n progress={progress}\n ref={dialogRef}\n >\n {layout}\n </StyledFormDialog>\n );\n }\n);\n\nexport default FormDialog;\n"]}

package/lib/components/Dialog/InfoDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"~~AAoBA~~,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,~~yHAsJf~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,yHAuJf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js CHANGED Viewed

@@ -7,6 +7,7 @@ import Progress from '../Progress';
 import Flex from '../Flex';
 import SummaryItem from '../SummaryItem';
 import { focusNonInteractiveElement, getActiveElement } from '../../utils';
+import getResolvedTarget from '../Popover/getResolvedTarget';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
 import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
 const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) {
@@ -17,6 +18,7 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
     const dialogRef = useConsolidatedRef(ref);
     const dialogContentRef = useRef(null);
     const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);
+    const resolvedTarget = getResolvedTarget(target);
     const setFocus = () => {
         if (progressProp)
             return;
@@ -31,7 +33,7 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
         onDismiss?.();
         e.stopPropagation();
     }, dialogRef, [onDismiss]);
-    useOuterEvent('mousedown', [target, dialogRef], () => {
+    useOuterEvent('mousedown', [resolvedTarget, dialogRef], () => {
         onDismiss?.();
     });
     // Using layout effect to capture the focused element prior to dialog elements taking focus.
@@ -55,11 +57,11 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
                 // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.
             }, 0);
         };
-        target.addEventListener('click', closeDialog);
+        resolvedTarget?.addEventListener('click', closeDialog);
         return () => {
-            target.removeEventListener('click', closeDialog);
+            resolvedTarget?.removeEventListener('click', closeDialog);
         };
-    }, []);
+    }, [onDismiss, resolvedTarget]);
     const heading = headingProp ? (_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: headingText })) : null;
     const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
     const dismissButton = (_jsx(StyledDismissButton, { icon: true, variant: 'simple', onClick: () => {

package/lib/components/Dialog/InfoDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,aAAa,EACb,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;~~AAG3E~~,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC3F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC;IACzF,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;~~IAE5F~~,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY;YAAE,OAAO;QACzB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,0BAA0B,CAAC,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9D,CAAC;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7B,0BAA0B,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,SAAS,EAAE,EAAE,CAAC;QACd,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,~~MAAM~~,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;~~QACnD~~,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,SAAS,EAAE,EAAE,CAAC;gBACd,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,~~MAAM~~,~~CAAC~~,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;~~QAE9C~~,OAAO,GAAG,EAAE;YACV,~~MAAM~~,~~CAAC~~,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;~~QACnD~~,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;~~IAEP~~,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACpE,CACH,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,mBAAmB,IAClB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;YACZ,SAAS,EAAE,CAAC;QACd,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,YAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACD,CACvB,CAAC;IAEF,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,WAAW,KAAK,QAAQ;YAClC,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAClC,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,EAC3C,KAAK,QACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS,aAEb,WAAW,IAAI,OAAO,IAAI,CACzB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC5E,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAErB,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjC,OAAO,CACR,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IACV,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EACP,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,SAAS,GAAQ,CACzD,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,WAAW,CAAC,MAAM,GAC1B,CACH,EACA,aAAa,IACT,CACR,EAEA,CAAC,CAAC,WAAW,IAAI,QAAQ,IAAI,YAAY,CAAC,IAAI,CAC7C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,eAAe,aAExB,CAAC,WAAW,IAAI,aAAa,EAC7B,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YACrD,QAAQ,GACU,CACtB,EACA,QAAQ,IACJ,CACR,IACgB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { focusNonInteractiveElement, getActiveElement } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n function InfoDialog(\n { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement \| HTMLSpanElement>(null);\n const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);\n\n const setFocus = () => {\n if (progressProp) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, headingText);\n } else if (dialogRef.current) {\n focusNonInteractiveElement(dialogRef.current, headingText);\n }\n };\n\n useEscape(\n e => {\n onDismiss?.();\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss]\n );\n\n useOuterEvent('mousedown', [~~target~~, dialogRef], () => {\n onDismiss?.();\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progressProp) {\n setFocus();\n }\n }, [progressProp]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n onDismiss?.();\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n ~~target.~~addEventListener('click', closeDialog);\n\n return () => {\n ~~target.~~removeEventListener('click', closeDialog);\n };\n }, []);\n\n const heading = headingProp ? (\n <Text ref={headingRef} id={headingId} variant='h2'>\n {headingText}\n </Text>\n ) : null;\n\n const progress = (\n <Progress\n visible={!!progressProp}\n focusOnVisible\n placement='local'\n message={typeof progressProp === 'string' ? progressProp : undefined}\n />\n );\n\n const dismissButton = (\n <StyledDismissButton\n icon\n variant='simple'\n onClick={() => {\n onDismiss();\n }}\n label={t('close')}\n >\n <Icon name='times' />\n </StyledDismissButton>\n );\n\n return (\n <StyledInfoDialog\n {...restProps}\n {...(typeof headingProp === 'string'\n ? { 'aria-labelledby': headingId }\n : { 'aria-label': headingProp?.primary })}\n arrow\n target={target}\n progress={progressProp}\n ref={dialogRef}\n >\n {headingProp && heading && (\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n {typeof headingProp === 'string' ? (\n heading\n ) : (\n <SummaryItem\n ref={headingRef}\n primary={heading}\n secondary={\n headingProp.secondary ? (\n <Text variant='secondary'>{headingProp.secondary}</Text>\n ) : undefined\n }\n visual={headingProp.visual}\n />\n )}\n {dismissButton}\n </Flex>\n )}\n\n {(!headingProp \|\| children \|\| progressProp) && (\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {!headingProp && dismissButton}\n {children && (\n <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n {children}\n </StyledChildrenWrap>\n )}\n {progress}\n </Flex>\n )}\n </StyledInfoDialog>\n );\n }\n);\n\nexport default InfoDialog;\n"]}
1	+ {"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { focusNonInteractiveElement, getActiveElement } from '../../utils';\nimport type { RefElement } from '../../types';\nimport getResolvedTarget from '../Popover/getResolvedTarget';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n function InfoDialog(\n { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement \| HTMLSpanElement>(null);\n const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);\n const resolvedTarget = getResolvedTarget(target);\n\n const setFocus = () => {\n if (progressProp) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, headingText);\n } else if (dialogRef.current) {\n focusNonInteractiveElement(dialogRef.current, headingText);\n }\n };\n\n useEscape(\n e => {\n onDismiss?.();\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss]\n );\n\n useOuterEvent('mousedown', [resolvedTarget, dialogRef], () => {\n onDismiss?.();\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progressProp) {\n setFocus();\n }\n }, [progressProp]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n onDismiss?.();\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n resolvedTarget?.addEventListener('click', closeDialog);\n\n return () => {\n resolvedTarget?.removeEventListener('click', closeDialog);\n };\n }, [onDismiss, resolvedTarget]);\n\n const heading = headingProp ? (\n <Text ref={headingRef} id={headingId} variant='h2'>\n {headingText}\n </Text>\n ) : null;\n\n const progress = (\n <Progress\n visible={!!progressProp}\n focusOnVisible\n placement='local'\n message={typeof progressProp === 'string' ? progressProp : undefined}\n />\n );\n\n const dismissButton = (\n <StyledDismissButton\n icon\n variant='simple'\n onClick={() => {\n onDismiss();\n }}\n label={t('close')}\n >\n <Icon name='times' />\n </StyledDismissButton>\n );\n\n return (\n <StyledInfoDialog\n {...restProps}\n {...(typeof headingProp === 'string'\n ? { 'aria-labelledby': headingId }\n : { 'aria-label': headingProp?.primary })}\n arrow\n target={target}\n progress={progressProp}\n ref={dialogRef}\n >\n {headingProp && heading && (\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n {typeof headingProp === 'string' ? (\n heading\n ) : (\n <SummaryItem\n ref={headingRef}\n primary={heading}\n secondary={\n headingProp.secondary ? (\n <Text variant='secondary'>{headingProp.secondary}</Text>\n ) : undefined\n }\n visual={headingProp.visual}\n />\n )}\n {dismissButton}\n </Flex>\n )}\n\n {(!headingProp \|\| children \|\| progressProp) && (\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {!headingProp && dismissButton}\n {children && (\n <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n {children}\n </StyledChildrenWrap>\n )}\n {progress}\n </Flex>\n )}\n </StyledInfoDialog>\n );\n }\n);\n\nexport default InfoDialog;\n"]}

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

@@ -12,6 +12,12 @@ export type InlineEditProps = WithAttributes<'div', TestIdProp<typeof elements>
      * Pass this value to show the dialog and conversely set to undefined to hide.
      */
     editForm?: ReactNode;
+    /**
+     * Use when the edit form contains multiple input fields.
+     * Renders form actions at end of edit dialog.
+     * @default false
+     */
+    multi?: boolean;
     /** Called when the edit button is clicked. */
     onEdit: () => void;
     /** Called when the user cancels the edit. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAE7D~~,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO/F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAUtD,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,~~CA4D~~/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO/F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAUtD,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA2G/D,CAAC;AAEH,eAAe,UAAU,CAAC"}