@pega/cosmos-react-core 9.0.0-build.12.6 → 9.0.0-build.12.8

package/lib/components/Menu/Menu.styles.js

@@ -1,4 +1,4 @@
-import { hideVisually, mix, rgba } from 'polished';
+import { hideVisually, mix, rgba, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { StyledEmptyState } from '../EmptyState';
@@ -7,11 +7,13 @@ import { StyledGrid } from '../Grid';
 import { tryCatch } from '../../utils';
 import { StyledText } from '../Text';
 import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
+import { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';
 import Button from '../Button';
 import { readableColor } from '../../styles';
 import { StyledPrimary, StyledSecondary, StyledSummaryItem, StyledSummaryItemActions, StyledVisual } from '../SummaryItem';
 import { ellipsisOverflow } from '../../styles/mixins';
 import { StyledFlex } from '../Flex';
+import { StyledFormControl } from '../FormControl';
 export const StyledExpandButton = styled(Button) `
   align-self: center;
 `;
@@ -316,6 +318,12 @@ export const StyledMenuListWrapper = styled.div(({ theme }) => css `
       border-bottom-left-radius: inherit;
       border-bottom-right-radius: inherit;
     }
+
+    ${StyledMetaList} ${StyledMetaListItem} * {
+      display: inline;
+      vertical-align: baseline;
+      margin: 0;
+    }
   `);
 StyledMenuListWrapper.defaultProps = defaultThemeProp;
 export const StyledMenu = styled.div(({ theme }) => {
@@ -370,4 +378,60 @@ export const StyledMenu = styled.div(({ theme }) => {
   `;
 });
 StyledMenu.defaultProps = defaultThemeProp;
+export const StyledMenuFilter = styled.div(({ theme }) => {
+    const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;
+    return css `
+    min-height: ${theme.components.input.height};
+    height: ${theme.components.input.height};
+
+    @media (pointer: coarse) {
+      min-height: ${theme.base['hit-area']['finger-min']};
+      min-width: ${theme.base['hit-area']['finger-min']};
+    }
+
+    ${StyledFormControl} {
+      height: 100%;
+      border-radius: ${borderRadius};
+      padding-inline-start: calc(1.5 * ${theme.components.input.padding});
+      padding-inline-end: calc(4 * ${theme.components.input.padding});
+
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+
+      ::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+
+      &:focus:not([disabled]) {
+        box-shadow: ${theme.base.shadow['focus-inset']};
+        border-color: ${theme.components['form-control']['border-color']};
+
+        :hover {
+          border-color: ${theme.components['form-control'][':hover']['border-color']};
+        }
+      }
+    }
+  `;
+});
+StyledMenuFilter.defaultProps = defaultThemeProp;
+export const StyledFilterIcon = styled(Icon)(({ theme }) => {
+    const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));
+    return css `
+    position: absolute;
+    color: ${iconColor};
+    /* stylelint-disable-next-line unit-allowed-list */
+    inset-block-start: calc((${theme.components.input.height} - max(1.125rem, 14px)));
+    inset-inline-end: calc(2.5 * ${theme.components.input.padding});
+
+    @media (pointer: coarse) {
+      /* stylelint-disable unit-allowed-list */
+      inset-block-start: calc(
+        (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px)) * 0.75
+      );
+      /* stylelint-enable unit-allowed-list */
+    }
+  `;
+});
+StyledFilterIcon.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Menu.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport Button from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n  align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n  isParentItem: boolean;\n  mode?: MenuProps['mode'];\n  itemLayout?: MenuProps['itemLayout'];\n  isChecked?: boolean;\n  selectableParent?: boolean;\n}>(\n  ({\n    theme: { base, components },\n    isParentItem,\n    itemLayout,\n    mode = 'action',\n    'aria-selected': isChecked = false,\n    selectableParent = false\n  }) => {\n    const activeColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverCheckColor = tryCatch(() =>\n      rgba(\n        components['radio-check'][':checked']['background-color'],\n        base.transparency['transparent-5']\n      )\n    );\n\n    const checkedBackground = components['radio-check'][':checked']['background-color'];\n    const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n    return css`\n      min-height: ${base['hit-area']['mouse-min']};\n      padding-block: calc(0.75 * ${base.spacing});\n      padding-inline: ${base.spacing};\n      cursor: pointer;\n\n      ${itemLayout === 'inline' &&\n      css`\n        justify-content: flex-start;\n\n        ${StyledSummaryItem} {\n          /* Sets grid columns based on SummaryItem content combinations */\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary secondary actions';\n            grid-template-columns: auto auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n            grid-template-areas: 'visual primary secondary';\n            grid-template-columns: auto auto 1fr;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'visual primary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'primary secondary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary secondary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n              ${StyledSummaryItemActions}\n            ) {\n            grid-template-areas: 'primary actions';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary';\n            grid-template-columns: 1fr;\n            flex-grow: 0;\n          }\n\n          & > ${StyledPrimary} {\n            ${ellipsisOverflow};\n          }\n\n          & > ${StyledSecondary} {\n            ${ellipsisOverflow};\n\n            ul {\n              li {\n                ${ellipsisOverflow};\n              }\n              justify-content: end;\n            }\n          }\n\n          & > ${StyledSummaryItemActions} > ${StyledFlex} {\n            justify-content: end;\n          }\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n      }\n\n      &:focus-within {\n        background-color: ${activeColor};\n      }\n\n      &:hover {\n        ${StyledCheckMarkIcon} {\n          visibility: visible;\n          ${mode === 'single-select' &&\n          css`\n            color: ${isChecked ? checkedBackground : hoverCheckColor};\n          `}\n          ${mode === 'multi-select' &&\n          css`\n            ${!isChecked &&\n            css`\n              border-color: ${components['form-control'][':hover']['border-color']};\n            `}\n          `}\n        }\n      }\n\n      &:hover:not([aria-disabled='true']) {\n        background-color: ${hoverColor};\n      }\n\n      a:first-of-type {\n        display: block;\n        width: 100%;\n        text-decoration: none;\n        color: inherit;\n      }\n\n      ${isParentItem &&\n      !selectableParent &&\n      (mode === 'multi-select' || mode === 'single-select') &&\n      css`\n        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n      `}\n\n      ${StyledGrid} {\n        flex-grow: 1;\n      }\n\n      ${StyledCheckMarkIcon} {\n        margin-inline-start: 0;\n        ${mode === 'single-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedBackground};\n              `\n            : css`\n                visibility: hidden;\n              `}\n        `}\n        ${mode === 'multi-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedForeground};\n                background-color: ${checkedBackground};\n                border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n              `\n            : css`\n                color: transparent;\n                border: 0.0625rem solid ${components['radio-check']['border-color']};\n              `}\n          border-radius: min(\n            calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n            0.25rem\n          );\n        `}\n      }\n\n      &[aria-disabled='true'] {\n        background-color: ${components['form-control'][':disabled']['background-color']};\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n  ${StyledIcon} {\n    width: 1em;\n    height: 1em;\n  }\n\n  & > ${StyledText} {\n    ${ellipsisOverflow};\n  }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n  return css`\n    height: 0.0625rem;\n    background-color: ${theme.base.palette['border-line']};\n    margin: ${theme.base.spacing} 0;\n  `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    background-color: ${theme.base.palette['secondary-background']};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.95, base.palette['primary-background'], base.palette.interactive)\n  );\n  const activeColor = tryCatch(() =>\n    mix(0.85, base.palette['primary-background'], base.palette.interactive)\n  );\n\n  return css`\n    cursor: pointer;\n    width: 100%;\n    background-color: ${base.palette['primary-background']};\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &:focus-within {\n      box-shadow: ${base.shadow['focus-inset']};\n      background-color: ${activeColor};\n    }\n\n    &:hover:not([aria-disabled='true']):not([data-current='true']) {\n      background-color: ${hoverColor};\n    }\n    color: ${base.palette['foreground-color']};\n    padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n    text-align: start;\n    border-radius: inherit;\n\n    > ${StyledGrid} {\n      grid-column-gap: ${base.spacing};\n    }\n\n    ${StyledIcon} {\n      /* Fixes vertical align issue increasing box size beyond square */\n      display: block;\n    }\n  `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledEmptyState} {\n      padding: ${theme.base.spacing};\n      height: auto;\n    }\n\n    li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n      margin-block-start: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    & > fieldset:first-child {\n      position: relative;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    &,\n    ${StyledMenuListWrapper} {\n      max-height: inherit;\n    }\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &[data-active-scope='true'] [data-current='true'] {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisuallyHiddenText}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n  align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n  isParentItem: boolean;\n  mode?: MenuProps['mode'];\n  itemLayout?: MenuProps['itemLayout'];\n  isChecked?: boolean;\n  selectableParent?: boolean;\n}>(\n  ({\n    theme: { base, components },\n    isParentItem,\n    itemLayout,\n    mode = 'action',\n    'aria-selected': isChecked = false,\n    selectableParent = false\n  }) => {\n    const activeColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverCheckColor = tryCatch(() =>\n      rgba(\n        components['radio-check'][':checked']['background-color'],\n        base.transparency['transparent-5']\n      )\n    );\n\n    const checkedBackground = components['radio-check'][':checked']['background-color'];\n    const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n    return css`\n      min-height: ${base['hit-area']['mouse-min']};\n      padding-block: calc(0.75 * ${base.spacing});\n      padding-inline: ${base.spacing};\n      cursor: pointer;\n\n      ${itemLayout === 'inline' &&\n      css`\n        justify-content: flex-start;\n\n        ${StyledSummaryItem} {\n          /* Sets grid columns based on SummaryItem content combinations */\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary secondary actions';\n            grid-template-columns: auto auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n            grid-template-areas: 'visual primary secondary';\n            grid-template-columns: auto auto 1fr;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'visual primary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'primary secondary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary secondary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n              ${StyledSummaryItemActions}\n            ) {\n            grid-template-areas: 'primary actions';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary';\n            grid-template-columns: 1fr;\n            flex-grow: 0;\n          }\n\n          & > ${StyledPrimary} {\n            ${ellipsisOverflow};\n          }\n\n          & > ${StyledSecondary} {\n            ${ellipsisOverflow};\n\n            ul {\n              li {\n                ${ellipsisOverflow};\n              }\n              justify-content: end;\n            }\n          }\n\n          & > ${StyledSummaryItemActions} > ${StyledFlex} {\n            justify-content: end;\n          }\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n      }\n\n      &:focus-within {\n        background-color: ${activeColor};\n      }\n\n      &:hover {\n        ${StyledCheckMarkIcon} {\n          visibility: visible;\n          ${mode === 'single-select' &&\n          css`\n            color: ${isChecked ? checkedBackground : hoverCheckColor};\n          `}\n          ${mode === 'multi-select' &&\n          css`\n            ${!isChecked &&\n            css`\n              border-color: ${components['form-control'][':hover']['border-color']};\n            `}\n          `}\n        }\n      }\n\n      &:hover:not([aria-disabled='true']) {\n        background-color: ${hoverColor};\n      }\n\n      a:first-of-type {\n        display: block;\n        width: 100%;\n        text-decoration: none;\n        color: inherit;\n      }\n\n      ${isParentItem &&\n      !selectableParent &&\n      (mode === 'multi-select' || mode === 'single-select') &&\n      css`\n        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n      `}\n\n      ${StyledGrid} {\n        flex-grow: 1;\n      }\n\n      ${StyledCheckMarkIcon} {\n        margin-inline-start: 0;\n        ${mode === 'single-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedBackground};\n              `\n            : css`\n                visibility: hidden;\n              `}\n        `}\n        ${mode === 'multi-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedForeground};\n                background-color: ${checkedBackground};\n                border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n              `\n            : css`\n                color: transparent;\n                border: 0.0625rem solid ${components['radio-check']['border-color']};\n              `}\n          border-radius: min(\n            calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n            0.25rem\n          );\n        `}\n      }\n\n      &[aria-disabled='true'] {\n        background-color: ${components['form-control'][':disabled']['background-color']};\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n  ${StyledIcon} {\n    width: 1em;\n    height: 1em;\n  }\n\n  & > ${StyledText} {\n    ${ellipsisOverflow};\n  }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n  return css`\n    height: 0.0625rem;\n    background-color: ${theme.base.palette['border-line']};\n    margin: ${theme.base.spacing} 0;\n  `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    background-color: ${theme.base.palette['secondary-background']};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.95, base.palette['primary-background'], base.palette.interactive)\n  );\n  const activeColor = tryCatch(() =>\n    mix(0.85, base.palette['primary-background'], base.palette.interactive)\n  );\n\n  return css`\n    cursor: pointer;\n    width: 100%;\n    background-color: ${base.palette['primary-background']};\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &:focus-within {\n      box-shadow: ${base.shadow['focus-inset']};\n      background-color: ${activeColor};\n    }\n\n    &:hover:not([aria-disabled='true']):not([data-current='true']) {\n      background-color: ${hoverColor};\n    }\n    color: ${base.palette['foreground-color']};\n    padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n    text-align: start;\n    border-radius: inherit;\n\n    > ${StyledGrid} {\n      grid-column-gap: ${base.spacing};\n    }\n\n    ${StyledIcon} {\n      /* Fixes vertical align issue increasing box size beyond square */\n      display: block;\n    }\n  `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledEmptyState} {\n      padding: ${theme.base.spacing};\n      height: auto;\n    }\n\n    li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n      margin-block-start: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    & > fieldset:first-child {\n      position: relative;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    ${StyledMetaList} ${StyledMetaListItem} * {\n      display: inline;\n      vertical-align: baseline;\n      margin: 0;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    &,\n    ${StyledMenuListWrapper} {\n      max-height: inherit;\n    }\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &[data-active-scope='true'] [data-current='true'] {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisuallyHiddenText}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n  const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n  return css`\n    min-height: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    ${StyledFormControl} {\n      height: 100%;\n      border-radius: ${borderRadius};\n      padding-inline-start: calc(1.5 * ${theme.components.input.padding});\n      padding-inline-end: calc(4 * ${theme.components.input.padding});\n\n      &::-webkit-search-cancel-button {\n        display: none;\n      }\n\n      ::-webkit-search-decoration {\n        -webkit-appearance: none;\n      }\n\n      &:focus:not([disabled]) {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n        border-color: ${theme.components['form-control']['border-color']};\n\n        :hover {\n          border-color: ${theme.components['form-control'][':hover']['border-color']};\n        }\n      }\n    }\n  `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n  return css`\n    position: absolute;\n    color: ${iconColor};\n    /* stylelint-disable-next-line unit-allowed-list */\n    inset-block-start: calc((${theme.components.input.height} - max(1.125rem, 14px)));\n    inset-inline-end: calc(2.5 * ${theme.components.input.padding});\n\n    @media (pointer: coarse) {\n      /* stylelint-disable unit-allowed-list */\n      inset-block-start: calc(\n        (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px)) * 0.75\n      );\n      /* stylelint-enable unit-allowed-list */\n    }\n  `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Menu/Menu.types.d.ts

@@ -4,6 +4,7 @@ import type { MetaListProps } from '../MetaList';
 import type { UseActiveDescendantConfig } from '../../hooks';
 import type { TooltipProps } from '../Tooltip';
 import type { SummaryItemProps } from '../SummaryItem';
+import type { InputProps } from '../Input';
 export type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;
 export interface MenuItemProps extends MenuObjectProps {
     /** The primary piece of item information as a string. */
@@ -88,6 +89,8 @@ export interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {
      * @default 'stacked'
      */
     itemLayout?: SummaryItemProps['layout'];
+    /** Renders an input to filter items in the menu */
+    filterInputProps?: OmitStrict<InputProps, 'type'>;
     /** Renders a create new action below the menu. */
     onCreateNew?: () => void;
     /** ID placed on the menu's list element. */

package/lib/components/Menu/Menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Menu/Menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport type {\n  BaseProps,\n  NoChildrenProp,\n  OmitStrict,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport type { MetaListProps } from '../MetaList';\nimport type { UseActiveDescendantConfig } from '../../hooks';\nimport type { TooltipProps } from '../Tooltip';\nimport type { SummaryItemProps } from '../SummaryItem';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps extends MenuObjectProps {\n  /** The primary piece of item information as a string. */\n  primary: string;\n  /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n  secondary?: MetaListProps['items'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: ReactNode;\n  /** A count to assist with number of associated items. */\n  count?: number;\n  /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n  ancestors?: (MenuItemProps | MenuGroupProps)[];\n  /** An array of either MenuItemProps or MenuGroupProps children. */\n  items?: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n   * May be set on parent or leaf items.\n   */\n  selected?: boolean;\n  /** FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected. */\n  partial?: boolean;\n  /** Will render the action item as link. Only use for leaf items. */\n  href?: string;\n  /**\n   * Provide a description for an item that will render in a Tooltip when hovering that item.\n   * This should be used only for VERY SPECIFIC UX scenarios.\n   */\n  tooltip?: TooltipProps['children'];\n  /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */\n  onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n  onExpand?: MenuItemProps['onClick'];\n  /** Determines if the MenuItem will be disabled. */\n  disabled?: boolean;\n  role?: 'menuitem' | 'option';\n}\n\nexport interface MenuGroupProps extends MenuObjectProps {\n  /** Label of the group. */\n  label: string;\n  /** An array of MenuItemProps children. */\n  items: MenuItemProps[];\n  /** List-like role to apply to group items. */\n  itemRole?: MenuItemProps['role'];\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n  /** Text used to indicate an expanded parent item. */\n  text: string;\n  /** Internal handler. */\n  onClick: () => void;\n}\n\nexport interface MenuObjectProps extends TestIdProp {\n  /** A unique id within the entire tree of menu items. */\n  id: string;\n}\n\nexport interface MenuListProps {\n  items: ParentMenuItemProps['items'];\n  id?: string;\n  ref?: Ref<HTMLFieldSetElement>;\n  parent?: {\n    el: HTMLFieldSetElement;\n    item: ParentMenuItemProps;\n    siblingItems: ParentMenuItemProps['items'];\n    setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n    returnFocusRef: RefObject<HTMLButtonElement>;\n  };\n  menuRole?: 'menu' | 'listbox';\n}\n\nexport type MenuHandleValue = {\n  /**\n   * Sets current menu depth to that of the given id.\n   * Only applies to drill-down variant.\n   */\n  expandTo: (parentItemId: MenuItemProps['id']) => void;\n};\n\nexport interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {\n  /** An array of MenuItemProps. */\n  items: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * Determines menu item content layout structure.\n   * @default 'stacked'\n   */\n  itemLayout?: SummaryItemProps['layout'];\n  /** Renders a create new action below the menu. */\n  onCreateNew?: () => void;\n  /** ID placed on the menu's list element. */\n  listId?: string;\n  /**\n   * Indicates intent for the menu.\n   * As of now item types can not be mixed.\n   * @default 'action'\n   */\n  mode?: 'action' | 'multi-select' | 'single-select';\n  role?: 'menu' | 'listbox';\n  /**\n   * Always recommended to go for default drill-down variant for better accessibility.\n   * When flyout variant is selected, its recommended not to have more than 1 nested level\n   * @default 'drill-down'\n   */\n  variant?: 'drill-down' | 'flyout';\n  /**\n   * Use to accent(make bold) portions of the primary text.\n   * Useful for filter/search results.\n   * If passed a function, that function will be passed each items primary text.\n   */\n  accent?: RegExp | ((primary: string) => RegExp);\n  /**\n   * Item height will grow or shrink based on item count.\n   * Use this indicate at which item the menu should begin its scroll.\n   * @default 7\n   */\n  scrollAt?: number;\n  /** A simple message to display when there are no items. */\n  emptyText?: string;\n  /**\n   * A top level handler for all item clicks.\n   * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n   * Both an item's onClick and this will be called if both are passed.\n   */\n  onItemClick?: MenuItemProps['onClick'];\n  /**\n   * A top level handler for all item pseudo focus events.\n   * This is convenient way to detect which item is active to react by updating state or performing an action.\n   */\n  onItemActive?: (id: MenuItemProps['id']) => void;\n  /**\n   * A top level handler for clicks on parent items to expand their child items.\n   * This is convenient way to detect when an item is expanded.\n   * For lazy loading this would be a good time to set an item's items.\n   * Both an item's onExpand and this will be called if both are passed.\n   */\n  onItemExpand?: MenuProps['onItemClick'];\n  /** A top level handler for capturing when nested items have been collapsed / \"back\" button clicks. */\n  onItemCollapse?: (id: MenuItemProps['id']) => void;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more items */\n  loadMore?: (id?: MenuItemProps['id']) => void;\n  /** Ref placed on the root menu element. */\n  ref?: Ref<HTMLDivElement>;\n  /** HTML ID. */\n  id?: string;\n  /**\n   * Currently highlighted item.\n   * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n   * and unbinds menu useActiveDescendant keydown controls.\n   * @deprecated\n   */\n  currentItemId?: string;\n  /** Override for default active-descendant focus control element in menu */\n  focusControlEl?: HTMLElement | undefined;\n  /** Header region. */\n  header?: ReactNode;\n  /** Footer region. */\n  footer?: ReactNode;\n  /** Pauses evaluation of menu active descendants while true */\n  pauseDescendantEvaluation?: UseActiveDescendantConfig['pauseDescendantEvaluation'];\n  /**\n   * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n   * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n   */\n  arrowNavigationUnsupported?: boolean;\n  /** Additional information to announce to screen reader users. Read before menu navigation instructions. */\n  'aria-describedby'?: string;\n  /** Label for menu or listbox element */\n  'aria-label'?: string;\n  /**\n   * Custom menu list rendering\n   * @internal\n   */\n  menuList?: ReactNode;\n  handleRef?: Ref<MenuHandleValue>;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n  MenuProps,\n  'mode' | 'variant' | 'scrollAt' | 'loading' | 'itemLayout'\n>;\n\nexport interface MenuContextProps\n  extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items' | 'handleRef'> {\n  radioName?: string;\n  componentId: string;\n  pushFlyoutId: (id: string) => void;\n  flyOutActiveIdStack: string[];\n  focusControl: HTMLElement | null;\n  updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n  setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;\n  setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n  getScopedItemId: (itemId: string) => string;\n  updateParentDescendantStack?: (item: HTMLElement | null) => void;\n  expandTo?: {\n    parentItemId: MenuItemProps['id'] | undefined;\n    onComplete: () => void;\n  };\n}\n\nexport interface NavItemsListProps {\n  listRef: RefObject<HTMLUListElement>;\n  cycle?: boolean;\n}\n"]}
+{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport type {\n  BaseProps,\n  NoChildrenProp,\n  OmitStrict,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport type { MetaListProps } from '../MetaList';\nimport type { UseActiveDescendantConfig } from '../../hooks';\nimport type { TooltipProps } from '../Tooltip';\nimport type { SummaryItemProps } from '../SummaryItem';\nimport type { InputProps } from '../Input';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps extends MenuObjectProps {\n  /** The primary piece of item information as a string. */\n  primary: string;\n  /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n  secondary?: MetaListProps['items'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: ReactNode;\n  /** A count to assist with number of associated items. */\n  count?: number;\n  /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n  ancestors?: (MenuItemProps | MenuGroupProps)[];\n  /** An array of either MenuItemProps or MenuGroupProps children. */\n  items?: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n   * May be set on parent or leaf items.\n   */\n  selected?: boolean;\n  /** FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected. */\n  partial?: boolean;\n  /** Will render the action item as link. Only use for leaf items. */\n  href?: string;\n  /**\n   * Provide a description for an item that will render in a Tooltip when hovering that item.\n   * This should be used only for VERY SPECIFIC UX scenarios.\n   */\n  tooltip?: TooltipProps['children'];\n  /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */\n  onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n  onExpand?: MenuItemProps['onClick'];\n  /** Determines if the MenuItem will be disabled. */\n  disabled?: boolean;\n  role?: 'menuitem' | 'option';\n}\n\nexport interface MenuGroupProps extends MenuObjectProps {\n  /** Label of the group. */\n  label: string;\n  /** An array of MenuItemProps children. */\n  items: MenuItemProps[];\n  /** List-like role to apply to group items. */\n  itemRole?: MenuItemProps['role'];\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n  /** Text used to indicate an expanded parent item. */\n  text: string;\n  /** Internal handler. */\n  onClick: () => void;\n}\n\nexport interface MenuObjectProps extends TestIdProp {\n  /** A unique id within the entire tree of menu items. */\n  id: string;\n}\n\nexport interface MenuListProps {\n  items: ParentMenuItemProps['items'];\n  id?: string;\n  ref?: Ref<HTMLFieldSetElement>;\n  parent?: {\n    el: HTMLFieldSetElement;\n    item: ParentMenuItemProps;\n    siblingItems: ParentMenuItemProps['items'];\n    setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n    returnFocusRef: RefObject<HTMLButtonElement>;\n  };\n  menuRole?: 'menu' | 'listbox';\n}\n\nexport type MenuHandleValue = {\n  /**\n   * Sets current menu depth to that of the given id.\n   * Only applies to drill-down variant.\n   */\n  expandTo: (parentItemId: MenuItemProps['id']) => void;\n};\n\nexport interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {\n  /** An array of MenuItemProps. */\n  items: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * Determines menu item content layout structure.\n   * @default 'stacked'\n   */\n  itemLayout?: SummaryItemProps['layout'];\n  /** Renders an input to filter items in the menu */\n  filterInputProps?: OmitStrict<InputProps, 'type'>;\n  /** Renders a create new action below the menu. */\n  onCreateNew?: () => void;\n  /** ID placed on the menu's list element. */\n  listId?: string;\n  /**\n   * Indicates intent for the menu.\n   * As of now item types can not be mixed.\n   * @default 'action'\n   */\n  mode?: 'action' | 'multi-select' | 'single-select';\n  role?: 'menu' | 'listbox';\n  /**\n   * Always recommended to go for default drill-down variant for better accessibility.\n   * When flyout variant is selected, its recommended not to have more than 1 nested level\n   * @default 'drill-down'\n   */\n  variant?: 'drill-down' | 'flyout';\n  /**\n   * Use to accent(make bold) portions of the primary text.\n   * Useful for filter/search results.\n   * If passed a function, that function will be passed each items primary text.\n   */\n  accent?: RegExp | ((primary: string) => RegExp);\n  /**\n   * Item height will grow or shrink based on item count.\n   * Use this indicate at which item the menu should begin its scroll.\n   * @default 7\n   */\n  scrollAt?: number;\n  /** A simple message to display when there are no items. */\n  emptyText?: string;\n  /**\n   * A top level handler for all item clicks.\n   * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n   * Both an item's onClick and this will be called if both are passed.\n   */\n  onItemClick?: MenuItemProps['onClick'];\n  /**\n   * A top level handler for all item pseudo focus events.\n   * This is convenient way to detect which item is active to react by updating state or performing an action.\n   */\n  onItemActive?: (id: MenuItemProps['id']) => void;\n  /**\n   * A top level handler for clicks on parent items to expand their child items.\n   * This is convenient way to detect when an item is expanded.\n   * For lazy loading this would be a good time to set an item's items.\n   * Both an item's onExpand and this will be called if both are passed.\n   */\n  onItemExpand?: MenuProps['onItemClick'];\n  /** A top level handler for capturing when nested items have been collapsed / \"back\" button clicks. */\n  onItemCollapse?: (id: MenuItemProps['id']) => void;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more items */\n  loadMore?: (id?: MenuItemProps['id']) => void;\n  /** Ref placed on the root menu element. */\n  ref?: Ref<HTMLDivElement>;\n  /** HTML ID. */\n  id?: string;\n  /**\n   * Currently highlighted item.\n   * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n   * and unbinds menu useActiveDescendant keydown controls.\n   * @deprecated\n   */\n  currentItemId?: string;\n  /** Override for default active-descendant focus control element in menu */\n  focusControlEl?: HTMLElement | undefined;\n  /** Header region. */\n  header?: ReactNode;\n  /** Footer region. */\n  footer?: ReactNode;\n  /** Pauses evaluation of menu active descendants while true */\n  pauseDescendantEvaluation?: UseActiveDescendantConfig['pauseDescendantEvaluation'];\n  /**\n   * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n   * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n   */\n  arrowNavigationUnsupported?: boolean;\n  /** Additional information to announce to screen reader users. Read before menu navigation instructions. */\n  'aria-describedby'?: string;\n  /** Label for menu or listbox element */\n  'aria-label'?: string;\n  /**\n   * Custom menu list rendering\n   * @internal\n   */\n  menuList?: ReactNode;\n  handleRef?: Ref<MenuHandleValue>;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n  MenuProps,\n  'mode' | 'variant' | 'scrollAt' | 'loading' | 'itemLayout'\n>;\n\nexport interface MenuContextProps\n  extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items' | 'handleRef'> {\n  radioName?: string;\n  componentId: string;\n  pushFlyoutId: (id: string) => void;\n  flyOutActiveIdStack: string[];\n  focusControl: HTMLElement | null;\n  updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n  setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;\n  setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n  getScopedItemId: (itemId: string) => string;\n  updateParentDescendantStack?: (item: HTMLElement | null) => void;\n  expandTo?: {\n    parentItemId: MenuItemProps['id'] | undefined;\n    onComplete: () => void;\n  };\n}\n\nexport interface NavItemsListProps {\n  listRef: RefObject<HTMLUListElement>;\n  cycle?: boolean;\n}\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,EACrB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,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;AAMpD,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;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,4GAiB5B,CAAC;;;;AA+KF,wBAA6D"}
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIjB,oBAAoB,EACrB,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;AAMpD,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;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,4GAiB5B,CAAC;;;;AA0LF,wBAA6D"}

package/lib/components/MenuButton/MenuButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { useConsolidatedRef, useUID, useFocusWithin, useDirection, useTestIds, useEscape } from '../../hooks';
+import { useConsolidatedRef, useUID, useFocusWithin, useDirection, useTestIds, useEscape, useElement } from '../../hooks';
 import Button, { StyledButton } from '../Button';
 import Popover, { StyledPopover } from '../Popover';
 import Menu from '../Menu';
@@ -61,7 +61,10 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
     const testIds = useTestIds(testId, getMenuButtonTestIds);
     const [isOpen, setIsOpen] = useState(false);
     const buttonRef = useConsolidatedRef(ref);
-    const popoverRef = useConsolidatedRef(popover?.ref);
+    // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read
+    const [, forceRerender] = useElement(null);
+    const popoverRef = useConsolidatedRef(popover?.ref, forceRerender);
+    const filterInputRef = useConsolidatedRef(menu?.filterInputProps?.ref);
     const menuRef = useConsolidatedRef(menu?.ref);
     // FIXME: Type assertion required for issue in useFocusWithin generic
     useFocusWithin([popoverRef, buttonRef], useCallback((isFocused) => {
@@ -81,6 +84,13 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
             buttonRef.current?.focus();
         }
     }, menu?.focusControlEl);
+    useEscape(e => {
+        if (isOpen) {
+            setIsOpen(false);
+            e.stopPropagation();
+            buttonRef.current?.focus();
+        }
+    }, filterInputRef);
     const { rtl } = useDirection();
     return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": testIds.root, as: StyledMenuButton, "aria-label": text, ...restProps, id: id, ref: buttonRef, "aria-expanded": isOpen, "aria-haspopup": 'menu', "aria-controls": isOpen ? `${id}-popover` : undefined, label: iconOnly && !isOpen ? text : undefined, onClick: (e) => {
                     // e.detail is 0 when triggered by keyboard.

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} 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} 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 Text, { StyledText } from '../Text';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport { 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  /**\n   * Whether to display an arrow when only the icon is displayed.\n   * Only applies when `iconOnly` is true.\n   * @default false\n   */\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 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    ${StyledText} {\n      text-overflow: ellipsis;\n      overflow: hidden;\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\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 = false,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getMenuButtonTestIds);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const buttonRef = useConsolidatedRef(ref);\n  const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.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  const { rtl } = useDirection();\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        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              <Text>{text}</Text>\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </>\n          )}\n          {(!iconOnly || showArrow) && <Icon name='arrow-micro-down' />}\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      >\n        {menu && (\n          <Menu\n            testId={testIds.root}\n            {...menu}\n            ref={menuRef}\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} 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 Text, { StyledText } from '../Text';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport { 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  /**\n   * Whether to display an arrow when only the icon is displayed.\n   * Only applies when `iconOnly` is true.\n   * @default false\n   */\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 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    ${StyledText} {\n      text-overflow: ellipsis;\n      overflow: hidden;\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\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 = false,\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  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        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              <Text>{text}</Text>\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </>\n          )}\n          {(!iconOnly || showArrow) && <Icon name='arrow-micro-down' />}\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      >\n        {menu && (\n          <Menu\n            testId={testIds.root}\n            {...menu}\n            ref={menuRef}\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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAM5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA4ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GA0GhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;AAyGF,wBAA6D"}
+{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAM5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA4ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GA0GhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;AAkIF,wBAA6D"}

package/lib/components/RadioCheck/RadioCheck.js

@@ -5,7 +5,7 @@ import { hideVisually } from 'polished';
 import FormField, { StyledFormFieldInfo } from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
-import { createClassName, tryCatch, withTestIds } from '../../utils';
+import { createClassName, getActiveElement, tryCatch, withTestIds } from '../../utils';
 import { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';
 import { StyledLabel } from '../Label';
 import { calculateFontSize, readableColor } from '../../styles';
@@ -209,12 +209,29 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
     const testIds = useTestIds(testId, getRadioCheckTestIds);
     const isRadio = type === 'radio';
     const card = variant === 'card';
-    const newRef = useConsolidatedRef(ref);
+    const inputRef = useConsolidatedRef(ref);
     const readonlyDescId = useUID();
     useEffect(() => {
-        if (!isRadio && newRef.current)
-            newRef.current.indeterminate = !!indeterminate;
-    }, [newRef, indeterminate, isRadio]);
+        if (!isRadio && inputRef.current)
+            inputRef.current.indeterminate = !!indeterminate;
+    }, [inputRef, indeterminate, isRadio]);
+    // Prevents blur when a user mouse clicks the label to select an input that is actively focused.
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        const labelEl = inputRef.current.nextSibling;
+        if (labelEl?.nodeName.toUpperCase() !== 'LABEL')
+            return;
+        const ac = new AbortController();
+        labelEl.addEventListener('mousedown', e => {
+            if (inputRef.current === getActiveElement()) {
+                e.preventDefault();
+            }
+        }, { signal: ac.signal });
+        return () => {
+            ac.abort();
+        };
+    }, []);
     return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, onMouseDown: (e) => e.preventDefault() }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
                 variant,
                 type
@@ -228,7 +245,7 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
                 if (type === 'radio' && readOnly && e.key.includes('Arrow'))
                     e.preventDefault();
                 onKeyDown?.(e);
-            }, ref: newRef }) }));
+            }, ref: inputRef }) }));
 });
 export default withTestIds(RadioCheck, getRadioCheckTestIds);
 //# sourceMappingURL=RadioCheck.js.map

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n  'input',\n  NoChildrenProp &\n    TestIdProp<typeof elements> & {\n      /** Pass a string or a fragment with an Icon and string. */\n      label?: FormControlProps['label'];\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Sets the type of input. */\n      type: 'radio' | 'checkbox';\n      /**\n       * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n       * @default false\n       */\n      indeterminate?: boolean;\n      /** Sets checked prop via onChange when using as controlled component. */\n      checked?: boolean;\n      /** Initialize checked prop when using as uncontrolled component. */\n      defaultChecked?: boolean;\n      /**\n       * Controls the styling of the RadioCheck.\n       * @default 'simple'\n       */\n      variant?: 'simple' | 'card';\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** info like error, success, warning messages */\n      info?: FormControlProps['info'];\n      /** Callback invoked when this particular radio button is selected. */\n      onChange?: ChangeEventHandler<HTMLInputElement>;\n      /** Pass a string used as input's aria-describedby. */\n      ariaDescribedby?: string;\n    }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    let statusBorderColor = borderColor;\n    if (status === 'error' || status === 'warning') {\n      statusBorderColor = formField[status]['status-color'];\n    }\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: 1ch;\n      border: ${borderWidth} solid ${statusBorderColor};\n      background-color: ${backgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      margin: auto;\n      width: calc(${size} * 0.3);\n      height: calc(${size} * 0.3);\n      border-radius: ${radioRadius};\n      border: calc(${size} * 0.2) solid ${foreground};\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n        > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n  function RadioCheck(props, ref) {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      testId,\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      indeterminate = false,\n      checked,\n      defaultChecked,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      onChange,\n      status,\n      info,\n      additionalInfo,\n      ariaDescribedby,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getRadioCheckTestIds);\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n    const readonlyDescId = useUID();\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) newRef.current.indeterminate = !!indeterminate;\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        testId={testIds}\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}\n            />\n            {label}\n            {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        isRadioCheck\n        inline\n        labelAfter\n        additionalInfo={additionalInfo}\n      >\n        <StyledRadioCheckInput\n          data-testid={testIds.control}\n          {...restProps}\n          className={createClassName('radio-check', className, {\n            variant,\n            type\n          })}\n          id={id}\n          type={type}\n          required={required}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={onChange}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, getActiveElement, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n  'input',\n  NoChildrenProp &\n    TestIdProp<typeof elements> & {\n      /** Pass a string or a fragment with an Icon and string. */\n      label?: FormControlProps['label'];\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Sets the type of input. */\n      type: 'radio' | 'checkbox';\n      /**\n       * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n       * @default false\n       */\n      indeterminate?: boolean;\n      /** Sets checked prop via onChange when using as controlled component. */\n      checked?: boolean;\n      /** Initialize checked prop when using as uncontrolled component. */\n      defaultChecked?: boolean;\n      /**\n       * Controls the styling of the RadioCheck.\n       * @default 'simple'\n       */\n      variant?: 'simple' | 'card';\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** info like error, success, warning messages */\n      info?: FormControlProps['info'];\n      /** Callback invoked when this particular radio button is selected. */\n      onChange?: ChangeEventHandler<HTMLInputElement>;\n      /** Pass a string used as input's aria-describedby. */\n      ariaDescribedby?: string;\n    }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    let statusBorderColor = borderColor;\n    if (status === 'error' || status === 'warning') {\n      statusBorderColor = formField[status]['status-color'];\n    }\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: 1ch;\n      border: ${borderWidth} solid ${statusBorderColor};\n      background-color: ${backgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      margin: auto;\n      width: calc(${size} * 0.3);\n      height: calc(${size} * 0.3);\n      border-radius: ${radioRadius};\n      border: calc(${size} * 0.2) solid ${foreground};\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n        > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n  function RadioCheck(props, ref) {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      testId,\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      indeterminate = false,\n      checked,\n      defaultChecked,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      onChange,\n      status,\n      info,\n      additionalInfo,\n      ariaDescribedby,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getRadioCheckTestIds);\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const inputRef = useConsolidatedRef(ref);\n    const readonlyDescId = useUID();\n\n    useEffect(() => {\n      if (!isRadio && inputRef.current) inputRef.current.indeterminate = !!indeterminate;\n    }, [inputRef, indeterminate, isRadio]);\n\n    // Prevents blur when a user mouse clicks the label to select an input that is actively focused.\n    useEffect(() => {\n      if (!inputRef.current) return;\n\n      const labelEl = inputRef.current.nextSibling;\n\n      if (labelEl?.nodeName.toUpperCase() !== 'LABEL') return;\n\n      const ac = new AbortController();\n\n      labelEl.addEventListener(\n        'mousedown',\n        e => {\n          if (inputRef.current === getActiveElement()) {\n            e.preventDefault();\n          }\n        },\n        { signal: ac.signal }\n      );\n\n      return () => {\n        ac.abort();\n      };\n    }, []);\n\n    return (\n      <FormField\n        testId={testIds}\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}\n            />\n            {label}\n            {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        isRadioCheck\n        inline\n        labelAfter\n        additionalInfo={additionalInfo}\n      >\n        <StyledRadioCheckInput\n          data-testid={testIds.control}\n          {...restProps}\n          className={createClassName('radio-check', className, {\n            variant,\n            type\n          })}\n          id={id}\n          type={type}\n          required={required}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={onChange}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n            onKeyDown?.(e);\n          }}\n          ref={inputRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}

package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts

@@ -1,10 +1,10 @@
 import type { Ref, ReactElement, ChangeEvent } from 'react';
-import type { ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
+import type { TestIdProp, WithAttributes } from '../../types';
 import type { FormFieldProps } from '../FormField';
 import type { FormControlProps } from '../FormControl';
 import type { RadioCheckProps } from '../RadioCheck';
 import type { elements } from '../FormField/FormField.test-ids';
-export interface RadioCheckGroupProps extends TestIdProp<typeof elements> {
+export type RadioCheckGroupProps = WithAttributes<'fieldset', TestIdProp<typeof elements> & {
     /** Accepts Checkboxes or RadioButtons as children. */
     children: ReactElement | ReactElement[];
     /**
@@ -49,9 +49,9 @@ export interface RadioCheckGroupProps extends TestIdProp<typeof elements> {
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLElement>;
-}
+}>;
 export declare const StyledRadioCheckGroup: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
-declare const _default: ForwardRefForwardPropsComponent<RadioCheckGroupProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioCheckGroupProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAiBrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IACvE,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,8GAuBhC,CAAC;;;;AAwIH,wBAAuE"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAiBrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,8GAuBhC,CAAC;;;;AAkJH,wBAAuE"}