@pega/cosmos-react-core 9.0.0-build.12.8 → 9.0.0-build.12.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Actions/Actions.d.ts +0 -2
- package/lib/components/Actions/Actions.d.ts.map +1 -1
- package/lib/components/Actions/Actions.js +4 -28
- package/lib/components/Actions/Actions.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +0 -2
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.js +4 -30
- package/lib/components/AppShell/NavigationListItemWrapper.js.map +1 -1
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +3 -13
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.styles.d.ts +0 -2
- package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
- package/lib/components/Menu/Menu.styles.js +1 -58
- package/lib/components/Menu/Menu.styles.js.map +1 -1
- package/lib/components/Menu/Menu.types.d.ts +0 -3
- package/lib/components/Menu/Menu.types.d.ts.map +1 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.d.ts.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +2 -12
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +0 -1
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +0 -1
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +0 -1
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +0 -1
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { hideVisually, mix, rgba
|
|
1
|
+
import { hideVisually, mix, rgba } from 'polished';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { defaultThemeProp } from '../../theme';
|
|
4
4
|
import { StyledEmptyState } from '../EmptyState';
|
|
@@ -13,7 +13,6 @@ import { readableColor } from '../../styles';
|
|
|
13
13
|
import { StyledPrimary, StyledSecondary, StyledSummaryItem, StyledSummaryItemActions, StyledVisual } from '../SummaryItem';
|
|
14
14
|
import { ellipsisOverflow } from '../../styles/mixins';
|
|
15
15
|
import { StyledFlex } from '../Flex';
|
|
16
|
-
import { StyledFormControl } from '../FormControl';
|
|
17
16
|
export const StyledExpandButton = styled(Button) `
|
|
18
17
|
align-self: center;
|
|
19
18
|
`;
|
|
@@ -378,60 +377,4 @@ export const StyledMenu = styled.div(({ theme }) => {
|
|
|
378
377
|
`;
|
|
379
378
|
});
|
|
380
379
|
StyledMenu.defaultProps = defaultThemeProp;
|
|
381
|
-
export const StyledMenuFilter = styled.div(({ theme }) => {
|
|
382
|
-
const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;
|
|
383
|
-
return css `
|
|
384
|
-
min-height: ${theme.components.input.height};
|
|
385
|
-
height: ${theme.components.input.height};
|
|
386
|
-
|
|
387
|
-
@media (pointer: coarse) {
|
|
388
|
-
min-height: ${theme.base['hit-area']['finger-min']};
|
|
389
|
-
min-width: ${theme.base['hit-area']['finger-min']};
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
${StyledFormControl} {
|
|
393
|
-
height: 100%;
|
|
394
|
-
border-radius: ${borderRadius};
|
|
395
|
-
padding-inline-start: calc(1.5 * ${theme.components.input.padding});
|
|
396
|
-
padding-inline-end: calc(4 * ${theme.components.input.padding});
|
|
397
|
-
|
|
398
|
-
&::-webkit-search-cancel-button {
|
|
399
|
-
display: none;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
::-webkit-search-decoration {
|
|
403
|
-
-webkit-appearance: none;
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
&:focus:not([disabled]) {
|
|
407
|
-
box-shadow: ${theme.base.shadow['focus-inset']};
|
|
408
|
-
border-color: ${theme.components['form-control']['border-color']};
|
|
409
|
-
|
|
410
|
-
:hover {
|
|
411
|
-
border-color: ${theme.components['form-control'][':hover']['border-color']};
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
`;
|
|
416
|
-
});
|
|
417
|
-
StyledMenuFilter.defaultProps = defaultThemeProp;
|
|
418
|
-
export const StyledFilterIcon = styled(Icon)(({ theme }) => {
|
|
419
|
-
const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));
|
|
420
|
-
return css `
|
|
421
|
-
position: absolute;
|
|
422
|
-
color: ${iconColor};
|
|
423
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
424
|
-
inset-block-start: calc((${theme.components.input.height} - max(1.125rem, 14px)));
|
|
425
|
-
inset-inline-end: calc(2.5 * ${theme.components.input.padding});
|
|
426
|
-
|
|
427
|
-
@media (pointer: coarse) {
|
|
428
|
-
/* stylelint-disable unit-allowed-list */
|
|
429
|
-
inset-block-start: calc(
|
|
430
|
-
(${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px)) * 0.75
|
|
431
|
-
);
|
|
432
|
-
/* stylelint-enable unit-allowed-list */
|
|
433
|
-
}
|
|
434
|
-
`;
|
|
435
|
-
});
|
|
436
|
-
StyledFilterIcon.defaultProps = defaultThemeProp;
|
|
437
380
|
//# sourceMappingURL=Menu.styles.js.map
|
|
@@ -1 +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, 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"]}
|
|
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 { 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';\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"]}
|
|
@@ -4,7 +4,6 @@ import type { MetaListProps } from '../MetaList';
|
|
|
4
4
|
import type { UseActiveDescendantConfig } from '../../hooks';
|
|
5
5
|
import type { TooltipProps } from '../Tooltip';
|
|
6
6
|
import type { SummaryItemProps } from '../SummaryItem';
|
|
7
|
-
import type { InputProps } from '../Input';
|
|
8
7
|
export type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;
|
|
9
8
|
export interface MenuItemProps extends MenuObjectProps {
|
|
10
9
|
/** The primary piece of item information as a string. */
|
|
@@ -89,8 +88,6 @@ export interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {
|
|
|
89
88
|
* @default 'stacked'
|
|
90
89
|
*/
|
|
91
90
|
itemLayout?: SummaryItemProps['layout'];
|
|
92
|
-
/** Renders an input to filter items in the menu */
|
|
93
|
-
filterInputProps?: OmitStrict<InputProps, 'type'>;
|
|
94
91
|
/** Renders a create new action below the menu. */
|
|
95
92
|
onCreateNew?: () => void;
|
|
96
93
|
/** ID placed on the menu's list element. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +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';\
|
|
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"]}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { forwardRef, useState, useCallback } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { defaultThemeProp } from '../../theme';
|
|
5
|
-
import { useConsolidatedRef, useUID, useFocusWithin, useDirection, useTestIds, useEscape
|
|
5
|
+
import { useConsolidatedRef, useUID, useFocusWithin, useDirection, useTestIds, useEscape } from '../../hooks';
|
|
6
6
|
import Button, { StyledButton } from '../Button';
|
|
7
7
|
import Popover, { StyledPopover } from '../Popover';
|
|
8
8
|
import Menu from '../Menu';
|
|
@@ -61,10 +61,7 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
|
|
|
61
61
|
const testIds = useTestIds(testId, getMenuButtonTestIds);
|
|
62
62
|
const [isOpen, setIsOpen] = useState(false);
|
|
63
63
|
const buttonRef = useConsolidatedRef(ref);
|
|
64
|
-
|
|
65
|
-
const [, forceRerender] = useElement(null);
|
|
66
|
-
const popoverRef = useConsolidatedRef(popover?.ref, forceRerender);
|
|
67
|
-
const filterInputRef = useConsolidatedRef(menu?.filterInputProps?.ref);
|
|
64
|
+
const popoverRef = useConsolidatedRef(popover?.ref);
|
|
68
65
|
const menuRef = useConsolidatedRef(menu?.ref);
|
|
69
66
|
// FIXME: Type assertion required for issue in useFocusWithin generic
|
|
70
67
|
useFocusWithin([popoverRef, buttonRef], useCallback((isFocused) => {
|
|
@@ -84,13 +81,6 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
|
|
|
84
81
|
buttonRef.current?.focus();
|
|
85
82
|
}
|
|
86
83
|
}, menu?.focusControlEl);
|
|
87
|
-
useEscape(e => {
|
|
88
|
-
if (isOpen) {
|
|
89
|
-
setIsOpen(false);
|
|
90
|
-
e.stopPropagation();
|
|
91
|
-
buttonRef.current?.focus();
|
|
92
|
-
}
|
|
93
|
-
}, filterInputRef);
|
|
94
84
|
const { rtl } = useDirection();
|
|
95
85
|
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) => {
|
|
96
86
|
// e.detail is 0 when triggered by keyboard.
|
|
@@ -1 +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 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"]}
|
|
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"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -284,7 +284,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
284
284
|
composite_input_open_button_a11y: string;
|
|
285
285
|
composite_input_close_button_a11y: string;
|
|
286
286
|
menu_selection_instructions: string;
|
|
287
|
-
menu_filter_instructions: string;
|
|
288
287
|
menu_item_expand_arrow: string;
|
|
289
288
|
menu_item_collapse_arrow: string;
|
|
290
289
|
menu_item_collapse_shift_space: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -280,7 +280,6 @@ declare const _default: {
|
|
|
280
280
|
composite_input_open_button_a11y: string;
|
|
281
281
|
composite_input_close_button_a11y: string;
|
|
282
282
|
menu_selection_instructions: string;
|
|
283
|
-
menu_filter_instructions: string;
|
|
284
283
|
menu_item_expand_arrow: string;
|
|
285
284
|
menu_item_collapse_arrow: string;
|
|
286
285
|
menu_item_collapse_shift_space: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyhDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqMxB,6CAA6C;;;;IAK7C,4CAA4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2F5C,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAt3D/C,wBA26DE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -305,7 +305,6 @@ export default {
|
|
|
305
305
|
composite_input_close_button_a11y: 'Close configuration dialog',
|
|
306
306
|
/* core:Menu */
|
|
307
307
|
menu_selection_instructions: 'Press enter to select items.',
|
|
308
|
-
menu_filter_instructions: 'Start typing to filter.',
|
|
309
308
|
menu_item_expand_arrow: '{0}. Arrow right to expand.',
|
|
310
309
|
menu_item_collapse_arrow: 'Arrow left to collapse.',
|
|
311
310
|
menu_item_collapse_shift_space: 'Press shift space to collapse.',
|