npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.15.1 → 4.0.0-dev.15.2 - Mend

@pega/cosmos-react-core 4.0.0-dev.15.1 → 4.0.0-dev.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,kBAAkB,iKAgB7B,CAAC;AAIH,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAqG~~/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1	+ {"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,kBAAkB,iKAgB7B,CAAC;AAIH,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+G/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js CHANGED Viewed

@@ -48,6 +48,16 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
                     {
                         name: 'placeAndContain',
                         enabled: false
+                    },
+                    {
+                        name: 'flip',
+                        enabled: false
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            padding: 0
+                        }
                     }
                 ], children: _jsx(Text, { variant: 'h4', children: curStep.name }) }), _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
                     return (_jsx(StepMarker, { ref: (el) => {

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { FunctionComponent, CSSProperties, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport { CurrentStepPopover, StepMarker, StyledBar, StyledFill } from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h4fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n margin-block-start: calc(-1.5 * ${spacing});\n padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n steps,\n currentStepId,\n ...restProps\n}) => {\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const theme = useTheme();\n\n let popoverPlacement: 'top' \| 'top-start' \| 'top-end' = 'top';\n if (curIdx === 0) popoverPlacement = 'top-start';\n else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n useEffect(() => {\n setCurrentStepEl(stepEls[curStep.id]);\n }, [Object.keys(stepEls), curStep]);\n\n return (\n <StyledFormProgress\n {...restProps}\n container={{ alignItems: 'center' }}\n role='progressbar'\n aria-valuenow={curIdx}\n aria-valuemin={0}\n aria-valuetext={curStep.name}\n aria-valuemax={steps.length}\n >\n <CurrentStepPopover\n show\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n {steps.map((step, index) => {\n return (\n <StepMarker\n key={step.id}\n ref={(el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n if (!el && newEls[step.id]) {\n delete newEls[step.id];\n return newEls;\n }\n if (el) return { ...newEls, [step.id]: el };\n return newEls;\n });\n }}\n aria-label={step.name}\n aria-describedby={step.id}\n current={index === curIdx}\n depth={step.depth}\n prior={index < curIdx}\n onClick={step.onMarkerClick}\n >\n {index !== curIdx && (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n portal={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n );\n })}\n </Flex>\n\n <StyledBar>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}
1	+ {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { FunctionComponent, CSSProperties, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport { CurrentStepPopover, StepMarker, StyledBar, StyledFill } from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h4fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n margin-block-start: calc(-1.5 * ${spacing});\n padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n steps,\n currentStepId,\n ...restProps\n}) => {\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const theme = useTheme();\n\n let popoverPlacement: 'top' \| 'top-start' \| 'top-end' = 'top';\n if (curIdx === 0) popoverPlacement = 'top-start';\n else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n useEffect(() => {\n setCurrentStepEl(stepEls[curStep.id]);\n }, [Object.keys(stepEls), curStep]);\n\n return (\n <StyledFormProgress\n {...restProps}\n container={{ alignItems: 'center' }}\n role='progressbar'\n aria-valuenow={curIdx}\n aria-valuemin={0}\n aria-valuetext={curStep.name}\n aria-valuemax={steps.length}\n >\n <CurrentStepPopover\n show\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n {steps.map((step, index) => {\n return (\n <StepMarker\n key={step.id}\n ref={(el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n if (!el && newEls[step.id]) {\n delete newEls[step.id];\n return newEls;\n }\n if (el) return { ...newEls, [step.id]: el };\n return newEls;\n });\n }}\n aria-label={step.name}\n aria-describedby={step.id}\n current={index === curIdx}\n depth={step.depth}\n prior={index < curIdx}\n onClick={step.onMarkerClick}\n >\n {index !== curIdx && (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n portal={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n );\n })}\n </Flex>\n\n <StyledBar>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;~~AAkBjC~~,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AASD,eAAO,MAAM,eAAe,8TAkB1B,CAAC;~~AA2BH~~,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiFhC,CAAC;AAEH,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAiBjC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AASD,eAAO,MAAM,eAAe,8TAkB1B,CAAC;AAgBH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiFhC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/SkipLinks/SkipLinks.js CHANGED Viewed

@@ -12,7 +12,6 @@ import { Keyboard } from '../Badges';
 import Text from '../Text';
 import Grid from '../Grid';
 import { useI18n, useShortcutManager, useUID } from '../../hooks';
-import { registerAction } from '../ShortcutManager';
 import { StyledButtonLink } from '../Button/Button';
 const StyledSkipLinksItems = styled.div `
   & > ${StyledButtonLink} {
@@ -44,13 +43,6 @@ const StyledShortcuts = styled.div(({ theme }) => {
   `;
 });
 StyledShortcuts.defaultProps = defaultThemeProp;
-registerAction({
-    id: 'GoToIncomingInteraction',
-    defaultKeyBinding: 'Alt+Enter'
-}, {
-    id: 'DismissIncomingInteraction',
-    defaultKeyBinding: 'Alt+Q'
-});
 const SkipLinks = memo(({ items }) => {
     const { bindings } = useShortcutManager();
     const t = useI18n();

package/lib/components/SkipLinks/SkipLinks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SkipLinks.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAElE,OAAO,EAAE,~~cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,~~gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAWpD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;QAC/B,gBAAgB;;;;CAIvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE;IACrD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC9B,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;eAEG,CAAC;;;;QAIR,YAAY;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,OAAO,GAAG,CAAA;0CAC8B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;GAKxE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,~~cAAc,CACZ;IACE,EAAE,EAAE,yBAAyB;IAC7B,iBAAiB,EAAE,WAAW;CAC/B,EACD;IACE,EAAE,EAAE,4BAA4B;IAChC,iBAAiB,EAAE,OAAO;CAC3B,CACF,CAAC;AAEF,~~MAAM,SAAS,GAAuB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE;IACvE,MAAM,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC1C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;IAEnC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE;YACN,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;gBAC5B,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;gBACR,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;aACV,CAAC;SACH,EACD,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,iBAAiB;gBACvB,OAAO,EAAE,KAAK;aACf;SACF,yCAEW,CAAC,CAAC,4BAA4B,CAAC,aAE3C,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,oBAAoB,YACjF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EAEd,OAAO,EAAE,GAAG,EAAE,CACZ,uBAAuB,CACrB,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,QAAQ,EACxD,IAAI,CAAC,MAAM,CAAC,SAAS,CACtB,YAGF,IAAI,CAAC,KAAK,IARN,IAAI,CAAC,KAAK,CASR,CACV,CAAC,GACG,EAEN,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACtC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,eAAe,aAC3E,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,iBAAiB,YAC/C,CAAC,CAAC,WAAW,CAAC,GACV,EACP,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,IAAI,EAAE,qBAAqB;4BAC3B,GAAG,EAAE,CAAC;4BACN,UAAU,EAAE,QAAQ;yBACrB,EACD,IAAI,EAAC,MAAM,qBACM,iBAAiB,YAEjC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE;4BAC/C,OAAO,CACL,eAAK,IAAI,EAAC,UAAU,aAClB,KAAC,IAAI,cAAE,CAAC,CAAC,YAAY,EAAE,EAAuB,CAAC,GAAQ,EACvD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,YAC1B,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC;6CACrC,KAAK,CAAC,GAAG,CAAC;6CACV,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACV,KAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,IAAO,GAAG,CAAI,CACrC,CAAC,GACC,KARiB,EAAE,CAStB,CACP,CAAC;wBACJ,CAAC,CAAC,GACG,IACF,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import { FC, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { Shortcut } from 'shortcuts';\n\nimport { defaultThemeProp } from '../../theme';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport Flex from '../Flex';\nimport { Keyboard } from '../Badges';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport { useI18n, useShortcutManager, useUID } from '../../hooks';\nimport { Translation } from '../../i18n';\nimport { ~~registerAction } from '../ShortcutManager';\nimport {~~ StyledButtonLink } from '../Button/Button';\n\ninterface SkipLink {\n label: string;\n target: { ariaLabel: string; selector: string };\n}\n\nexport interface SkipLinksProps {\n items: SkipLink[];\n}\n\nconst StyledSkipLinksItems = styled.div`\n & > ${StyledButtonLink} {\n display: block;\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledSkipLinks = styled(Popover)(props => {\n const {\n theme: {\n base: { 'z-index': zIndices }\n }\n } = props;\n\n const z = Math.max(...Object.values(zIndices)) + 1;\n\n return css`\n position: fixed;\n z-index: ${z};\n\n &:not(:focus-within) {\n z-index: -1;\n ${hideVisually}\n }\n `;\n});\n\nStyledSkipLinks.defaultProps = defaultThemeProp;\n\nconst StyledShortcuts = styled.div(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n\n [role='listitem'] {\n display: contents;\n }\n `;\n});\n\nStyledShortcuts.defaultProps = defaultThemeProp;\n\~~nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\~~nconst SkipLinks: FC<SkipLinksProps> = memo(({ items }: SkipLinksProps) => {\n const { bindings } = useShortcutManager();\n const t = useI18n();\n const shortcutHeadingId = useUID();\n\n return (\n <Flex\n as={StyledSkipLinks}\n container={{ direction: 'column' }}\n placement='bottom-end'\n target={{\n getBoundingClientRect: () => ({\n height: 0,\n width: 0,\n x: 24,\n y: 24,\n top: 24,\n bottom: 24,\n left: 24,\n right: 24\n })\n }}\n modifiers={[\n {\n name: 'placeAndContain',\n enabled: false\n }\n ]}\n data-app-region\n aria-label={t('skip_navigation_menu_label')}\n >\n <Flex container={{ direction: 'column', gap: 0.5, pad: 1 }} as={StyledSkipLinksItems}>\n {items.map(item => (\n <Button\n variant='link'\n key={item.label}\n onClick={() =>\n focusHeadingOrContainer(\n document.querySelector(item.target.selector) ?? document,\n item.target.ariaLabel\n )\n }\n >\n {item.label}\n </Button>\n ))}\n </Flex>\n\n {Object.entries(bindings).length > 0 && (\n <Flex container={{ direction: 'column', gap: 1, pad: 1 }} as={StyledShortcuts}>\n <Text variant='h2' as='span' id={shortcutHeadingId}>\n {t('shortcuts')}\n </Text>\n <Grid\n container={{\n cols: 'auto minmax(0, 1fr)',\n gap: 1,\n alignItems: 'center'\n }}\n role='list'\n aria-labelledby={shortcutHeadingId}\n >\n {Object.entries(bindings).map(([id, shortcut]) => {\n return (\n <div role='listitem' key={id}>\n <Text>{t(`shortcut_${id}` as keyof Translation)}</Text>\n <Flex container={{ gap: 0.5 }}>\n {Shortcut.shortcut2accelerator(shortcut)\n .split('+')\n .map(key => (\n <Keyboard keyName={key} key={key} />\n ))}\n </Flex>\n </div>\n );\n })}\n </Grid>\n </Flex>\n )}\n </Flex>\n );\n});\n\nexport default SkipLinks;\n"]}
1	+ {"version":3,"file":"SkipLinks.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { Shortcut } from 'shortcuts';\n\nimport { defaultThemeProp } from '../../theme';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport Flex from '../Flex';\nimport { Keyboard } from '../Badges';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport { useI18n, useShortcutManager, useUID } from '../../hooks';\nimport { Translation } from '../../i18n';\nimport { StyledButtonLink } from '../Button/Button';\n\ninterface SkipLink {\n label: string;\n target: { ariaLabel: string; selector: string };\n}\n\nexport interface SkipLinksProps {\n items: SkipLink[];\n}\n\nconst StyledSkipLinksItems = styled.div`\n & > ${StyledButtonLink} {\n display: block;\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledSkipLinks = styled(Popover)(props => {\n const {\n theme: {\n base: { 'z-index': zIndices }\n }\n } = props;\n\n const z = Math.max(...Object.values(zIndices)) + 1;\n\n return css`\n position: fixed;\n z-index: ${z};\n\n &:not(:focus-within) {\n z-index: -1;\n ${hideVisually}\n }\n `;\n});\n\nStyledSkipLinks.defaultProps = defaultThemeProp;\n\nconst StyledShortcuts = styled.div(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n\n [role='listitem'] {\n display: contents;\n }\n `;\n});\n\nStyledShortcuts.defaultProps = defaultThemeProp;\n\nconst SkipLinks: FC<SkipLinksProps> = memo(({ items }: SkipLinksProps) => {\n const { bindings } = useShortcutManager();\n const t = useI18n();\n const shortcutHeadingId = useUID();\n\n return (\n <Flex\n as={StyledSkipLinks}\n container={{ direction: 'column' }}\n placement='bottom-end'\n target={{\n getBoundingClientRect: () => ({\n height: 0,\n width: 0,\n x: 24,\n y: 24,\n top: 24,\n bottom: 24,\n left: 24,\n right: 24\n })\n }}\n modifiers={[\n {\n name: 'placeAndContain',\n enabled: false\n }\n ]}\n data-app-region\n aria-label={t('skip_navigation_menu_label')}\n >\n <Flex container={{ direction: 'column', gap: 0.5, pad: 1 }} as={StyledSkipLinksItems}>\n {items.map(item => (\n <Button\n variant='link'\n key={item.label}\n onClick={() =>\n focusHeadingOrContainer(\n document.querySelector(item.target.selector) ?? document,\n item.target.ariaLabel\n )\n }\n >\n {item.label}\n </Button>\n ))}\n </Flex>\n\n {Object.entries(bindings).length > 0 && (\n <Flex container={{ direction: 'column', gap: 1, pad: 1 }} as={StyledShortcuts}>\n <Text variant='h2' as='span' id={shortcutHeadingId}>\n {t('shortcuts')}\n </Text>\n <Grid\n container={{\n cols: 'auto minmax(0, 1fr)',\n gap: 1,\n alignItems: 'center'\n }}\n role='list'\n aria-labelledby={shortcutHeadingId}\n >\n {Object.entries(bindings).map(([id, shortcut]) => {\n return (\n <div role='listitem' key={id}>\n <Text>{t(`shortcut_${id}` as keyof Translation)}</Text>\n <Flex container={{ gap: 0.5 }}>\n {Shortcut.shortcut2accelerator(shortcut)\n .split('+')\n .map(key => (\n <Keyboard keyName={key} key={key} />\n ))}\n </Flex>\n </div>\n );\n })}\n </Grid>\n </Flex>\n )}\n </Flex>\n );\n});\n\nexport default SkipLinks;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "4.0.0-dev.15.1",
+  "version": "4.0.0-dev.15.2",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",