@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/Article/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from './Article';
+export { default as ArticleFooter } from './ArticleFooter';
+export { default as ArticleRating } from './ArticleRating';
+export type { ArticleProps } from './Article';
+export type { ArticleTag, ArticleFooterProps } from './ArticleFooter';
+export type { ArticleRatingProps } from './ArticleRating';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Article/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/Article/index.js

@@ -0,0 +1,4 @@
+export { default } from './Article';
+export { default as ArticleFooter } from './ArticleFooter';
+export { default as ArticleRating } from './ArticleRating';
+//# sourceMappingURL=index.js.map

package/lib/components/Article/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './Article';\nexport { default as ArticleFooter } from './ArticleFooter';\nexport { default as ArticleRating } from './ArticleRating';\nexport type { ArticleProps } from './Article';\nexport type { ArticleTag, ArticleFooterProps } from './ArticleFooter';\nexport type { ArticleRatingProps } from './ArticleRating';\n"]}

package/lib/components/ArticleList/ArticleBuddy.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ArticleBuddyProps } from './ArticleList.types';
+export declare const StyledDisclaimerHeader: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDisclaimerText: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBuddyContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ArticleBuddy: FunctionComponent<ArticleBuddyProps & ForwardProps>;
+export default ArticleBuddy;
+//# sourceMappingURL=ArticleBuddy.d.ts.map

package/lib/components/ArticleList/ArticleBuddy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleBuddy.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleBuddy.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAmB3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,iLAYlC,CAAC;AAIF,eAAO,MAAM,oBAAoB,iLAahC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAahC,CAAC;AAMF,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA4GrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ArticleList/ArticleBuddy.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Text, Actions, Flex, defaultThemeProp, SearchInput, EmptyState, useI18n, Link, calculateFontSize, Progress, Button, useConfiguration, formatNumber, useLiveLog } from '@pega/cosmos-react-core';
+import { isExternalLink, isInternalArticle } from './ArticleList.types';
+export const StyledDisclaimerHeader = styled(Text)(({ theme: { base: { spacing, palette } } }) => {
+    return css `
+      font-weight: bold;
+      border-block-start: 0.0625rem solid ${palette['border-line']};
+      padding-block: ${spacing};
+    `;
+});
+StyledDisclaimerHeader.defaultProps = defaultThemeProp;
+export const StyledDisclaimerText = styled(Text)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing } } }) => {
+    const systemFontSize = calculateFontSize(fontSize, fontScale).xs;
+    return css `
+      font-style: italic;
+      font-size: ${systemFontSize};
+      margin-block-end: calc(2.5 * ${spacing});
+    `;
+});
+StyledDisclaimerText.defaultProps = defaultThemeProp;
+export const StyledBuddyContainer = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      padding: calc(2 * ${spacing});
+      overflow-y: auto;
+      max-height: inherit;
+      height: 100%;
+    `;
+});
+StyledBuddyContainer.defaultProps = defaultThemeProp;
+const StyledBuddyArticleHeader = styled.header ``;
+const ArticleBuddy = ({ searchInput, title, content, actions, references, disclaimer, loading = false, ...restProps }) => {
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    const { announcePolite } = useLiveLog();
+    useEffect(() => {
+        if (content) {
+            announcePolite({
+                message: t('result_available'),
+                type: 'acknowledgement'
+            });
+        }
+    }, [content]);
+    return (_jsxs(Flex, { ...restProps, as: StyledBuddyContainer, container: { direction: 'column', gap: 1 }, "aria-busy": loading ? true : undefined, children: [_jsx(SearchInput, { ...searchInput }), loading && _jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading') }), !loading && title && content && (_jsxs(_Fragment, { children: [_jsxs("article", { children: [_jsxs(Flex, { container: { alignItems: 'start' }, item: { grow: 1 }, children: [_jsx(Flex, { container: { pad: [1, undefined, undefined] }, item: { grow: 1, shrink: 0 }, as: StyledBuddyArticleHeader, children: _jsx(Text, { variant: 'h3', children: title }) }), actions && _jsx(Actions, { items: actions })] }), _jsx(Flex, { container: true, item: { grow: 1 }, children: content })] }), references && (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: [undefined, 1] }, children: [_jsx(Text, { variant: 'h3', children: t('references') }), references?.map(reference => {
+                                return (_jsxs(Flex, { container: true, children: [_jsxs(Flex, { container: { alignItems: 'start', gap: 1 }, item: { grow: 1 }, children: [isExternalLink(reference) && (_jsx(Link, { href: reference.href, target: '_blank', children: title }, reference.id)), isInternalArticle(reference) && (_jsx(Button, { variant: 'link', onClick: (e) => reference.onClick(reference.id, e), children: reference.name }))] }), _jsx(Flex, { container: { alignItems: 'start' }, item: { grow: 0 }, children: _jsx(Text, { children: formatNumber(reference.confidence, {
+                                                    locale,
+                                                    options: {
+                                                        style: 'unit',
+                                                        unit: 'percent',
+                                                        maximumFractionDigits: 0
+                                                    }
+                                                }) }) })] }, reference.id));
+                            })] }))] })), !loading && (!title || !content) && (_jsx(Flex, { container: { direction: 'column', pad: [2, undefined] }, children: _jsx(EmptyState, {}) })), disclaimer && (_jsxs(Flex, { container: { direction: 'column', pad: [1] }, children: [_jsx(StyledDisclaimerHeader, { children: t('disclaimer') }), _jsx(StyledDisclaimerText, { children: disclaimer })] }))] }));
+};
+export default ArticleBuddy;
+//# sourceMappingURL=ArticleBuddy.js.map

package/lib/components/ArticleList/ArticleBuddy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleBuddy.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleBuddy.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\nimport type { FunctionComponent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Actions,\n  Flex,\n  defaultThemeProp,\n  SearchInput,\n  EmptyState,\n  useI18n,\n  Link,\n  calculateFontSize,\n  Progress,\n  Button,\n  useConfiguration,\n  formatNumber,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { isExternalLink, isInternalArticle } from './ArticleList.types';\nimport type { ArticleBuddyProps } from './ArticleList.types';\n\nexport const StyledDisclaimerHeader = styled(Text)(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      font-weight: bold;\n      border-block-start: 0.0625rem solid ${palette['border-line']};\n      padding-block: ${spacing};\n    `;\n  }\n);\n\nStyledDisclaimerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDisclaimerText = styled(Text)(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n    }\n  }) => {\n    const systemFontSize = calculateFontSize(fontSize, fontScale).xs;\n    return css`\n      font-style: italic;\n      font-size: ${systemFontSize};\n      margin-block-end: calc(2.5 * ${spacing});\n    `;\n  }\n);\n\nStyledDisclaimerText.defaultProps = defaultThemeProp;\n\nexport const StyledBuddyContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      overflow-y: auto;\n      max-height: inherit;\n      height: 100%;\n    `;\n  }\n);\n\nStyledBuddyContainer.defaultProps = defaultThemeProp;\n\nconst StyledBuddyArticleHeader = styled.header``;\n\nconst ArticleBuddy: FunctionComponent<ArticleBuddyProps & ForwardProps> = ({\n  searchInput,\n  title,\n  content,\n  actions,\n  references,\n  disclaimer,\n  loading = false,\n  ...restProps\n}) => {\n  const t = useI18n();\n  const { locale } = useConfiguration();\n  const { announcePolite } = useLiveLog();\n\n  useEffect(() => {\n    if (content) {\n      announcePolite({\n        message: t('result_available'),\n        type: 'acknowledgement'\n      });\n    }\n  }, [content]);\n\n  return (\n    <Flex\n      {...restProps}\n      as={StyledBuddyContainer}\n      container={{ direction: 'column', gap: 1 }}\n      aria-busy={loading ? true : undefined}\n    >\n      <SearchInput {...searchInput} />\n\n      {loading && <Progress visible={!!loading} placement='block' message={t('loading')} />}\n      {!loading && title && content && (\n        <>\n          <article>\n            <Flex container={{ alignItems: 'start' }} item={{ grow: 1 }}>\n              <Flex\n                container={{ pad: [1, undefined, undefined] }}\n                item={{ grow: 1, shrink: 0 }}\n                as={StyledBuddyArticleHeader}\n              >\n                <Text variant='h3'>{title}</Text>\n              </Flex>\n\n              {actions && <Actions items={actions} />}\n            </Flex>\n            <Flex container item={{ grow: 1 }}>\n              {content}\n            </Flex>\n          </article>\n          {references && (\n            <Flex container={{ direction: 'column', gap: 1, pad: [undefined, 1] }}>\n              <Text variant='h3'>{t('references')}</Text>\n              {references?.map(reference => {\n                return (\n                  <Flex container key={reference.id}>\n                    <Flex container={{ alignItems: 'start', gap: 1 }} item={{ grow: 1 }}>\n                      {isExternalLink(reference) && (\n                        <Link href={reference.href} target='_blank' key={reference.id}>\n                          {title}\n                        </Link>\n                      )}\n                      {isInternalArticle(reference) && (\n                        <Button\n                          variant='link'\n                          onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                            reference.onClick(reference.id, e)\n                          }\n                        >\n                          {reference.name}\n                        </Button>\n                      )}\n                    </Flex>\n                    <Flex container={{ alignItems: 'start' }} item={{ grow: 0 }}>\n                      <Text>\n                        {formatNumber(reference.confidence, {\n                          locale,\n                          options: {\n                            style: 'unit',\n                            unit: 'percent',\n                            maximumFractionDigits: 0\n                          }\n                        })}\n                      </Text>\n                    </Flex>\n                  </Flex>\n                );\n              })}\n            </Flex>\n          )}\n        </>\n      )}\n\n      {!loading && (!title || !content) && (\n        <Flex container={{ direction: 'column', pad: [2, undefined] }}>\n          <EmptyState />\n        </Flex>\n      )}\n\n      {disclaimer && (\n        <Flex container={{ direction: 'column', pad: [1] }}>\n          <StyledDisclaimerHeader>{t('disclaimer')}</StyledDisclaimerHeader>\n          <StyledDisclaimerText>{disclaimer}</StyledDisclaimerText>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default ArticleBuddy;\n"]}

package/lib/components/ArticleList/ArticleList.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ArticleListProps } from './ArticleList.types';
+declare const ArticleList: FunctionComponent<ArticleListProps & ForwardProps>;
+export default ArticleList;
+//# sourceMappingURL=ArticleList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAehF,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAIjE,OAAO,KAAK,EAEV,gBAAgB,EAGjB,MAAM,qBAAqB,CAAC;AAiD7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAyOnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ArticleList/ArticleList.js

@@ -0,0 +1,146 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useEffect, useRef, createRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables, useLiveLog, useItemIntersection } from '@pega/cosmos-react-core';
+import ArticleListFilter from './ArticleListFilter';
+import ArticleSummary from './ArticleSummary';
+import ArticleListHeader from './ArticleListHeader';
+import ArticleBuddy from './ArticleBuddy';
+const StyledSummaryList = styled.ul(({ theme }) => {
+    return css `
+    max-height: calc(100vh - 8 * ${theme.base.spacing});
+    flex-grow: 1;
+    height: 100%;
+    list-style-type: none;
+    overflow-y: auto;
+    border-end-start-radius: ${theme.base['border-radius']};
+    border-end-end-radius: ${theme.base['border-radius']};
+    > li[role='article'] {
+      padding-block: ${theme.base.spacing};
+    }
+  `;
+});
+StyledSummaryList.defaultProps = defaultThemeProp;
+const StyledArticleTabPanel = styled.div(({ theme }) => {
+    return css `
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1 1;
+    gap: ${theme.base.spacing};
+  `;
+});
+StyledArticleTabPanel.defaultProps = defaultThemeProp;
+const StyledArticleList = styled.article(({ theme }) => {
+    return css `
+    height: 100%;
+    padding-block: 0;
+    background: ${theme.base.palette['primary-background']};
+    border-radius: ${theme.components.card['border-radius']};
+    > div[role='tablist'] {
+      button[role='tab'] {
+        padding: 0 calc(1.5 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledArticleList.defaultProps = defaultThemeProp;
+const ArticleList = forwardRef(function ArticleList(props, ref) {
+    const { header, suggested, followed, search, buddy, onTabClick, activeTab, loading = false, loadingMore = false, onQuickFilterClick, onLoadMore, ...restProps } = props;
+    const t = useI18n();
+    const { announcePolite } = useLiveLog();
+    const articleContentRefs = useRef([]);
+    const activeTabContentRef = useRef(null);
+    const tabsRef = useRef(null);
+    const activeElementRef = useRef(null);
+    const tabs = useMemo(() => {
+        const tabsArr = [];
+        if (suggested)
+            tabsArr.push({
+                id: 'Suggested',
+                name: t('suggested'),
+                count: suggested?.count,
+                content: suggested.articles ?? []
+            });
+        if (search)
+            tabsArr.push({
+                id: 'Search',
+                name: t('search'),
+                count: search?.count,
+                content: search?.articles ?? []
+            });
+        if (followed)
+            tabsArr.push({
+                id: 'Followed',
+                name: t('followed'),
+                count: followed?.count,
+                content: followed?.articles ?? []
+            });
+        if (buddy)
+            tabsArr.push({
+                id: 'Buddy',
+                name: t('buddy')
+            });
+        return tabsArr;
+    }, [suggested, followed, search, buddy]);
+    const listUlRef = tabs.reduce((acc, tab) => {
+        return { ...acc, [tab.id]: createRef() };
+    }, {});
+    useEffect(() => {
+        if (tabsRef.current && getFocusables(tabsRef)?.length > 0)
+            activeElementRef.current = getFocusables(tabsRef)[0];
+        else {
+            activeTabContentRef.current =
+                articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];
+            if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {
+                activeElementRef.current = getFocusables(activeTabContentRef)[0];
+            }
+        }
+    }, []);
+    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 getItemLength = (tabName) => {
+        const currentTab = tabs.find(item => item.id === tabName);
+        if (!currentTab || !currentTab.content) {
+            return 0;
+        }
+        return currentTab.content.length - 1;
+    };
+    useItemIntersection(listUlRef[activeTab], getItemLength(activeTab), () => {
+        if (!loadingMore)
+            onLoadMore?.();
+    }, ':scope > li[role="article"]');
+    const articleContent = ({ content, tabId, headerTitle }) => {
+        return (_jsxs(_Fragment, { 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') } })), !loading &&
+                    (content.length > 0 ? (_jsxs(Flex, { container: { direction: 'column', gap: 0.5, pad: [1.5, 2] }, as: StyledSummaryList, role: 'feed', ref: listUlRef[tabId], children: [content.map(summaryItem => (_createElement(ArticleSummary, { ...summaryItem, key: summaryItem.articleId, onQuickFilterClick: onQuickFilterClick }))), loadingMore && _jsx(Progress, { placement: 'block' })] })) : (_jsx(EmptyState, {})))] }));
+    };
+    return (_jsxs(Flex, { ...restProps, container: {
+            direction: 'column',
+            pad: [0.5, undefined]
+        }, as: StyledArticleList, "aria-label": t('article_list_label_a11y'), ref: ref, "aria-busy": loading ? true : undefined, children: [header && (_jsx(ArticleListHeader, { icon: header.icon, title: header.title, actions: header.actions })), tabs.length === 1 && (_jsx(_Fragment, { children: tabs[0].id === 'Buddy' && buddy ? (_jsx(ArticleBuddy, { ...buddy })) : (articleContent({
+                    content: tabs[0]?.content || [],
+                    tabId: tabs[0].id,
+                    headerTitle: header?.title
+                })) })), tabs.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Tabs, { ref: tabsRef, tabs: tabs, onTabClick: (name, e) => {
+                            if (document.activeElement instanceof HTMLElement) {
+                                activeElementRef.current = document.activeElement;
+                                onTabClick?.(name, e);
+                            }
+                        }, currentTabId: activeTab }), tabs.map(({ id, content }) => {
+                        return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, as: activeTab === id ? StyledArticleTabPanel : undefined, children: activeTab === t('buddy') ? (_jsx(ArticleBuddy, { searchInput: buddy?.searchInput ?? {}, title: buddy?.title ?? '', actions: buddy?.actions ?? [], content: buddy?.content, disclaimer: buddy?.disclaimer, references: buddy?.references, loading: buddy?.loading })) : (_jsx(_Fragment, { children: activeTab === id &&
+                                    content &&
+                                    articleContent({ content, tabId: id, headerTitle: header?.title }) })) }, id));
+                    })] }))] }));
+});
+export default ArticleList;
+//# sourceMappingURL=ArticleList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, createRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  useI18n,\n  defaultThemeProp,\n  TabPanel,\n  Tabs,\n  EmptyState,\n  Progress,\n  getFocusables,\n  useLiveLog,\n  useItemIntersection\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport type {\n  ArticleListTabId,\n  ArticleListProps,\n  ArticleSummaryProps,\n  ArticleListHeaderProps\n} from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\nimport ArticleBuddy from './ArticleBuddy';\n\nconst StyledSummaryList = styled.ul(({ theme }) => {\n  return css`\n    max-height: calc(100vh - 8 * ${theme.base.spacing});\n    flex-grow: 1;\n    height: 100%;\n    list-style-type: none;\n    overflow-y: auto;\n    border-end-start-radius: ${theme.base['border-radius']};\n    border-end-end-radius: ${theme.base['border-radius']};\n    > li[role='article'] {\n      padding-block: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledArticleTabPanel = styled.div(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    flex: 1 1;\n    gap: ${theme.base.spacing};\n  `;\n});\n\nStyledArticleTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledArticleList = styled.article(({ theme }) => {\n  return css`\n    height: 100%;\n    padding-block: 0;\n    background: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    > div[role='tablist'] {\n      button[role='tab'] {\n        padding: 0 calc(1.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  function ArticleList(props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) {\n    const {\n      header,\n      suggested,\n      followed,\n      search,\n      buddy,\n      onTabClick,\n      activeTab,\n      loading = false,\n      loadingMore = false,\n      onQuickFilterClick,\n      onLoadMore,\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        id: ArticleListTabId;\n      })[] = [];\n\n      if (suggested)\n        tabsArr.push({\n          id: 'Suggested',\n          name: t('suggested'),\n          count: suggested?.count,\n          content: suggested.articles ?? []\n        });\n\n      if (search)\n        tabsArr.push({\n          id: 'Search',\n          name: t('search'),\n          count: search?.count,\n          content: search?.articles ?? []\n        });\n\n      if (followed)\n        tabsArr.push({\n          id: 'Followed',\n          name: t('followed'),\n          count: followed?.count,\n          content: followed?.articles ?? []\n        });\n\n      if (buddy)\n        tabsArr.push({\n          id: 'Buddy',\n          name: t('buddy')\n        });\n\n      return tabsArr;\n    }, [suggested, followed, search, buddy]);\n\n    const listUlRef: { [id: string]: RefObject<HTMLElement> } = tabs.reduce((acc, tab) => {\n      return { ...acc, [tab.id]: createRef() };\n    }, {});\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 getItemLength = (tabName: string): number => {\n      const currentTab = tabs.find(item => item.id === tabName);\n      if (!currentTab || !currentTab.content) {\n        return 0;\n      }\n      return currentTab.content.length - 1;\n    };\n\n    useItemIntersection(\n      listUlRef[activeTab],\n      getItemLength(activeTab),\n      () => {\n        if (!loadingMore) onLoadMore?.();\n      },\n      ':scope > li[role=\"article\"]'\n    );\n\n    const articleContent = ({\n      content,\n      tabId,\n      headerTitle\n    }: {\n      count?: Tab['count'];\n      content: ArticleSummaryProps[];\n      headerTitle?: ArticleListHeaderProps['title'];\n      tabId: ArticleListTabId;\n    }) => {\n      return (\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          {!loading &&\n            (content.length > 0 ? (\n              <Flex\n                container={{ direction: 'column', gap: 0.5, pad: [1.5, 2] }}\n                as={StyledSummaryList}\n                role='feed'\n                ref={listUlRef[tabId]}\n              >\n                {content.map(summaryItem => (\n                  <ArticleSummary\n                    {...summaryItem}\n                    key={summaryItem.articleId}\n                    onQuickFilterClick={onQuickFilterClick}\n                  />\n                ))}\n                {loadingMore && <Progress placement='block' />}\n              </Flex>\n            ) : (\n              <EmptyState />\n            ))}\n        </>\n      );\n    };\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          pad: [0.5, undefined]\n        }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y')}\n        ref={ref}\n        aria-busy={loading ? true : undefined}\n      >\n        {header && (\n          <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n        )}\n\n        {tabs.length === 1 && (\n          <>\n            {tabs[0].id === 'Buddy' && buddy ? (\n              <ArticleBuddy {...buddy} />\n            ) : (\n              articleContent({\n                content: tabs[0]?.content || [],\n                tabId: tabs[0].id,\n                headerTitle: header?.title\n              })\n            )}\n          </>\n        )}\n\n        {/* When multiple tabs present. */}\n\n        {tabs.length > 1 && (\n          <>\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            {tabs.map(({ id, content }) => {\n              return (\n                <TabPanel\n                  key={id}\n                  tabId={id}\n                  currentTabId={activeTab}\n                  as={activeTab === id ? StyledArticleTabPanel : undefined}\n                >\n                  {activeTab === t('buddy') ? (\n                    <ArticleBuddy\n                      searchInput={buddy?.searchInput ?? {}}\n                      title={buddy?.title ?? ''}\n                      actions={buddy?.actions ?? []}\n                      content={buddy?.content}\n                      disclaimer={buddy?.disclaimer}\n                      references={buddy?.references}\n                      loading={buddy?.loading}\n                    />\n                  ) : (\n                    <>\n                      {activeTab === id &&\n                        content &&\n                        articleContent({ content, tabId: id, headerTitle: header?.title })}\n                    </>\n                  )}\n                </TabPanel>\n              );\n            })}\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ArticleList;\n"]}

package/lib/components/ArticleList/ArticleList.types.d.ts

@@ -0,0 +1,128 @@
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import type { Action, BaseProps, ComboBoxProps, OmitStrict, RequireAtLeastOne, SearchInputProps } from '@pega/cosmos-react-core';
+import type { ArticleRatingProps } from '../Article/ArticleRating';
+import type { ArticleMetaProps } from '../Article/ArticleMeta';
+export interface ArticleSummaryProps extends BaseProps {
+    /** Unique id of article */
+    articleId: string;
+    /** URL or DOM id to navigate to. This will render the nav item as a link. */
+    href?: string;
+    /** Article title */
+    title: string;
+    /** Article content */
+    abstract: string;
+    /** Callback fired when article title is clicked */
+    onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Primary actions which needs to be displayed with an icon */
+    primaryActions?: Action[];
+    /** A list of elements to be rendered within a MetaList. */
+    meta?: ArticleMetaProps;
+    /** Rating - likes and dislikes of the article.  */
+    feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {
+        onReaction: (articleId: ArticleSummaryProps['articleId'], reaction: ArticleRatingProps['reaction']) => void;
+    };
+    /** Quick filters to filter articles. */
+    quickFilters?: QuickFilter[];
+    /** callback fired when quick filter is clicked */
+    onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];
+}
+export interface BaseReferenceProps {
+    id: string;
+    name: string;
+    confidence: number;
+}
+export type ExternalLinkProps = BaseReferenceProps & {
+    type: 'link';
+    href: string;
+};
+export type InternalArticleProps = BaseReferenceProps & {
+    type: 'object';
+    onClick: (id: BaseReferenceProps['id'], e: MouseEvent<HTMLButtonElement>) => void;
+};
+type Reference = ExternalLinkProps | InternalArticleProps;
+export interface ArticleBuddyProps {
+    /** search input params */
+    searchInput: OmitStrict<SearchInputProps, 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'>;
+    /** title of the search content */
+    title?: string;
+    /** Main body of search content */
+    content?: ReactNode;
+    /** Action for share and copy */
+    actions?: Action[];
+    /** References with confidence level */
+    references?: Reference[];
+    disclaimer?: string;
+    /**
+     * Optionally renders an indeterminate progress indicator while result are being fetched.
+     * @default false
+     */
+    loading?: boolean;
+}
+export declare const isExternalLink: (reference: Reference) => reference is ExternalLinkProps;
+export declare const isInternalArticle: (reference: Reference) => reference is InternalArticleProps;
+export interface Articles {
+    /** List of articles */
+    articles: ArticleSummaryProps[];
+    /** count of articles */
+    count?: number;
+    /** Props related to the Search Input. */
+    searchInput: OmitStrict<SearchInputProps, 'placeholder' | 'onSearchSubmit' | 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'>;
+    /** Props related to the Category Input. */
+    category?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'actions' | 'additionalInfo'>;
+    /** Props related to the SortBy Input. */
+    sortBy?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'mode' | 'actions' | 'additionalInfo' | 'onChange' | 'value'>;
+    /** Callback fired when clear button is clicked */
+    onClearClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Quick filters to filter articles */
+    quickFilters?: QuickFilter[];
+    /** Callback fired when applied quick filter is removed */
+    handleQuickFilterRemove?: (id: string) => void;
+    /** Prop to enable show / hide results */
+    showResults?: boolean;
+}
+export interface ArticleListHeaderProps {
+    /** Title of article list */
+    title: string;
+    /** Article list header icon */
+    icon?: string;
+    /** Actions which needs to be displayed with an icon */
+    actions?: Action[];
+}
+export type ArticleListProps = RequireAtLeastOne<{
+    /** Props related to article list header */
+    header?: ArticleListHeaderProps;
+    /** Data of suggested articles */
+    suggested?: Pick<Articles, 'articles' | 'count'>;
+    /** Data of followed articles */
+    followed?: Articles;
+    /** Data of search articles */
+    search?: Articles;
+    buddy?: ArticleBuddyProps;
+    /** current active tab whose list has to be rendered */
+    activeTab: string;
+    /** Callback fired when tab is clicked */
+    onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * Optionally renders an indeterminate progress indicator while articles are being fetched.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Optionally renders an indeterminate progress indicator while progressively fetching articles
+     * @default false
+     */
+    loadingMore?: boolean;
+    /** callback fired when quick filter is clicked */
+    onQuickFilterClick?: (quickFilterParam: QuickFilter, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Callback to fetch more rows */
+    onLoadMore?: () => void;
+}, 'suggested' | 'followed' | 'search' | 'buddy'>;
+export interface QuickFilter {
+    /** Unique id of quick Filter */
+    id: string;
+    /** Name of quick Filter */
+    name: string;
+}
+export type ArticleListTabId = 'Suggested' | 'Followed' | 'Search' | 'Buddy';
+export {};
+//# sourceMappingURL=ArticleList.types.d.ts.map

package/lib/components/ArticleList/ArticleList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.types.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"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"}

package/lib/components/ArticleList/ArticleList.types.js

@@ -0,0 +1,7 @@
+export const isExternalLink = (reference) => {
+    return reference.type === 'link';
+};
+export const isInternalArticle = (reference) => {
+    return reference.type === 'object';
+};
+//# sourceMappingURL=ArticleList.types.js.map

package/lib/components/ArticleList/ArticleList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.types.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"AAgFA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAoB,EAAkC,EAAE;IACrF,OAAO,SAAS,CAAC,IAAI,KAAK,MAAM,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAqC,EAAE;IAC3F,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\n\nimport type {\n  Action,\n  BaseProps,\n  ComboBoxProps,\n  OmitStrict,\n  RequireAtLeastOne,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\nimport type { ArticleRatingProps } from '../Article/ArticleRating';\nimport type { ArticleMetaProps } from '../Article/ArticleMeta';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Unique id of article */\n  articleId: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Article title */\n  title: string;\n  /** Article content */\n  abstract: string;\n  /** Callback fired when article title is clicked */\n  onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: Action[];\n  /** A list of elements to be rendered within a MetaList. */\n  meta?: ArticleMetaProps;\n  /** Rating - likes and dislikes of the article.  */\n  feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {\n    onReaction: (\n      articleId: ArticleSummaryProps['articleId'],\n      reaction: ArticleRatingProps['reaction']\n    ) => void;\n  };\n  /** Quick filters to filter articles. */\n  quickFilters?: QuickFilter[];\n  /** callback fired when quick filter is clicked */\n  onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];\n}\n\nexport interface BaseReferenceProps {\n  id: string;\n  name: string;\n  confidence: number;\n}\n\nexport type ExternalLinkProps = BaseReferenceProps & { type: 'link'; href: string };\n\nexport type InternalArticleProps = BaseReferenceProps & {\n  type: 'object';\n  onClick: (id: BaseReferenceProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n};\n\ntype Reference = ExternalLinkProps | InternalArticleProps;\n\nexport interface ArticleBuddyProps {\n  /** search input params */\n  searchInput: OmitStrict<\n    SearchInputProps,\n    'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'\n  >;\n  /** title of the search content */\n  title?: string;\n  /** Main body of search content */\n  content?: ReactNode;\n  /** Action for share and copy */\n  actions?: Action[];\n  /** References with confidence level */\n  references?: Reference[];\n\n  disclaimer?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator while result are being fetched.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nexport const isExternalLink = (reference: Reference): reference is ExternalLinkProps => {\n  return reference.type === 'link';\n};\n\nexport const isInternalArticle = (reference: Reference): reference is InternalArticleProps => {\n  return reference.type === 'object';\n};\n\nexport interface Articles {\n  /** List of articles */\n  articles: ArticleSummaryProps[];\n  /** count of articles */\n  count?: number;\n  /** Props related to the Search Input. */\n  searchInput: OmitStrict<\n    SearchInputProps,\n    | 'placeholder'\n    | 'onSearchSubmit'\n    | 'searchResults'\n    | 'recentSearches'\n    | 'advancedSearchLink'\n    | 'resultsPopover'\n  >;\n  /** Props related to the Category Input. */\n  category?: OmitStrict<\n    ComboBoxProps,\n    | 'id'\n    | 'labelHidden'\n    | 'required'\n    | 'disabled'\n    | 'readOnly'\n    | 'status'\n    | 'info'\n    | 'actions'\n    | 'additionalInfo'\n  >;\n  /** Props related to the SortBy Input. */\n  sortBy?: OmitStrict<\n    ComboBoxProps,\n    | 'id'\n    | 'labelHidden'\n    | 'required'\n    | 'disabled'\n    | 'readOnly'\n    | 'status'\n    | 'info'\n    | 'mode'\n    | 'actions'\n    | 'additionalInfo'\n    | 'onChange'\n    | 'value'\n  >;\n  /** Callback fired when clear button is clicked */\n  onClearClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Quick filters to filter articles */\n  quickFilters?: QuickFilter[];\n  /** Callback fired when applied quick filter is removed */\n  handleQuickFilterRemove?: (id: string) => void;\n  /** Prop to enable show / hide results */\n  showResults?: boolean;\n}\n\nexport interface ArticleListHeaderProps {\n  /** Title of article list */\n  title: string;\n  /** Article list header icon */\n  icon?: string;\n  /** Actions which needs to be displayed with an icon */\n  actions?: Action[];\n}\n\nexport type ArticleListProps = RequireAtLeastOne<\n  {\n    /** Props related to article list header */\n    header?: ArticleListHeaderProps;\n    /** Data of suggested articles */\n    suggested?: Pick<Articles, 'articles' | 'count'>;\n    /** Data of followed articles */\n    followed?: Articles;\n    /** Data of search articles */\n    search?: Articles;\n    buddy?: ArticleBuddyProps;\n    /** current active tab whose list has to be rendered */\n    activeTab: string;\n    /** Callback fired when tab is clicked */\n    onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n    /**\n     * Optionally renders an indeterminate progress indicator while articles are being fetched.\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Optionally renders an indeterminate progress indicator while progressively fetching articles\n     * @default false\n     */\n    loadingMore?: boolean;\n    /** callback fired when quick filter is clicked */\n    onQuickFilterClick?: (\n      quickFilterParam: QuickFilter,\n      event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    ) => void;\n    /** Callback to fetch more rows */\n    onLoadMore?: () => void;\n  },\n  'suggested' | 'followed' | 'search' | 'buddy'\n>;\n\nexport interface QuickFilter {\n  /** Unique id of quick Filter */\n  id: string;\n  /** Name of quick Filter */\n  name: string;\n}\n\nexport type ArticleListTabId = 'Suggested' | 'Followed' | 'Search' | 'Buddy';\n"]}

package/lib/components/ArticleList/ArticleListFilter.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ArticleListProps } from './ArticleList.types';
+declare const ArticleListFilter: FunctionComponent<ArticleListProps['search'] & ForwardProps>;
+export default ArticleListFilter;
+//# sourceMappingURL=ArticleListFilter.d.ts.map

package/lib/components/ArticleList/ArticleListFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8C5D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAkEnF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListFilter.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable, useLiveLog } from '@pega/cosmos-react-core';
+import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+const StyledClearButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-block-start: calc(4.5 * ${theme.base.spacing});
+  `;
+});
+StyledClearButton.defaultProps = defaultThemeProp;
+const StyledFilterContainer = styled(Flex) `
+  flex-grow: 1;
+`;
+const StyledSelectable = styled(Selectable)(({ theme }) => {
+    return css `
+    line-height: calc(2 * ${theme.base.spacing});
+    margin: calc(0.25 * ${theme.base.spacing});
+  `;
+});
+StyledSelectable.defaultProps = defaultThemeProp;
+const StyledSearchFilters = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    padding-block-start: ${theme.base.spacing};
+    padding-inline: calc(2 * ${theme.base.spacing});
+
+    > div:last-child {
+      margin: 0;
+    }
+
+    ${StyledFormContent} {
+      gap: ${theme.base.spacing};
+    }
+
+    ${StyledFilterContainer} > div {
+      margin-top: calc(1.5 * ${theme.base.spacing});
+      width: 100%;
+    }
+    ${StyledSearchInput} {
+      flex-grow: 1;
+    }
+  `;
+});
+StyledSearchFilters.defaultProps = defaultThemeProp;
+const ArticleListFilter = (props) => {
+    const { searchInput, category, sortBy, onClearClick, articles, quickFilters = [], showResults = false, handleQuickFilterRemove, ...restProps } = props || {};
+    const t = useI18n();
+    const searchResults = t('results_count', [articles?.length ?? 0]);
+    const { announcePolite } = useLiveLog();
+    useEffect(() => {
+        if (showResults) {
+            announcePolite({ message: searchResults });
+        }
+    }, [articles, showResults]);
+    const quickFiltersRef = useRef([]);
+    useEffect(() => {
+        if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {
+            quickFiltersRef.current[quickFilters.length - 1]?.focus();
+        }
+    }, [articles]);
+    return (_jsxs(StyledSearchFilters, { ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, undefined] }, children: _jsx(SearchInput, { ...searchInput }) }), quickFilters.map(({ id, name }, i) => (_jsx(StyledSelectable, { id: id, ref: (el) => {
+                    quickFiltersRef.current[i] = el;
+                }, onRemove: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, onClick: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, children: name }))), _jsxs(StyledFilterContainer, { container: { gap: 1, alignItems: 'start' }, children: [category && _jsx(ComboBox, { ...category }), sortBy && _jsx(ComboBox, { ...sortBy }), onClearClick && (_jsx(StyledClearButton, { variant: 'link', label: t('clear'), "aria-label": t('clear_filters'), onClick: onClearClick, children: t('clear') }))] }), showResults && _jsx(Text, { variant: 'secondary', children: searchResults })] }));
+};
+export default ArticleListFilter;
+//# sourceMappingURL=ArticleListFilter.js.map

package/lib/components/ArticleList/ArticleListFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListFilter.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  SearchInput,\n  useI18n,\n  defaultThemeProp,\n  ComboBox,\n  StyledSearchInput,\n  Text,\n  Selectable,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nimport type { ArticleListProps } from './ArticleList.types';\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(4.5 * ${theme.base.spacing});\n  `;\n});\nStyledClearButton.defaultProps = defaultThemeProp;\n\nconst StyledFilterContainer = styled(Flex)`\n  flex-grow: 1;\n`;\n\nconst StyledSelectable = styled(Selectable)(({ theme }) => {\n  return css`\n    line-height: calc(2 * ${theme.base.spacing});\n    margin: calc(0.25 * ${theme.base.spacing});\n  `;\n});\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst StyledSearchFilters = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    padding-block-start: ${theme.base.spacing};\n    padding-inline: calc(2 * ${theme.base.spacing});\n\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n\n    ${StyledFilterContainer} > div {\n      margin-top: calc(1.5 * ${theme.base.spacing});\n      width: 100%;\n    }\n    ${StyledSearchInput} {\n      flex-grow: 1;\n    }\n  `;\n});\nStyledSearchFilters.defaultProps = defaultThemeProp;\n\nconst ArticleListFilter: FunctionComponent<ArticleListProps['search'] & ForwardProps> = (\n  props: ArticleListProps['search']\n) => {\n  const {\n    searchInput,\n    category,\n    sortBy,\n    onClearClick,\n    articles,\n    quickFilters = [],\n    showResults = false,\n    handleQuickFilterRemove,\n    ...restProps\n  } = props || {};\n  const t = useI18n();\n  const searchResults = t('results_count', [articles?.length ?? 0]);\n  const { announcePolite } = useLiveLog();\n\n  useEffect(() => {\n    if (showResults) {\n      announcePolite({ message: searchResults });\n    }\n  }, [articles, showResults]);\n\n  const quickFiltersRef = useRef<HTMLButtonElement[]>([]);\n\n  useEffect(() => {\n    if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {\n      quickFiltersRef.current[quickFilters.length - 1]?.focus();\n    }\n  }, [articles]);\n\n  return (\n    <StyledSearchFilters {...restProps}>\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, undefined] }}>\n        <SearchInput {...searchInput} />\n      </Flex>\n      {quickFilters.map(({ id, name }, i) => (\n        <StyledSelectable\n          id={id}\n          ref={(el: HTMLButtonElement) => {\n            quickFiltersRef.current[i] = el;\n          }}\n          onRemove={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n          onClick={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n        >\n          {name}\n        </StyledSelectable>\n      ))}\n      <StyledFilterContainer container={{ gap: 1, alignItems: 'start' }}>\n        {category && <ComboBox {...category} />}\n        {sortBy && <ComboBox {...sortBy} />}\n        {onClearClick && (\n          <StyledClearButton\n            variant='link'\n            label={t('clear')}\n            aria-label={t('clear_filters')}\n            onClick={onClearClick}\n          >\n            {t('clear')}\n          </StyledClearButton>\n        )}\n      </StyledFilterContainer>\n      {showResults && <Text variant='secondary'>{searchResults}</Text>}\n    </StyledSearchFilters>\n  );\n};\n\nexport default ArticleListFilter;\n"]}

package/lib/components/ArticleList/ArticleListHeader.d.ts

@@ -0,0 +1,5 @@
+import type { FunctionComponent } from 'react';
+import type { ArticleListHeaderProps } from './ArticleList.types';
+declare const ArticleListHeader: FunctionComponent<ArticleListHeaderProps>;
+export default ArticleListHeader;
+//# sourceMappingURL=ArticleListHeader.d.ts.map

package/lib/components/ArticleList/ArticleListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAuBlE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAQhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Flex, Icon, Actions, Text, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledHeaderText = styled(Text) `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-grow: 1;
+`;
+const StyledIcon = styled(Icon)(({ theme: { base: { spacing } } }) => {
+    return css `
+      min-width: calc(3 * ${spacing});
+    `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
+const ArticleListHeader = ({ icon, title, actions }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [1.5, 2] }, children: [icon && _jsx(StyledIcon, { name: icon }), _jsx(StyledHeaderText, { variant: 'h2', children: title }), actions && _jsx(Actions, { items: actions })] }));
+};
+export default ArticleListHeader;
+//# sourceMappingURL=ArticleListHeader.js.map