@pega/cosmos-react-core 10.0.0-build.2.9 → 10.0.0-build.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYvD,eAAO,MAAM,wBAAwB;;2JAAmB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,6NAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;YA4BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;oBAAgC,OAAO;YAsBpE,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;uRAWlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAYnC,CAAC;AAIH,eAAO,MAAM,eAAe,kYAK3B,CAAC;AAIF,eAAO,MAAM,aAAa;eAA2B,OAAO;cAAY,OAAO;YAiD9E,CAAC;AAIF,eAAO,MAAM,eAAe;;;;mBAM1B,CAAC;AAIH,eAAO,MAAM,UAAU,qQAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAQjC,CAAC"}
+{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,eAAO,MAAM,wBAAwB;;iKAAmB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,6NAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;YA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;oBAAgC,OAAO;YAsBpE,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;uRAWlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAYnC,CAAC;AAIH,eAAO,MAAM,eAAe,kYAK3B,CAAC;AAIF,eAAO,MAAM,aAAa;eACb,OAAO;cACR,OAAO;gBACL,UAAU;YAwDtB,CAAC;AAIH,eAAO,MAAM,eAAe;;;;mBAM1B,CAAC;AAIH,eAAO,MAAM,UAAU,qQAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0MAQjC,CAAC"}

package/lib/components/ListToolbar/ListToolbar.styles.js

@@ -20,7 +20,6 @@ export const StyledSearchForm = styled.div `
   }
 `;
 export const StyledViewSelector = styled.button(({ theme, required }) => {
-    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { urgent } = theme.base.palette;
     const hitAreaMouse = theme.base['hit-area']['mouse-min'];
     const hitAreaFinger = theme.base['hit-area']['finger-min'];
@@ -31,7 +30,6 @@ export const StyledViewSelector = styled.button(({ theme, required }) => {
 
     ${StyledText} {
       white-space: nowrap;
-      font-size: ${fontSizes[theme.components.text.h2['font-size']]};
       line-height: ${hitAreaMouse};
       word-break: break-word;
       @media (pointer: coarse) {
@@ -102,52 +100,60 @@ export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
     margin-inline-end: ${theme.base.spacing};
   `);
 StyledErrorIcon.defaultProps = defaultThemeProp;
-export const StyledHeading = styled.div(({ theme, required, showName }) => {
+export const StyledHeading = styled.div(({ theme, required, showName, headingTag }) => {
     const { urgent } = theme.base.palette;
     const hitAreaCompact = theme.base['hit-area'].compact;
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const fontSizeKeys = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+    const headingFontSizeKey = theme.components.text[headingTag]['font-size'];
+    const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];
     return css `
-      min-width: 0;
-      position: relative;
-      line-height: ${hitAreaCompact};
-      word-break: break-word;
-      display: flex;
-      align-items: center;
+    min-width: 0;
+    position: relative;
+    line-height: ${hitAreaCompact};
+    word-break: break-word;
+    display: flex;
+    align-items: center;
 
-      ${required &&
+    ${required &&
         css `
-        padding-inline-end: calc(1.5 * ${theme.base.spacing});
-      `}
-      &::after {
-        display: ${required ? 'inline' : 'none'};
-        content: '\\00a0*';
-        vertical-align: top;
-        color: ${urgent};
-        position: absolute;
-        inset-inline-end: 0;
-        inset-block-start: 0;
-      }
+      padding-inline-end: calc(1.5 * ${theme.base.spacing});
+    `}
+    &::after {
+      display: ${required ? 'inline' : 'none'};
+      content: '\\00a0*';
+      vertical-align: top;
+      color: ${urgent};
+      position: absolute;
+      inset-inline-end: 0;
+      inset-block-start: 0;
+    }
 
-      ${StyledErrorIcon} {
-        margin-inline-end: calc(0.5 * ${theme.base.spacing});
-      }
+    ${StyledErrorIcon} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+    }
 
-      ${StyledText} {
-        line-height: ${hitAreaCompact};
-        ${ellipsisOverflow};
-      }
+    ${StyledText} {
+      line-height: ${hitAreaCompact};
+      ${ellipsisOverflow};
+    }
 
-      ${!required &&
+    ${StyledViewSelector} {
+      font-size: ${headingFontSize};
+    }
+
+    ${!required &&
         !showName &&
         css `
-        > ${StyledText} {
-          ${hideVisually}
-        }
+      > ${StyledText} {
+        ${hideVisually}
+      }
 
-        &:not(:has(${StyledViewSelector})) {
-          margin-inline-end: -${theme.base.spacing};
-        }
-      `}
-    `;
+      &:not(:has(${StyledViewSelector})) {
+        margin-inline-end: -${theme.base.spacing};
+      }
+    `}
+  `;
 });
 StyledHeading.defaultProps = defaultThemeProp;
 export const StyledCountMeta = styled(StyledCount)(({ theme }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    max-width: 100%;\n\n    ${StyledText} {\n      white-space: nowrap;\n      font-size: ${fontSizes[theme.components.text.h2['font-size'] as FontSize]};\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme, isSmallOrAbove }) => {\n    return css`\n      width: 100%;\n      margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n      ${isSmallOrAbove &&\n      css`\n        ${StyledExpandSearchButton} {\n          margin-inline-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSearchInput} {\n          margin-inline-start: ${theme.base.spacing};\n\n          input {\n            min-width: 20ch;\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n    max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n    ${StyledDialogContent} {\n      @media (height >= 31.25rem) {\n        min-height: 2rem;\n      }\n    }\n  `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledButton}:focus {\n      z-index: 1;\n    }\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{ required?: boolean; showName: boolean }>(\n  ({ theme, required, showName }) => {\n    const { urgent } = theme.base.palette;\n    const hitAreaCompact = theme.base['hit-area'].compact;\n\n    return css`\n      min-width: 0;\n      position: relative;\n      line-height: ${hitAreaCompact};\n      word-break: break-word;\n      display: flex;\n      align-items: center;\n\n      ${required &&\n      css`\n        padding-inline-end: calc(1.5 * ${theme.base.spacing});\n      `}\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n        position: absolute;\n        inset-inline-end: 0;\n        inset-block-start: 0;\n      }\n\n      ${StyledErrorIcon} {\n        margin-inline-end: calc(0.5 * ${theme.base.spacing});\n      }\n\n      ${StyledText} {\n        line-height: ${hitAreaCompact};\n        ${ellipsisOverflow};\n      }\n\n      ${!required &&\n      !showName &&\n      css`\n        > ${StyledText} {\n          ${hideVisually}\n        }\n\n        &:not(:has(${StyledViewSelector})) {\n          margin-inline-end: -${theme.base.spacing};\n        }\n      `}\n    `;\n  }\n);\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    margin-inline-end: ${theme.base.spacing};\n    width: fit-content;\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      components: { 'form-field': formField }\n    }\n  }) => css`\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${formField[status]['status-color']};\n    `}\n  `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n  ({ theme }) => css`\n    margin-block: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledSearchInput} {\n      max-width: 100%;\n    }\n  `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { StyledDialogContent } from '../Dialog/Dialog.styles';\nimport { StyledCount } from '../Badges/Count';\nimport type { FormControlProps } from '../FormControl';\nimport Icon from '../Icon';\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledText } from '../Text';\nimport type { HeadingTag } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Button, { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledExpandSearchButton = styled(Button)``;\nStyledExpandSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    max-width: 100%;\n\n    ${StyledText} {\n      white-space: nowrap;\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme, isSmallOrAbove }) => {\n    return css`\n      width: 100%;\n      margin-block-end: calc(0.5 * ${theme.base.spacing});\n\n      ${isSmallOrAbove &&\n      css`\n        ${StyledExpandSearchButton} {\n          margin-inline-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSearchInput} {\n          margin-inline-start: ${theme.base.spacing};\n\n          input {\n            min-width: 20ch;\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n    max-width: calc(100vw - 4 * ${theme.base.spacing});\n\n    ${StyledDialogContent} {\n      @media (height >= 31.25rem) {\n        min-height: 2rem;\n      }\n    }\n  `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledButton}:focus {\n      z-index: 1;\n    }\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledHeading = styled.div<{\n  required?: boolean;\n  showName: boolean;\n  headingTag: HeadingTag;\n}>(({ theme, required, showName, headingTag }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaCompact = theme.base['hit-area'].compact;\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const fontSizeKeys: FontSize[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];\n  const headingFontSizeKey = theme.components.text[headingTag]['font-size'];\n  const headingFontSize = fontSizes[fontSizeKeys.find(k => k === headingFontSizeKey) ?? 'm'];\n\n  return css`\n    min-width: 0;\n    position: relative;\n    line-height: ${hitAreaCompact};\n    word-break: break-word;\n    display: flex;\n    align-items: center;\n\n    ${required &&\n    css`\n      padding-inline-end: calc(1.5 * ${theme.base.spacing});\n    `}\n    &::after {\n      display: ${required ? 'inline' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n    }\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledText} {\n      line-height: ${hitAreaCompact};\n      ${ellipsisOverflow};\n    }\n\n    ${StyledViewSelector} {\n      font-size: ${headingFontSize};\n    }\n\n    ${!required &&\n    !showName &&\n    css`\n      > ${StyledText} {\n        ${hideVisually}\n      }\n\n      &:not(:has(${StyledViewSelector})) {\n        margin-inline-end: -${theme.base.spacing};\n      }\n    `}\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(StyledCount)(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    margin-inline-end: ${theme.base.spacing};\n    width: fit-content;\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      components: { 'form-field': formField }\n    }\n  }) => css`\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${formField[status]['status-color']};\n    `}\n  `\n);\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledSearchContainer = styled(Flex)(\n  ({ theme }) => css`\n    margin-block: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledSearchInput} {\n      max-width: 100%;\n    }\n  `\n);\n\nStyledSearchContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIjB,oBAAoB,EAErB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAYrB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,qEAAqE;IACrE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IACnE,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yOAiB5B,CAAC;;;;AAuPF,wBAA6D"}
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIjB,oBAAoB,EAErB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAYrB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,qEAAqE;IACrE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IACnE,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yOAiB5B,CAAC;;;;AAwPF,wBAA6D"}

package/lib/components/MenuButton/MenuButton.js

@@ -157,6 +157,7 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
                         // When clicking an item (by mouse or keyboard) and the menu is not multi-select, close the menu.
                         if (menu.mode !== 'multi-select') {
                             setIsOpen(false);
+                            buttonRef.current?.focus();
                         }
                         menu.onItemClick?.(itemId, e);
                     }, focusControlEl: menu.focusControlEl || buttonRef.current || undefined })) })] }));

package/lib/components/MenuButton/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type {\n  MouseEventHandler,\n  MouseEvent,\n  UIEvent,\n  PropsWithoutRef,\n  KeyboardEventHandler,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useConsolidatedRef,\n  useUID,\n  useFocusWithin,\n  useDirection,\n  useTestIds,\n  useEscape,\n  useElement\n} from '../../hooks';\nimport Button, { StyledButton } from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Popover, { StyledPopover } from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport { getActiveElement, getFocusables, isInstance, withTestIds } from '../../utils';\n\nimport { getMenuButtonTestIds } from './MenuButton.test-ids';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The text for the MenuButton also used to set the aria-label. */\n  text: string;\n  /**\n   * Determines the Button variant for the MenuButton.\n   * @default 'secondary'\n   */\n  variant?: ButtonProps['variant'];\n  /** The name of the icon for the MenuButton. */\n  icon?: string;\n  /** Only display the icon. The text prop will be forwarded to a tooltip. */\n  iconOnly?: ButtonProps['icon'];\n  /** The total count representing the list data which was selected. */\n  count?: CountProps['children'];\n  /** The click handler for the MenuButton. */\n  onClick?: MouseEventHandler;\n  /** Menu related props. */\n  menu?: MenuProps;\n  /** Popover related props. */\n  popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n  /** DOM id for the button element. */\n  id?: string;\n  /** Ref for the button element. */\n  ref?: ButtonProps['ref'];\n  /** The keydown handler for the MenuButton. */\n  onKeyDown?: KeyboardEventHandler;\n  /** Whether to display an arrow when only the icon is displayed. */\n  showArrow?: boolean;\n}\n\nexport const StyledMenuButton = styled.button(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      gap: ${spacing};\n      flex-shrink: 0;\n      white-space: nowrap;\n      max-width: 100%;\n\n      & + ${StyledPopover} + ${StyledButton} {\n        margin-inline-start: ${spacing};\n      }\n    `;\n  }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonText = styled.span`\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst StyledMenuButtonChildren = styled.span<{ padIcon?: boolean }>(({ theme, padIcon }) => {\n  const {\n    base: {\n      'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n    },\n    components: {\n      icon: {\n        size: { s: iconSize }\n      }\n    }\n  } = theme;\n\n  return css`\n    max-width: 100%;\n\n    ${padIcon &&\n    css`\n      padding-inline-start: calc((${hitAreaMouse} - ${iconSize}) / 2);\n\n      @media (pointer: coarse) {\n        padding-inline-start: calc(${hitAreaFinger} - ${iconSize} * 2);\n      }\n    `}\n\n    ${StyledIcon}:last-child:not(:first-child) {\n      /* Offsets the flex gap to make the down arrow appear to trail the text. */\n      margin-inline-start: -${theme.base.spacing};\n    }\n  `;\n});\n\nStyledMenuButtonChildren.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n  min-width: 20ch;\n`;\n\nconst MenuButton: ForwardRefForwardPropsComponent<MenuButtonProps> = forwardRef(function MenuButton(\n  props: PropsWithoutRef<MenuButtonProps>,\n  ref: MenuButtonProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    text,\n    menu,\n    popover,\n    onClick,\n    icon,\n    count,\n    iconOnly = false,\n    showArrow,\n    onKeyDown: onKeyDownProp,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getMenuButtonTestIds);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const buttonRef = useConsolidatedRef(ref);\n  // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read\n  const [, forceRerender] = useElement(null);\n  const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref, forceRerender);\n  const filterInputRef = useConsolidatedRef<HTMLInputElement>(menu?.filterInputProps?.ref);\n  const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n  // FIXME: Type assertion required for issue in useFocusWithin generic\n  useFocusWithin<HTMLElement>(\n    [popoverRef, buttonRef],\n    useCallback((isFocused: boolean) => {\n      if (!isFocused) setIsOpen(false);\n    }, [])\n  );\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n    }\n  }, buttonRef);\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n      buttonRef.current?.focus();\n    }\n  }, menu?.focusControlEl);\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n      buttonRef.current?.focus();\n    }\n  }, filterInputRef);\n\n  const { rtl } = useDirection();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      onKeyDownProp?.(e);\n      if (e.key !== 'Tab' || !menu) return;\n\n      const footerEl = menuRef.current?.querySelector('footer');\n      if (!footerEl) return;\n\n      const tabbingForward = !e.shiftKey;\n\n      if (tabbingForward) {\n        const footerFocusables = getFocusables(footerEl);\n\n        if (footerFocusables.length > 0) {\n          e.preventDefault();\n          footerFocusables[0].focus();\n          return;\n        }\n      }\n\n      setIsOpen(false);\n    },\n    [menu]\n  );\n\n  return (\n    <>\n      <Button\n        data-testid={testIds.root}\n        as={StyledMenuButton}\n        aria-label={text}\n        {...restProps}\n        id={id}\n        ref={buttonRef}\n        aria-expanded={isOpen}\n        aria-haspopup='menu'\n        aria-controls={isOpen ? `${id}-popover` : undefined}\n        label={iconOnly && !isOpen ? text : undefined}\n        onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n          // e.detail is 0 when triggered by keyboard.\n          const mouseClick = e.detail > 0;\n\n          if (isOpen) {\n            if (mouseClick) {\n              // Close the menu if it is open and it is a *mouse* click on the button.\n              setIsOpen(false);\n            }\n          } else {\n            // Open the menu if it's closed, for mouse or keyboard click.\n            setIsOpen(true);\n          }\n\n          // If the menu is closed or the user mouse clicks.\n          // This avoids Enter key firing onClick when selecting a menu item.\n          if (!isOpen || mouseClick) {\n            onClick?.(e);\n          }\n        }}\n        onKeyDown={onKeyDown}\n        icon={iconOnly}\n      >\n        <Flex\n          as={StyledMenuButtonChildren}\n          container={{ alignItems: 'center', gap: 1 }}\n          padIcon={iconOnly && showArrow}\n        >\n          {icon && <Icon name={icon} />}\n          {!iconOnly && (\n            <>\n              <StyledMenuButtonText>{text}</StyledMenuButtonText>\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </>\n          )}\n          {((!iconOnly && showArrow === undefined) || showArrow) && (\n            <Icon name='arrow-micro-down' />\n          )}\n        </Flex>\n      </Button>\n\n      <StyledMenuButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        hideOnTargetHidden\n        {...popover}\n        id={`${id}-popover`}\n        show={!!menu && isOpen}\n        target={buttonRef.current}\n        ref={popoverRef}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key !== 'Tab' || !buttonRef.current) return;\n\n          const footerEl = menuRef.current?.querySelector('footer');\n          if (!footerEl || !footerEl?.contains(getActiveElement())) return;\n\n          const footerFocusables = getFocusables(footerEl);\n\n          if (isInstance(e.target, HTMLElement)) {\n            const currentIndex = footerFocusables.indexOf(e.target);\n            const tabbingForward = !e.shiftKey;\n            const isLastFocusable = currentIndex === footerFocusables.length - 1;\n\n            if (tabbingForward && isLastFocusable) {\n              e.preventDefault();\n              const rootNode = buttonRef.current.getRootNode();\n              if (!isInstance(rootNode, Document, ShadowRoot)) return;\n\n              const allFocusables = getFocusables(rootNode);\n              const nextIndex = allFocusables.indexOf(buttonRef.current) + 1;\n\n              allFocusables[nextIndex]?.focus();\n              setIsOpen(false);\n            } else if (!tabbingForward && currentIndex === 0) {\n              e.preventDefault();\n              buttonRef.current?.focus();\n            }\n          }\n        }}\n      >\n        {menu && (\n          <Menu\n            testId={testIds.root}\n            {...menu}\n            ref={menuRef}\n            loading={menu.loading}\n            items={menu.items}\n            onItemClick={(itemId, e) => {\n              // When clicking an item (by mouse or keyboard) and the menu is not multi-select, close the menu.\n              if (menu.mode !== 'multi-select') {\n                setIsOpen(false);\n              }\n              menu.onItemClick?.(itemId, e);\n            }}\n            focusControlEl={menu.focusControlEl || buttonRef.current || undefined}\n          />\n        )}\n      </StyledMenuButtonPopover>\n    </>\n  );\n});\n\nexport default withTestIds(MenuButton, getMenuButtonTestIds);\n"]}
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type {\n  MouseEventHandler,\n  MouseEvent,\n  UIEvent,\n  PropsWithoutRef,\n  KeyboardEventHandler,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useConsolidatedRef,\n  useUID,\n  useFocusWithin,\n  useDirection,\n  useTestIds,\n  useEscape,\n  useElement\n} from '../../hooks';\nimport Button, { StyledButton } from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Popover, { StyledPopover } from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport { getActiveElement, getFocusables, isInstance, withTestIds } from '../../utils';\n\nimport { getMenuButtonTestIds } from './MenuButton.test-ids';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The text for the MenuButton also used to set the aria-label. */\n  text: string;\n  /**\n   * Determines the Button variant for the MenuButton.\n   * @default 'secondary'\n   */\n  variant?: ButtonProps['variant'];\n  /** The name of the icon for the MenuButton. */\n  icon?: string;\n  /** Only display the icon. The text prop will be forwarded to a tooltip. */\n  iconOnly?: ButtonProps['icon'];\n  /** The total count representing the list data which was selected. */\n  count?: CountProps['children'];\n  /** The click handler for the MenuButton. */\n  onClick?: MouseEventHandler;\n  /** Menu related props. */\n  menu?: MenuProps;\n  /** Popover related props. */\n  popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n  /** DOM id for the button element. */\n  id?: string;\n  /** Ref for the button element. */\n  ref?: ButtonProps['ref'];\n  /** The keydown handler for the MenuButton. */\n  onKeyDown?: KeyboardEventHandler;\n  /** Whether to display an arrow when only the icon is displayed. */\n  showArrow?: boolean;\n}\n\nexport const StyledMenuButton = styled.button(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      gap: ${spacing};\n      flex-shrink: 0;\n      white-space: nowrap;\n      max-width: 100%;\n\n      & + ${StyledPopover} + ${StyledButton} {\n        margin-inline-start: ${spacing};\n      }\n    `;\n  }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonText = styled.span`\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst StyledMenuButtonChildren = styled.span<{ padIcon?: boolean }>(({ theme, padIcon }) => {\n  const {\n    base: {\n      'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n    },\n    components: {\n      icon: {\n        size: { s: iconSize }\n      }\n    }\n  } = theme;\n\n  return css`\n    max-width: 100%;\n\n    ${padIcon &&\n    css`\n      padding-inline-start: calc((${hitAreaMouse} - ${iconSize}) / 2);\n\n      @media (pointer: coarse) {\n        padding-inline-start: calc(${hitAreaFinger} - ${iconSize} * 2);\n      }\n    `}\n\n    ${StyledIcon}:last-child:not(:first-child) {\n      /* Offsets the flex gap to make the down arrow appear to trail the text. */\n      margin-inline-start: -${theme.base.spacing};\n    }\n  `;\n});\n\nStyledMenuButtonChildren.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n  min-width: 20ch;\n`;\n\nconst MenuButton: ForwardRefForwardPropsComponent<MenuButtonProps> = forwardRef(function MenuButton(\n  props: PropsWithoutRef<MenuButtonProps>,\n  ref: MenuButtonProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    text,\n    menu,\n    popover,\n    onClick,\n    icon,\n    count,\n    iconOnly = false,\n    showArrow,\n    onKeyDown: onKeyDownProp,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getMenuButtonTestIds);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const buttonRef = useConsolidatedRef(ref);\n  // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read\n  const [, forceRerender] = useElement(null);\n  const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref, forceRerender);\n  const filterInputRef = useConsolidatedRef<HTMLInputElement>(menu?.filterInputProps?.ref);\n  const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n  // FIXME: Type assertion required for issue in useFocusWithin generic\n  useFocusWithin<HTMLElement>(\n    [popoverRef, buttonRef],\n    useCallback((isFocused: boolean) => {\n      if (!isFocused) setIsOpen(false);\n    }, [])\n  );\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n    }\n  }, buttonRef);\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n      buttonRef.current?.focus();\n    }\n  }, menu?.focusControlEl);\n\n  useEscape(e => {\n    if (isOpen) {\n      setIsOpen(false);\n      e.stopPropagation();\n      buttonRef.current?.focus();\n    }\n  }, filterInputRef);\n\n  const { rtl } = useDirection();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      onKeyDownProp?.(e);\n      if (e.key !== 'Tab' || !menu) return;\n\n      const footerEl = menuRef.current?.querySelector('footer');\n      if (!footerEl) return;\n\n      const tabbingForward = !e.shiftKey;\n\n      if (tabbingForward) {\n        const footerFocusables = getFocusables(footerEl);\n\n        if (footerFocusables.length > 0) {\n          e.preventDefault();\n          footerFocusables[0].focus();\n          return;\n        }\n      }\n\n      setIsOpen(false);\n    },\n    [menu]\n  );\n\n  return (\n    <>\n      <Button\n        data-testid={testIds.root}\n        as={StyledMenuButton}\n        aria-label={text}\n        {...restProps}\n        id={id}\n        ref={buttonRef}\n        aria-expanded={isOpen}\n        aria-haspopup='menu'\n        aria-controls={isOpen ? `${id}-popover` : undefined}\n        label={iconOnly && !isOpen ? text : undefined}\n        onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n          // e.detail is 0 when triggered by keyboard.\n          const mouseClick = e.detail > 0;\n\n          if (isOpen) {\n            if (mouseClick) {\n              // Close the menu if it is open and it is a *mouse* click on the button.\n              setIsOpen(false);\n            }\n          } else {\n            // Open the menu if it's closed, for mouse or keyboard click.\n            setIsOpen(true);\n          }\n\n          // If the menu is closed or the user mouse clicks.\n          // This avoids Enter key firing onClick when selecting a menu item.\n          if (!isOpen || mouseClick) {\n            onClick?.(e);\n          }\n        }}\n        onKeyDown={onKeyDown}\n        icon={iconOnly}\n      >\n        <Flex\n          as={StyledMenuButtonChildren}\n          container={{ alignItems: 'center', gap: 1 }}\n          padIcon={iconOnly && showArrow}\n        >\n          {icon && <Icon name={icon} />}\n          {!iconOnly && (\n            <>\n              <StyledMenuButtonText>{text}</StyledMenuButtonText>\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </>\n          )}\n          {((!iconOnly && showArrow === undefined) || showArrow) && (\n            <Icon name='arrow-micro-down' />\n          )}\n        </Flex>\n      </Button>\n\n      <StyledMenuButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        hideOnTargetHidden\n        {...popover}\n        id={`${id}-popover`}\n        show={!!menu && isOpen}\n        target={buttonRef.current}\n        ref={popoverRef}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key !== 'Tab' || !buttonRef.current) return;\n\n          const footerEl = menuRef.current?.querySelector('footer');\n          if (!footerEl || !footerEl?.contains(getActiveElement())) return;\n\n          const footerFocusables = getFocusables(footerEl);\n\n          if (isInstance(e.target, HTMLElement)) {\n            const currentIndex = footerFocusables.indexOf(e.target);\n            const tabbingForward = !e.shiftKey;\n            const isLastFocusable = currentIndex === footerFocusables.length - 1;\n\n            if (tabbingForward && isLastFocusable) {\n              e.preventDefault();\n              const rootNode = buttonRef.current.getRootNode();\n              if (!isInstance(rootNode, Document, ShadowRoot)) return;\n\n              const allFocusables = getFocusables(rootNode);\n              const nextIndex = allFocusables.indexOf(buttonRef.current) + 1;\n\n              allFocusables[nextIndex]?.focus();\n              setIsOpen(false);\n            } else if (!tabbingForward && currentIndex === 0) {\n              e.preventDefault();\n              buttonRef.current?.focus();\n            }\n          }\n        }}\n      >\n        {menu && (\n          <Menu\n            testId={testIds.root}\n            {...menu}\n            ref={menuRef}\n            loading={menu.loading}\n            items={menu.items}\n            onItemClick={(itemId, e) => {\n              // When clicking an item (by mouse or keyboard) and the menu is not multi-select, close the menu.\n              if (menu.mode !== 'multi-select') {\n                setIsOpen(false);\n                buttonRef.current?.focus();\n              }\n              menu.onItemClick?.(itemId, e);\n            }}\n            focusControlEl={menu.focusControlEl || buttonRef.current || undefined}\n          />\n        )}\n      </StyledMenuButtonPopover>\n    </>\n  );\n});\n\nexport default withTestIds(MenuButton, getMenuButtonTestIds);\n"]}

package/lib/components/Number/NumberDisplay.d.ts

@@ -21,6 +21,11 @@ export type NumberDisplayProps = WithAttributes<'span', NoChildrenProp & {
          * @default true
          */
         groupSeparators?: boolean;
+        /**
+         * Determines negative value notation: using minus sign or parentheses (accounting format).
+         * @default 'minus-sign'
+         */
+        negative?: 'minus-sign' | 'parentheses';
     };
 }>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<NumberDisplayProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/components/Number/NumberDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;CACH,CACF,CAAC;;AAEF,wBA+BE"}
+{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;WAGG;QACH,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;KACzC,CAAC;CACH,CACF,CAAC;;AAEF,wBAiCE"}

package/lib/components/Number/NumberDisplay.js

@@ -3,13 +3,14 @@ import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
 import NoValue from '../NoValue/NoValue';
 import { getFraction, getFormattedValue } from './utils';
-export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) {
+export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true, negative } = {}, ...restProps }, ref) {
     const { locale } = useConfiguration();
     return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (getFormattedValue(value.toString(), locale, unit, {
             notation,
             useGrouping: groupSeparators,
             maximumFractionDigits: fractionDigits,
-            minimumFractionDigits: fractionDigits
+            minimumFractionDigits: fractionDigits,
+            negative
         })) : (_jsx(NoValue, {})) }));
 });
 //# sourceMappingURL=NumberDisplay.js.map

package/lib/components/Number/NumberDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA+BzD,eAAe,UAAU,CACvB,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport type NumberDisplayProps = WithAttributes<\n  'span',\n  NoChildrenProp & {\n    /** Number value */\n    value?: number | bigint;\n    /** Unit to be included in the text, for example '%' */\n    unit?: string;\n\n    formattingOptions?: {\n      /**\n       * Value display notation.\n       * @default 'standard'\n       */\n      notation?: 'standard' | 'compact';\n      /**\n       * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n       * Maximum is 20, default is value precision.\n       * @default variable\n       */\n      fractionDigits?: number;\n      /**\n       * Determines whether group separators should be shown.\n       * @default true\n       */\n      groupSeparators?: boolean;\n    };\n  }\n>;\n\nexport default forwardRef<RefElement<NumberDisplayProps>, PropsWithoutRef<NumberDisplayProps>>(\n  function NumberDisplay(\n    {\n      value,\n      unit = '',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true\n      } = {},\n      ...restProps\n    },\n    ref\n  ) {\n    const { locale } = useConfiguration();\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          getFormattedValue(value.toString(), locale, unit, {\n            notation,\n            useGrouping: groupSeparators,\n            maximumFractionDigits: fractionDigits,\n            minimumFractionDigits: fractionDigits\n          })\n        ) : (\n          <NoValue />\n        )}\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoCzD,eAAe,UAAU,CACvB,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,QAAQ,EACT,GAAG,EAAE,EACN,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;YACrC,QAAQ;SACT,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport type NumberDisplayProps = WithAttributes<\n  'span',\n  NoChildrenProp & {\n    /** Number value */\n    value?: number | bigint;\n    /** Unit to be included in the text, for example '%' */\n    unit?: string;\n\n    formattingOptions?: {\n      /**\n       * Value display notation.\n       * @default 'standard'\n       */\n      notation?: 'standard' | 'compact';\n      /**\n       * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n       * Maximum is 20, default is value precision.\n       * @default variable\n       */\n      fractionDigits?: number;\n      /**\n       * Determines whether group separators should be shown.\n       * @default true\n       */\n      groupSeparators?: boolean;\n      /**\n       * Determines negative value notation: using minus sign or parentheses (accounting format).\n       * @default 'minus-sign'\n       */\n      negative?: 'minus-sign' | 'parentheses';\n    };\n  }\n>;\n\nexport default forwardRef<RefElement<NumberDisplayProps>, PropsWithoutRef<NumberDisplayProps>>(\n  function NumberDisplay(\n    {\n      value,\n      unit = '',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true,\n        negative\n      } = {},\n      ...restProps\n    },\n    ref\n  ) {\n    const { locale } = useConfiguration();\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          getFormattedValue(value.toString(), locale, unit, {\n            notation,\n            useGrouping: groupSeparators,\n            maximumFractionDigits: fractionDigits,\n            minimumFractionDigits: fractionDigits,\n            negative\n          })\n        ) : (\n          <NoValue />\n        )}\n      </span>\n    );\n  }\n);\n"]}

package/lib/components/Number/utils.d.ts

@@ -1,7 +1,9 @@
 export declare function getDecimalSign(locale: Intl.UnicodeBCP47LocaleIdentifier, options?: Intl.NumberFormatOptions): string;
 export declare function getFraction(value: string): string;
 export declare function getCleanedValue(value: string, decimalSign: string, maximumFractionDigits: number): string;
-export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits">) => string;
+export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits, negative }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits"> & {
+    negative?: "minus-sign" | "parentheses";
+}) => string;
 export declare function isValueInRange(value: number, min?: number, max?: number): boolean;
 export declare function getIncrementedValue(value: string, min: number, max: number, step: number): string;
 export declare function getDecrementedValue(value: string, min: number, max: number, step: number): string;

package/lib/components/Number/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,0EAKG,IAAI,CACL,IAAI,CAAC,mBAAmB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC1E,WAyCP,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,oFAMG,IAAI,CACL,IAAI,CAAC,mBAAmB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC/E,GAAG;IAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;CAAO,WA2CrD,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}

package/lib/components/Number/utils.js

@@ -29,9 +29,11 @@ const isValidUnit = (unit) => {
         return false;
     }
 };
-export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits } = {}) => {
+export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits, negative = 'minus-sign' } = {}) => {
     const isUnit = unit ? isValidUnit(unit) : false;
-    const [integer, fractionPart] = value.split('.', 2);
+    const isNegative = value.startsWith('-');
+    const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;
+    const [integer = '0', fractionPart] = formattingValue.split('.', 2);
     const formatter = new Intl.NumberFormat(locale, {
         notation,
         useGrouping,
@@ -41,10 +43,10 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
         unit: isUnit ? unit : undefined,
         numberingSystem: 'latn'
     });
-    let formatted = value;
-    if (value && !Number.isNaN(parseFloat(integer))) {
+    let formatted = formattingValue;
+    if (formattingValue && !Number.isNaN(parseFloat(integer))) {
         const endsWithDot = fractionPart === '';
-        const valueNumber = endsWithDot ? `${value}1` : value;
+        const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;
         formatted =
             formatter
                 .formatToParts(valueNumber)
@@ -57,12 +59,12 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
     else if (unit) {
         if (isUnit)
             formatted = formatter
-                .formatToParts(value.startsWith('-') ? -1 : 1)
+                .formatToParts(formattingValue.startsWith('-') ? -1 : 1)
                 .reduce((result, { type, value: part }) => ['unit', 'minusSign'].includes(type) ? result + part : result, '');
         else
-            formatted = value.startsWith('-') ? `- ${unit}` : unit;
+            formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;
     }
-    return formatted;
+    return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;
 };
 export function isValueInRange(value, min, max) {
     return !((min !== undefined && value < min) || (max !== undefined && value > max));

package/lib/components/Number/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,UAAU,cAAc,CAC5B,MAAyC,EACzC,OAAkC;IAElC,OAAO,CACL,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;SACnC,aAAa,CAAC,GAAG,CAAC;SAClB,MAAM,CAAC,CAAC,IAAqC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAC9F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3D,OAAO,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,KAAa,EACb,WAAmB,EACnB,qBAA6B;IAE7B,IAAI,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,KAAK,WAAW,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,IAAI,WAAW,IAAI,WAAW,KAAK,GAAG;QAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IACtF,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,mBAAmB,qBAAqB,KAAK,CAAC,CAAC,CAAC;IACxF,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;IACnC,IAAI,CAAC;QACH,kCAAkC;QAClC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAa,EACb,MAAc,EACd,IAAa,EACb,EACE,QAAQ,GAAG,UAAU,EACrB,WAAW,GAAG,KAAK,EACnB,qBAAqB,EACrB,qBAAqB,KAInB,EAAE,EACN,EAAE;IACF,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAsB,CAAC;IAEzE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QAC9C,QAAQ;QACR,WAAW;QACX,qBAAqB,EACnB,qBAAqB,IAAI,IAAI,CAAC,GAAG,CAAC,qBAAqB,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,CAAC;QAC1F,qBAAqB;QACrB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAClC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC/B,eAAe,EAAE,MAAM;KACxB,CAAC,CAAC;IAEH,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;QAChD,MAAM,WAAW,GAAG,YAAY,KAAK,EAAE,CAAC;QACxC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QACtD,SAAS;YACP,SAAS;iBACN,aAAa,CAAC,WAA0B,CAAC;iBACzC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;gBACxC,IAAI,IAAI,KAAK,UAAU,IAAI,WAAW;oBAAE,OAAO,MAAM,CAAC;gBACtD,OAAO,MAAM,GAAG,IAAI,CAAC;YACvB,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACxD,CAAC;SAAM,IAAI,IAAI,EAAE,CAAC;QAChB,IAAI,MAAM;YACR,SAAS,GAAG,SAAS;iBAClB,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC7C,MAAM,CACL,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAChC,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,EAC/D,EAAE,CACH,CAAC;;YACD,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,GAAY,EAAE,GAAY;IACtE,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;AACrF,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,IAAY;IACvF,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,cAAc,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;QAClD,OAAO,QAAQ,CAAC,OAAO,EAAE,CAAC;IAC5B,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,EAAE,CAAC;QACnD,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,IAAY;IACvF,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAI,cAAc,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;QAClD,OAAO,QAAQ,CAAC,OAAO,EAAE,CAAC;IAC5B,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,EAAE,CAAC;QACnD,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAOD,MAAM,UAAU,YAAY,CAAC,KAAsB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAuB;IAC3F,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEzD,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n  locale: Intl.UnicodeBCP47LocaleIdentifier,\n  options?: Intl.NumberFormatOptions\n): string {\n  return (\n    new Intl.NumberFormat(locale, options)\n      .formatToParts(0.1)\n      .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n  );\n}\n\nexport function getFraction(value: string) {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n  value: string,\n  decimalSign: string,\n  maximumFractionDigits: number\n): string {\n  let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n  if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n  const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n  if (match && match.length > 0) {\n    rawValue = match[0];\n  }\n  return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n  try {\n    // eslint-disable-next-line no-new\n    new Intl.NumberFormat(undefined, { style: 'unit', unit });\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nexport const getFormattedValue = (\n  value: string,\n  locale: string,\n  unit?: string,\n  {\n    notation = 'standard',\n    useGrouping = false,\n    maximumFractionDigits,\n    minimumFractionDigits\n  }: Pick<\n    Intl.NumberFormatOptions,\n    'notation' | 'useGrouping' | 'maximumFractionDigits' | 'minimumFractionDigits'\n  > = {}\n) => {\n  const isUnit = unit ? isValidUnit(unit) : false;\n  const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n  const formatter = new Intl.NumberFormat(locale, {\n    notation,\n    useGrouping,\n    minimumFractionDigits:\n      minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n    maximumFractionDigits,\n    style: isUnit ? 'unit' : undefined,\n    unit: isUnit ? unit : undefined,\n    numberingSystem: 'latn'\n  });\n\n  let formatted = value;\n\n  if (value && !Number.isNaN(parseFloat(integer))) {\n    const endsWithDot = fractionPart === '';\n    const valueNumber = endsWithDot ? `${value}1` : value;\n    formatted =\n      formatter\n        .formatToParts(valueNumber as `${number}`)\n        .reduce((result, { type, value: part }) => {\n          if (type === 'fraction' && endsWithDot) return result;\n          return result + part;\n        }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n  } else if (unit) {\n    if (isUnit)\n      formatted = formatter\n        .formatToParts(value.startsWith('-') ? -1 : 1)\n        .reduce(\n          (result, { type, value: part }) =>\n            ['unit', 'minusSign'].includes(type) ? result + part : result,\n          ''\n        );\n    else formatted = value.startsWith('-') ? `- ${unit}` : unit;\n  }\n\n  return formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n  return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).plus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (min !== undefined && newValue.toNumber() < min) {\n    return min.toString();\n  }\n  return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).minus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (max !== undefined && newValue.toNumber() > max) {\n    return max.toString();\n  }\n  return value;\n}\n\ninterface NumberFormatOptions {\n  locale: string;\n  options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n  const formatter = new Intl.NumberFormat(locale, options);\n\n  return formatter.format(value);\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n  locale: Intl.UnicodeBCP47LocaleIdentifier,\n  options?: Intl.NumberFormatOptions\n): string {\n  return (\n    new Intl.NumberFormat(locale, options)\n      .formatToParts(0.1)\n      .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n  );\n}\n\nexport function getFraction(value: string) {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n  value: string,\n  decimalSign: string,\n  maximumFractionDigits: number\n): string {\n  let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n  if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n  const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n  if (match && match.length > 0) {\n    rawValue = match[0];\n  }\n  return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n  try {\n    // eslint-disable-next-line no-new\n    new Intl.NumberFormat(undefined, { style: 'unit', unit });\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nexport const getFormattedValue = (\n  value: string,\n  locale: string,\n  unit?: string,\n  {\n    notation = 'standard',\n    useGrouping = false,\n    maximumFractionDigits,\n    minimumFractionDigits,\n    negative = 'minus-sign'\n  }: Pick<\n    Intl.NumberFormatOptions,\n    'notation' | 'useGrouping' | 'maximumFractionDigits' | 'minimumFractionDigits'\n  > & { negative?: 'minus-sign' | 'parentheses' } = {}\n) => {\n  const isUnit = unit ? isValidUnit(unit) : false;\n  const isNegative = value.startsWith('-');\n  const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;\n  const [integer = '0', fractionPart] = formattingValue.split('.', 2);\n\n  const formatter = new Intl.NumberFormat(locale, {\n    notation,\n    useGrouping,\n    minimumFractionDigits:\n      minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n    maximumFractionDigits,\n    style: isUnit ? 'unit' : undefined,\n    unit: isUnit ? unit : undefined,\n    numberingSystem: 'latn'\n  });\n\n  let formatted = formattingValue;\n\n  if (formattingValue && !Number.isNaN(parseFloat(integer))) {\n    const endsWithDot = fractionPart === '';\n    const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;\n    formatted =\n      formatter\n        .formatToParts(valueNumber as `${number}`)\n        .reduce((result, { type, value: part }) => {\n          if (type === 'fraction' && endsWithDot) return result;\n          return result + part;\n        }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n  } else if (unit) {\n    if (isUnit)\n      formatted = formatter\n        .formatToParts(formattingValue.startsWith('-') ? -1 : 1)\n        .reduce(\n          (result, { type, value: part }) =>\n            ['unit', 'minusSign'].includes(type) ? result + part : result,\n          ''\n        );\n    else formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;\n  }\n\n  return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n  return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).plus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (min !== undefined && newValue.toNumber() < min) {\n    return min.toString();\n  }\n  return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).minus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (max !== undefined && newValue.toNumber() > max) {\n    return max.toString();\n  }\n  return value;\n}\n\ninterface NumberFormatOptions {\n  locale: string;\n  options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n  const formatter = new Intl.NumberFormat(locale, options);\n\n  return formatter.format(value);\n}\n"]}

package/lib/components/PageTemplates/GridLayout/EditorBackground.js

@@ -43,7 +43,7 @@ const StyledPageBreak = styled.div(({ containerPadding, rowHeight, theme, margin
         font-size: 0.75rem;
         line-height: 1;
         transform: translate(0, -50%);
-        background-color: ${palette['app-background']};
+        background: ${palette['app-background']};
         color: ${palette['border-line']};
         padding-inline-end: 0.25rem;
       }

package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n      border-radius: ${theme.components.card['border-radius']};\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background-color: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig(true);\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}
+{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n      border-radius: ${theme.components.card['border-radius']};\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig(true);\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}

package/lib/components/Preview/PreviewManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewManager.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2B,OAAO,EAAoC,MAAM,OAAO,CAAC;AAIhG,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAK,EAEV,0BAA0B,EAG1B,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC;KAC7D;CACF;AA0GD,QAAA,MAAM,cAAc,GAAI,cAAc,mBAAmB,4CAkFxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PreviewManager.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2B,OAAO,EAAoC,MAAM,OAAO,CAAC;AAIhG,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAK,EAEV,0BAA0B,EAG1B,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC;KAC7D;CACF;AA8GD,QAAA,MAAM,cAAc,GAAI,cAAc,mBAAmB,4CA0FxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Preview/PreviewManager.js

@@ -4,7 +4,7 @@ import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } fr
 import { createPortal } from 'react-dom';
 import { createUID, windowIsAvailable } from '../../utils';
 import '../../init';
-import { useConfiguration } from '../../hooks';
+import { useBreakpoint, useConfiguration } from '../../hooks';
 import PreviewPanel from './PreviewPanel';
 import { PreviewContext, PreviewManagerContext } from './Contexts';
 const reducer = (previews, payload) => {
@@ -30,6 +30,8 @@ const reducer = (previews, payload) => {
                 : preview);
         case 'unmount':
             return previews.filter(preview => preview.id !== payload.id);
+        case 'clear':
+            return [];
         default:
             return previews;
     }
@@ -76,6 +78,13 @@ const PreviewManager = ({ children }) => {
     const [previewActive, setPreviewActive] = useState(false);
     const previewTriggerRef = useRef(null);
     const { portalTarget } = useConfiguration();
+    const isSmallOrAbove = useBreakpoint('sm');
+    // Dismiss all previews when screen size reflows below sm breakpoint
+    useEffect(() => {
+        if (!isSmallOrAbove && previews.length > 0) {
+            dispatch({ type: 'clear' });
+        }
+    }, [isSmallOrAbove, previews.length]);
     const providerValue = useMemo(() => ({
         previewActive,
         setPreviewActive,

package/lib/components/Preview/PreviewManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } from 'react';\nimport type { ComponentType, Dispatch, Context, MutableRefObject, SetStateAction } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, windowIsAvailable } from '../../utils';\nimport '../../init';\nimport { useConfiguration } from '../../hooks';\nimport type { DeferInfer } from '../../types';\n\nimport PreviewPanel from './PreviewPanel';\nimport type {\n  PreviewOptions,\n  PreviewManagerContextValue,\n  PreviewMethods,\n  PreviewObject,\n  PreviewManagerProps\n} from './Preview.types';\nimport { PreviewContext, PreviewManagerContext } from './Contexts';\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    previewManagerContext?: Context<PreviewManagerContextValue>;\n  }\n}\n\ntype PreviewReducerPayload<P extends object> =\n  | { type: 'create'; preview: PreviewObject<P> }\n  | { type: 'update'; id: string; props: Partial<P>; options?: Partial<PreviewOptions> }\n  | { type: 'unmount'; id: string };\n\nconst reducer = <P extends object>(\n  previews: PreviewObject[] | [],\n  payload: PreviewReducerPayload<P>\n): PreviewObject<object>[] => {\n  switch (payload.type) {\n    case 'create':\n      // Stub for multiple preview support\n      // return [...previews, payload.preview as unknown as PreviewObject<object>];\n      return [payload.preview as unknown as PreviewObject<object>];\n\n    case 'update':\n      return previews.map(preview =>\n        preview.id === payload.id\n          ? {\n              ...preview,\n              props: { ...preview.props, ...payload.props },\n              options: {\n                ...preview.options,\n                ...payload.options,\n                previewProps: {\n                  ...preview.options?.previewProps,\n                  ...payload.options?.previewProps\n                }\n              }\n            }\n          : preview\n      );\n\n    case 'unmount':\n      return previews.filter(preview => preview.id !== payload.id);\n\n    default:\n      return previews;\n  }\n};\n\nconst WrappedPreview = memo(\n  ({\n    Component,\n    props,\n    options,\n    previewStateSetter,\n    previewTriggerRef,\n    methods\n  }: PreviewObject & {\n    previewStateSetter: Dispatch<SetStateAction<boolean>>;\n    previewTriggerRef: MutableRefObject<HTMLElement | null>;\n  }) => {\n    const optionsRef = useRef(options);\n    optionsRef.current = options;\n\n    // This state change is required to transition the case preview in.\n    const [open, setOpen] = useState(false);\n    const openRef = useRef(false);\n\n    const cleanupPreview = () => {\n      setOpen(false);\n      openRef.current = false;\n      previewStateSetter(false);\n      optionsRef.current?.previewProps.onAfterClose?.();\n      methods.unmountPreview();\n    };\n\n    useEffect(() => {\n      setOpen(true);\n      openRef.current = true;\n      previewStateSetter(true);\n      return () => {\n        // Guard with openRef so we don't double-fire if already closed via the close button.\n        if (openRef.current) {\n          optionsRef.current?.previewProps.onBeforeClose?.();\n          cleanupPreview();\n        }\n      };\n    }, []);\n\n    return (\n      <PreviewContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          initialized: true,\n          previewTriggerRef,\n          ...methods\n        }}\n      >\n        <PreviewPanel\n          open={open}\n          {...options?.previewProps}\n          onAfterClose={() => {\n            cleanupPreview();\n          }}\n        >\n          <Component {...(props as Record<string, unknown>)} />\n        </PreviewPanel>\n      </PreviewContext.Provider>\n    );\n  }\n);\n\nconst PreviewManager = ({ children }: PreviewManagerProps) => {\n  const [previews, dispatch] = useReducer(reducer, []);\n  const [previewActive, setPreviewActive] = useState(false);\n  const previewTriggerRef = useRef<HTMLElement | null>(null);\n  const { portalTarget } = useConfiguration();\n\n  const providerValue = useMemo(\n    () => ({\n      previewActive,\n      setPreviewActive,\n      createPreview: <P extends object>(\n        Component: ComponentType<P>,\n        props?: DeferInfer<P>,\n        options?: PreviewOptions\n      ): PreviewMethods<P> => {\n        const id = createUID();\n\n        const methods = {\n          updatePreview: (updatedProps: Partial<P>, updatedOptions?: Partial<PreviewOptions>) => {\n            (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n              type: 'update',\n              id,\n              props: updatedProps,\n              options: updatedOptions\n            });\n          },\n          unmountPreview: () => {\n            dispatch({ type: 'unmount', id });\n          }\n        };\n\n        (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n          type: 'create',\n          preview: {\n            id,\n            Component,\n            methods,\n            props: (props ?? {}) as P,\n            options\n          }\n        });\n\n        return methods;\n      },\n      PreviewContext,\n      initialized: true\n    }),\n    [previewActive]\n  );\n\n  const context = windowIsAvailable\n    ? window.cosmos.previewManagerContext ?? PreviewManagerContext\n    : PreviewManagerContext;\n  const priorCtx = useContext(context);\n\n  // Don't create additional Preview managers.\n  if (priorCtx.initialized) return <context.Provider value={priorCtx}>{children}</context.Provider>;\n\n  const previewPortal =\n    portalTarget && previews.length > 0\n      ? createPortal(\n          previews.map(preview => (\n            <WrappedPreview\n              {...preview}\n              key={preview.id}\n              previewStateSetter={setPreviewActive}\n              previewTriggerRef={previewTriggerRef}\n            />\n          )),\n          portalTarget\n        )\n      : null;\n\n  return (\n    <context.Provider value={providerValue}>\n      {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}\n      <PreviewContext.Provider value={{ initialized: false, previewTriggerRef }}>\n        {children}\n        {previewPortal}\n      </PreviewContext.Provider>\n    </context.Provider>\n  );\n};\n\nexport default PreviewManager;\n"]}
+{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../../src/components/Preview/PreviewManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, useState, useMemo, useContext, useRef, useEffect, memo } from 'react';\nimport type { ComponentType, Dispatch, Context, MutableRefObject, SetStateAction } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, windowIsAvailable } from '../../utils';\nimport '../../init';\nimport { useBreakpoint, useConfiguration } from '../../hooks';\nimport type { DeferInfer } from '../../types';\n\nimport PreviewPanel from './PreviewPanel';\nimport type {\n  PreviewOptions,\n  PreviewManagerContextValue,\n  PreviewMethods,\n  PreviewObject,\n  PreviewManagerProps\n} from './Preview.types';\nimport { PreviewContext, PreviewManagerContext } from './Contexts';\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    previewManagerContext?: Context<PreviewManagerContextValue>;\n  }\n}\n\ntype PreviewReducerPayload<P extends object> =\n  | { type: 'create'; preview: PreviewObject<P> }\n  | { type: 'update'; id: string; props: Partial<P>; options?: Partial<PreviewOptions> }\n  | { type: 'unmount'; id: string }\n  | { type: 'clear' };\n\nconst reducer = <P extends object>(\n  previews: PreviewObject[] | [],\n  payload: PreviewReducerPayload<P>\n): PreviewObject<object>[] => {\n  switch (payload.type) {\n    case 'create':\n      // Stub for multiple preview support\n      // return [...previews, payload.preview as unknown as PreviewObject<object>];\n      return [payload.preview as unknown as PreviewObject<object>];\n\n    case 'update':\n      return previews.map(preview =>\n        preview.id === payload.id\n          ? {\n              ...preview,\n              props: { ...preview.props, ...payload.props },\n              options: {\n                ...preview.options,\n                ...payload.options,\n                previewProps: {\n                  ...preview.options?.previewProps,\n                  ...payload.options?.previewProps\n                }\n              }\n            }\n          : preview\n      );\n\n    case 'unmount':\n      return previews.filter(preview => preview.id !== payload.id);\n\n    case 'clear':\n      return [];\n\n    default:\n      return previews;\n  }\n};\n\nconst WrappedPreview = memo(\n  ({\n    Component,\n    props,\n    options,\n    previewStateSetter,\n    previewTriggerRef,\n    methods\n  }: PreviewObject & {\n    previewStateSetter: Dispatch<SetStateAction<boolean>>;\n    previewTriggerRef: MutableRefObject<HTMLElement | null>;\n  }) => {\n    const optionsRef = useRef(options);\n    optionsRef.current = options;\n\n    // This state change is required to transition the case preview in.\n    const [open, setOpen] = useState(false);\n    const openRef = useRef(false);\n\n    const cleanupPreview = () => {\n      setOpen(false);\n      openRef.current = false;\n      previewStateSetter(false);\n      optionsRef.current?.previewProps.onAfterClose?.();\n      methods.unmountPreview();\n    };\n\n    useEffect(() => {\n      setOpen(true);\n      openRef.current = true;\n      previewStateSetter(true);\n      return () => {\n        // Guard with openRef so we don't double-fire if already closed via the close button.\n        if (openRef.current) {\n          optionsRef.current?.previewProps.onBeforeClose?.();\n          cleanupPreview();\n        }\n      };\n    }, []);\n\n    return (\n      <PreviewContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          initialized: true,\n          previewTriggerRef,\n          ...methods\n        }}\n      >\n        <PreviewPanel\n          open={open}\n          {...options?.previewProps}\n          onAfterClose={() => {\n            cleanupPreview();\n          }}\n        >\n          <Component {...(props as Record<string, unknown>)} />\n        </PreviewPanel>\n      </PreviewContext.Provider>\n    );\n  }\n);\n\nconst PreviewManager = ({ children }: PreviewManagerProps) => {\n  const [previews, dispatch] = useReducer(reducer, []);\n  const [previewActive, setPreviewActive] = useState(false);\n  const previewTriggerRef = useRef<HTMLElement | null>(null);\n  const { portalTarget } = useConfiguration();\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  // Dismiss all previews when screen size reflows below sm breakpoint\n  useEffect(() => {\n    if (!isSmallOrAbove && previews.length > 0) {\n      dispatch({ type: 'clear' });\n    }\n  }, [isSmallOrAbove, previews.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      previewActive,\n      setPreviewActive,\n      createPreview: <P extends object>(\n        Component: ComponentType<P>,\n        props?: DeferInfer<P>,\n        options?: PreviewOptions\n      ): PreviewMethods<P> => {\n        const id = createUID();\n\n        const methods = {\n          updatePreview: (updatedProps: Partial<P>, updatedOptions?: Partial<PreviewOptions>) => {\n            (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n              type: 'update',\n              id,\n              props: updatedProps,\n              options: updatedOptions\n            });\n          },\n          unmountPreview: () => {\n            dispatch({ type: 'unmount', id });\n          }\n        };\n\n        (dispatch as Dispatch<PreviewReducerPayload<P>>)({\n          type: 'create',\n          preview: {\n            id,\n            Component,\n            methods,\n            props: (props ?? {}) as P,\n            options\n          }\n        });\n\n        return methods;\n      },\n      PreviewContext,\n      initialized: true\n    }),\n    [previewActive]\n  );\n\n  const context = windowIsAvailable\n    ? window.cosmos.previewManagerContext ?? PreviewManagerContext\n    : PreviewManagerContext;\n  const priorCtx = useContext(context);\n\n  // Don't create additional Preview managers.\n  if (priorCtx.initialized) return <context.Provider value={priorCtx}>{children}</context.Provider>;\n\n  const previewPortal =\n    portalTarget && previews.length > 0\n      ? createPortal(\n          previews.map(preview => (\n            <WrappedPreview\n              {...preview}\n              key={preview.id}\n              previewStateSetter={setPreviewActive}\n              previewTriggerRef={previewTriggerRef}\n            />\n          )),\n          portalTarget\n        )\n      : null;\n\n  return (\n    <context.Provider value={providerValue}>\n      {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}\n      <PreviewContext.Provider value={{ initialized: false, previewTriggerRef }}>\n        {children}\n        {previewPortal}\n      </PreviewContext.Provider>\n    </context.Provider>\n  );\n};\n\nexport default PreviewManager;\n"]}

package/lib/components/Preview/PreviewPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,eAAO,MAAM,mBAAmB,mVA2B9B,CAAC;;;;AA4HH,wBAAiE"}
+{"version":3,"file":"PreviewPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/PreviewPanel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,eAAO,MAAM,mBAAmB,mVA2B9B,CAAC;;;;AAqIH,wBAAiE"}