@pega/cosmos-react-cs 4.0.0-dev.9.1 → 4.0.0

package/lib/components/ArticleList/ArticleList.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
-import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
-import SummarySkeleton from './SummarySkeleton';
-const defaultProps = {};
-const StyledSummaryList = styled.ul ``;
-const StyledArticleList = styled.div(props => {
-    const { theme } = props;
-    return css `
-    max-height: inherit;
-    overflow: auto;
-    padding: 0 calc(2 * ${theme.base.spacing});
-    background: ${theme.base.palette['primary-background']};
-    border-radius: ${theme.components.card['border-radius']};
-    ${StyledCard} {
-      margin-bottom: calc(2 * ${theme.base.spacing});
-    }
-    ${StyledSummaryList} {
-      flex-grow: 1;
-      margin: 0 0 ${theme.base.spacing} 0;
-      list-style-type: none;
-      > li:not(:last-child) {
-        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-        border-radius: 0;
-        padding-bottom: ${theme.base.spacing};
-        margin-bottom: ${theme.base.spacing};
-      }
-    }
-  `;
-});
-StyledArticleList.defaultProps = defaultThemeProp;
-const StyledArticleListHeader = styled.div(props => {
-    const { theme } = props;
-    return css `
-    flex-shrink: 0;
-    position: sticky;
-    top: 0;
-    background: ${theme.base.palette['primary-background']};
-    padding: calc(2 * ${theme.base.spacing}) 0 0 0;
-    z-index: 2;
-  `;
-});
-StyledArticleListHeader.defaultProps = defaultThemeProp;
-const StyledArticleListFooter = styled.div(props => {
-    const { theme } = props;
-    return css `
-    flex-shrink: 0;
-    position: sticky;
-    bottom: 0;
-    background: ${theme.base.palette['primary-background']};
-    padding: ${theme.base.spacing} 0;
-    z-index: 2;
-  `;
-});
-StyledArticleListFooter.defaultProps = defaultThemeProp;
-const ArticleList = forwardRef((props, ref) => {
-    const { header, children, skeletonize, footer, ...restProps } = props;
-    const t = useI18n();
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y'), ref: ref, ...restProps, children: [header && (_jsx(Flex, { container: true, as: StyledArticleListHeader, "aria-label": t('article_list_filter_label_a11y'), children: header })), _jsx(Flex, { container: { direction: 'column' }, as: StyledSummaryList, role: 'feed', children: skeletonize ? (_jsxs(_Fragment, { children: [_jsx(SummarySkeleton, {}), _jsx(SummarySkeleton, {}), _jsx(SummarySkeleton, {})] })) : (children) }), footer && (_jsx(Flex, { container: true, as: StyledArticleListFooter, children: footer }))] }));
-});
-ArticleList.defaultProps = defaultProps;
-export default ArticleList;
-//# sourceMappingURL=ArticleList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  ReactElement,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, useI18n, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\n\nimport ArticleListHeader from './ArticleListHeader';\nimport SummarySkeleton from './SummarySkeleton';\n\nexport interface ArticleListProps extends BaseProps {\n  /** Search/filtering criteria for article list */\n  header?: ReactElement<typeof ArticleListHeader>;\n  /** Content for article list */\n  children?: ReactNode;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n  /** Footer for article list */\n  footer?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<ArticleListProps> = {};\nconst StyledSummaryList = styled.ul``;\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    ${StyledCard} {\n      margin-bottom: calc(2 * ${theme.base.spacing});\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});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst StyledArticleListHeader = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(2 * ${theme.base.spacing}) 0 0 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListHeader.defaultProps = defaultThemeProp;\n\nconst StyledArticleListFooter = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    bottom: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: ${theme.base.spacing} 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListFooter.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n    const { header, children, skeletonize, footer, ...restProps } = props;\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y')}\n        ref={ref}\n        {...restProps}\n      >\n        {header && (\n          <Flex\n            container\n            as={StyledArticleListHeader}\n            aria-label={t('article_list_filter_label_a11y')}\n          >\n            {header}\n          </Flex>\n        )}\n        <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n          {skeletonize ? (\n            <>\n              <SummarySkeleton />\n              <SummarySkeleton />\n              <SummarySkeleton />\n            </>\n          ) : (\n            children\n          )}\n        </Flex>\n        {footer && (\n          <Flex container as={StyledArticleListFooter}>\n            {footer}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nArticleList.defaultProps = defaultProps;\n\nexport default ArticleList;\n"]}

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

@@ -1,21 +0,0 @@
-import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';
-import { SearchInput, BaseProps, AsProp, Action, Icon } from '@pega/cosmos-react-core';
-export interface ArticleListHeaderProps extends BaseProps, AsProp {
-    /** Header Icon and Text */
-    icon?: ReactElement<typeof Icon>;
-    headerText: string;
-    count?: number;
-    /** Primary data: Drop in elements related to search or filtering of articles */
-    primary: {
-        search: ReactElement<typeof SearchInput>;
-        followedFilter?: ReactElement;
-        actions?: Action[];
-    };
-    /** Any other filter components to be passed */
-    secondary?: ReactNode;
-    /** Callback that triggers on enter */
-    onSubmit?: EventHandler<MouseEvent>;
-}
-declare const ArticleListHeader: FunctionComponent<ArticleListHeaderProps>;
-export default ArticleListHeader;
-//# sourceMappingURL=ArticleListHeader.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAIL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA2DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAuDhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -1,68 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp, Count } from '@pega/cosmos-react-core';
-import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
-const StyledArticleHeader = styled.div(({ theme }) => {
-    return css `
-    width: 100%;
-    gap: 0;
-
-    button[type='submit'] {
-      height: 0;
-      min-height: 0;
-      width: 0.0625rem;
-      clip-path: inset(50%);
-      clip: rect(0, 0, 0, 0);
-      margin: 0;
-      overflow: hidden;
-      padding: 0;
-      border: 0;
-    }
-    > div:last-child {
-      margin: 0;
-    }
-
-    ${StyledFormContent} {
-      gap: ${theme.base.spacing};
-    }
-  `;
-});
-StyledArticleHeader.defaultProps = defaultThemeProp;
-const StyledSecondaryContainer = styled(Flex) `
-  margin: 0.5rem 0;
-  & > * {
-    flex-grow: 1;
-  }
-`;
-/* This below style will be removed once we have margin auto support from Flex
-component */
-const StyledHeaderActions = styled.div `
-  margin-left: auto;
-
-  .radio-check {
-    margin: 0;
-  }
-`;
-const StyledArticleListHeaderText = styled(Text) `
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1;
-`;
-const Locale = {
-    // FIXME: TR
-    moreActions: 'More actions'
-};
-const ArticleListHeader = (props) => {
-    const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;
-    const t = useI18n();
-    return (_jsxs(StyledArticleHeader, { as: as, actions: _jsx(Button, { type: 'submit', "aria-hidden": 'true', tabIndex: '-1', children: t('article_list_header_submit_label') }), role: 'search', onSubmit: (ev) => {
-            ev.preventDefault();
-            if (onSubmit)
-                onSubmit(ev);
-        }, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0, 0, 1] }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [headerText, typeof count === 'number' && _jsx(Count, { children: count })] }) }), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
-                            items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                        } }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, 0] }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }), primary.followedFilter && (_jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter }))] }), secondary && (_jsx(StyledSecondaryContainer, { container: { gap: 1 }, children: secondary }))] }));
-};
-export default ArticleListHeader;
-//# sourceMappingURL=ArticleListHeader.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp,\n  Count\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n  /* Integer representing the total count of articles */\n  count?: number;\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0, 0, 1] }}>\n        {icon}\n        <StyledArticleListHeaderText variant='h2'>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {headerText}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n        </StyledArticleListHeaderText>\n\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, 0] }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        {primary.followedFilter && (\n          <Flex container as={StyledHeaderActions}>\n            {primary.followedFilter}\n          </Flex>\n        )}\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}

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

@@ -1,14 +0,0 @@
-import { FunctionComponent, ReactElement, ReactNode } from 'react';
-import { Link, Text, BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface ArticleSummaryProps extends BaseProps {
-    /** Article summary title */
-    header?: ReactElement<typeof Text> | ReactElement<typeof Link>;
-    /** Summary of the article */
-    content: ReactNode;
-    /** Array of meta data rendered through MetaList component */
-    meta?: (ReactElement | string)[];
-    articleID: string;
-}
-declare const ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps>;
-export default ArticleSummary;
-//# sourceMappingURL=ArticleSummary.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAIL,IAAI,EAEJ,IAAI,EACJ,SAAS,EACT,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IAC/D,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAezE,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/components/ArticleList/ArticleSummary.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { CardContent, CardFooter, CardHeader, MetaList, StyledText } from '@pega/cosmos-react-core';
-import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-const defaultProps = {};
-const ArticleCard = styled(StyledCard) `
-  &&& {
-    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > ${StyledCardContent} > ${StyledText} {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-  }
-`;
-const ArticleSummary = (props) => {
-    const { header, content, meta, articleID, ...restProps } = props;
-    return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [header ? _jsx(CardHeader, { children: header }) : null, _jsx(CardContent, { children: content }), meta && (_jsx(CardFooter, { children: _jsx(MetaList, { items: meta }) }))] }, articleID));
-};
-ArticleSummary.defaultProps = defaultProps;
-export default ArticleSummary;
-//# sourceMappingURL=ArticleSummary.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAEV,QAAQ,EAIR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAY1F,MAAM,YAAY,GAAiC,EAAE,CAAC;AAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;QAE9B,gBAAgB,OAAO,iBAAiB,OAAO,gBAAgB;;;;;QAK/D,iBAAiB,MAAM,UAAU;;;;;;;CAOxC,CAAC;AAEF,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjE,OAAO,CACL,MAAC,WAAW,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,KAAqB,SAAS,aAC9D,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,MAAM,GAAc,CAAC,CAAC,CAAC,IAAI,EAClD,KAAC,WAAW,cAAE,OAAO,GAAe,EACnC,IAAI,IAAI,CACP,KAAC,UAAU,cACT,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,GACd,CACd,KAPsC,SAAS,CAQpC,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Link,\n  MetaList,\n  Text,\n  BaseProps,\n  ForwardProps,\n  StyledText\n} from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Article summary title */\n  header?: ReactElement<typeof Text> | ReactElement<typeof Link>;\n  /** Summary of the article */\n  content: ReactNode;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  articleID: string;\n}\n\nconst defaultProps: Partial<ArticleSummaryProps> = {};\n\nconst ArticleCard = styled(StyledCard)`\n  &&& {\n    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    > ${StyledCardContent} > ${StyledText} {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  }\n`;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const { header, content, meta, articleID, ...restProps } = props;\n  return (\n    <ArticleCard as='li' role='article' key={articleID} {...restProps}>\n      {header ? <CardHeader>{header}</CardHeader> : null}\n      <CardContent>{content}</CardContent>\n      {meta && (\n        <CardFooter>\n          <MetaList items={meta} />\n        </CardFooter>\n      )}\n    </ArticleCard>\n  );\n};\n\nArticleSummary.defaultProps = defaultProps;\n\nexport default ArticleSummary;\n"]}

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

@@ -1,7 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface SummarySkeletonProps extends BaseProps {
-}
-declare const SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps>;
-export default SummarySkeleton;
-//# sourceMappingURL=SummarySkeleton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SummarySkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAIL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAwB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/ArticleList/SummarySkeleton.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
-const SummarySkeleton = (props) => {
-    return (_jsxs(Flex, { as: 'li', container: {
-            direction: 'column'
-        }, ...props, "aria-disabled": 'true', children: [_jsx(LineSkeleton, { variant: 'link', width: 'l' }), _jsxs(ParagraphSkeleton, { children: [_jsx(LineSkeleton, {}), _jsx(LineSkeleton, { width: 's' })] }), _jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' })] })] }));
-};
-export default SummarySkeleton;
-//# sourceMappingURL=SummarySkeleton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SummarySkeleton.js","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,KAAK,mBACK,MAAM,aAEpB,KAAC,YAAY,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,GAAG,GAAG,EACzC,MAAC,iBAAiB,eAChB,KAAC,YAAY,KAAG,EAChB,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,IACR,EACpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,IACrB,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  LineSkeleton,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface SummarySkeletonProps extends BaseProps {}\n\nconst SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps> = (\n  props: SummarySkeletonProps\n) => {\n  return (\n    <Flex\n      as='li'\n      container={{\n        direction: 'column'\n      }}\n      {...props}\n      aria-disabled='true'\n    >\n      <LineSkeleton variant='link' width='l' />\n      <ParagraphSkeleton>\n        <LineSkeleton />\n        <LineSkeleton width='s' />\n      </ParagraphSkeleton>\n      <Flex container={{ alignItems: 'center' }}>\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default SummarySkeleton;\n"]}

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

@@ -1,7 +0,0 @@
-export { default } from './ArticleList';
-export { ArticleListProps } from './ArticleList';
-export { default as ArticleSummary } from './ArticleSummary';
-export { ArticleSummaryProps } from './ArticleSummary';
-export { default as ArticleListHeader } from './ArticleListHeader';
-export { ArticleListHeaderProps } from './ArticleListHeader';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/ArticleList/index.js

@@ -1,4 +0,0 @@
-export { default } from './ArticleList';
-export { default as ArticleSummary } from './ArticleSummary';
-export { default as ArticleListHeader } from './ArticleListHeader';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport { ArticleListProps } from './ArticleList';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport { ArticleSummaryProps } from './ArticleSummary';\nexport { default as ArticleListHeader } from './ArticleListHeader';\nexport { ArticleListHeaderProps } from './ArticleListHeader';\n"]}

package/lib/components/InteractionNotification/AcceptButton.d.ts

@@ -1,15 +0,0 @@
-import { FunctionComponent, MouseEventHandler } from 'react';
-import { NoChildrenProp } from '@pega/cosmos-react-core';
-export interface AcceptButtonProps extends NoChildrenProp {
-    /** Start time of incoming Interaction. */
-    startTime: Date | number;
-    /** The time the user has to accept the call in seconds. */
-    timeout: number;
-    /** Callback invoked when timeout ends. */
-    onTimerEnd?: () => void;
-    /** Callback invoked when user clicks the button. */
-    onClick: MouseEventHandler;
-}
-declare const AcceptButton: FunctionComponent<AcceptButtonProps>;
-export default AcceptButton;
-//# sourceMappingURL=AcceptButton.d.ts.map

package/lib/components/InteractionNotification/AcceptButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AcceptButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAGxF,OAAO,EAOL,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoDtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/InteractionNotification/AcceptButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AcceptButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAyC,IAAI,CAC7D,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAqB,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD;;;;OAIG;IACH,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,sBAAmB,aAAa,EAAE,OAAO,EAAE,OAAO,aACpF,CAAC,CAAC,QAAQ,CAAC,EACZ,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, memo, MouseEventHandler, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface AcceptButtonProps extends NoChildrenProp {\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n  /** Callback invoked when user clicks the button. */\n  onClick: MouseEventHandler;\n}\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst AcceptButton: FunctionComponent<AcceptButtonProps> = memo(\n  ({ startTime, timeout, onTimerEnd, onClick }: AcceptButtonProps) => {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      /*\n       * Omitting onTimerEnd as an effect trigger on purpose.\n       * An unstable function definition in the prop causes the effect to run more than necessary.\n       * The proper definition will be captured and used with any changes to msRemaining.\n       */\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton variant='primary' aria-describedby={descriptionId} onClick={onClick}>\n          {t('accept')}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default AcceptButton;\n"]}

package/lib/components/TaskManager/Picker/Picker.d.ts

@@ -1,14 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { PickerProps } from './Picker.types';
-export declare const StyledPickerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAddTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSelectedTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummaryItem: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").SummaryItemProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPickerFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDDList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Picker: FunctionComponent<PickerProps & ForwardProps>;
-export default Picker;
-//# sourceMappingURL=Picker.d.ts.map

package/lib/components/TaskManager/Picker/Picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAmBb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAU9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,YAAY,wGAMvB,CAAC;AAIH,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAkEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAuSzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/TaskManager/Picker/Picker.js

@@ -1,260 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables, FormDialog, CardHeader, useUID, useOuterEvent } from '@pega/cosmos-react-core';
-import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
-import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
-import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
-registerIcon(timesIcon, dragIcon, trashIcon);
-export const StyledPickerHeader = styled.div(({ theme }) => {
-    return css `
-    padding-inline-start: calc(2 * ${theme.base.spacing});
-    padding-inline-end: calc(1.25 * ${theme.base.spacing});
-  `;
-});
-StyledPickerHeader.defaultProps = defaultThemeProp;
-export const StyledAddTasks = styled.div `
-  max-height: 24rem;
-  flex-grow: 1;
-  header {
-    padding-top: 0;
-    border-bottom: none;
-  }
-`;
-export const StyledSelectedTasks = styled.div(({ theme }) => {
-    return css `
-    width: 17.5rem;
-    max-height: 24rem;
-    padding: ${theme.base.spacing} 0 0 ${theme.base.spacing};
-    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};
-    > h3 {
-      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};
-    }
-  `;
-});
-StyledSelectedTasks.defaultProps = defaultThemeProp;
-export const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {
-    return css `
-    padding: ${theme.base.spacing} 0;
-    &:not(:last-child) {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
-  `;
-});
-StyledSummaryItem.defaultProps = defaultThemeProp;
-export const StyledPickerFooter = styled.div(({ theme }) => {
-    return css `
-    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
-    padding: ${theme.base.spacing};
-  `;
-});
-StyledPickerFooter.defaultProps = defaultThemeProp;
-export const StyledDDList = styled.ul(({ theme }) => {
-    return css `
-    padding-inline-end: calc(0.25 * ${theme.base.spacing});
-    height: 26rem;
-    overflow-y: auto;
-  `;
-});
-StyledDDList.defaultProps = defaultThemeProp;
-export const StyledPicker = styled.div `
-  height: 100%;
-`;
-export const StyledDragHandle = styled.div `
-  cursor: move;
-  > svg {
-    display: block;
-  }
-`;
-const StyledCount = styled(Count)(({ theme }) => {
-    return css `
-    margin-inline-start: calc(0.5 * ${theme.base.spacing});
-  `;
-});
-StyledCount.defaultProps = defaultThemeProp;
-const SelectedItemRenderer = ({ dragRef, previewRef, data }) => {
-    const t = useI18n();
-    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) }), primary: data.primary, secondary: data.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, "aria-label": t('task_manager_delete_task', [data.primary]), label: t('task_manager_delete_task'), onClick: () => data.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
-};
-const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
-    return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledDDList, accept: 'string', items: selectedItems.map(item => ({
-                id: item.id,
-                type: 'string',
-                data: item
-            })), itemRenderer: itemRenderer, onChange: onChange }) }));
-};
-const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, target, ...restProps }, ref) => {
-    const t = useI18n();
-    const headingId = useUID();
-    const [initialItems, setItems] = useState(items);
-    const [searchInput, setSearchInput] = useState('');
-    const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);
-    const filterRegex = new RegExp(searchInput.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
-    const [selections, setSelections] = useState([]);
-    const searchEleRef = useRef(null);
-    const selectedTasksWrapperRef = useRef(null);
-    const [pickerEl, setPickerEl] = useElement();
-    const pickerRef = useConsolidatedRef(ref, setPickerEl);
-    const toggle = useRef(null);
-    const initialRender = useRef(true);
-    const initializePicker = () => {
-        setItems(items);
-        setSelections([]);
-        setSelectMultipleToggle(false);
-    };
-    useOuterEvent('mousedown', [target, pickerRef], () => {
-        initializePicker();
-        onCancel?.();
-    });
-    useEffect(() => {
-        setItems(items);
-    }, [items]);
-    useEffect(() => {
-        if (initialRender.current) {
-            initialRender.current = false;
-        }
-        else {
-            toggle.current?.focus();
-        }
-    }, [selectMultipleToggle]);
-    const onKeydown = useCallback((e) => {
-        const { key } = e;
-        if (key === 'Escape') {
-            initializePicker();
-            onCancel?.();
-        }
-        else if (key === 'Tab' && pickerEl) {
-            const focusableContent = getFocusables(pickerRef);
-            if (!focusableContent || focusableContent.length < 2)
-                return;
-            const firstFocusableElement = focusableContent[0];
-            const lastFocusableElement = focusableContent[focusableContent.length - 1];
-            if (e.shiftKey) {
-                if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement.focus();
-                    e.preventDefault();
-                }
-            }
-            else if (document.activeElement === lastFocusableElement) {
-                firstFocusableElement.focus();
-                e.preventDefault();
-            }
-        }
-        // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0
-        const focusEl = selectedTasksWrapperRef.current;
-        if (!focusEl)
-            return;
-        const focusable = Array.from(focusEl.querySelectorAll('button'));
-        if (focusable.length === 0)
-            return;
-        if (focusEl.contains(document.activeElement))
-            focusable[0].tabIndex = -1;
-        else if (focusable[0].tabIndex === -1)
-            focusable[0].tabIndex = 0;
-    }, [onCancel, pickerEl, selectMultipleToggle]);
-    useEffect(() => {
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, [pickerEl, selectMultipleToggle]);
-    const renderItems = useMemo(() => {
-        return menuHelpers.mapTree(searchInput
-            ? menuHelpers
-                .flatten(initialItems)
-                .filter(({ primary, items: childItems }) => {
-                return filterRegex.test(primary) && !childItems?.length;
-            })
-            : initialItems, item => {
-            let selectable = false;
-            if (!item.items) {
-                selectable = true;
-            }
-            return {
-                ...item,
-                selected: selectable ? !!item.selected : undefined
-            };
-        });
-    }, [searchInput, items, filterRegex]);
-    const removeTasks = useCallback((uid) => {
-        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-        setSelections(cur => {
-            const itemToRemove = menuHelpers.getItem(cur, uid);
-            return cur.filter(item => item.id !== itemToRemove?.id);
-        });
-        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
-        // setting the focus to the first element in the list on deletion and if empty then to search input
-        setTimeout(() => {
-            const focusable = getFocusables(selectedTasksWrapperRef);
-            if (focusable.length > 0)
-                focusable[0].focus();
-            else
-                searchEleRef.current.focus();
-        }, 0);
-    }, []);
-    const toggleSelectedRegion = () => {
-        setSelectMultipleToggle(curr => !curr);
-    };
-    useArrows(selectedTasksWrapperRef, {
-        selector: 'button',
-        dir: 'up-down'
-    }, [selections.length]);
-    const pickerContent = (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, id: id, children: [!selectMultipleToggle && (_jsxs(CardHeader, { forwardedAs: 'div', children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] })), _jsxs(Flex, { container: true, children: [_jsx(StyledAddTasks, { children: _jsx(Menu, { items: renderItems, role: 'listbox', onItemClick: (uid) => {
-                                const clickedItem = menuHelpers.getItem(renderItems, uid);
-                                const parentItem = clickedItem?.ancestors
-                                    ? clickedItem.ancestors[0]
-                                    : menuHelpers.getParentItem(renderItems, uid);
-                                if (clickedItem) {
-                                    if (selectMultipleToggle) {
-                                        searchEleRef.current?.focus();
-                                        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-                                        if (selections.find(item => item.id === uid)) {
-                                            setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));
-                                        }
-                                        else {
-                                            setSelections(cur => {
-                                                let secondary;
-                                                if (parentItem)
-                                                    secondary = menuHelpers.isItem(parentItem)
-                                                        ? parentItem.primary
-                                                        : parentItem.label;
-                                                return [
-                                                    ...cur,
-                                                    {
-                                                        ...clickedItem,
-                                                        secondary,
-                                                        onRemoveSelection: removeTasks
-                                                    }
-                                                ];
-                                            });
-                                        }
-                                        setSearchInput('');
-                                    }
-                                    else {
-                                        onAdd([clickedItem]);
-                                    }
-                                }
-                            }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion, ref: toggle })] }), arrowNavigationUnsupported: true }) }), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
-                                    setSelections(newItems.map(({ type, data }) => ({
-                                        ...data,
-                                        type
-                                    })));
-                                }, itemRenderer: SelectedItemRenderer })) : (_jsx(EmptyState, { message: t('no_selected_tasks') }))] }))] })] }));
-    if (selectMultipleToggle) {
-        return (_jsx(FormDialog, { heading: t('add_tasks'), target: target, ref: pickerRef, onCancel: () => {
-                initializePicker();
-                onCancel();
-            }, onSubmit: {
-                text: t('add'),
-                disabled: !selections.length,
-                handler: () => {
-                    onAdd(selections);
-                }
-            }, placement: 'bottom-start', children: pickerContent }));
-    }
-    return (_jsx(Dialog, { target: target, ref: pickerRef, labelledbyId: headingId, children: pickerContent }));
-});
-export default Picker;
-//# sourceMappingURL=Picker.js.map