@pega/cosmos-react-core 10.0.0-build.6.0 → 10.0.0-build.7.0
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/Backdrop/Backdrop.d.ts.map +1 -1
- package/lib/components/Backdrop/Backdrop.js +2 -20
- package/lib/components/Backdrop/Backdrop.js.map +1 -1
- package/lib/components/Dialog/Dialog.styles.d.ts +1 -1
- package/lib/components/Dialog/Dialog.styles.d.ts.map +1 -1
- package/lib/components/Dialog/FormDialog.js +1 -1
- package/lib/components/Dialog/FormDialog.js.map +1 -1
- package/lib/components/Dialog/InfoDialog.js +1 -1
- package/lib/components/Dialog/InfoDialog.js.map +1 -1
- package/lib/components/Dialog/TouchInfoDialog.d.ts +1 -1
- package/lib/components/InlineEdit/InlineEdit.js.map +1 -1
- package/lib/components/InlineEdit/InlineEdit.styles.js +1 -1
- package/lib/components/InlineEdit/InlineEdit.styles.js.map +1 -1
- package/lib/components/Link/Link.d.ts.map +1 -1
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/Modal/Modal.styles.d.ts.map +1 -1
- package/lib/components/Modal/Modal.styles.js +0 -2
- package/lib/components/Modal/Modal.styles.js.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map +1 -1
- package/lib/components/Popover/Popover.d.ts +66 -4
- package/lib/components/Popover/Popover.d.ts.map +1 -1
- package/lib/components/Popover/Popover.js +80 -229
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.styles.d.ts +0 -1
- package/lib/components/Popover/Popover.styles.d.ts.map +1 -1
- package/lib/components/Popover/Popover.styles.js +14 -20
- package/lib/components/Popover/Popover.styles.js.map +1 -1
- package/lib/components/Popover/getResolvedTarget.d.ts +11 -0
- package/lib/components/Popover/getResolvedTarget.d.ts.map +1 -0
- package/lib/components/Popover/getResolvedTarget.js +13 -0
- package/lib/components/Popover/getResolvedTarget.js.map +1 -0
- package/lib/components/Popover/index.d.ts +2 -2
- package/lib/components/Popover/index.d.ts.map +1 -1
- package/lib/components/Popover/index.js +1 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/modifiers.d.ts +4 -24
- package/lib/components/Popover/modifiers.d.ts.map +1 -1
- package/lib/components/Popover/modifiers.js +125 -202
- package/lib/components/Popover/modifiers.js.map +1 -1
- package/lib/components/SkipLinks/SkipLinks.styles.d.ts +1 -1
- package/lib/components/SkipLinks/SkipLinks.styles.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.js +0 -6
- package/lib/styles/GlobalStyle.js.map +1 -1
- package/package.json +4 -3
- package/lib/components/Popover/Popover.types.d.ts +0 -152
- package/lib/components/Popover/Popover.types.d.ts.map +0 -1
- package/lib/components/Popover/Popover.types.js +0 -2
- package/lib/components/Popover/Popover.types.js.map +0 -1
- package/lib/components/Popover/utils.d.ts +0 -74
- package/lib/components/Popover/utils.d.ts.map +0 -1
- package/lib/components/Popover/utils.js +0 -362
- package/lib/components/Popover/utils.js.map +0 -1
|
@@ -45,7 +45,6 @@ export const StyledModalContent = styled.div(({ theme: { base } }) => {
|
|
|
45
45
|
|
|
46
46
|
@media (height >= 31.25rem) {
|
|
47
47
|
overflow-y: auto;
|
|
48
|
-
overscroll-behavior: none;
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
&:last-child {
|
|
@@ -75,7 +74,6 @@ export const StyledModal = styled(StyledCard)(({ theme: { base, components }, al
|
|
|
75
74
|
|
|
76
75
|
@media (height < 31.25rem) {
|
|
77
76
|
overflow-y: auto;
|
|
78
|
-
overscroll-behavior: none;
|
|
79
77
|
}
|
|
80
78
|
|
|
81
79
|
@media (forced-colors: active) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gCAAgC,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACrE,MAAM,SAAS,GAAG,IAAI,CAAC;IAEvB,OAAO,GAAG,CAAA;oBACQ,CAAC,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,UAAU,CAAC,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO;aAC/E,GAAG,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;;sBAElD,IAAI,CAAC,WAAW,CAAC,EAAE;sBACnB,CAAC,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,UAAU,GAAG,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO;eACjF,GAAG,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO;;;;uCAIrC,IAAI,CAAC,OAAO;;;WAGxC,UAAU;2BACM,IAAI,CAAC,OAAO;;;MAGjC,YAAY;eACH,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;;0BAEc,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;;;sBAG1C,IAAI,CAAC,WAAW,CAAC,EAAE;4BACb,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO;;;;;;;;;iCASnC,IAAI,CAAC,OAAO;;;sCAGP,cAAc;;;;GAIjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAE3C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9E,IAAI,eAAe,GAAG,MAAM,CAAC;IAC7B,IAAI,eAAe,GAAG,MAAM,CAAC;IAE7B,IAAI,KAAK,EAAE,CAAC;QACV,eAAe,GAAG,MAAM,CAAC;QACzB,eAAe,GAAG,MAAM,CAAC;IAC3B,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,eAAe,GAAG,MAAM,CAAC;IAC3B,CAAC;IAED,OAAO,GAAG,CAAA;;kBAEM,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;;;;MAW5B,gCAAgC;4BACV,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;wBACpE,IAAI,CAAC,WAAW,CAAC,EAAE;4BACf,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO;;;;MAI1F,CAAC,KAAK,IAAI,OAAO;QACjB,CAAC,CAAC,GAAG,CAAA;;;YAGC,SAAS;YACT,CAAC,CAAC,GAAG,CAAA;oDACmC,eAAe;eACpD;YACH,CAAC,CAAC,GAAG,CAAA;;eAEF;;+BAEgB,IAAI,CAAC,WAAW,CAAC,EAAE;;;cAGpC,SAAS;YACT,CAAC,CAAC,GAAG,CAAA;sDACmC,eAAe;iBACpD;YACH,CAAC,CAAC,GAAG,CAAA;;iBAEF;;;+BAGc,IAAI,CAAC,WAAW,CAAC,EAAE;;;cAGpC,SAAS;YACT,CAAC,CAAC,GAAG,CAAA;sDACmC,eAAe;iBACpD;YACH,CAAC,CAAC,GAAG,CAAA;;iBAEF;;SAER;QACH,CAAC,CAAC,GAAG,CAAA;8CACmC,eAAe;8CACf,eAAe;;;gCAG7B,sBAAsB;uCACf,IAAI,CAAC,eAAe,CAAC;qCACvB,IAAI,CAAC,eAAe,CAAC;;;YAG9C,CAAC,MAAM;YACT,GAAG,CAAA;;WAEF;;+BAEoB,IAAI,CAAC,WAAW,CAAC,EAAE;gDACF,eAAe;gDACf,eAAe;;cAEjD,CAAC,MAAM;YACT,GAAG,CAAA;;aAEF;;;+BAGkB,IAAI,CAAC,WAAW,CAAC,EAAE;gDACF,eAAe;gDACf,eAAe;;cAEjD,CAAC,MAAM;YACT,GAAG,CAAA;;aAEF;;SAEJ;;MAEH,KAAK,KAAK,QAAQ;QACpB,GAAG,CAAA;;;;;;;;;;0BAUmB,IAAI,CAAC,WAAW,CAAC,EAAE;qCACR,IAAI,CAAC,eAAe,CAAC;mCACvB,IAAI,CAAC,eAAe,CAAC;;;KAGnD;;;QAGG,kBAAkB;;;;;;;;;;;oBAWN,IAAI,CAAC,MAAM,CAAC,KAAK;;;;oBAIjB,UAAU,CAAC,KAAK,CAAC,UAAU;;;;;;QAMvC,iBAAiB;;;;;;;;;;;;cAYX,iBAAiB;sBACT,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAGzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA;;IAE3C,gBAAgB;;CAEnB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport type { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledResponsiveActionsContainer } from '../ResponsiveActions';\nimport { StyledProgressBackdrop } from '../Progress';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header(({ theme: { base } }) => {\n const padAdjust = 0.75;\n\n return css`\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${1.5 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n\n h2 {\n margin-block-start: calc(0.5 * ${base.spacing});\n }\n\n h2 > ${StyledIcon} {\n margin-inline-end: ${base.spacing};\n }\n\n ${StyledButton} {\n color: ${base.palette['foreground-color']};\n }\n `;\n});\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n return css`\n position: relative;\n padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n overflow-anchor: none;\n\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(0.5 * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n\n @media (height >= 31.25rem) {\n overflow-y: auto;\n overscroll-behavior: none;\n }\n\n &:last-child {\n padding-bottom: calc(3 * ${base.spacing});\n }\n\n & > [data-config-root='true'] > ${StyledBackdrop} {\n top: var(--scroll-top, 0);\n height: 100%;\n }\n `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base, components }, alert, autoWidth, center, stretch, state }) => {\n let defaultMinWidth = '80ch';\n let defaultMaxWidth = '80ch';\n\n if (alert) {\n defaultMinWidth = '60ch';\n defaultMaxWidth = '60ch';\n } else if (autoWidth) {\n defaultMaxWidth = '100%';\n }\n\n return css`\n position: relative;\n box-shadow: ${base.shadow.high};\n\n @media (height < 31.25rem) {\n overflow-y: auto;\n overscroll-behavior: none;\n }\n\n @media (forced-colors: active) {\n border: 0.0625rem solid transparent;\n }\n\n ${StyledResponsiveActionsContainer} {\n padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(5 * ${base.spacing}) calc(1.5 * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n }\n\n ${!alert && stretch\n ? css`\n height: calc(100% - 1rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 1rem);\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n height: calc(100% - 2rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 2rem);\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n height: calc(100% - 4rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 4rem);\n `}\n }\n `\n : css`\n min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n max-height: calc(100% - 1rem);\n\n &:not(:has(footer)) ${StyledProgressBackdrop} {\n border-end-start-radius: ${base['border-radius']};\n border-end-end-radius: ${base['border-radius']};\n }\n\n ${!center &&\n css`\n margin-block-start: 0.5rem;\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n max-height: calc(100% - 2rem);\n ${!center &&\n css`\n margin-block-start: 1rem;\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n max-height: calc(100% - 4rem);\n ${!center &&\n css`\n margin-block-start: 2rem;\n `}\n }\n `}\n\n ${state === 'docked' &&\n css`\n /*\n * This seems like the most optimal of the suboptimal solutions.\n * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n */\n &&& {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n pointer-events: auto;\n\n @media (width < ${base.breakpoints.sm}) {\n border-end-start-radius: ${base['border-radius']};\n border-end-end-radius: ${base['border-radius']};\n }\n }\n `}\n\n &[aria-busy='true'] {\n ${StyledModalContent} {\n /* TODO: Replace with useScrollToggle hook. */\n overflow: hidden;\n min-height: 8rem;\n }\n }\n\n &:focus-visible {\n @media (forced-colors: none) {\n outline: none;\n }\n box-shadow: ${base.shadow.focus};\n }\n\n &&& {\n background: ${components.modal.background};\n }\n\n &[data-moveable] {\n position: absolute;\n\n ${StyledModalHeader} {\n cursor: grab;\n\n &:focus-visible {\n outline: none;\n }\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &:has(${StyledModalHeader}:focus-visible) {\n box-shadow: ${base.shadow.high}, ${base.shadow.focus};\n }\n }\n `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n\nexport const StyledMinimizedLabel = styled.span`\n flex-shrink: 1;\n ${ellipsisOverflow}\n font-weight: bold;\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport type { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledResponsiveActionsContainer } from '../ResponsiveActions';\nimport { StyledProgressBackdrop } from '../Progress';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header(({ theme: { base } }) => {\n const padAdjust = 0.75;\n\n return css`\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${1.5 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n\n h2 {\n margin-block-start: calc(0.5 * ${base.spacing});\n }\n\n h2 > ${StyledIcon} {\n margin-inline-end: ${base.spacing};\n }\n\n ${StyledButton} {\n color: ${base.palette['foreground-color']};\n }\n `;\n});\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n return css`\n position: relative;\n padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n overflow-anchor: none;\n\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(0.5 * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n\n @media (height >= 31.25rem) {\n overflow-y: auto;\n }\n\n &:last-child {\n padding-bottom: calc(3 * ${base.spacing});\n }\n\n & > [data-config-root='true'] > ${StyledBackdrop} {\n top: var(--scroll-top, 0);\n height: 100%;\n }\n `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base, components }, alert, autoWidth, center, stretch, state }) => {\n let defaultMinWidth = '80ch';\n let defaultMaxWidth = '80ch';\n\n if (alert) {\n defaultMinWidth = '60ch';\n defaultMaxWidth = '60ch';\n } else if (autoWidth) {\n defaultMaxWidth = '100%';\n }\n\n return css`\n position: relative;\n box-shadow: ${base.shadow.high};\n\n @media (height < 31.25rem) {\n overflow-y: auto;\n }\n\n @media (forced-colors: active) {\n border: 0.0625rem solid transparent;\n }\n\n ${StyledResponsiveActionsContainer} {\n padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n @media (width < ${base.breakpoints.sm}) {\n padding: calc(5 * ${base.spacing}) calc(1.5 * ${base.spacing}) calc(1.5 * ${base.spacing});\n }\n }\n\n ${!alert && stretch\n ? css`\n height: calc(100% - 1rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 1rem);\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n height: calc(100% - 2rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 2rem);\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n height: calc(100% - 4rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 4rem);\n `}\n }\n `\n : css`\n min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n max-height: calc(100% - 1rem);\n\n &:not(:has(footer)) ${StyledProgressBackdrop} {\n border-end-start-radius: ${base['border-radius']};\n border-end-end-radius: ${base['border-radius']};\n }\n\n ${!center &&\n css`\n margin-block-start: 0.5rem;\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n max-height: calc(100% - 2rem);\n ${!center &&\n css`\n margin-block-start: 1rem;\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n max-height: calc(100% - 4rem);\n ${!center &&\n css`\n margin-block-start: 2rem;\n `}\n }\n `}\n\n ${state === 'docked' &&\n css`\n /*\n * This seems like the most optimal of the suboptimal solutions.\n * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n */\n &&& {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n pointer-events: auto;\n\n @media (width < ${base.breakpoints.sm}) {\n border-end-start-radius: ${base['border-radius']};\n border-end-end-radius: ${base['border-radius']};\n }\n }\n `}\n\n &[aria-busy='true'] {\n ${StyledModalContent} {\n /* TODO: Replace with useScrollToggle hook. */\n overflow: hidden;\n min-height: 8rem;\n }\n }\n\n &:focus-visible {\n @media (forced-colors: none) {\n outline: none;\n }\n box-shadow: ${base.shadow.focus};\n }\n\n &&& {\n background: ${components.modal.background};\n }\n\n &[data-moveable] {\n position: absolute;\n\n ${StyledModalHeader} {\n cursor: grab;\n\n &:focus-visible {\n outline: none;\n }\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &:has(${StyledModalHeader}:focus-visible) {\n box-shadow: ${base.shadow.high}, ${base.shadow.focus};\n }\n }\n `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n\nexport const StyledMinimizedLabel = styled.span`\n flex-shrink: 1;\n ${ellipsisOverflow}\n font-weight: bold;\n`;\n"]}
|
|
@@ -7,7 +7,7 @@ export declare const stepMarkerMinWidth = 3;
|
|
|
7
7
|
export declare const stepBarMinWidth = 3;
|
|
8
8
|
/** Min height of each vertical bar segment in bars mode */
|
|
9
9
|
export declare const stepVerticalBarMinHeight = "2.5rem";
|
|
10
|
-
export declare const CurrentStepPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Popover").PopoverProps & import("../..").ForwardProps, never>> & string & Omit<(props: import("../Popover").PopoverProps & import("../..").ForwardProps) => import("react").ReactElement | null, keyof import("react").Component<any, {}, any>>;
|
|
10
|
+
export declare const CurrentStepPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Popover").PopoverProps<string> & import("../..").ForwardProps, never>> & string & Omit<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), keyof import("react").Component<any, {}, any>>;
|
|
11
11
|
export declare const StyledBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
12
12
|
shifted?: boolean;
|
|
13
13
|
}>> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,eAAO,MAAM,kBAAkB,4ZAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;YAsBrD,CAAC;AAIH,eAAO,MAAM,UAAU;eAA2B,MAAM;YA+BtD,CAAC;AAIH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAAkC,OAAO;gJAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;;;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;mKAmHnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;YAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,mOAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;YA2Cd,CAAC;AAIH,eAAO,MAAM,cAAc,6NAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUnC,CAAC;AAIH,eAAO,MAAM,sBAAsB;oBAA+B,OAAO;YA4BxE,CAAC;AAIF,eAAO,MAAM,0BAA0B;;;aAC5B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKAiFnB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAKnC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;aAC1B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKA6EnB,CAAC"}
|
|
@@ -1,6 +1,68 @@
|
|
|
1
|
-
import type { ReactElement } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
|
|
1
|
+
import type { Ref, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { PopperProps } from 'react-popper';
|
|
3
|
+
import type { VirtualElement } from '@popperjs/core';
|
|
4
|
+
import type { BaseProps, ForwardProps } from '../../types';
|
|
5
|
+
import type { ConfigurationProps } from '../Configuration';
|
|
6
|
+
export type Delay = 'none' | 'short' | 'long';
|
|
7
|
+
export interface PopoverProps<Modifiers extends string = string> extends BaseProps {
|
|
8
|
+
/** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */
|
|
9
|
+
target: Element | VirtualElement | null;
|
|
10
|
+
/**
|
|
11
|
+
* If true, the Popover will be visible.
|
|
12
|
+
* @default true
|
|
13
|
+
*/
|
|
14
|
+
show?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).
|
|
17
|
+
* @default true
|
|
18
|
+
*/
|
|
19
|
+
portal?: boolean | ConfigurationProps['portalTarget'];
|
|
20
|
+
/**
|
|
21
|
+
* Delay on showing the Popover.
|
|
22
|
+
* @default 'none'
|
|
23
|
+
*/
|
|
24
|
+
showDelay?: Delay;
|
|
25
|
+
/**
|
|
26
|
+
* Delay on hiding the Popover.
|
|
27
|
+
* @default 'none'
|
|
28
|
+
*/
|
|
29
|
+
hideDelay?: Delay;
|
|
30
|
+
/**
|
|
31
|
+
* [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)
|
|
32
|
+
* @default 'bottom'
|
|
33
|
+
*/
|
|
34
|
+
placement?: PopperProps<Modifiers>['placement'];
|
|
35
|
+
/**
|
|
36
|
+
* [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)
|
|
37
|
+
* @default 'absolute'
|
|
38
|
+
*/
|
|
39
|
+
strategy?: PopperProps<Modifiers>['strategy'];
|
|
40
|
+
/**
|
|
41
|
+
* [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)
|
|
42
|
+
* @default []
|
|
43
|
+
*/
|
|
44
|
+
modifiers?: PopperProps<Modifiers>['modifiers'];
|
|
45
|
+
/**
|
|
46
|
+
* If true, an arrow will visually identify from which element the Popover is rendered.
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
49
|
+
arrow?: boolean;
|
|
50
|
+
/** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */
|
|
51
|
+
groupId?: string;
|
|
52
|
+
/**
|
|
53
|
+
* If true, the Popover will be visibly hidden when its target leaves the viewport.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
hideOnTargetHidden?: boolean;
|
|
57
|
+
/** Callback that runs when the popover is hidden */
|
|
58
|
+
onHide?: () => void;
|
|
59
|
+
/** Callback that runs when the popover is shown */
|
|
60
|
+
onShow?: () => void;
|
|
61
|
+
/** The content of the Popover. */
|
|
62
|
+
children: ReactNode;
|
|
63
|
+
/** The ref of the wrapping element. */
|
|
64
|
+
ref?: Ref<HTMLDivElement>;
|
|
65
|
+
}
|
|
66
|
+
declare const Popover: <Modifiers extends string = string>(props: PopoverProps<Modifiers> & ForwardProps) => ReactElement | null;
|
|
5
67
|
export default Popover;
|
|
6
68
|
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAmB,GAAG,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAM3D,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAwQP,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,OAAO,CAAC"}
|
|
@@ -1,146 +1,79 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
-
import { forwardRef,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useContext, useRef, useEffect, useMemo, useState, useLayoutEffect, useCallback } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
+
import { usePopper } from 'react-popper';
|
|
4
5
|
import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useEvent, usePopoverMap, useUID } from '../../hooks';
|
|
5
6
|
import { getRelativeOffset, isInstance, windowIsAvailable } from '../../utils';
|
|
6
|
-
import { createUpdateArrowModifier, hideOnTargetHidden, isRunnableModifier, placeAndContain, preventOverflow } from './modifiers';
|
|
7
|
-
import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
|
|
8
7
|
import { PopoverManagerContext } from './PopoverContext';
|
|
9
|
-
import {
|
|
8
|
+
import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
|
|
9
|
+
import { placeAndContain } from './modifiers';
|
|
10
10
|
const delays = {
|
|
11
11
|
none: 0,
|
|
12
12
|
short: 500,
|
|
13
13
|
long: 1000
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
const builtInModifierNames = [
|
|
17
|
-
'offset',
|
|
18
|
-
'hide',
|
|
19
|
-
'arrow',
|
|
20
|
-
'preventOverflow',
|
|
21
|
-
'flip',
|
|
22
|
-
'placeAndContain',
|
|
23
|
-
// Carried over from PopperJS, listed so that their `fn` is never run.
|
|
24
|
-
'computeStyles',
|
|
25
|
-
'applyStyles',
|
|
26
|
-
'popperOffsets',
|
|
27
|
-
'eventListeners'
|
|
28
|
-
];
|
|
29
|
-
const findLast = (modifiers, name) => [...modifiers].reverse().find(modifier => modifier.name === name);
|
|
30
|
-
const Popover = forwardRef(function Popover({ show = true, portal = true, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden: hideOnTargetHiddenProp = false, children, onHide, onShow, ...restProps }, ref) {
|
|
15
|
+
const Popover = forwardRef(function Popover({ show = true, portal = true, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, onShow, ...restProps }, ref) {
|
|
31
16
|
const { portalTarget: configurationPortal } = useConfiguration();
|
|
32
17
|
const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);
|
|
33
|
-
const [
|
|
34
|
-
const
|
|
18
|
+
const [popperEl, setPopperEl] = useElement();
|
|
19
|
+
const popperRef = useConsolidatedRef(ref, setPopperEl);
|
|
35
20
|
const arrowRef = useRef(null);
|
|
36
|
-
const [proxyAnchorEl, setProxyAnchorEl] = useElement();
|
|
37
|
-
const [placed, setPlaced] = useState(false);
|
|
38
21
|
const forceUpdateRef = useRef();
|
|
39
|
-
const
|
|
40
|
-
const lastAncestorOpacity = useRef(1);
|
|
22
|
+
const initialOffset = useRef(null);
|
|
41
23
|
const [showPopover, setShowPopover] = useState(show);
|
|
42
24
|
const timeout = useRef();
|
|
43
25
|
const uid = useUID();
|
|
44
|
-
const
|
|
26
|
+
const resolvedTarget = isInstance(target, Element) ? target : target?.contextElement;
|
|
45
27
|
const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
28
|
+
const memoedModifiers = useMemo(() => {
|
|
29
|
+
const flipEnabled = !!modifiers
|
|
30
|
+
.slice()
|
|
31
|
+
.reverse()
|
|
32
|
+
.find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;
|
|
33
|
+
return [
|
|
34
|
+
{
|
|
35
|
+
name: 'computeStyles',
|
|
36
|
+
options: {
|
|
37
|
+
gpuAcceleration: false
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: 'offset',
|
|
42
|
+
options: {
|
|
43
|
+
offset: [0, arrow ? 5.5 : 2]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{ name: 'hide', enabled: hideOnTargetHidden },
|
|
47
|
+
{ name: 'arrow', enabled: arrow, options: { element: arrowRef.current, padding: 7 } },
|
|
48
|
+
{
|
|
49
|
+
name: 'preventOverflow',
|
|
50
|
+
options: {
|
|
51
|
+
tether: !modifiers.find(m => m.name === 'sameWidth' || 'fitToContent'),
|
|
52
|
+
padding: 16
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
...placeAndContain,
|
|
57
|
+
enabled: !flipEnabled
|
|
58
|
+
},
|
|
62
59
|
...modifiers
|
|
63
60
|
];
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
? placeAndContainModifier.enabled ?? true
|
|
81
|
-
: !flipOwnsPlacement;
|
|
82
|
-
const preventOverflowEnabled = isEnabled('preventOverflow');
|
|
83
|
-
const hideEnabled = isEnabled('hide');
|
|
84
|
-
const runList = [
|
|
85
|
-
...(placeAndContainEnabled ? [placeAndContain] : []),
|
|
86
|
-
...modifiers.filter(modifier => !builtInModifierNames.includes(modifier.name) && isRunnableModifier(modifier)),
|
|
87
|
-
...(preventOverflowEnabled ? [preventOverflow] : []),
|
|
88
|
-
...(hideEnabled ? [hideOnTargetHidden] : []),
|
|
89
|
-
// Runs last so that it reads the position the browser settled on.
|
|
90
|
-
createUpdateArrowModifier(arrowPadding)
|
|
91
|
-
].filter(isRunnableModifier);
|
|
92
|
-
let positionTryFallbacks = 'none';
|
|
93
|
-
if (flipOwnsPlacement) {
|
|
94
|
-
positionTryFallbacks = fallbackPlacements
|
|
95
|
-
? getPositionTryFallbacks(resolvedPlacement, fallbackPlacements)
|
|
96
|
-
: FLIP_TACTICS;
|
|
97
|
-
}
|
|
98
|
-
return { runList, offsetOption, padding, positionTryFallbacks };
|
|
99
|
-
}, [arrow, hideOnTargetHiddenProp, modifiers, resolvedPlacement]);
|
|
100
|
-
// Only a static offset can be reserved up front for the pseudo-element that bridges the gap
|
|
101
|
-
// between the target and the Popover.
|
|
102
|
-
const bridgeOffset = Array.isArray(config.offsetOption) ? Number(config.offsetOption[1]) || 0 : 0;
|
|
103
|
-
const getTargetRect = useCallback(() => {
|
|
104
|
-
if (isInstance(target, Element))
|
|
105
|
-
return target.getBoundingClientRect();
|
|
106
|
-
return target?.getBoundingClientRect() ?? EMPTY_RECT;
|
|
107
|
-
}, [target]);
|
|
108
|
-
const update = useCallback(() => {
|
|
109
|
-
if (!popoverEl?.isConnected || !target)
|
|
110
|
-
return;
|
|
111
|
-
const targetRect = getTargetRect();
|
|
112
|
-
// The stand-in anchor takes the box the target reports before the browser places the Popover.
|
|
113
|
-
if (proxyAnchorEl) {
|
|
114
|
-
proxyAnchorEl.style.left = `${targetRect.x}px`;
|
|
115
|
-
proxyAnchorEl.style.top = `${targetRect.y}px`;
|
|
116
|
-
proxyAnchorEl.style.width = `${targetRect.width}px`;
|
|
117
|
-
proxyAnchorEl.style.height = `${targetRect.height}px`;
|
|
118
|
-
}
|
|
119
|
-
const [skidding, offset] = resolveOffset(config.offsetOption);
|
|
120
|
-
const padding = config.padding;
|
|
121
|
-
popoverEl.style.setProperty(OFFSET_VAR, `${offset}px`);
|
|
122
|
-
popoverEl.style.setProperty(CROSS_VAR, `${skidding}px`);
|
|
123
|
-
const state = {
|
|
124
|
-
popoverEl,
|
|
125
|
-
targetEl: resolvedTarget,
|
|
126
|
-
arrowEl: arrowRef.current,
|
|
127
|
-
requestedPlacement: resolvedPlacement,
|
|
128
|
-
placement: resolvedPlacement,
|
|
129
|
-
offset,
|
|
130
|
-
skidding,
|
|
131
|
-
padding,
|
|
132
|
-
targetRect,
|
|
133
|
-
popoverRect: getLayoutRect(popoverEl),
|
|
134
|
-
update: () => {
|
|
135
|
-
applyPlacement(popoverEl, state.placement);
|
|
136
|
-
state.targetRect = getTargetRect();
|
|
137
|
-
state.popoverRect = getLayoutRect(popoverEl);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
state.update();
|
|
141
|
-
config.runList.forEach(modifier => modifier.fn(state));
|
|
142
|
-
}, [popoverEl, proxyAnchorEl, resolvedTarget, target, getTargetRect, config, resolvedPlacement]);
|
|
143
|
-
forceUpdateRef.current = update;
|
|
61
|
+
}, [arrow, hideOnTargetHidden, modifiers]);
|
|
62
|
+
const offset = useMemo(() => {
|
|
63
|
+
const offsetModifier = [...memoedModifiers]
|
|
64
|
+
.reverse()
|
|
65
|
+
.find(m => m.name === 'offset' && m.enabled !== false);
|
|
66
|
+
return Array.isArray(offsetModifier?.options?.offset)
|
|
67
|
+
? offsetModifier?.options?.offset[1] ?? 0
|
|
68
|
+
: 0;
|
|
69
|
+
}, [memoedModifiers]);
|
|
70
|
+
const { styles, attributes, forceUpdate } = usePopper(target, popperEl, {
|
|
71
|
+
placement,
|
|
72
|
+
strategy,
|
|
73
|
+
modifiers: memoedModifiers
|
|
74
|
+
});
|
|
75
|
+
if (forceUpdate)
|
|
76
|
+
forceUpdateRef.current = forceUpdate;
|
|
144
77
|
// Setter-less useState to avoid re-running these constructors on every render with useRef.
|
|
145
78
|
const [ac] = useState(() => new AbortController());
|
|
146
79
|
const [observedSet] = useState(() => new WeakSet());
|
|
@@ -166,13 +99,13 @@ const Popover = forwardRef(function Popover({ show = true, portal = true, target
|
|
|
166
99
|
};
|
|
167
100
|
}, []);
|
|
168
101
|
useEffect(() => {
|
|
169
|
-
if (!
|
|
102
|
+
if (!popperEl)
|
|
170
103
|
return;
|
|
171
|
-
ro.observe(
|
|
104
|
+
ro.observe(popperEl);
|
|
172
105
|
return () => {
|
|
173
|
-
ro.unobserve(
|
|
106
|
+
ro.unobserve(popperEl);
|
|
174
107
|
};
|
|
175
|
-
}, [
|
|
108
|
+
}, [popperEl]);
|
|
176
109
|
useEffect(() => {
|
|
177
110
|
if (!resolvedTarget)
|
|
178
111
|
return;
|
|
@@ -182,70 +115,15 @@ const Popover = forwardRef(function Popover({ show = true, portal = true, target
|
|
|
182
115
|
};
|
|
183
116
|
}, [resolvedTarget]);
|
|
184
117
|
useLayoutEffect(() => {
|
|
185
|
-
if (
|
|
186
|
-
|
|
187
|
-
const names = anchorEl.style
|
|
188
|
-
.getPropertyValue('anchor-name')
|
|
189
|
-
.split(',')
|
|
190
|
-
.map(name => name.trim())
|
|
191
|
-
.filter(Boolean);
|
|
192
|
-
anchorEl.style.setProperty('anchor-name', [...names, anchorName].join(', '));
|
|
193
|
-
popoverEl.style.setProperty('position-anchor', anchorName);
|
|
194
|
-
return () => {
|
|
195
|
-
const remaining = anchorEl.style
|
|
196
|
-
.getPropertyValue('anchor-name')
|
|
197
|
-
.split(',')
|
|
198
|
-
.map(name => name.trim())
|
|
199
|
-
.filter(name => name && name !== anchorName);
|
|
200
|
-
if (remaining.length > 0) {
|
|
201
|
-
anchorEl.style.setProperty('anchor-name', remaining.join(', '));
|
|
202
|
-
}
|
|
203
|
-
else {
|
|
204
|
-
anchorEl.style.removeProperty('anchor-name');
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
}, [anchorEl, popoverEl, anchorName]);
|
|
208
|
-
useLayoutEffect(() => {
|
|
209
|
-
if (!popoverEl || typeof popoverEl.showPopover !== 'function')
|
|
210
|
-
return;
|
|
211
|
-
if (!popoverEl.matches(':popover-open')) {
|
|
212
|
-
popoverEl.showPopover();
|
|
213
|
-
}
|
|
214
|
-
forceUpdateRef.current?.();
|
|
215
|
-
}, [popoverEl]);
|
|
216
|
-
useLayoutEffect(() => {
|
|
217
|
-
if (!popoverEl)
|
|
218
|
-
return;
|
|
219
|
-
popoverEl.style.setProperty('position-try-fallbacks', config.positionTryFallbacks);
|
|
220
|
-
}, [popoverEl, config.positionTryFallbacks]);
|
|
221
|
-
useLayoutEffect(() => {
|
|
222
|
-
update();
|
|
223
|
-
}, [update]);
|
|
224
|
-
/** The browser centers a Popover that has no anchor yet, so it is hidden until it has one. */
|
|
225
|
-
useLayoutEffect(() => {
|
|
226
|
-
if (anchorEl && popoverEl)
|
|
227
|
-
setPlaced(true);
|
|
228
|
-
}, [anchorEl, popoverEl]);
|
|
229
|
-
useLayoutEffect(() => {
|
|
230
|
-
lastTargetOrigin.current = null;
|
|
231
|
-
}, [resolvedTarget, needsProxyAnchor]);
|
|
232
|
-
/** Paints the Popover with the opacity it would have if it were not in the browser top layer. */
|
|
233
|
-
const mirrorAncestorOpacity = useCallback(() => {
|
|
234
|
-
if (!popoverEl)
|
|
235
|
-
return;
|
|
236
|
-
const opacity = getAncestorOpacity(popoverEl);
|
|
237
|
-
if (lastAncestorOpacity.current === opacity)
|
|
238
|
-
return;
|
|
239
|
-
lastAncestorOpacity.current = opacity;
|
|
240
|
-
if (opacity === 1) {
|
|
241
|
-
popoverEl.style.removeProperty('opacity');
|
|
118
|
+
if (resolvedTarget) {
|
|
119
|
+
initialOffset.current = getRelativeOffset(resolvedTarget, document.documentElement);
|
|
242
120
|
}
|
|
243
121
|
else {
|
|
244
|
-
|
|
122
|
+
initialOffset.current = null;
|
|
245
123
|
}
|
|
246
|
-
}, [
|
|
124
|
+
}, [resolvedTarget]);
|
|
247
125
|
useEffect(() => {
|
|
248
|
-
if (!showPopover || !
|
|
126
|
+
if (!showPopover || !resolvedTarget)
|
|
249
127
|
return;
|
|
250
128
|
const rafAC = new AbortController();
|
|
251
129
|
let rafID;
|
|
@@ -253,21 +131,17 @@ const Popover = forwardRef(function Popover({ show = true, portal = true, target
|
|
|
253
131
|
cancelAnimationFrame(rafID);
|
|
254
132
|
});
|
|
255
133
|
const checkCoordsAndConnected = () => {
|
|
256
|
-
if (
|
|
134
|
+
if (!resolvedTarget.isConnected) {
|
|
257
135
|
setShowPopover(false);
|
|
258
136
|
return;
|
|
259
137
|
}
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
if (lastTargetOrigin.current?.x !== x || lastTargetOrigin.current?.y !== y) {
|
|
267
|
-
lastTargetOrigin.current = { x, y };
|
|
268
|
-
forceUpdateRef.current?.();
|
|
138
|
+
if (initialOffset.current) {
|
|
139
|
+
const newOffset = getRelativeOffset(resolvedTarget, document.documentElement);
|
|
140
|
+
if (initialOffset.current.x !== newOffset.x || initialOffset.current.y !== newOffset.y) {
|
|
141
|
+
initialOffset.current = newOffset;
|
|
142
|
+
forceUpdateRef.current?.();
|
|
143
|
+
}
|
|
269
144
|
}
|
|
270
|
-
mirrorAncestorOpacity();
|
|
271
145
|
if (!rafAC.signal.aborted) {
|
|
272
146
|
rafID = requestAnimationFrame(checkCoordsAndConnected);
|
|
273
147
|
}
|
|
@@ -276,30 +150,7 @@ const Popover = forwardRef(function Popover({ show = true, portal = true, target
|
|
|
276
150
|
return () => {
|
|
277
151
|
rafAC.abort();
|
|
278
152
|
};
|
|
279
|
-
}, [showPopover, resolvedTarget
|
|
280
|
-
useEffect(() => {
|
|
281
|
-
if (!popoverEl)
|
|
282
|
-
return;
|
|
283
|
-
const onViewportChange = (e) => {
|
|
284
|
-
// Scrolling the content of the Popover cannot move it, and updating would fight the scroll.
|
|
285
|
-
if (isInstance(e.target, Node) && popoverEl.contains(e.target))
|
|
286
|
-
return;
|
|
287
|
-
forceUpdateRef.current?.();
|
|
288
|
-
};
|
|
289
|
-
const controller = new AbortController();
|
|
290
|
-
window.addEventListener('scroll', onViewportChange, {
|
|
291
|
-
capture: true,
|
|
292
|
-
passive: true,
|
|
293
|
-
signal: controller.signal
|
|
294
|
-
});
|
|
295
|
-
window.addEventListener('resize', onViewportChange, {
|
|
296
|
-
passive: true,
|
|
297
|
-
signal: controller.signal
|
|
298
|
-
});
|
|
299
|
-
return () => {
|
|
300
|
-
controller.abort();
|
|
301
|
-
};
|
|
302
|
-
}, [popoverEl]);
|
|
153
|
+
}, [showPopover, resolvedTarget]);
|
|
303
154
|
useEffect(() => {
|
|
304
155
|
if (groupId && show)
|
|
305
156
|
setActive(uid, groupId);
|
|
@@ -349,14 +200,14 @@ const Popover = forwardRef(function Popover({ show = true, portal = true, target
|
|
|
349
200
|
resolvedTarget.dispatchEvent(event);
|
|
350
201
|
}
|
|
351
202
|
}, [resolvedTarget, portal]);
|
|
352
|
-
// need to retrigger focus events on the target element to correctly notify useFocusWithin hook
|
|
353
|
-
useEvent('focusout', triggerPopoverFocusEvent, { target:
|
|
354
|
-
useEvent('popover:focusout', triggerPopoverFocusEvent, { target:
|
|
355
|
-
useEvent('focusin', triggerPopoverFocusEvent, { target:
|
|
356
|
-
useEvent('popover:focusin', triggerPopoverFocusEvent, { target:
|
|
203
|
+
// need to retrigger focus events on the target element to correctly notify useFocusWithin hook if popover is portal-ed
|
|
204
|
+
useEvent('focusout', triggerPopoverFocusEvent, { target: popperRef });
|
|
205
|
+
useEvent('popover:focusout', triggerPopoverFocusEvent, { target: popperRef });
|
|
206
|
+
useEvent('focusin', triggerPopoverFocusEvent, { target: popperRef });
|
|
207
|
+
useEvent('popover:focusin', triggerPopoverFocusEvent, { target: popperRef });
|
|
208
|
+
const content = (_jsxs(StyledPopover, { ...restProps, "data-popover-id": popoverId, portal: !!(portal && portalTarget), offset: offset, ref: popperRef, style: { ...style, ...styles.popper }, ...attributes.popper, children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }), children] }));
|
|
357
209
|
if (!target || !showPopover || (groupId && !checkActive(uid, groupId)))
|
|
358
210
|
return null;
|
|
359
|
-
const content = (_jsxs(_Fragment, { children: [needsProxyAnchor && (_jsx("div", { ref: setProxyAnchorEl, "aria-hidden": true, style: { position: 'fixed', pointerEvents: 'none' } })), _jsxs(StyledPopover, { ...restProps, "data-popover-id": popoverId, offset: bridgeOffset, portal: !!(portal && portalTarget), ref: popoverRef, style: { ...style, position: strategy, ...(placed ? undefined : { visibility: 'hidden' }) }, popover: 'manual', children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef }), children] })] }));
|
|
360
211
|
return portal && portalTarget ? createPortal(content, portalTarget) : content;
|
|
361
212
|
});
|
|
362
213
|
export default Popover;
|