npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.23.0 → 4.0.0-dev.24.0 - Mend

@pega/cosmos-react-core 4.0.0-dev.23.0 → 4.0.0-dev.24.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.

Files changed (406) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAczD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;;;;;;GAMN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,~~CAC1E~~,~~CACE~~,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAkC,EACjF,GAAyB~~,EACzB,EAAE~~;~~IACF~~,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EACrF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,YAEnB,IAAI,IAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,wBADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,GACI,CACR,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getMetaListTestIds } from './MetaList.test-ids';\n\nexport interface MetaListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Array of nodes or text to be rendered in the list. /\n items: ReactNode[];\n /\n If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n * @default true\n /\n wrapItems?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n return css`\n list-style: none;\n overflow: hidden;\n\n ${!wrapItems &&\n css`\n white-space: nowrap;\n `}\n `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n return css`\n min-width: 0;\n display: inline-block;\n\n ${wrapItems\n ? css`\n overflow-wrap: break-word;\n `\n : css`\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n `}\n\n &[role='separator'] {\n -webkit-user-select: none;\n user-select: none;\n }\n `;\n});\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(\n ~~(\n~~ { testId, items, wrapItems = true, ...restProps }: PropsWithoutRef<MetaListProps>,\n ref: MetaListProps['ref']\n ) => {\n const testIds = useTestIds(testId, getMetaListTestIds);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledMetaList}\n container={{ colGap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n wrapItems={wrapItems}\n ref={ref}\n >\n {items.flatMap((item, i, arr) =>\n item\n ? [\n <Text\n as={StyledMetaListItem}\n key={`${i + 0}`}\n variant='secondary'\n wrapItems={wrapItems}\n >\n {item}\n </Text>\n ].concat(\n i !== arr.length - 1\n ? [\n <Text\n as={StyledMetaListItem}\n role='separator'\n key={`${i + 0}-sep`}\n variant='secondary'\n >\n •\n </Text>\n ]\n : []\n )\n : []\n )}\n </Flex>\n );\n }\n);\n\nexport default withTestIds(MetaList, getMetaListTestIds);\n"]}
1	+ {"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAczD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;;;;;;GAMN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAkC,EACjF,GAAyB;IAEzB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EACrF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,YAEnB,IAAI,IAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,wBADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getMetaListTestIds } from './MetaList.test-ids';\n\nexport interface MetaListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Array of nodes or text to be rendered in the list. /\n items: ReactNode[];\n /\n If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n * @default true\n /\n wrapItems?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n return css`\n list-style: none;\n overflow: hidden;\n\n ${!wrapItems &&\n css`\n white-space: nowrap;\n `}\n `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n return css`\n min-width: 0;\n display: inline-block;\n\n ${wrapItems\n ? css`\n overflow-wrap: break-word;\n `\n : css`\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n `}\n\n &[role='separator'] {\n -webkit-user-select: none;\n user-select: none;\n }\n `;\n});\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(function MetaList(\n { testId, items, wrapItems = true, ...restProps }: PropsWithoutRef<MetaListProps>,\n ref: MetaListProps['ref']\n) {\n const testIds = useTestIds(testId, getMetaListTestIds);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledMetaList}\n container={{ colGap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n wrapItems={wrapItems}\n ref={ref}\n >\n {items.flatMap((item, i, arr) =>\n item\n ? [\n <Text\n as={StyledMetaListItem}\n key={`${i + 0}`}\n variant='secondary'\n wrapItems={wrapItems}\n >\n {item}\n </Text>\n ].concat(\n i !== arr.length - 1\n ? [\n <Text\n as={StyledMetaListItem}\n role='separator'\n key={`${i + 0}-sep`}\n variant='secondary'\n >\n •\n </Text>\n ]\n : []\n )\n : []\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(MetaList, getMetaListTestIds);\n"]}

package/lib/components/Modal/DockedModals.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,~~CAWvD~~,CAAC;~~AAEF~~,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAYtD,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/components/Modal/DockedModals.js CHANGED Viewed

@@ -14,7 +14,7 @@ const StyledDockedModals = styled.div(({ theme }) => {
   `;
 });
 StyledDockedModals.defaultProps = defaultThemeProp;
-const DockedModals = forwardRef((props, ref) => {
+const DockedModals = forwardRef(function DockedModals(props, ref) {
     return (_jsx(Flex, { container: { justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }, as: StyledDockedModals, ...props, ref: ref }));
 });
 export default DockedModals;

package/lib/components/Modal/DockedModals.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;GAKvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,~~CACpE,~~CAAC,KAAK,~~EAAE~~,GAAwB~~,EAAE,EAAE~~;~~IAClC~~,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n bottom: 0;\n right: 0;\n pointer-events: none;\n width: 100%;\n `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLDivElement>) => {\n return (\n <Flex\n container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n as={StyledDockedModals}\n {...props}\n ref={ref}\n />\n );\n }\n);\n\nexport default DockedModals;\n"]}
1	+ {"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;GAKvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,CAAC,SAAS,YAAY,CAC1F,KAAK,EACL,GAAwB;IAExB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n bottom: 0;\n right: 0;\n pointer-events: none;\n width: 100%;\n `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(function DockedModals(\n props,\n ref: Ref<HTMLDivElement>\n) {\n return (\n <Flex\n container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n as={StyledDockedModals}\n {...props}\n ref={ref}\n />\n );\n});\n\nexport default DockedModals;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,~~CAiSvD~~,CAAC;~~AAEF~~,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CA6RtD,CAAC;AAEH,eAAe,KAAK,CAAC"}

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

@@ -16,7 +16,7 @@ import { Count } from '../Badges';
 import MinimizedModal from './MinimizedModal';
 import { StyledModal, StyledModalHeader, StyledModalContent, StyledModalActions, StyledModalChildrenWrap } from './Modal.styles';
 registerIcon(timesIcon, minusIcon, dockIcon, undockIcon);
-const Modal = forwardRef((props, ref) => {
+const Modal = forwardRef(function Modal(props, ref) {
     const { as, progress = false, heading, count, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestMaximize, onRequestDock, onRequestActivate, ...restProps } = props;
     const { alert, dismissible, minimizable, maximizable, dockable, state, dismiss, minimize, maximize, dock, unmount, top } = useModalContext();
     const modalRef = useConsolidatedRef(ref);
@@ -85,10 +85,7 @@ const Modal = forwardRef((props, ref) => {
     }, []);
     // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.
     const onModalKeyDown = useCallback((e) => {
-        if (dismissible &&
-            (state === 'open' || state === 'maximized') &&
-            e.key === 'Escape' &&
-            top) {
+        if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {
             tryDismiss();
         }
     }, [dismissible, state, top, tryDismiss]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n MouseEvent,\n useRef,\n useCallback,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID,\n useFocusTrap,\n usePrevious,\n useModalContext,\n useEvent\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ModalProps>, ref: Ref<HTMLElement>) => {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useModalContext();\n\n const modalRef = useConsolidatedRef(ref);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const previousState = usePrevious(state);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n if (progress) return;\n\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n useFocusTrap(modalRef);\n useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' \|\| state === 'maximized' \|\| state === 'docked') setFocus();\n\n // This won't actually run until potential changes to docked modal handling.\n if (state === 'closed' && previousState === 'docked') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, [state]);\n\n useEffect(() => {\n // If a modal is already in a closed state on initial mount, unmount it.\n // This only happens when a docked modal closes since the ModalManager\n // remounts it outside of the DockedModals container if state !== 'docked'.\n if (state === 'closed') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, []);\n\n // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n const onModalKeyDown = useCallback(\n (e: ReactKeyboardEvent) => {\n if (\n dismissible &&\n (state === 'open' \|\| state === 'maximized') &&\n e.key === 'Escape' &&\n top\n ) {\n tryDismiss();\n }\n },\n [dismissible, state, top, tryDismiss]\n );\n\n const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n if (e.repeat && (e.key === 'Enter' \|\| e.key === ' ')) e.preventDefault();\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n const maximized = stretch \|\| state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={onModalKeyDown}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable \|\| dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n label={t('modal_maximize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n label={t('modal_dock')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='dock' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n label={t('modal_minimize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n label={t('modal_close')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={tryDismiss}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex\n item={{ grow: 1 }}\n as={StyledModalContent}\n ref={modalContentRef}\n style={\n modalContentRef.current\n ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n : undefined\n }\n >\n {children && (\n <StyledModalChildrenWrap inert={progress ? '' : undefined}>\n {children}\n </StyledModalChildrenWrap>\n )}\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center \|\| maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' \|\| state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n }\n);\n\nexport default Modal;\n"]}
1	+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n MouseEvent,\n useRef,\n useCallback,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID,\n useFocusTrap,\n usePrevious,\n useModalContext,\n useEvent\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(function Modal(\n props: PropsWithoutRef<ModalProps>,\n ref: Ref<HTMLElement>\n) {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useModalContext();\n\n const modalRef = useConsolidatedRef(ref);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const previousState = usePrevious(state);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n if (progress) return;\n\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n useFocusTrap(modalRef);\n useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' \|\| state === 'maximized' \|\| state === 'docked') setFocus();\n\n // This won't actually run until potential changes to docked modal handling.\n if (state === 'closed' && previousState === 'docked') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, [state]);\n\n useEffect(() => {\n // If a modal is already in a closed state on initial mount, unmount it.\n // This only happens when a docked modal closes since the ModalManager\n // remounts it outside of the DockedModals container if state !== 'docked'.\n if (state === 'closed') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, []);\n\n // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n const onModalKeyDown = useCallback(\n (e: ReactKeyboardEvent) => {\n if (dismissible && (state === 'open' \|\| state === 'maximized') && e.key === 'Escape' && top) {\n tryDismiss();\n }\n },\n [dismissible, state, top, tryDismiss]\n );\n\n const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n if (e.repeat && (e.key === 'Enter' \|\| e.key === ' ')) e.preventDefault();\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n const maximized = stretch \|\| state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={onModalKeyDown}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable \|\| dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n label={t('modal_maximize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n label={t('modal_dock')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='dock' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n label={t('modal_minimize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n label={t('modal_close')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={tryDismiss}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex\n item={{ grow: 1 }}\n as={StyledModalContent}\n ref={modalContentRef}\n style={\n modalContentRef.current\n ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n : undefined\n }\n >\n {children && (\n <StyledModalChildrenWrap inert={progress ? '' : undefined}>\n {children}\n </StyledModalChildrenWrap>\n )}\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center \|\| maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' \|\| state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n});\n\nexport default Modal;\n"]}

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

@@ -48,7 +48,7 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
   `;
 });
 StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
-export const MultiStepForm = forwardRef(({ currentStepId, steps, heading, stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal', progress, ...restProps }, ref) => {
+export const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal', progress, ...restProps }, ref) {
     const multiStepFormContentRef = useRef(null);
     const previousId = usePrevious(currentStepId);
     const currentStep = steps.find(step => step.id === currentStepId);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n (\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n progress,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) => {\n const multiStepFormContentRef = useRef(null);\n\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const setFocus = () => {\n if (progress) return;\n\n const focusables = getFocusables(multiStepFormContentRef);\n focusables[0]?.focus();\n };\n\n useEffect(() => {\n if (previousId === undefined) return;\n\n if (previousId !== currentStepId) {\n const focusableElements = getFocusables(multiStepFormContentRef);\n\n if (focusableElements.length) focusableElements[0].focus();\n }\n }, [currentStepId, previousId]);\n\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator =\n stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n break;\n case 'vertical':\n if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n }\n\n return (\n <StyledForm\n ref={ref}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols:\n stepIndicator === 'vertical'\n ? `2fr minmax(${contentWidth.xs}, 1fr)`\n : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <Grid item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </Grid>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {currentStep.actions}\n </Flex>\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
1	+ {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0*';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n progress,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const multiStepFormContentRef = useRef(null);\n\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const setFocus = () => {\n if (progress) return;\n\n const focusables = getFocusables(multiStepFormContentRef);\n focusables[0]?.focus();\n };\n\n useEffect(() => {\n if (previousId === undefined) return;\n\n if (previousId !== currentStepId) {\n const focusableElements = getFocusables(multiStepFormContentRef);\n\n if (focusableElements.length) focusableElements[0].focus();\n }\n }, [currentStepId, previousId]);\n\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const stepIndicator =\n stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n let areaDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n break;\n case 'vertical':\n if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n areaDef += '\"content stepIndicator\"';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n }\n\n return (\n <StyledForm\n ref={ref}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols:\n stepIndicator === 'vertical'\n ? `2fr minmax(${contentWidth.xs}, 1fr)`\n : 'minmax(0, 1fr)',\n areas: areaDef,\n gap: 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n {stepIndicator === 'vertical' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <Grid item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </Grid>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {currentStep.actions}\n </Flex>\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}

package/lib/components/Number/NumberDisplay.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
 import NoValue from '../NoValue/NoValue';
 import { getFraction, getFormattedValue } from './utils';
-const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
+const NumberDisplay = forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) {
     const { locale } = useConfiguration();
     return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (getFormattedValue(value.toString(), locale, unit, {
             notation,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,~~CACE~~,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B~~,EAC9B,EAAE~~;~~IACF~~,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n /** Number value /\n value?: number \| bigint;\n /* Unit to be included in the text, for example '%' /\n unit?: string;\n\n formattingOptions?: {\n /\n Value display notation.\n * @default 'standard'\n /\n notation?: 'standard' \| 'compact';\n /\n Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n /\n fractionDigits?: number;\n /\n Determines whether group separators should be shown.\n * @default true\n /\n groupSeparators?: boolean;\n };\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true\n } = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value \|\| value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}
1	+ {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B;IAE9B,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n /** Number value /\n value?: number \| bigint;\n /* Unit to be included in the text, for example '%' /\n unit?: string;\n\n formattingOptions?: {\n /\n Value display notation.\n * @default 'standard'\n /\n notation?: 'standard' \| 'compact';\n /\n Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n /\n fractionDigits?: number;\n /\n Determines whether group separators should be shown.\n * @default true\n /\n groupSeparators?: boolean;\n };\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n function NumberDisplay(\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true\n } = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value \|\| value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}

package/lib/components/Number/NumberInput.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
 import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
 import { getNumberInputTestIds } from './Number.test-ids';
 registerIcon(minusIcon, plusIcon);
-const NumberInput = forwardRef((props, ref) => {
+const NumberInput = forwardRef(function NumberInput(props, ref) {
     const uid = useUID();
     const { testId, id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, ...restProps } = props;
     const testIds = useTestIds(testId, getNumberInputTestIds);

package/lib/components/Number/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useTestIds,\n useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\nimport { withTestIds } from '../../utils';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n testId,\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n additionalInfo,\n value = '',\n onChange,\n onFocus,\n onBlur,\n onResolveSuggestion,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n autoFocus,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getNumberInputTestIds);\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n } else if (\n input.selectionStart !== null &&\n !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n ) {\n onChange(\n getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n );\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else {\n if (parsableValue !== value) {\n onChange(parsableValue);\n }\n\n onBlur?.(parsableValue);\n }\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const numberInput = (\n <Flex\n data-testid={testIds.root}\n as={StyledNumberInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <StyledInput\n data-testid={testIds.control}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n aria-describedby={info ? `${id}-info` : undefined}\n />\n </Flex>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const stepper = (\n <Flex\n as={StyledStepperInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n data-testid={testIds.minus}\n variant='simple'\n icon\n onClick={onMinusClick}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n aria-hidden='true'\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n <StyledInput\n data-testid={testIds.control}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n aria-describedby={`${id}-info`}\n />\n </Flex>\n <Button\n data-testid={testIds.plus}\n variant='simple'\n icon\n onClick={onPlusClick}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n aria-hidden='true'\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n return label ? (\n <FormField\n {...{\n testId: testIds,\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n readOnly,\n disabled,\n additionalInfo,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(NumberInput, getNumberInputTestIds);\n"]}
1	+ {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useTestIds,\n useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\nimport { withTestIds } from '../../utils';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n function NumberInput(props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n additionalInfo,\n value = '',\n onChange,\n onFocus,\n onBlur,\n onResolveSuggestion,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n autoFocus,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getNumberInputTestIds);\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n } else if (\n input.selectionStart !== null &&\n !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n ) {\n onChange(\n getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n );\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else {\n if (parsableValue !== value) {\n onChange(parsableValue);\n }\n\n onBlur?.(parsableValue);\n }\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const numberInput = (\n <Flex\n data-testid={testIds.root}\n as={StyledNumberInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <StyledInput\n data-testid={testIds.control}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n aria-describedby={info ? `${id}-info` : undefined}\n />\n </Flex>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const stepper = (\n <Flex\n as={StyledStepperInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n data-testid={testIds.minus}\n variant='simple'\n icon\n onClick={onMinusClick}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n aria-hidden='true'\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n <StyledInput\n data-testid={testIds.control}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n aria-describedby={`${id}-info`}\n />\n </Flex>\n <Button\n data-testid={testIds.plus}\n variant='simple'\n icon\n onClick={onPlusClick}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n aria-hidden='true'\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n return label ? (\n <FormField\n {...{\n testId: testIds,\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n readOnly,\n disabled,\n additionalInfo,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(NumberInput, getNumberInputTestIds);\n"]}

package/lib/components/Number/NumberRangeInput.js CHANGED Viewed

@@ -19,7 +19,7 @@ const reducer = (prevState, { type, value }) => {
             return prevState;
     }
 };
-const NumberRangeInput = forwardRef(({ testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, ...restProps }, ref) => {
+const NumberRangeInput = forwardRef(function NumberRangeInput({ testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, ...restProps }, ref) {
     const testIds = useTestIds(testId, getNumberRangeTestIds);
     const t = useI18n();
     const startValueInputRef = useRef(null);

package/lib/components/Number/NumberRangeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberRangeInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n useCallback,\n useImperativeHandle,\n useReducer,\n useRef\n} from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useI18n, useFocusWithin, useTestIds } from '../../hooks';\nimport { StyledRangeInputContainer } from '../Input/Input.styles';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport NumberInput from './NumberInput';\nimport type { NumberRangeInputProps } from './NumberInput.types';\nimport { getNumberRangeTestIds } from './Number.test-ids';\n\ntype DateRangeAction = { type: 'start' \| 'end'; value: string };\ntype State = { start: string; end: string };\n\nconst reducer = (prevState: State, { type, value }: DateRangeAction): State => {\n switch (type) {\n case 'start': {\n return { ...prevState, start: value };\n }\n case 'end': {\n return { ...prevState, end: value };\n }\n default:\n return prevState;\n }\n};\n\nconst NumberRangeInput: FunctionComponent<NumberRangeInputProps & ForwardProps> = forwardRef(\n (\n {\n testId,\n value = {},\n onChange,\n onBlur,\n onFocus,\n label,\n fromLabel,\n toLabel,\n labelHidden,\n placeholder,\n disabled,\n readOnly,\n required,\n status,\n unit,\n showDecimal,\n numberOfDecimals,\n showGroupSeparators,\n min,\n max,\n step,\n variant,\n fromAdditionalInfo,\n toAdditionalInfo,\n autoFocus,\n handle,\n ...restProps\n }: NumberRangeInputProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const testIds = useTestIds(testId, getNumberRangeTestIds);\n\n const t = useI18n();\n\n const startValueInputRef = useRef<HTMLInputElement>(null);\n const endValueInputRef = useRef<HTMLInputElement>(null);\n\n const [state, dispatch] = useReducer(reducer, {\n start: value.start ?? '',\n end: value.end ?? ''\n });\n\n // Need to keep the value in ref also, to be able to call onBlur with newest value\n const startValueRef = useRef(state.start);\n const endValueRef = useRef(state.end);\n\n const onFocusChange = useCallback(\n (focused: boolean) => {\n (focused ? onFocus : onBlur)?.({ start: startValueRef.current, end: endValueRef.current });\n },\n [onBlur, value.start, value.end]\n );\n\n const containerRef = useConsolidatedRef(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n useImperativeHandle(\n handle,\n () => ({\n clear: () => {\n if (startValueInputRef.current) startValueInputRef.current.value = '';\n if (endValueInputRef.current) endValueInputRef.current.value = '';\n startValueRef.current = '';\n endValueRef.current = '';\n dispatch({ type: 'start', value: '' });\n dispatch({ type: 'end', value: '' });\n onChange({ start: '', end: '' });\n }\n }),\n [onChange]\n );\n\n const commonProps = {\n status,\n placeholder,\n readOnly,\n required,\n unit,\n showDecimal,\n numberOfDecimals,\n showGroupSeparators,\n min,\n max,\n variant\n };\n\n return (\n <FormField\n testId={testIds}\n as='fieldset'\n {...restProps}\n ref={containerRef}\n container={{ wrap: 'nowrap' }}\n labelHidden={labelHidden}\n labelAs='legend'\n label={label}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n status={status}\n >\n <Flex container as={StyledRangeInputContainer}>\n <NumberInput\n testId={testIds.min}\n {...commonProps}\n value={state.start}\n onChange={fromValue => {\n onChange({ start: fromValue, end: value.end ?? '' });\n dispatch({\n type: 'start',\n value: fromValue ?? ''\n });\n }}\n onBlur={changedValue => {\n dispatch({\n type: 'start',\n value: changedValue ?? ''\n });\n startValueRef.current = changedValue ?? '';\n onChange({\n start: changedValue ?? '',\n end: state.end\n });\n }}\n label={fromLabel}\n aria-label={`${t('range_from_numeric') + (label ? ` - ${label}` : '')}`}\n additionalInfo={fromAdditionalInfo}\n autoFocus={autoFocus}\n ref={startValueInputRef}\n />\n <NumberInput\n testId={testIds.max}\n {...commonProps}\n value={state.end}\n onChange={toValue => {\n onChange({ start: value.start ?? '', end: toValue });\n dispatch({\n type: 'end',\n value: toValue ?? ''\n });\n }}\n onBlur={changedValue => {\n dispatch({\n type: 'end',\n value: changedValue ?? ''\n });\n endValueRef.current = changedValue ?? '';\n onChange({\n start: state.start,\n end: changedValue ?? ''\n });\n }}\n label={toLabel}\n aria-label={`${t('range_to_numeric') + (label ? ` - ${label}` : '')}`}\n additionalInfo={toAdditionalInfo}\n ref={endValueInputRef}\n />\n </Flex>\n </FormField>\n );\n }\n);\n\nexport default withTestIds(NumberRangeInput, getNumberRangeTestIds);\n"]}
1	+ {"version":3,"file":"NumberRangeInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n useCallback,\n useImperativeHandle,\n useReducer,\n useRef\n} from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useI18n, useFocusWithin, useTestIds } from '../../hooks';\nimport { StyledRangeInputContainer } from '../Input/Input.styles';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport NumberInput from './NumberInput';\nimport type { NumberRangeInputProps } from './NumberInput.types';\nimport { getNumberRangeTestIds } from './Number.test-ids';\n\ntype DateRangeAction = { type: 'start' \| 'end'; value: string };\ntype State = { start: string; end: string };\n\nconst reducer = (prevState: State, { type, value }: DateRangeAction): State => {\n switch (type) {\n case 'start': {\n return { ...prevState, start: value };\n }\n case 'end': {\n return { ...prevState, end: value };\n }\n default:\n return prevState;\n }\n};\n\nconst NumberRangeInput: FunctionComponent<NumberRangeInputProps & ForwardProps> = forwardRef(\n function NumberRangeInput(\n {\n testId,\n value = {},\n onChange,\n onBlur,\n onFocus,\n label,\n fromLabel,\n toLabel,\n labelHidden,\n placeholder,\n disabled,\n readOnly,\n required,\n status,\n unit,\n showDecimal,\n numberOfDecimals,\n showGroupSeparators,\n min,\n max,\n step,\n variant,\n fromAdditionalInfo,\n toAdditionalInfo,\n autoFocus,\n handle,\n ...restProps\n }: NumberRangeInputProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getNumberRangeTestIds);\n\n const t = useI18n();\n\n const startValueInputRef = useRef<HTMLInputElement>(null);\n const endValueInputRef = useRef<HTMLInputElement>(null);\n\n const [state, dispatch] = useReducer(reducer, {\n start: value.start ?? '',\n end: value.end ?? ''\n });\n\n // Need to keep the value in ref also, to be able to call onBlur with newest value\n const startValueRef = useRef(state.start);\n const endValueRef = useRef(state.end);\n\n const onFocusChange = useCallback(\n (focused: boolean) => {\n (focused ? onFocus : onBlur)?.({ start: startValueRef.current, end: endValueRef.current });\n },\n [onBlur, value.start, value.end]\n );\n\n const containerRef = useConsolidatedRef(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n useImperativeHandle(\n handle,\n () => ({\n clear: () => {\n if (startValueInputRef.current) startValueInputRef.current.value = '';\n if (endValueInputRef.current) endValueInputRef.current.value = '';\n startValueRef.current = '';\n endValueRef.current = '';\n dispatch({ type: 'start', value: '' });\n dispatch({ type: 'end', value: '' });\n onChange({ start: '', end: '' });\n }\n }),\n [onChange]\n );\n\n const commonProps = {\n status,\n placeholder,\n readOnly,\n required,\n unit,\n showDecimal,\n numberOfDecimals,\n showGroupSeparators,\n min,\n max,\n variant\n };\n\n return (\n <FormField\n testId={testIds}\n as='fieldset'\n {...restProps}\n ref={containerRef}\n container={{ wrap: 'nowrap' }}\n labelHidden={labelHidden}\n labelAs='legend'\n label={label}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n status={status}\n >\n <Flex container as={StyledRangeInputContainer}>\n <NumberInput\n testId={testIds.min}\n {...commonProps}\n value={state.start}\n onChange={fromValue => {\n onChange({ start: fromValue, end: value.end ?? '' });\n dispatch({\n type: 'start',\n value: fromValue ?? ''\n });\n }}\n onBlur={changedValue => {\n dispatch({\n type: 'start',\n value: changedValue ?? ''\n });\n startValueRef.current = changedValue ?? '';\n onChange({\n start: changedValue ?? '',\n end: state.end\n });\n }}\n label={fromLabel}\n aria-label={`${t('range_from_numeric') + (label ? ` - ${label}` : '')}`}\n additionalInfo={fromAdditionalInfo}\n autoFocus={autoFocus}\n ref={startValueInputRef}\n />\n <NumberInput\n testId={testIds.max}\n {...commonProps}\n value={state.end}\n onChange={toValue => {\n onChange({ start: value.start ?? '', end: toValue });\n dispatch({\n type: 'end',\n value: toValue ?? ''\n });\n }}\n onBlur={changedValue => {\n dispatch({\n type: 'end',\n value: changedValue ?? ''\n });\n endValueRef.current = changedValue ?? '';\n onChange({\n start: state.start,\n end: changedValue ?? ''\n });\n }}\n label={toLabel}\n aria-label={`${t('range_to_numeric') + (label ? ` - ${label}` : '')}`}\n additionalInfo={toAdditionalInfo}\n ref={endValueInputRef}\n />\n </Flex>\n </FormField>\n );\n }\n);\n\nexport default withTestIds(NumberRangeInput, getNumberRangeTestIds);\n"]}

package/lib/components/PageTemplates/CategorySubPage.js CHANGED Viewed

@@ -39,7 +39,7 @@ const NavGroup = ({ item }) => {
     }
     return null;
 };
-const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIcon, navItemGroups, pageTitle, pageActions, region, maxActions = 3, ...restProps }, ref) => {
+const CategorySubPage = forwardRef(function CategorySubPage({ viewLoading = false, category, categoryIcon, navItemGroups, pageTitle, pageActions, region, maxActions = 3, ...restProps }, ref) {
     const articleRef = createRef();
     const templateRef = useConsolidatedRef(ref);
     const { loadedRef } = useConfiguration();

package/lib/components/PageTemplates/CategorySubPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n Ref,\n forwardRef,\n PropsWithoutRef,\n FunctionComponent,\n ReactNode,\n useCallback,\n useMemo,\n MouseEventHandler,\n useEffect\n} from 'react';\n\nimport { focusHeadingOrContainer } from '../../utils';\nimport { useConfiguration, useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n StyledTemplate,\n StyledTemplateRow,\n StyledPageArticle,\n StyledArticleHeader,\n StyledPageActionCol,\n StyledPageTitle,\n StyledMenuColumn,\n StyledCategoryHeadingRow,\n StyledCategoryIconBlock,\n StyledNav,\n StyledNavList,\n StyledNavGroup,\n StyledNavGroupList,\n StyledNavGroupHeader,\n StyledNavItem,\n StyledSkipNavigation\n} from './CategorySubPage.styles';\n\nexport interface NavItemType extends ForwardProps {\n text: string;\n active?: boolean;\n onClick?: MouseEventHandler;\n href?: string;\n}\n\nexport interface NavGroupType {\n title?: string;\n items: NavItemType[];\n}\n\nexport interface PageAction\n extends Pick<Action, 'id' \| 'icon' \| 'href' \| 'onClick' \| 'disabled'>,\n Pick<ButtonProps, 'variant' \| 'label' \| 'aria-label' \| 'loading'>,\n ForwardProps {\n /** Optional text to replace required text string in Action type /\n text?: string;\n}\n\nexport interface TemplateProps {\n /* Indicates that the primary view for the page cannot yet be rendered /\n /* @default false /\n viewLoading?: boolean;\n /* Parent Category of page and all navigation items /\n category: string;\n /* Parent Category icon /\n categoryIcon?: string;\n navItemGroups: NavGroupType[];\n pageTitle?: string;\n /* Actions to render in fixed page header. Ordered by priority /\n pageActions?: PageAction[];\n /* Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. /\n /* @default 3 /\n maxActions?: number;\n /* Primary page content region /\n region: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n const isAnchor = !!href;\n\n return (\n <StyledNavItem\n as='li'\n selected={!!active}\n tabType='horizontal'\n aria-current={active ? 'page' : undefined}\n >\n <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n {text}\n </Button>\n </StyledNavItem>\n );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n const mappedGroupedItems = useMemo(() => {\n return item.items.map(groupedItem => {\n const key = groupedItem.text;\n return <NavItem item={groupedItem} key={key} />;\n });\n }, [item.items]);\n\n const titledGroup: boolean = useMemo(() => {\n return !!item.title && !!item.items.length;\n }, [item.title, item.items]);\n\n const anonGroup: boolean = useMemo(() => {\n return !item.title && item.items.length > 1;\n }, [item.title, item.items]);\n\n const groupLabelId = useUID();\n if (titledGroup) {\n return (\n <StyledNavGroup as='li'>\n <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n {(item as NavGroupType).title}\n </StyledNavGroupHeader>\n\n <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n </StyledNavGroup>\n );\n }\n\n if (anonGroup) {\n return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n }\n\n if (item.items.length === 1) {\n return <NavItem item={item.items[0]} />;\n }\n\n return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n (\n {\n viewLoading = false,\n category,\n categoryIcon,\n navItemGroups,\n pageTitle,\n pageActions,\n region,\n maxActions = 3,\n ...restProps\n }: PropsWithoutRef<TemplateProps>,\n ref: TemplateProps['ref']\n ) => {\n const articleRef = createRef<HTMLElement>();\n const templateRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n useEffect(() => {\n if (!templateRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(templateRef.current, category);\n } else {\n loadedRef.current = true;\n }\n }, [category]);\n\n const mappedAction = useCallback((action: PageAction) => {\n const { id, text, icon, label, ...rest } = action;\n\n return (\n <Button {...rest} key={id} icon={!!icon && !text} label={label \|\| text}>\n {!!icon && <Icon name={icon} />}\n {!!text && text}\n </Button>\n );\n }, []);\n\n return (\n <StyledTemplate>\n <Flex\n {...restProps}\n ref={templateRef}\n as={StyledTemplateRow}\n container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n >\n <StyledMenuColumn>\n <StyledSkipNavigation\n onClick={() => {\n if (articleRef.current) articleRef.current.focus();\n }}\n >\n Skip to page content\n </StyledSkipNavigation>\n\n <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n {categoryIcon && (\n <Flex\n as={StyledCategoryIconBlock}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <Icon name={categoryIcon} />\n </Flex>\n )}\n <Text variant='h1'>{category}</Text>\n </Flex>\n\n <StyledNav>\n <StyledNavList>\n {navItemGroups.map((navItem, index) => {\n const key = 'title' in navItem ? navItem.title : `navItem${index}`;\n\n return <NavGroup key={key} item={navItem} />;\n })}\n </StyledNavList>\n </StyledNav>\n </StyledMenuColumn>\n\n <Flex\n as={StyledPageArticle}\n item={{ grow: 1 }}\n ref={articleRef}\n aria-label={pageTitle \|\| 'Main Content'}\n tabIndex={0}\n >\n {viewLoading && <Progress placement='local' />}\n\n {!viewLoading && (\n <>\n {(pageTitle \|\| pageActions) && (\n <Flex\n as={StyledArticleHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n {pageActions && !!pageActions.length && (\n <>\n {pageActions.length <= maxActions && (\n <StyledPageActionCol>\n {pageActions.reverse().map(mappedAction)}\n </StyledPageActionCol>\n )}\n\n {pageActions.length > maxActions && (\n <StyledPageActionCol>\n <MenuButton\n text='Actions'\n menu={{\n items: (pageActions as Action[])\n .slice(maxActions - 1)\n .map(({ id, text, onClick, ...rest }) => ({\n id,\n primary: text,\n onClick,\n ...rest\n }))\n }}\n />\n\n {pageActions\n .slice(0, maxActions - 1)\n .reverse()\n .map(mappedAction)}\n </StyledPageActionCol>\n )}\n </>\n )}\n </Flex>\n )}\n\n {region}\n </>\n )}\n </Flex>\n </Flex>\n </StyledTemplate>\n );\n }\n);\n\nexport default CategorySubPage;\n"]}
1	+ {"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n Ref,\n forwardRef,\n PropsWithoutRef,\n FunctionComponent,\n ReactNode,\n useCallback,\n useMemo,\n MouseEventHandler,\n useEffect\n} from 'react';\n\nimport { focusHeadingOrContainer } from '../../utils';\nimport { useConfiguration, useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n StyledTemplate,\n StyledTemplateRow,\n StyledPageArticle,\n StyledArticleHeader,\n StyledPageActionCol,\n StyledPageTitle,\n StyledMenuColumn,\n StyledCategoryHeadingRow,\n StyledCategoryIconBlock,\n StyledNav,\n StyledNavList,\n StyledNavGroup,\n StyledNavGroupList,\n StyledNavGroupHeader,\n StyledNavItem,\n StyledSkipNavigation\n} from './CategorySubPage.styles';\n\nexport interface NavItemType extends ForwardProps {\n text: string;\n active?: boolean;\n onClick?: MouseEventHandler;\n href?: string;\n}\n\nexport interface NavGroupType {\n title?: string;\n items: NavItemType[];\n}\n\nexport interface PageAction\n extends Pick<Action, 'id' \| 'icon' \| 'href' \| 'onClick' \| 'disabled'>,\n Pick<ButtonProps, 'variant' \| 'label' \| 'aria-label' \| 'loading'>,\n ForwardProps {\n /** Optional text to replace required text string in Action type /\n text?: string;\n}\n\nexport interface TemplateProps {\n /* Indicates that the primary view for the page cannot yet be rendered /\n /* @default false /\n viewLoading?: boolean;\n /* Parent Category of page and all navigation items /\n category: string;\n /* Parent Category icon /\n categoryIcon?: string;\n navItemGroups: NavGroupType[];\n pageTitle?: string;\n /* Actions to render in fixed page header. Ordered by priority /\n pageActions?: PageAction[];\n /* Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. /\n /* @default 3 /\n maxActions?: number;\n /* Primary page content region /\n region: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n const isAnchor = !!href;\n\n return (\n <StyledNavItem\n as='li'\n selected={!!active}\n tabType='horizontal'\n aria-current={active ? 'page' : undefined}\n >\n <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n {text}\n </Button>\n </StyledNavItem>\n );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n const mappedGroupedItems = useMemo(() => {\n return item.items.map(groupedItem => {\n const key = groupedItem.text;\n return <NavItem item={groupedItem} key={key} />;\n });\n }, [item.items]);\n\n const titledGroup: boolean = useMemo(() => {\n return !!item.title && !!item.items.length;\n }, [item.title, item.items]);\n\n const anonGroup: boolean = useMemo(() => {\n return !item.title && item.items.length > 1;\n }, [item.title, item.items]);\n\n const groupLabelId = useUID();\n if (titledGroup) {\n return (\n <StyledNavGroup as='li'>\n <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n {(item as NavGroupType).title}\n </StyledNavGroupHeader>\n\n <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n </StyledNavGroup>\n );\n }\n\n if (anonGroup) {\n return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n }\n\n if (item.items.length === 1) {\n return <NavItem item={item.items[0]} />;\n }\n\n return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n function CategorySubPage(\n {\n viewLoading = false,\n category,\n categoryIcon,\n navItemGroups,\n pageTitle,\n pageActions,\n region,\n maxActions = 3,\n ...restProps\n }: PropsWithoutRef<TemplateProps>,\n ref: TemplateProps['ref']\n ) {\n const articleRef = createRef<HTMLElement>();\n const templateRef = useConsolidatedRef(ref);\n const { loadedRef } = useConfiguration();\n\n useEffect(() => {\n if (!templateRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(templateRef.current, category);\n } else {\n loadedRef.current = true;\n }\n }, [category]);\n\n const mappedAction = useCallback((action: PageAction) => {\n const { id, text, icon, label, ...rest } = action;\n\n return (\n <Button {...rest} key={id} icon={!!icon && !text} label={label \|\| text}>\n {!!icon && <Icon name={icon} />}\n {!!text && text}\n </Button>\n );\n }, []);\n\n return (\n <StyledTemplate>\n <Flex\n {...restProps}\n ref={templateRef}\n as={StyledTemplateRow}\n container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n >\n <StyledMenuColumn>\n <StyledSkipNavigation\n onClick={() => {\n if (articleRef.current) articleRef.current.focus();\n }}\n >\n Skip to page content\n </StyledSkipNavigation>\n\n <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n {categoryIcon && (\n <Flex\n as={StyledCategoryIconBlock}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <Icon name={categoryIcon} />\n </Flex>\n )}\n <Text variant='h1'>{category}</Text>\n </Flex>\n\n <StyledNav>\n <StyledNavList>\n {navItemGroups.map((navItem, index) => {\n const key = 'title' in navItem ? navItem.title : `navItem${index}`;\n\n return <NavGroup key={key} item={navItem} />;\n })}\n </StyledNavList>\n </StyledNav>\n </StyledMenuColumn>\n\n <Flex\n as={StyledPageArticle}\n item={{ grow: 1 }}\n ref={articleRef}\n aria-label={pageTitle \|\| 'Main Content'}\n tabIndex={0}\n >\n {viewLoading && <Progress placement='local' />}\n\n {!viewLoading && (\n <>\n {(pageTitle \|\| pageActions) && (\n <Flex\n as={StyledArticleHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n {pageActions && !!pageActions.length && (\n <>\n {pageActions.length <= maxActions && (\n <StyledPageActionCol>\n {pageActions.reverse().map(mappedAction)}\n </StyledPageActionCol>\n )}\n\n {pageActions.length > maxActions && (\n <StyledPageActionCol>\n <MenuButton\n text='Actions'\n menu={{\n items: (pageActions as Action[])\n .slice(maxActions - 1)\n .map(({ id, text, onClick, ...rest }) => ({\n id,\n primary: text,\n onClick,\n ...rest\n }))\n }}\n />\n\n {pageActions\n .slice(0, maxActions - 1)\n .reverse()\n .map(mappedAction)}\n </StyledPageActionCol>\n )}\n </>\n )}\n </Flex>\n )}\n\n {region}\n </>\n )}\n </Flex>\n </Flex>\n </StyledTemplate>\n );\n }\n);\n\nexport default CategorySubPage;\n"]}

package/lib/components/PageTemplates/DashboardPage.js CHANGED Viewed

@@ -28,7 +28,7 @@ export const StyledDashboardPageLayout = styled(StyledPageLayout)(({ fitToViewpo
   `;
 });
 StyledDashboardPageLayout.defaultProps = defaultThemeProp;
-const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', fitToViewport = false, title, icon, actions, banners, path, as, ...restProps }, ref) => {
+const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', fitToViewport = false, title, icon, actions, banners, path, as, ...restProps }, ref) {
     const pageRef = useConsolidatedRef(ref);
     const { loadedRef } = useConfiguration();
     useEffect(() => {
@@ -133,7 +133,7 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                     }, md: { item: { area: 'col-full-width' } }, as: StyledDashboardRegion, children: colItems }, key));
             })] }));
 });
-const DashboardPage = forwardRef(({ a, b, c, filters, fitToViewport, ...restProps }, ref) => {
+const DashboardPage = forwardRef(function DashboardPage({ a, b, c, filters, fitToViewport, ...restProps }, ref) {
     return (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], ref: ref }));
 });
 export default DashboardPage;