npm - @pega/cosmos-react-cs - Versions diffs - 4.0.0-dev.22.2 → 4.0.0-dev.23.1 - Mend

@pega/cosmos-react-cs 4.0.0-dev.22.2 → 4.0.0-dev.23.1

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

Files changed (7) hide show

package/lib/components/Article/Article.d.ts.map +1 -1
package/lib/components/Article/Article.js +1 -1
package/lib/components/Article/Article.js.map +1 -1
package/lib/components/ArticleList/ArticleList.d.ts.map +1 -1
package/lib/components/ArticleList/ArticleList.js +16 -13
package/lib/components/ArticleList/ArticleList.js.map +1 -1
package/package.json +3 -3

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAEL,aAAa,EAKb,SAAS,EACT,YAAY,EACZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAG1E,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mEAAmE;IACnE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,kCAAkC;IAClC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,+DAA+D;IAC/D,cAAc,CAAC,EAAE;QACf,qDAAqD;QACrD,EAAE,EAAE,MAAM,CAAC;QACX,iFAAiF;QACjF,KAAK,EAAE,MAAM,CAAC;QACd,yCAAyC;QACzC,IAAI,EAAE,MAAM,CAAC;QACb,2EAA2E;QAC3E,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACnC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACxC,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6DpD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,~~CAqG3D~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAEL,aAAa,EAKb,SAAS,EACT,YAAY,EACZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAG1E,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mEAAmE;IACnE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,kCAAkC;IAClC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,+DAA+D;IAC/D,cAAc,CAAC,EAAE;QACf,qDAAqD;QACrD,EAAE,EAAE,MAAM,CAAC;QACX,iFAAiF;QACjF,KAAK,EAAE,MAAM,CAAC;QACd,yCAAyC;QACzC,IAAI,EAAE,MAAM,CAAC;QACb,2EAA2E;QAC3E,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACnC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACxC,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6DpD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA0G3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -67,7 +67,7 @@ const Article = (props) => {
                                         ...rest,
                                         primary: text
                                     }))
-                                } }))] }))] })), !loading && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) }), meta && (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(ArticleMeta, { ...meta }) })), _jsx(StyledArticleContent, { children: content }), footer && _jsx(ArticleFooter, { ...footer })] })), _jsx(Progress, { visible: !!loading, focusOnVisible: true, placement: 'block', message: t('loading') })] }));
+                                } }))] }))] })), !loading && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) }), meta && (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(ArticleMeta, { ...meta }) })), _jsx(StyledArticleContent, { children: content }), footer && _jsx(ArticleFooter, { ...footer })] })), _jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: title ?? t('article_label_a11y') } })] }));
 };
 export default Article;
 //# sourceMappingURL=Article.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n MenuItemProps,\n Flex,\n MenuButton,\n Text,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n Button,\n Icon,\n Progress,\n useI18n,\n useDirection\n} from '@pega/cosmos-react-core';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';\nimport ArticleListHeader from '../ArticleList/ArticleListHeader';\n\nimport ArticleFooter, { ArticleFooterProps } from './ArticleFooter';\nimport ArticleMeta, { ArticleMetaProps } from './ArticleMeta';\n\nregisterIcon(caretRightIcon, caretLeftIcon);\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n /** Header to show icon , title and any actions on the container /\n header?: ArticleListHeaderProps;\n /* Control for navigating back /\n backNavigation?: {\n title: string;\n onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n };\n /* Primary actions which needs to be displayed with an icon /\n primaryActions?: {\n /* Unique id for action, used in onClick callback /\n id: string;\n /* Label for this action, shown in tooltip and used for generating aria-label /\n label: string;\n /* Icon to be displayed in the button /\n icon: string;\n /* Callback triggered when a user clicks of presses enter on the action /\n onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n }[];\n /* Secondary actions that needs to be pushed under more icon /\n secondaryActions?: {\n id: MenuItemProps['id'];\n text: MenuItemProps['primary'];\n onClick: MenuItemProps['onClick'];\n }[];\n /* Article title /\n title: string;\n /* Array of meta data /\n meta?: ArticleMetaProps;\n /* Article content /\n content: ReactNode;\n /* Footer /\n footer?: ArticleFooterProps;\n /* Prop to check visibility of skeleton /\n loading: boolean;\n}\n\nexport type ArticleProps =\n \| (BaseArticleProps & { loading?: false })\n \| (Partial<BaseArticleProps> & { loading: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n const { theme } = props;\n return css`\n background: ${theme.base.palette['primary-background']};\n padding: calc(1.5 ${theme.base.spacing});\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n max-height: inherit;\n `;\n});\n\nconst StyledArticleHeader = styled.header`\n flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n const {\n theme,\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n flex-grow: 1;\n overflow-y: auto;\n padding: 0 calc(1.5 * ${spacing});\n margin: 0 calc(-1.5 * ${spacing});\n ul,\n ol {\n padding-left: calc(3 * ${spacing});\n }\n a {\n color: ${theme.components.link.color};\n }\n * {\n margin: revert;\n }\n `;\n});\n\nconst StyledBackNavButton = styled(Button)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n display: flex;\n align-items: start;\n gap: calc(0.5 * ${spacing});\n margin-inline-end: calc(1.5 * ${spacing});\n `;\n }\n);\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\nStyledBackNavButton.defaultProps = defaultThemeProp;\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n const {\n header,\n meta,\n title,\n backNavigation,\n content,\n primaryActions,\n secondaryActions,\n footer,\n loading,\n ...restProps\n } = props;\n\n const { rtl, ltr, end, start } = useDirection();\n\n const t = useI18n();\n const backButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (!loading) {\n backButtonRef.current?.focus();\n }\n }, [loading]);\n\n return (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledArticleWrapper}\n aria-busy={loading ? true : undefined}\n >\n {header && <ArticleListHeader {...header} />}\n {(backNavigation \|\| primaryActions \|\| secondaryActions) && (\n <Flex container={{ alignItems: 'start' }} item={{ grow: 1 }}>\n <Flex container={{ pad: [1, undefined, undefined] }} item={{ grow: 1 }}>\n <Button\n as={StyledBackNavButton}\n onClick={backNavigation?.onClick}\n variant='link'\n ref={backButtonRef}\n >\n {ltr && <Icon name={`caret-${start}`} />}\n {backNavigation?.title}\n {rtl && <Icon name={`caret-${end}`} />}\n </Button>\n </Flex>\n\n {!loading && (\n <>\n {primaryActions?.map(({ id, label, onClick, icon }) => {\n return (\n <Button\n key={id}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n variant='simple'\n label={label}\n icon\n >\n <Icon name={icon} />\n </Button>\n );\n })}\n {secondaryActions && (\n <MenuButton\n variant='simple'\n text={t('actions')}\n icon='more'\n iconOnly\n menu={{\n items: secondaryActions.map(({ text, ...rest }) => ({\n ...rest,\n primary: text\n }))\n }}\n />\n )}\n </>\n )}\n </Flex>\n )}\n {!loading && (\n <>\n <Flex container as={StyledArticleHeader}>\n <Text variant='h2'>{title}</Text>\n </Flex>\n\n {meta && (\n <Flex container item={{ shrink: 0 }}>\n <ArticleMeta {...meta} />\n </Flex>\n )}\n\n <StyledArticleContent>{content}</StyledArticleContent>\n\n {footer && <ArticleFooter {...footer} />}\n </>\n )}\n <Progress visible={!!loading} focusOnVisible placement='block' message={t('loading')} />\n </Flex>\n );\n};\n\nexport default Article;\n"]}
1	+ {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n MenuItemProps,\n Flex,\n MenuButton,\n Text,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n Button,\n Icon,\n Progress,\n useI18n,\n useDirection\n} from '@pega/cosmos-react-core';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';\nimport ArticleListHeader from '../ArticleList/ArticleListHeader';\n\nimport ArticleFooter, { ArticleFooterProps } from './ArticleFooter';\nimport ArticleMeta, { ArticleMetaProps } from './ArticleMeta';\n\nregisterIcon(caretRightIcon, caretLeftIcon);\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n /** Header to show icon , title and any actions on the container /\n header?: ArticleListHeaderProps;\n /* Control for navigating back /\n backNavigation?: {\n title: string;\n onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n };\n /* Primary actions which needs to be displayed with an icon /\n primaryActions?: {\n /* Unique id for action, used in onClick callback /\n id: string;\n /* Label for this action, shown in tooltip and used for generating aria-label /\n label: string;\n /* Icon to be displayed in the button /\n icon: string;\n /* Callback triggered when a user clicks of presses enter on the action /\n onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n }[];\n /* Secondary actions that needs to be pushed under more icon /\n secondaryActions?: {\n id: MenuItemProps['id'];\n text: MenuItemProps['primary'];\n onClick: MenuItemProps['onClick'];\n }[];\n /* Article title /\n title: string;\n /* Array of meta data /\n meta?: ArticleMetaProps;\n /* Article content /\n content: ReactNode;\n /* Footer /\n footer?: ArticleFooterProps;\n /* Prop to check visibility of skeleton /\n loading: boolean;\n}\n\nexport type ArticleProps =\n \| (BaseArticleProps & { loading?: false })\n \| (Partial<BaseArticleProps> & { loading: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n const { theme } = props;\n return css`\n background: ${theme.base.palette['primary-background']};\n padding: calc(1.5 ${theme.base.spacing});\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n max-height: inherit;\n `;\n});\n\nconst StyledArticleHeader = styled.header`\n flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n const {\n theme,\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n flex-grow: 1;\n overflow-y: auto;\n padding: 0 calc(1.5 * ${spacing});\n margin: 0 calc(-1.5 * ${spacing});\n ul,\n ol {\n padding-left: calc(3 * ${spacing});\n }\n a {\n color: ${theme.components.link.color};\n }\n * {\n margin: revert;\n }\n `;\n});\n\nconst StyledBackNavButton = styled(Button)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n display: flex;\n align-items: start;\n gap: calc(0.5 * ${spacing});\n margin-inline-end: calc(1.5 * ${spacing});\n `;\n }\n);\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\nStyledBackNavButton.defaultProps = defaultThemeProp;\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n const {\n header,\n meta,\n title,\n backNavigation,\n content,\n primaryActions,\n secondaryActions,\n footer,\n loading,\n ...restProps\n } = props;\n\n const { rtl, ltr, end, start } = useDirection();\n\n const t = useI18n();\n const backButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (!loading) {\n backButtonRef.current?.focus();\n }\n }, [loading]);\n\n return (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledArticleWrapper}\n aria-busy={loading ? true : undefined}\n >\n {header && <ArticleListHeader {...header} />}\n {(backNavigation \|\| primaryActions \|\| secondaryActions) && (\n <Flex container={{ alignItems: 'start' }} item={{ grow: 1 }}>\n <Flex container={{ pad: [1, undefined, undefined] }} item={{ grow: 1 }}>\n <Button\n as={StyledBackNavButton}\n onClick={backNavigation?.onClick}\n variant='link'\n ref={backButtonRef}\n >\n {ltr && <Icon name={`caret-${start}`} />}\n {backNavigation?.title}\n {rtl && <Icon name={`caret-${end}`} />}\n </Button>\n </Flex>\n\n {!loading && (\n <>\n {primaryActions?.map(({ id, label, onClick, icon }) => {\n return (\n <Button\n key={id}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n variant='simple'\n label={label}\n icon\n >\n <Icon name={icon} />\n </Button>\n );\n })}\n {secondaryActions && (\n <MenuButton\n variant='simple'\n text={t('actions')}\n icon='more'\n iconOnly\n menu={{\n items: secondaryActions.map(({ text, ...rest }) => ({\n ...rest,\n primary: text\n }))\n }}\n />\n )}\n </>\n )}\n </Flex>\n )}\n {!loading && (\n <>\n <Flex container as={StyledArticleHeader}>\n <Text variant='h2'>{title}</Text>\n </Flex>\n\n {meta && (\n <Flex container item={{ shrink: 0 }}>\n <ArticleMeta {...meta} />\n </Flex>\n )}\n\n <StyledArticleContent>{content}</StyledArticleContent>\n\n {footer && <ArticleFooter {...footer} />}\n </>\n )}\n <Progress\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: title ?? t('article_label_a11y') }}\n />\n </Flex>\n );\n};\n\nexport default Article;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,~~EAQlB~~,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,~~EAOb~~,MAAM,yBAAyB,CAAC;AAIjC,OAAO,~~EAAE~~,gBAAgB,EAAuB,MAAM,qBAAqB,CAAC;~~AAgC5E~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CA8KnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAA0B,gBAAgB,EAAuB,MAAM,qBAAqB,CAAC;AAgCpG,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAyLnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
+import { forwardRef, useMemo, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables } from '@pega/cosmos-react-core';
+import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables, useLiveLog } from '@pega/cosmos-react-core';
 import ArticleListFilter from './ArticleListFilter';
 import ArticleSummary from './ArticleSummary';
 import ArticleListHeader from './ArticleListHeader';
@@ -35,6 +35,7 @@ StyledArticleList.defaultProps = defaultThemeProp;
 const ArticleList = forwardRef((props, ref) => {
     const { header, suggested, followed, search, onTabClick, activeTab, loading = false, onQuickFilterClick, ...restProps } = props;
     const t = useI18n();
+    const { announcePolite } = useLiveLog();
     const articleContentRefs = useRef([]);
     const activeTabContentRef = useRef(null);
     const tabsRef = useRef(null);
@@ -75,20 +76,22 @@ const ArticleList = forwardRef((props, ref) => {
             }
         }
     }, []);
-    useLayoutEffect(() => {
-        if (loading && document.activeElement instanceof HTMLElement) {
-            activeElementRef.current = document.activeElement;
-        }
-        if (!loading && search?.quickFilters?.length === 0) {
-            activeElementRef.current?.focus();
-            activeElementRef.current = null;
+    useEffect(() => {
+        if (!loading) {
+            const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;
+            announcePolite({
+                type: 'status',
+                message: currentTabContent && currentTabContent?.length > 0
+                    ? `${header?.title || t('article_list_label_a11y')} ${t('loaded')}`
+                    : t('no_items')
+            });
         }
     }, [loading]);
-    const articleContent = ({ index, content }) => {
+    const articleContent = ({ index, content, headerTitle }) => {
         return (_jsxs("div", { ref: el => {
                 if (el)
                     articleContentRefs.current[index] = el;
-            }, children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading ? (_jsx(Progress, { visible: !!loading, focusOnVisible: true, placement: 'block', message: t('loading') })) : (_jsx(Flex, { container: { direction: 'column' }, as: StyledSummaryList, role: 'feed', children: content.length > 0 ? (content.map(({ href, articleId, title: summaryHeader, abstract, meta, onTitleClick, quickFilters, primaryActions: summaryActions }) => (_jsx(ArticleSummary, { articleId: articleId, href: href, title: summaryHeader, abstract: abstract, onTitleClick: onTitleClick, primaryActions: summaryActions, meta: meta, quickFilters: quickFilters, onQuickFilterClick: onQuickFilterClick }, articleId.toString())))) : (_jsx(EmptyState, {})) }))] }));
+            }, children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading ? (_jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: headerTitle ?? t('article_list_label_a11y') } })) : (_jsx(Flex, { container: { direction: 'column' }, as: StyledSummaryList, role: 'feed', children: content.length > 0 ? (content.map(({ href, articleId, title: summaryHeader, abstract, meta, onTitleClick, quickFilters, primaryActions: summaryActions }) => (_jsx(ArticleSummary, { articleId: articleId, href: href, title: summaryHeader, abstract: abstract, onTitleClick: onTitleClick, primaryActions: summaryActions, meta: meta, quickFilters: quickFilters, onQuickFilterClick: onQuickFilterClick }, articleId.toString())))) : (_jsx(EmptyState, {})) }))] }));
     };
     return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y'), ref: ref, ...(loading ? { 'aria-busy': true } : undefined), ...restProps, children: [header && (_jsx(ArticleListHeader, { icon: header.icon, title: header.title, actions: header.actions })), tabs.length > 1 && (_jsx(Tabs, { ref: tabsRef, tabs: tabs, onTabClick: (name, e) => {
                     if (document.activeElement instanceof HTMLElement) {
@@ -97,10 +100,10 @@ const ArticleList = forwardRef((props, ref) => {
                     }
                 }, currentTabId: activeTab })), tabs.map(({ id, content }, index) => {
                 if (tabs.length > 1) {
-                    return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, children: articleContent({ content, index }) }, id));
+                    return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, children: id === activeTab && articleContent({ content, index, headerTitle: header?.title }) }, id));
                 }
                 if (tabs.length === 1) {
-                    return articleContent({ content, index });
+                    return articleContent({ content, index, headerTitle: header?.title });
                 }
                 return _jsx(EmptyState, {});
             })] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n useMemo,\n useEffect,\n useRef,\n useLayoutEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n TabPanel,\n Tabs,\n Tab,\n EmptyState,\n Progress,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport { ArticleListProps, ArticleSummaryProps } from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\n\nconst StyledSummaryList = styled.ul``;\n\nconst StyledArticleList = styled.div(props => {\n const { theme } = props;\n return css`\n max-height: inherit;\n overflow: auto;\n padding: 0 calc(2 * ${theme.base.spacing});\n background: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n > div {\n margin: ${theme.base.spacing} 0;\n }\n\n ${StyledSummaryList} {\n flex-grow: 1;\n margin: 0 0 ${theme.base.spacing} 0;\n list-style-type: none;\n > li:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: 0;\n padding-bottom: ${theme.base.spacing};\n margin-bottom: ${theme.base.spacing};\n }\n }\n `;\n});\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n const {\n header,\n suggested,\n followed,\n search,\n onTabClick,\n activeTab,\n loading = false,\n onQuickFilterClick,\n ...restProps\n } = props;\n const t = useI18n();\n\n const articleContentRefs = useRef<HTMLDivElement[]>([]);\n const activeTabContentRef = useRef<HTMLDivElement \| null>(null);\n const tabsRef = useRef<HTMLButtonElement>(null);\n const activeElementRef = useRef<HTMLElement \| null>(null);\n\n const tabs = useMemo(() => {\n const tabsArr: (Tab & {\n content: ArticleSummaryProps[];\n })[] = [];\n\n if (suggested)\n tabsArr.push({\n id: t('suggested'),\n name: t('suggested'),\n count: suggested?.count,\n content: suggested.articles ?? []\n });\n\n if (search)\n tabsArr.push({\n id: t('search'),\n name: t('search'),\n count: search?.count,\n content: search?.articles ?? []\n });\n\n if (followed)\n tabsArr.push({\n id: t('followed'),\n name: t('followed'),\n count: followed?.count,\n content: followed?.articles ?? []\n });\n\n return tabsArr;\n }, [suggested, followed, search]);\n\n useEffect(() => {\n if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n activeElementRef.current = getFocusables(tabsRef)[0];\n else {\n activeTabContentRef.current =\n articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n activeElementRef.current = getFocusables(activeTabContentRef)[0];\n }\n }\n }, []);\n\n useLayoutEffect(() => {\n if (loading && document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n }\n if (!loading && search?.quickFilters?.length === 0) {\n activeElementRef.current?.focus();\n activeElementRef.current = null;\n }\n }, [loading]);\n\n const articleContent = ({\n index,\n content\n }: {\n index: number;\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n }) => {\n return (\n <div\n ref={el => {\n if (el) articleContentRefs.current[index] = el;\n }}\n >\n {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n {loading ? (\n <Progress visible={!!loading} focusOnVisible placement='block' message={t('loading')} />\n ) : (\n <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n {content.length > 0 ? (\n content.map(\n ({\n href,\n articleId,\n title: summaryHeader,\n abstract,\n meta,\n onTitleClick,\n quickFilters,\n primaryActions: summaryActions\n }) => (\n <ArticleSummary\n key={articleId.toString()}\n articleId={articleId}\n href={href}\n title={summaryHeader}\n abstract={abstract}\n onTitleClick={onTitleClick}\n primaryActions={summaryActions}\n meta={meta}\n quickFilters={quickFilters}\n onQuickFilterClick={onQuickFilterClick}\n />\n )\n )\n ) : (\n <EmptyState />\n )}\n </Flex>\n )}\n </div>\n );\n };\n\n return (\n <Flex\n container={{ direction: 'column' }}\n as={StyledArticleList}\n aria-label={t('article_list_label_a11y')}\n ref={ref}\n {...(loading ? { 'aria-busy': true } : undefined)}\n {...restProps}\n >\n {header && (\n <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n )}\n\n {tabs.length > 1 && (\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n onTabClick={(name, e) => {\n if (document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n onTabClick?.(name, e);\n }\n }}\n currentTabId={activeTab}\n />\n )}\n\n {tabs.map(({ id, content }, index) => {\n if (tabs.length > 1) {\n return (\n <TabPanel key={id} tabId={id} currentTabId={activeTab}>\n {articleContent({ content, index })}\n </TabPanel>\n );\n }\n\n if (tabs.length === 1) {\n return articleContent({ content, index });\n }\n\n return <EmptyState />;\n })}\n </Flex>\n );\n }\n);\n\nexport default ArticleList;\n"]}
1	+ {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n useMemo,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n TabPanel,\n Tabs,\n Tab,\n EmptyState,\n Progress,\n getFocusables,\n useLiveLog\n} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport { ArticleListHeaderProps, ArticleListProps, ArticleSummaryProps } from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\n\nconst StyledSummaryList = styled.ul``;\n\nconst StyledArticleList = styled.div(props => {\n const { theme } = props;\n return css`\n max-height: inherit;\n overflow: auto;\n padding: 0 calc(2 * ${theme.base.spacing});\n background: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n > div {\n margin: ${theme.base.spacing} 0;\n }\n\n ${StyledSummaryList} {\n flex-grow: 1;\n margin: 0 0 ${theme.base.spacing} 0;\n list-style-type: none;\n > li:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: 0;\n padding-bottom: ${theme.base.spacing};\n margin-bottom: ${theme.base.spacing};\n }\n }\n `;\n});\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n const {\n header,\n suggested,\n followed,\n search,\n onTabClick,\n activeTab,\n loading = false,\n onQuickFilterClick,\n ...restProps\n } = props;\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n\n const articleContentRefs = useRef<HTMLDivElement[]>([]);\n const activeTabContentRef = useRef<HTMLDivElement \| null>(null);\n const tabsRef = useRef<HTMLButtonElement>(null);\n const activeElementRef = useRef<HTMLElement \| null>(null);\n\n const tabs = useMemo(() => {\n const tabsArr: (Tab & {\n content: ArticleSummaryProps[];\n })[] = [];\n\n if (suggested)\n tabsArr.push({\n id: t('suggested'),\n name: t('suggested'),\n count: suggested?.count,\n content: suggested.articles ?? []\n });\n\n if (search)\n tabsArr.push({\n id: t('search'),\n name: t('search'),\n count: search?.count,\n content: search?.articles ?? []\n });\n\n if (followed)\n tabsArr.push({\n id: t('followed'),\n name: t('followed'),\n count: followed?.count,\n content: followed?.articles ?? []\n });\n\n return tabsArr;\n }, [suggested, followed, search]);\n\n useEffect(() => {\n if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n activeElementRef.current = getFocusables(tabsRef)[0];\n else {\n activeTabContentRef.current =\n articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n activeElementRef.current = getFocusables(activeTabContentRef)[0];\n }\n }\n }, []);\n\n useEffect(() => {\n if (!loading) {\n const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n announcePolite({\n type: 'status',\n message:\n currentTabContent && currentTabContent?.length > 0\n ? `${header?.title \|\| t('article_list_label_a11y')} ${t('loaded')}`\n : t('no_items')\n });\n }\n }, [loading]);\n\n const articleContent = ({\n index,\n content,\n headerTitle\n }: {\n index: number;\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n headerTitle?: ArticleListHeaderProps['title'];\n }) => {\n return (\n <div\n ref={el => {\n if (el) articleContentRefs.current[index] = el;\n }}\n >\n {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n {loading ? (\n <Progress\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: headerTitle ?? t('article_list_label_a11y') }}\n />\n ) : (\n <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n {content.length > 0 ? (\n content.map(\n ({\n href,\n articleId,\n title: summaryHeader,\n abstract,\n meta,\n onTitleClick,\n quickFilters,\n primaryActions: summaryActions\n }) => (\n <ArticleSummary\n key={articleId.toString()}\n articleId={articleId}\n href={href}\n title={summaryHeader}\n abstract={abstract}\n onTitleClick={onTitleClick}\n primaryActions={summaryActions}\n meta={meta}\n quickFilters={quickFilters}\n onQuickFilterClick={onQuickFilterClick}\n />\n )\n )\n ) : (\n <EmptyState />\n )}\n </Flex>\n )}\n </div>\n );\n };\n\n return (\n <Flex\n container={{ direction: 'column' }}\n as={StyledArticleList}\n aria-label={t('article_list_label_a11y')}\n ref={ref}\n {...(loading ? { 'aria-busy': true } : undefined)}\n {...restProps}\n >\n {header && (\n <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n )}\n\n {tabs.length > 1 && (\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n onTabClick={(name, e) => {\n if (document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n onTabClick?.(name, e);\n }\n }}\n currentTabId={activeTab}\n />\n )}\n\n {tabs.map(({ id, content }, index) => {\n if (tabs.length > 1) {\n return (\n <TabPanel key={id} tabId={id} currentTabId={activeTab}>\n {id === activeTab && articleContent({ content, index, headerTitle: header?.title })}\n </TabPanel>\n );\n }\n\n if (tabs.length === 1) {\n return articleContent({ content, index, headerTitle: header?.title });\n }\n\n return <EmptyState />;\n })}\n </Flex>\n );\n }\n);\n\nexport default ArticleList;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.22.2",
+  "version": "4.0.0-dev.23.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.22.2",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.22.2",
+    "@pega/cosmos-react-core": "4.0.0-dev.23.1",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.23.1",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",