@pega/cosmos-react-work 4.0.0-dev.23.1 → 4.0.0-dev.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
- package/lib/components/AppAnnouncement/AppAnnouncement.js +1 -1
- package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
- package/lib/components/Article/Article.d.ts +49 -0
- package/lib/components/Article/Article.d.ts.map +1 -0
- package/lib/components/Article/Article.js +73 -0
- package/lib/components/Article/Article.js.map +1 -0
- package/lib/components/Article/ArticleFooter.d.ts +40 -0
- package/lib/components/Article/ArticleFooter.d.ts.map +1 -0
- package/lib/components/Article/ArticleFooter.js +54 -0
- package/lib/components/Article/ArticleFooter.js.map +1 -0
- package/lib/components/Article/ArticleMeta.d.ts +13 -0
- package/lib/components/Article/ArticleMeta.d.ts.map +1 -0
- package/lib/components/Article/ArticleMeta.js +24 -0
- package/lib/components/Article/ArticleMeta.js.map +1 -0
- package/lib/components/Article/index.d.ts +5 -0
- package/lib/components/Article/index.d.ts.map +1 -0
- package/lib/components/Article/index.js +3 -0
- package/lib/components/Article/index.js.map +1 -0
- package/lib/components/ArticleList/ArticleList.d.ts +6 -0
- package/lib/components/ArticleList/ArticleList.d.ts.map +1 -0
- package/lib/components/ArticleList/ArticleList.js +112 -0
- package/lib/components/ArticleList/ArticleList.js.map +1 -0
- package/lib/components/ArticleList/ArticleList.types.d.ts +79 -0
- package/lib/components/ArticleList/ArticleList.types.d.ts.map +1 -0
- package/lib/components/ArticleList/ArticleList.types.js +2 -0
- package/lib/components/ArticleList/ArticleList.types.js.map +1 -0
- package/lib/components/ArticleList/ArticleListFilter.d.ts +6 -0
- package/lib/components/ArticleList/ArticleListFilter.d.ts.map +1 -0
- package/lib/components/ArticleList/ArticleListFilter.js +60 -0
- package/lib/components/ArticleList/ArticleListFilter.js.map +1 -0
- package/lib/components/ArticleList/ArticleListHeader.d.ts +5 -0
- package/lib/components/ArticleList/ArticleListHeader.d.ts.map +1 -0
- package/lib/components/ArticleList/ArticleListHeader.js +20 -0
- package/lib/components/ArticleList/ArticleListHeader.js.map +1 -0
- package/lib/components/ArticleList/ArticleSummary.d.ts +7 -0
- package/lib/components/ArticleList/ArticleSummary.d.ts.map +1 -0
- package/lib/components/ArticleList/ArticleSummary.js +46 -0
- package/lib/components/ArticleList/ArticleSummary.js.map +1 -0
- package/lib/components/ArticleList/index.d.ts +6 -0
- package/lib/components/ArticleList/index.d.ts.map +1 -0
- package/lib/components/ArticleList/index.js +4 -0
- package/lib/components/ArticleList/index.js.map +1 -0
- package/lib/components/CasePreview/CasePreview.js +1 -1
- package/lib/components/CasePreview/CasePreview.js.map +1 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts.map +1 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.js +1 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map +1 -1
- package/lib/components/Confirmation/Confirmation.js +1 -1
- package/lib/components/Confirmation/Confirmation.js.map +1 -1
- package/lib/components/Details/Details.d.ts.map +1 -1
- package/lib/components/Details/Details.js +1 -1
- package/lib/components/Details/Details.js.map +1 -1
- package/lib/components/Glimpse/Glimpse.d.ts.map +1 -1
- package/lib/components/Glimpse/Glimpse.js +1 -1
- package/lib/components/Glimpse/Glimpse.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +1 -1
- package/lib/components/Predictions/Predictions.d.ts.map +1 -1
- package/lib/components/Predictions/Predictions.js +2 -2
- package/lib/components/Predictions/Predictions.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.js +1 -1
- package/lib/components/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +1 -1
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stakeholders/Stakeholders.js +1 -1
- package/lib/components/Stakeholders/Stakeholders.js.map +1 -1
- package/lib/components/Tags/Tags.d.ts.map +1 -1
- package/lib/components/Tags/Tags.js +1 -1
- package/lib/components/Tags/Tags.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +1 -1
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Timeline/Timeline.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.js +1 -1
- package/lib/components/Timeline/Timeline.js.map +1 -1
- package/lib/components/Timeline/TimelineToolbar.js +1 -1
- package/lib/components/Timeline/TimelineToolbar.js.map +1 -1
- package/lib/index.d.ts +4 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,
|
|
1
|
+
{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAER,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAEvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,GACI,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n MouseEventHandler,\n PropsWithoutRef,\n Ref\n} from 'react';\n\nimport {\n BaseProps,\n Button,\n ButtonProps,\n FieldValueList,\n FieldValueListProps,\n Flex,\n ForwardProps,\n InfoDialog,\n InfoDialogProps,\n NoChildrenProp,\n OmitStrict,\n useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n extends BaseProps,\n OmitStrict<InfoDialogProps, 'children'>,\n NoChildrenProp {\n /** The unique id for the operator. */\n id: string;\n /** Primary, secondary and avatar for the glimpse. */\n heading?: InfoDialogSummaryHeading;\n /** The set of field values to render in the list. */\n fields?: FieldValueListProps['fields'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n /** Callback for click event on View profile button. Passing this will render View profile button */\n onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(function Glimpse(\n {\n heading,\n fields = [],\n target,\n onDismiss,\n href,\n progress,\n onViewProfile,\n ...restProps\n }: PropsWithoutRef<GlimpseProps>,\n ref: GlimpseProps['ref']\n) {\n const t = useI18n();\n\n return (\n <InfoDialog\n {...restProps}\n target={target}\n heading={heading}\n progress={progress}\n onDismiss={onDismiss}\n ref={ref}\n >\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n {fields.length > 0 && <FieldValueList fields={fields} />}\n\n {(onViewProfile || href) && (\n <Button\n href={href}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onViewProfile?.(e);\n onDismiss();\n }}\n >\n {t('view_profile')}\n </Button>\n )}\n </Flex>\n </InfoDialog>\n );\n});\n\nexport default Glimpse;\n"]}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
3
3
|
import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
|
|
5
|
-
const IntelligentGuidance = forwardRef(({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref)
|
|
5
|
+
const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) {
|
|
6
6
|
const t = useI18n();
|
|
7
7
|
const headerRef = useRef(null);
|
|
8
8
|
const toggleButtonRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,IAAI,EAEJ,OAAO,EACP,qBAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,6BAA6B,EAC7B,yBAAyB,EACzB,SAAS,EACT,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAGtC,MAAM,mBAAmB,GAA+D,UAAU,CAChG,
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n SummaryListItem,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n function IntelligentGuidance(\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) {\n const t = useI18n();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <>\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n </>\n ),\n secondary: <Text variant='secondary'>{item.type}</Text>,\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight || 0);\n }\n }, [headerRef.current]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n aria-live='polite'\n aria-relevant='all'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length || undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length || undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n />\n <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AAoFvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel,
|
|
|
4
4
|
import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
|
|
5
5
|
import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
|
|
6
6
|
registerIcon(polarisIcon, informationIcon);
|
|
7
|
-
const PredictionsList = forwardRef(({ items: itemsProp, progress, ...restProps }, ref)
|
|
7
|
+
const PredictionsList = forwardRef(function PredictionsList({ items: itemsProp, progress, ...restProps }, ref) {
|
|
8
8
|
const t = useI18n();
|
|
9
9
|
const [currentItemIdTarget, setCurrentItemIdTarget] = useState();
|
|
10
10
|
const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);
|
|
@@ -37,7 +37,7 @@ const PredictionsViewAllModal = ({ count, progress, ...restProps }) => {
|
|
|
37
37
|
const t = useI18n();
|
|
38
38
|
return (_jsx(Modal, { heading: t('all_predictions'), count: count, progress: progress, children: _jsx(PredictionsList, { ...restProps }) }));
|
|
39
39
|
};
|
|
40
|
-
const Predictions = forwardRef(({ count, items, progress, ...restProps }, ref)
|
|
40
|
+
const Predictions = forwardRef(function Predictions({ count, items, progress, ...restProps }, ref) {
|
|
41
41
|
const t = useI18n();
|
|
42
42
|
const { create } = useModalManager();
|
|
43
43
|
const viewAllModalRef = useRef();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,KAAK,EAEL,eAAe,EAEf,UAAU,EAEV,WAAW,EACX,IAAI,EACJ,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,KAAK,eAAe,MAAM,oEAAoE,CAAC;AAItG,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAE3C,MAAM,eAAe,GAEjB,UAAU,
|
|
1
|
+
{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n registerIcon,\n useI18n,\n Modal,\n SummaryListProps,\n useModalManager,\n SummaryListItem,\n InfoDialog,\n ModalMethods,\n StyledLabel,\n Text,\n SummaryList\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\nconst PredictionsList: FC<\n PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(function PredictionsList(\n {\n items: itemsProp,\n progress,\n ...restProps\n }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n ref: PredictionsProps['ref']\n) {\n const t = useI18n();\n const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n | {\n id: PredictionItem['id'];\n target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n }\n | undefined\n >();\n const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n const items: SummaryListItem[] = useMemo(\n () =>\n (itemsProp ?? []).map(item => ({\n id: item.id,\n primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n secondary: (\n <Text variant='h1' as='span'>\n {item.value}\n </Text>\n ),\n overflowStrategy: 'ellipsis',\n actions: item.additionalInfo\n ? [\n {\n id: item.id,\n text: t('learn_more'),\n icon: 'information',\n onClick: (\n id: string,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => {\n setCurrentItemIdTarget({\n id: item.id,\n target: e.currentTarget\n });\n }\n }\n ]\n : undefined\n })),\n [itemsProp]\n );\n\n return (\n <>\n <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n {currentItemIdTarget && currentItem?.additionalInfo && (\n <InfoDialog\n heading={currentItem.label}\n target={currentItemIdTarget.target}\n onDismiss={() => {\n setCurrentItemIdTarget(undefined);\n }}\n >\n {currentItem.additionalInfo}\n </InfoDialog>\n )}\n </>\n );\n});\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n const t = useI18n();\n return (\n <Modal heading={t('all_predictions')} count={count} progress={progress}>\n <PredictionsList {...restProps} />\n </Modal>\n );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n function Predictions(\n { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n ref: PredictionsProps['ref']\n ) {\n const t = useI18n();\n const { create } = useModalManager();\n const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n useEffect(() => {\n viewAllModalRef.current?.update({\n items,\n progress,\n count\n });\n }, [items, progress, count]);\n\n return (\n <PredictionsList\n {...restProps}\n ref={ref}\n name={t('predictions')}\n headingTag='h3'\n icon='polaris'\n count={count}\n items={items?.slice(0, 3)}\n progress={progress}\n onViewAll={() => {\n viewAllModalRef.current = create(PredictionsViewAllModal, {\n items,\n progress,\n count\n });\n }}\n />\n );\n }\n);\n\nexport default Predictions;\n"]}
|
|
@@ -21,7 +21,7 @@ const FilterModal = (props) => {
|
|
|
21
21
|
return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
|
|
22
22
|
}) })] }) }));
|
|
23
23
|
};
|
|
24
|
-
const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref)
|
|
24
|
+
const SearchResults = forwardRef(function SearchResults({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref) {
|
|
25
25
|
const t = useI18n();
|
|
26
26
|
const isMedium = useBreakpoint('md');
|
|
27
27
|
const { create } = useModalManager();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useRef,\n FunctionComponent,\n PropsWithoutRef,\n ComponentProps,\n useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Button,\n Count,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n registerIcon,\n Modal,\n ModalMethods,\n EmptyState,\n SearchInput,\n Selectable,\n Text,\n useModalManager,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect,\n SummaryItem,\n Avatar,\n useTheme,\n AppShellContext,\n Progress\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n SearchResultsProps,\n SearchResultProps,\n FilterProps,\n ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n StyledModalFilterContent,\n StyledCountText,\n StyledSelectedFilters,\n StyledSearchResults,\n StyledResults,\n StyledFilters,\n StyledSearchSummaryItem\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n props: Pick<\n SearchResultsProps,\n 'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n > & {\n activeFilters: ActiveFilters[];\n }\n) => {\n const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n const t = useI18n();\n\n return (\n <Modal heading={t('filters')} autoWidth>\n <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Text as={StyledCountText} variant='secondary'>\n {t('results_count', [count], { count })}\n </Text>\n {onClearAllFilters && !!activeFilters.length && (\n <Button variant='link' onClick={onClearAllFilters}>\n {t('clear_all')}\n </Button>\n )}\n </Flex>\n {!!activeFilters.length && (\n <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n {activeFilters.map(filter => {\n return (\n <Selectable\n key={filter.id}\n id={filter.id}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n >\n {`${filter.groupName}: ${filter.name}`}\n </Selectable>\n );\n })}\n </Flex>\n )}\n <div>\n {filters.map((filter: FilterProps) => {\n return (\n <Filter\n key={filter.name}\n onFilterChange={onFilterChange}\n onClearFilter={onClearFilter}\n {...filter}\n />\n );\n })}\n </div>\n </Grid>\n </Modal>\n );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n (\n {\n results,\n searchInputProps,\n count,\n filters,\n onFilterChange,\n onClearAllFilters,\n onClearFilter,\n onShowMore,\n loading = false,\n ...restProps\n }: PropsWithoutRef<SearchResultsProps>,\n ref: SearchResultsProps['ref']\n ) => {\n const t = useI18n();\n const isMedium = useBreakpoint('md');\n const { create } = useModalManager();\n const { searchContainerEl } = useContext(AppShellContext);\n const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n const { placeholder = t('search_placeholder_default') } = searchInputProps;\n const {\n base: {\n palette: { 'brand-primary': primary }\n }\n } = useTheme();\n const [accent, setAccent] = useState<undefined | RegExp>();\n const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\n\n const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n if (group.type === 'select') {\n return group.items.flatMap(item => {\n if (item.checked) {\n return {\n id: item.id,\n name: item.name,\n resetValue: { ...item, checked: false },\n groupName: group.name,\n type: group.type\n };\n }\n return [];\n });\n }\n return [];\n });\n\n const openFiltersModal = () => {\n filtersMethods.current = create(FilterModal, {\n activeFilters,\n count,\n filters,\n onFilterChange,\n onClearFilter,\n onClearAllFilters\n });\n };\n\n useAfterInitialEffect(() => {\n if (filtersMethods.current) {\n filtersMethods.current.update({\n activeFilters,\n count,\n filters\n });\n }\n }, [activeFilters, count, filters]);\n\n useAfterInitialEffect(() => {\n if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n }, [isMedium]);\n\n useAfterInitialEffect(() => {\n setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n }, [submittedSearchValue]);\n\n const searchTitle = (\n <SummaryItem\n as={StyledSearchSummaryItem}\n visual={\n <Avatar\n icon='search'\n name='search'\n shape='squircle'\n backgroundColor={primary}\n color='white'\n />\n }\n primary={<Text variant='h1'>Search</Text>}\n actions={\n onClearAllFilters &&\n isMedium &&\n !!activeFilters.length && (\n <Button variant='link' onClick={onClearAllFilters}>\n {t('clear_all')}\n </Button>\n )\n }\n />\n );\n const searchInput = (\n <SearchInput\n {...searchInputProps}\n onSearchSubmit={val => {\n searchInputProps.onSearchSubmit?.(val);\n setSubmittedSearchValue(val);\n }}\n placeholder={placeholder}\n />\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledSearchResults}\n ref={ref}\n md={\n filters.length\n ? {\n container: {\n cols: '15rem auto'\n }\n }\n : undefined\n }\n sm={\n filters.length\n ? {\n container: {\n cols: 'auto',\n rowGap: 2\n }\n }\n : undefined\n }\n container={{\n rows: 'auto auto',\n cols: 'auto 1fr',\n areas: '\"filters results\"'\n }}\n >\n {isMedium && !!filters.length && (\n <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n {searchTitle}\n {filters.map((filter: FilterProps) => {\n return (\n <Filter\n key={filter.name}\n onFilterChange={onFilterChange}\n onClearFilter={onClearFilter}\n {...filter}\n />\n );\n })}\n </Grid>\n )}\n <Grid\n item={{ alignSelf: 'start', area: 'results' }}\n container={{\n alignItems: 'center',\n rowGap: 2,\n rows: 'auto auto 1fr',\n areas: '\"search\" \"meta\" \"items\"'\n }}\n as={StyledResults}\n >\n {loading && <Progress placement='local' />}\n {searchContainerEl && isMedium ? (\n createPortal(searchInput, searchContainerEl)\n ) : (\n <Grid item={{ area: 'search' }}>\n {!isMedium && searchTitle}\n {searchInput}\n </Grid>\n )}\n <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {!loading && (\n <Text as={StyledCountText} variant='secondary'>\n {submittedSearchValue !== '' || results.length > 0\n ? t('results_count', [count], { count })\n : ''}\n </Text>\n )}\n {!isMedium && !!filters.length && (\n <Button variant='simple' onClick={openFiltersModal}>\n <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n {t('filters')} \n <Count>{activeFilters.length}</Count>\n </Button>\n )}\n </Flex>\n {!!activeFilters.length && (\n <Flex as={StyledSelectedFilters} container={{ gap: 1, wrap: 'wrap' }}>\n {activeFilters.map(filter => {\n return (\n <Selectable\n key={filter.id}\n id={filter.id}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n >\n {`${filter.groupName}: ${filter.name}`}\n </Selectable>\n );\n })}\n </Flex>\n )}\n </Grid>\n <Grid\n item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n container={{ rowGap: 2 }}\n >\n {!loading && (\n <>\n {results.length ? (\n results.map((result: SearchResultProps) => {\n return <SearchResult key={result.id} {...result} accent={accent} />;\n })\n ) : (\n <Grid item={{ alignSelf: 'stretch' }}>\n <EmptyState\n message={submittedSearchValue === '' ? t('empty_search') : undefined}\n />\n </Grid>\n )}\n {onShowMore && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={onShowMore}>\n {t('show_more')}\n </Button>\n </Flex>\n )}\n </>\n )}\n </Grid>\n </Grid>\n </Grid>\n );\n }\n);\n\nexport default SearchResults;\n"]}
|
|
1
|
+
{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useRef,\n FunctionComponent,\n PropsWithoutRef,\n ComponentProps,\n useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Button,\n Count,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n registerIcon,\n Modal,\n ModalMethods,\n EmptyState,\n SearchInput,\n Selectable,\n Text,\n useModalManager,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect,\n SummaryItem,\n Avatar,\n useTheme,\n AppShellContext,\n Progress\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n SearchResultsProps,\n SearchResultProps,\n FilterProps,\n ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n StyledModalFilterContent,\n StyledCountText,\n StyledSelectedFilters,\n StyledSearchResults,\n StyledResults,\n StyledFilters,\n StyledSearchSummaryItem\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n props: Pick<\n SearchResultsProps,\n 'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n > & {\n activeFilters: ActiveFilters[];\n }\n) => {\n const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n const t = useI18n();\n\n return (\n <Modal heading={t('filters')} autoWidth>\n <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Text as={StyledCountText} variant='secondary'>\n {t('results_count', [count], { count })}\n </Text>\n {onClearAllFilters && !!activeFilters.length && (\n <Button variant='link' onClick={onClearAllFilters}>\n {t('clear_all')}\n </Button>\n )}\n </Flex>\n {!!activeFilters.length && (\n <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n {activeFilters.map(filter => {\n return (\n <Selectable\n key={filter.id}\n id={filter.id}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n >\n {`${filter.groupName}: ${filter.name}`}\n </Selectable>\n );\n })}\n </Flex>\n )}\n <div>\n {filters.map((filter: FilterProps) => {\n return (\n <Filter\n key={filter.name}\n onFilterChange={onFilterChange}\n onClearFilter={onClearFilter}\n {...filter}\n />\n );\n })}\n </div>\n </Grid>\n </Modal>\n );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n function SearchResults(\n {\n results,\n searchInputProps,\n count,\n filters,\n onFilterChange,\n onClearAllFilters,\n onClearFilter,\n onShowMore,\n loading = false,\n ...restProps\n }: PropsWithoutRef<SearchResultsProps>,\n ref: SearchResultsProps['ref']\n ) {\n const t = useI18n();\n const isMedium = useBreakpoint('md');\n const { create } = useModalManager();\n const { searchContainerEl } = useContext(AppShellContext);\n const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n const { placeholder = t('search_placeholder_default') } = searchInputProps;\n const {\n base: {\n palette: { 'brand-primary': primary }\n }\n } = useTheme();\n const [accent, setAccent] = useState<undefined | RegExp>();\n const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\n\n const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n if (group.type === 'select') {\n return group.items.flatMap(item => {\n if (item.checked) {\n return {\n id: item.id,\n name: item.name,\n resetValue: { ...item, checked: false },\n groupName: group.name,\n type: group.type\n };\n }\n return [];\n });\n }\n return [];\n });\n\n const openFiltersModal = () => {\n filtersMethods.current = create(FilterModal, {\n activeFilters,\n count,\n filters,\n onFilterChange,\n onClearFilter,\n onClearAllFilters\n });\n };\n\n useAfterInitialEffect(() => {\n if (filtersMethods.current) {\n filtersMethods.current.update({\n activeFilters,\n count,\n filters\n });\n }\n }, [activeFilters, count, filters]);\n\n useAfterInitialEffect(() => {\n if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n }, [isMedium]);\n\n useAfterInitialEffect(() => {\n setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n }, [submittedSearchValue]);\n\n const searchTitle = (\n <SummaryItem\n as={StyledSearchSummaryItem}\n visual={\n <Avatar\n icon='search'\n name='search'\n shape='squircle'\n backgroundColor={primary}\n color='white'\n />\n }\n primary={<Text variant='h1'>Search</Text>}\n actions={\n onClearAllFilters &&\n isMedium &&\n !!activeFilters.length && (\n <Button variant='link' onClick={onClearAllFilters}>\n {t('clear_all')}\n </Button>\n )\n }\n />\n );\n const searchInput = (\n <SearchInput\n {...searchInputProps}\n onSearchSubmit={val => {\n searchInputProps.onSearchSubmit?.(val);\n setSubmittedSearchValue(val);\n }}\n placeholder={placeholder}\n />\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledSearchResults}\n ref={ref}\n md={\n filters.length\n ? {\n container: {\n cols: '15rem auto'\n }\n }\n : undefined\n }\n sm={\n filters.length\n ? {\n container: {\n cols: 'auto',\n rowGap: 2\n }\n }\n : undefined\n }\n container={{\n rows: 'auto auto',\n cols: 'auto 1fr',\n areas: '\"filters results\"'\n }}\n >\n {isMedium && !!filters.length && (\n <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n {searchTitle}\n {filters.map((filter: FilterProps) => {\n return (\n <Filter\n key={filter.name}\n onFilterChange={onFilterChange}\n onClearFilter={onClearFilter}\n {...filter}\n />\n );\n })}\n </Grid>\n )}\n <Grid\n item={{ alignSelf: 'start', area: 'results' }}\n container={{\n alignItems: 'center',\n rowGap: 2,\n rows: 'auto auto 1fr',\n areas: '\"search\" \"meta\" \"items\"'\n }}\n as={StyledResults}\n >\n {loading && <Progress placement='local' />}\n {searchContainerEl && isMedium ? (\n createPortal(searchInput, searchContainerEl)\n ) : (\n <Grid item={{ area: 'search' }}>\n {!isMedium && searchTitle}\n {searchInput}\n </Grid>\n )}\n <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {!loading && (\n <Text as={StyledCountText} variant='secondary'>\n {submittedSearchValue !== '' || results.length > 0\n ? t('results_count', [count], { count })\n : ''}\n </Text>\n )}\n {!isMedium && !!filters.length && (\n <Button variant='simple' onClick={openFiltersModal}>\n <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n {t('filters')} \n <Count>{activeFilters.length}</Count>\n </Button>\n )}\n </Flex>\n {!!activeFilters.length && (\n <Flex as={StyledSelectedFilters} container={{ gap: 1, wrap: 'wrap' }}>\n {activeFilters.map(filter => {\n return (\n <Selectable\n key={filter.id}\n id={filter.id}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n >\n {`${filter.groupName}: ${filter.name}`}\n </Selectable>\n );\n })}\n </Flex>\n )}\n </Grid>\n <Grid\n item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n container={{ rowGap: 2 }}\n >\n {!loading && (\n <>\n {results.length ? (\n results.map((result: SearchResultProps) => {\n return <SearchResult key={result.id} {...result} accent={accent} />;\n })\n ) : (\n <Grid item={{ alignSelf: 'stretch' }}>\n <EmptyState\n message={submittedSearchValue === '' ? t('empty_search') : undefined}\n />\n </Grid>\n )}\n {onShowMore && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={onShowMore}>\n {t('show_more')}\n </Button>\n </Flex>\n )}\n </>\n )}\n </Grid>\n </Grid>\n </Grid>\n );\n }\n);\n\nexport default SearchResults;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwKxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -6,7 +6,7 @@ import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ch
|
|
|
6
6
|
import StageGlimpse from './StageGlimpse';
|
|
7
7
|
import { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';
|
|
8
8
|
registerIcon(checkIcon);
|
|
9
|
-
const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restProps }, ref)
|
|
9
|
+
const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) {
|
|
10
10
|
const t = useI18n();
|
|
11
11
|
const stagesRef = useConsolidatedRef(ref);
|
|
12
12
|
const stagesRefs = useRef([]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Text,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(\n (\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n ) => {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });\n\n const dialogId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n role='region'\n aria-label={t('stages_label')}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView || isCurrent || !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Stages;\n"]}
|
|
1
|
+
{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Text,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });\n\n const dialogId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n role='region'\n aria-label={t('stages_label')}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView || isCurrent || !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n});\n\nexport default Stages;\n"]}
|
|
@@ -17,7 +17,7 @@ const StyledPopover = styled(Popover) `
|
|
|
17
17
|
width: 40ch;
|
|
18
18
|
min-height: 12rem;
|
|
19
19
|
`;
|
|
20
|
-
const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref)
|
|
20
|
+
const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref) {
|
|
21
21
|
const { create: createModal } = useModalManager();
|
|
22
22
|
const t = useI18n();
|
|
23
23
|
const modalMethods = useRef();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useRef,\n useEffect,\n useMemo,\n useState,\n ReactNode,\n useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n SummaryList,\n useI18n,\n ModalMethods,\n Button,\n ViewAll,\n Modal,\n Popover,\n Flex,\n Text,\n useModalManager,\n useOuterEvent,\n Progress,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n position: relative;\n min-height: 8rem;\n\n &[aria-busy='true'] > :nth-child(2) {\n visibility: hidden;\n }\n`;\n\nconst StyledPopover = styled(Popover)`\n width: 40ch;\n min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n (\n {\n items: itemsProp,\n count,\n loading,\n onAddNew,\n form,\n onViewAll,\n viewAll,\n error,\n ...restProps\n }: PropsWithoutRef<StakeholdersProps>,\n ref: StakeholdersProps['ref']\n ) => {\n const { create: createModal } = useModalManager();\n const t = useI18n();\n const modalMethods = useRef<ModalMethods>();\n const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n const [editing, setEditing] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n const popoverRef = useRef<HTMLDivElement>(null);\n const progressMsgRef = useRef(t('loading'));\n\n // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n // Setter for the ref. Avoids a re-render.\n const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n selectedRoleNameRef.current = selectedRoleName;\n }, []);\n\n const [popoverTarget, setPopoverTarget] = useState<{\n portal: HTMLLIElement;\n button: HTMLButtonElement | null;\n } | null>(null);\n\n const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n itemEls: [],\n viewAllItemEls: []\n });\n\n // This function merges the pre-defined actions(add & edit) to the item object.\n const mergeItemActions = (\n items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n ) => {\n return items.map(({ onEdit, onRemove, ...rest }, i) => {\n let itemActions: Action[] = [];\n const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setEditing(true);\n setPopoverTarget({\n portal: elArray[i],\n button: elArray[i].querySelector<HTMLButtonElement>(\n 'button[aria-haspopup=\"menu\"]'\n )\n });\n\n onEdit?.();\n }\n }\n ];\n }\n\n if (onRemove) {\n itemActions = [\n ...itemActions,\n {\n id: 'remove',\n text: t('remove'),\n icon: 'trash',\n onClick: () => {\n onRemove?.();\n }\n }\n ];\n }\n\n return {\n ...rest,\n ref: (el: HTMLLIElement) => {\n elArray[i] = el;\n },\n actions: itemActions\n };\n });\n };\n\n const closePopover = () => {\n if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n popoverTarget.button?.focus();\n setPopoverTarget(null);\n setEditing(false);\n progressMsgRef.current = t('loading');\n };\n\n let formContent: ReactNode = null;\n if (\n (mode === 'add' || editing) &&\n (!form.loading || progressMsgRef.current === t('submitting'))\n ) {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the popover.\n let formActions: ReactNode = null;\n if (\n (mode === 'add' || editing) &&\n (!form.loading || progressMsgRef.current === t('submitting'))\n ) {\n const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closePopover();\n }\n };\n\n formActions = (\n <>\n <Button\n disabled={form.loading}\n onClick={() => {\n form.onDismiss({ closeForm });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={form.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n // Content for the modal either for adding new or viewing all.\n let modalContent: ReactNode = null;\n if (mode === 'add') modalContent = formContent;\n\n if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n modalContent = (\n <ViewAll\n items={mergeItemActions(viewAll.items)}\n actions={[\n {\n id: 'addStakeHolder',\n text: 'Add new',\n onClick: () => {\n setMode('add');\n onAddNew?.();\n }\n }\n ]}\n searchInputProps={\n viewAll.onSearch\n ? {\n value: viewAllSearchValue,\n onSearchChange: (value: string) => {\n setViewAllSearchValue(value);\n viewAll?.onSearch?.(value);\n }\n }\n : undefined\n }\n />\n );\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress:\n (mode === 'add' && form.loading) || viewAll.loading\n ? { message: progressMsgRef.current }\n : undefined,\n count: mode === 'viewAll' ? count : undefined,\n children: modalContent,\n actions: mode === 'add' ? formActions : undefined,\n onRequestDismiss:\n form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else if (mode === 'add' || mode === 'viewAll') {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n onAfterClose: () => {\n if (mode === 'add') {\n form.onAfterClose?.();\n } else {\n setViewAllSearchValue('');\n viewAll.onAfterClose?.();\n }\n\n progressMsgRef.current = t('loading');\n setMode(undefined);\n }\n });\n }\n }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n useOuterEvent('mousedown', [popoverRef], closePopover);\n\n let editPopover: ReactNode = null;\n if (popoverTarget) {\n editPopover = (\n <StyledPopover\n ref={popoverRef}\n target={popoverTarget.button}\n placement='auto'\n role='dialog'\n >\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n <Text variant='h3'>{t('edit_stakeholder')}</Text>\n <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n {(!form.loading || progressMsgRef.current === t('submitting')) && (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n )}\n </StyledEditFormWrap>\n {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n </Flex>\n </StyledPopover>\n );\n }\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closePopover();\n }\n };\n\n useEffect(() => {\n if (!popoverTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [popoverTarget]);\n\n useAfterInitialEffect(() => {\n if (!popoverTarget) form.onAfterClose?.();\n }, [popoverTarget]);\n\n return (\n <>\n <StyledStakeholders\n {...restProps}\n ref={ref}\n icon='person'\n name={t('view_stakeholders')}\n headingTag='h3'\n loading={loading}\n count={count}\n error={error}\n items={useMemo(\n () => mergeItemActions(itemsProp.slice(0, 3)),\n [mergeItemActions, itemsProp]\n )}\n actions={\n onAddNew\n ? [\n {\n text: t('add'),\n id: 'add_new',\n icon: 'plus',\n onClick() {\n setMode('add');\n onAddNew?.();\n }\n }\n ]\n : undefined\n }\n onViewAll={\n onViewAll && count && count > 3\n ? () => {\n setMode('viewAll');\n onViewAll?.();\n }\n : undefined\n }\n />\n {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}
|
|
1
|
+
{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useRef,\n useEffect,\n useMemo,\n useState,\n ReactNode,\n useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n SummaryList,\n useI18n,\n ModalMethods,\n Button,\n ViewAll,\n Modal,\n Popover,\n Flex,\n Text,\n useModalManager,\n useOuterEvent,\n Progress,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n position: relative;\n min-height: 8rem;\n\n &[aria-busy='true'] > :nth-child(2) {\n visibility: hidden;\n }\n`;\n\nconst StyledPopover = styled(Popover)`\n width: 40ch;\n min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n function Stakeholders(\n {\n items: itemsProp,\n count,\n loading,\n onAddNew,\n form,\n onViewAll,\n viewAll,\n error,\n ...restProps\n }: PropsWithoutRef<StakeholdersProps>,\n ref: StakeholdersProps['ref']\n ) {\n const { create: createModal } = useModalManager();\n const t = useI18n();\n const modalMethods = useRef<ModalMethods>();\n const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n const [editing, setEditing] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n const popoverRef = useRef<HTMLDivElement>(null);\n const progressMsgRef = useRef(t('loading'));\n\n // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n // Setter for the ref. Avoids a re-render.\n const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n selectedRoleNameRef.current = selectedRoleName;\n }, []);\n\n const [popoverTarget, setPopoverTarget] = useState<{\n portal: HTMLLIElement;\n button: HTMLButtonElement | null;\n } | null>(null);\n\n const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n itemEls: [],\n viewAllItemEls: []\n });\n\n // This function merges the pre-defined actions(add & edit) to the item object.\n const mergeItemActions = (\n items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n ) => {\n return items.map(({ onEdit, onRemove, ...rest }, i) => {\n let itemActions: Action[] = [];\n const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setEditing(true);\n setPopoverTarget({\n portal: elArray[i],\n button: elArray[i].querySelector<HTMLButtonElement>(\n 'button[aria-haspopup=\"menu\"]'\n )\n });\n\n onEdit?.();\n }\n }\n ];\n }\n\n if (onRemove) {\n itemActions = [\n ...itemActions,\n {\n id: 'remove',\n text: t('remove'),\n icon: 'trash',\n onClick: () => {\n onRemove?.();\n }\n }\n ];\n }\n\n return {\n ...rest,\n ref: (el: HTMLLIElement) => {\n elArray[i] = el;\n },\n actions: itemActions\n };\n });\n };\n\n const closePopover = () => {\n if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n popoverTarget.button?.focus();\n setPopoverTarget(null);\n setEditing(false);\n progressMsgRef.current = t('loading');\n };\n\n let formContent: ReactNode = null;\n if (\n (mode === 'add' || editing) &&\n (!form.loading || progressMsgRef.current === t('submitting'))\n ) {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the popover.\n let formActions: ReactNode = null;\n if (\n (mode === 'add' || editing) &&\n (!form.loading || progressMsgRef.current === t('submitting'))\n ) {\n const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closePopover();\n }\n };\n\n formActions = (\n <>\n <Button\n disabled={form.loading}\n onClick={() => {\n form.onDismiss({ closeForm });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={form.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n // Content for the modal either for adding new or viewing all.\n let modalContent: ReactNode = null;\n if (mode === 'add') modalContent = formContent;\n\n if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n modalContent = (\n <ViewAll\n items={mergeItemActions(viewAll.items)}\n actions={[\n {\n id: 'addStakeHolder',\n text: 'Add new',\n onClick: () => {\n setMode('add');\n onAddNew?.();\n }\n }\n ]}\n searchInputProps={\n viewAll.onSearch\n ? {\n value: viewAllSearchValue,\n onSearchChange: (value: string) => {\n setViewAllSearchValue(value);\n viewAll?.onSearch?.(value);\n }\n }\n : undefined\n }\n />\n );\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress:\n (mode === 'add' && form.loading) || viewAll.loading\n ? { message: progressMsgRef.current }\n : undefined,\n count: mode === 'viewAll' ? count : undefined,\n children: modalContent,\n actions: mode === 'add' ? formActions : undefined,\n onRequestDismiss:\n form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else if (mode === 'add' || mode === 'viewAll') {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n onAfterClose: () => {\n if (mode === 'add') {\n form.onAfterClose?.();\n } else {\n setViewAllSearchValue('');\n viewAll.onAfterClose?.();\n }\n\n progressMsgRef.current = t('loading');\n setMode(undefined);\n }\n });\n }\n }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n useOuterEvent('mousedown', [popoverRef], closePopover);\n\n let editPopover: ReactNode = null;\n if (popoverTarget) {\n editPopover = (\n <StyledPopover\n ref={popoverRef}\n target={popoverTarget.button}\n placement='auto'\n role='dialog'\n >\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n <Text variant='h3'>{t('edit_stakeholder')}</Text>\n <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n {(!form.loading || progressMsgRef.current === t('submitting')) && (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n )}\n </StyledEditFormWrap>\n {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n </Flex>\n </StyledPopover>\n );\n }\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closePopover();\n }\n };\n\n useEffect(() => {\n if (!popoverTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [popoverTarget]);\n\n useAfterInitialEffect(() => {\n if (!popoverTarget) form.onAfterClose?.();\n }, [popoverTarget]);\n\n return (\n <>\n <StyledStakeholders\n {...restProps}\n ref={ref}\n icon='person'\n name={t('view_stakeholders')}\n headingTag='h3'\n loading={loading}\n count={count}\n error={error}\n items={useMemo(\n () => mergeItemActions(itemsProp.slice(0, 3)),\n [mergeItemActions, itemsProp]\n )}\n actions={\n onAddNew\n ? [\n {\n text: t('add'),\n id: 'add_new',\n icon: 'plus',\n onClick() {\n setMode('add');\n onAddNew?.();\n }\n }\n ]\n : undefined\n }\n onViewAll={\n onViewAll && count && count > 3\n ? () => {\n setMode('viewAll');\n onViewAll?.();\n }\n : undefined\n }\n />\n {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;;;SA4BtB,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;;;SA4BtB,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8HpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -156,7 +156,7 @@ const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
|
|
|
156
156
|
setInputValue('');
|
|
157
157
|
}, arrowNavigationUnsupported: true }) })] }));
|
|
158
158
|
};
|
|
159
|
-
const Tags = forwardRef(({ tags, availableTags, loading, error, onSearch, onTagClick, onEditTags, ...restProps }, ref)
|
|
159
|
+
const Tags = forwardRef(function Tags({ tags, availableTags, loading, error, onSearch, onTagClick, onEditTags, ...restProps }, ref) {
|
|
160
160
|
const { create: createModal } = useModalManager();
|
|
161
161
|
const editModalMethods = useRef();
|
|
162
162
|
const containerRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n ClipboardEvent,\n KeyboardEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Modal,\n Tag,\n Button,\n ModalMethods,\n useI18n,\n Count,\n Flex,\n Text,\n CardHeader,\n Card,\n Actions,\n Icon,\n registerIcon,\n CardContent,\n Progress,\n EmptyState,\n ErrorState,\n Popover,\n Menu,\n MenuProps,\n useModalManager,\n useModalContext,\n useConsolidatedRef,\n CardFooter,\n Banner,\n ErrorStateProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nregisterIcon(tagIcon);\n\nexport interface SelectedTag {\n text: string;\n newTag?: boolean;\n}\n\nexport interface TagsProps extends BaseProps, NoChildrenProp {\n /** A list of tags. */\n tags: string[];\n /**\n * A list of available tags to add from.\n * @default []\n */\n availableTags?: string[];\n /** If true, a loading indicator will render in place of the tags list. */\n loading?: boolean;\n /** If defined, an error message will render in the component and actions will be disabled. */\n error?: boolean | string | ErrorStateProps;\n /** Callback triggered when a search query is changed in the Edit tags modal. */\n onSearch?: (filterValue: string) => void;\n /** Callback triggered when a tag is clicked. */\n onTagClick?: (tag: string) => void;\n /** Callback triggered when modified tags are submitted from the modal. */\n onEditTags?: (tags: SelectedTag[]) => Promise<void>;\n /** Ref for the Tags card. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface EditTagModalProps {\n tags: TagsProps['tags'];\n availableTags: TagsProps['availableTags'];\n onSearch?: TagsProps['onSearch'];\n onEditTags: NonNullable<TagsProps['onEditTags']>;\n}\n\nexport const StyledTags = styled.article<{ isLoading?: boolean; viewAll?: boolean }>(\n ({ isLoading, theme, viewAll }) => {\n return css`\n ${StyledCardContent} {\n max-height: ${viewAll ? 'fit-content' : '10rem'};\n overflow-y: hidden;\n }\n\n ${StyledCardFooter} {\n margin-block-start: ${theme.base.spacing};\n }\n\n ${StyledTag} {\n cursor: pointer;\n }\n\n ${StyledTag} + ${StyledTag} {\n margin-inline-start: 0;\n }\n\n ${isLoading &&\n css`\n & > ${StyledCardContent} {\n height: 4rem;\n }\n `}\n `;\n }\n);\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst StyledMenuPopover = styled.div`\n width: 40ch;\n`;\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }: EditTagModalProps) => {\n const { dismiss } = useModalContext();\n const inputRef = useRef<HTMLInputElement>(null);\n const [filterValue, setFilterValue] = useState('');\n const [editError, setEditError] = useState('');\n const [selected, setSelected] = useState<SelectedTag[]>([]);\n const [items, setItems] = useState<MenuProps['items']>([]);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);\n const t = useI18n();\n\n const showMenu = !!filterValue && !!items?.length;\n\n const selectedTagValues = useMemo(() => {\n return selected.map(({ text }) => {\n return { id: text, text };\n });\n }, [selected]);\n\n useEffect(() => {\n if (showMenu) {\n setPauseSelectedDescendantEvaluation(true);\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelected(\n tags.map(tag => {\n return { text: tag };\n })\n );\n }, [tags]);\n\n useEffect(() => {\n const menuItems = availableTags\n .filter(tag => !selected.some(x => x.text === tag))\n .map(tag => {\n return { id: tag, primary: tag };\n });\n\n if (\n filterValue &&\n !menuItems.some(x => x.id === filterValue) &&\n !selected.some(x => x.text === filterValue)\n ) {\n menuItems.push({\n id: `custom:${filterValue}`,\n primary: t('use_input_value', [filterValue])\n });\n }\n\n setItems(menuItems);\n }, [availableTags, filterValue, selected]);\n\n const setInputValue = (value: string) => {\n setEditError('');\n setFilterValue(value);\n onSearch?.(value);\n };\n\n const addTag = (tag: string) => {\n if (tag && !selected.find(x => x.text === tag)) {\n if (items.find(x => x.id === tag)) {\n setSelected(curr => [...curr, { text: tag }]);\n } else {\n setSelected(curr => [...curr, { text: tag, newTag: true }]);\n }\n setInputValue('');\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n const potentialTags = e.clipboardData.getData('Text').split(' ');\n\n potentialTags.forEach(potentialTag => {\n addTag(potentialTag);\n });\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === ' ') {\n addTag(filterValue);\n }\n };\n\n return (\n <Modal\n heading={t('edit_tags')}\n actions={\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button\n variant='primary'\n onClick={() => {\n onEditTags(selected)\n .then(dismiss)\n .catch((error: unknown) => {\n if (error instanceof Error) {\n setEditError(error.message || t('unknown_error'));\n } else {\n setEditError(t('unknown_error'));\n }\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n {editError && (\n <StyledBanner\n id='edit-tags-error'\n variant='urgent'\n messages={[editError]}\n onDismiss={() => {\n setEditError('');\n }}\n />\n )}\n <MultiSelectInput\n ref={inputRef}\n selected={selectedTagValues}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value.trim());\n }}\n onRemove={(id: string, index: number) => {\n if (selected[index].text === id) {\n const updatedSelected = [...selected];\n updatedSelected.splice(index, 1);\n setSelected(updatedSelected);\n setEditError('');\n }\n }}\n onBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n setInputValue('');\n }}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelectedBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n }}\n onSelectedFocus={() => {\n setPauseSelectedDescendantEvaluation(false);\n }}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n autoFocus\n />\n <Popover\n as={StyledMenuPopover}\n show={showMenu}\n target={inputRef.current}\n placement='bottom-start'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n <Menu\n role='listbox'\n mode='action'\n items={items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={id => {\n if (id.includes('custom:')) {\n const tagValue = id.replace('custom:', '');\n if (!selected.some(x => x.text === tagValue)) {\n setSelected(curr => [...curr, { text: tagValue, newTag: true }]);\n }\n } else {\n setSelected(curr => [...curr, { text: id }]);\n }\n setInputValue('');\n }}\n arrowNavigationUnsupported\n />\n </Popover>\n </Modal>\n );\n};\n\nconst Tags: FunctionComponent<TagsProps & ForwardProps> = forwardRef(\n (\n {\n tags,\n availableTags,\n loading,\n error,\n onSearch,\n onTagClick,\n onEditTags,\n ...restProps\n }: PropsWithoutRef<TagsProps>,\n ref: TagsProps['ref']\n ) => {\n const { create: createModal } = useModalManager();\n const editModalMethods = useRef<ModalMethods<EditTagModalProps>>();\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(containerRef, ref);\n const [footer, setFooter] = useState(false);\n const [viewAll, setViewAll] = useState(false);\n const t = useI18n();\n\n useEffect(() => {\n if (containerRef.current && contentRef.current) {\n if (\n contentRef.current.getBoundingClientRect().bottom >\n containerRef.current.getBoundingClientRect().bottom\n ) {\n setFooter(true);\n } else {\n setFooter(false);\n }\n }\n }, [containerRef.current, contentRef.current, tags]);\n\n useEffect(() => {\n if (!onEditTags) {\n editModalMethods.current?.dismiss();\n } else {\n editModalMethods.current?.update({\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n }\n }, [availableTags, tags, onSearch, onEditTags]);\n\n const openEditModal = () => {\n if (!onEditTags) return;\n\n editModalMethods.current = createModal(EditTagModal, {\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n };\n\n const content = useMemo(() => {\n if (loading) {\n return <Progress placement='local' />;\n }\n\n if (error) {\n if (typeof error === 'boolean') return <ErrorState />;\n if (typeof error === 'string') return <ErrorState message={error} />;\n return <ErrorState {...error} />;\n }\n\n return tags.length > 0 ? (\n <Flex ref={contentRef} container={{ gap: 1, wrap: 'wrap' }}>\n {tags.map(tag => {\n return (\n <Tag key={tag} onClick={() => onTagClick?.(tag)}>\n {tag}\n </Tag>\n );\n })}\n </Flex>\n ) : (\n <EmptyState />\n );\n }, [loading, error, tags]);\n\n return (\n <Card\n ref={consolidatedRef}\n {...restProps}\n as={StyledTags}\n viewAll={viewAll}\n isLoading={loading}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='tag' />\n <Text variant='h3'>{t('tags')}</Text>\n <Count>{tags.length}</Count>\n </Flex>\n <Actions\n items={\n onEditTags\n ? [\n {\n id: 'editTags',\n text: t('edit'),\n icon: 'pencil',\n onClick: openEditModal,\n disabled: !!error\n }\n ]\n : []\n }\n contextualLabel={t('tags')}\n />\n </CardHeader>\n <CardContent>{content}</CardContent>\n {footer && (\n <CardFooter justify='center'>\n <Button variant='link' onClick={() => setViewAll(curr => !curr)}>\n {viewAll ? t('view_less') : t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default Tags;\n"]}
|
|
1
|
+
{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n ClipboardEvent,\n KeyboardEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Modal,\n Tag,\n Button,\n ModalMethods,\n useI18n,\n Count,\n Flex,\n Text,\n CardHeader,\n Card,\n Actions,\n Icon,\n registerIcon,\n CardContent,\n Progress,\n EmptyState,\n ErrorState,\n Popover,\n Menu,\n MenuProps,\n useModalManager,\n useModalContext,\n useConsolidatedRef,\n CardFooter,\n Banner,\n ErrorStateProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nregisterIcon(tagIcon);\n\nexport interface SelectedTag {\n text: string;\n newTag?: boolean;\n}\n\nexport interface TagsProps extends BaseProps, NoChildrenProp {\n /** A list of tags. */\n tags: string[];\n /**\n * A list of available tags to add from.\n * @default []\n */\n availableTags?: string[];\n /** If true, a loading indicator will render in place of the tags list. */\n loading?: boolean;\n /** If defined, an error message will render in the component and actions will be disabled. */\n error?: boolean | string | ErrorStateProps;\n /** Callback triggered when a search query is changed in the Edit tags modal. */\n onSearch?: (filterValue: string) => void;\n /** Callback triggered when a tag is clicked. */\n onTagClick?: (tag: string) => void;\n /** Callback triggered when modified tags are submitted from the modal. */\n onEditTags?: (tags: SelectedTag[]) => Promise<void>;\n /** Ref for the Tags card. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface EditTagModalProps {\n tags: TagsProps['tags'];\n availableTags: TagsProps['availableTags'];\n onSearch?: TagsProps['onSearch'];\n onEditTags: NonNullable<TagsProps['onEditTags']>;\n}\n\nexport const StyledTags = styled.article<{ isLoading?: boolean; viewAll?: boolean }>(\n ({ isLoading, theme, viewAll }) => {\n return css`\n ${StyledCardContent} {\n max-height: ${viewAll ? 'fit-content' : '10rem'};\n overflow-y: hidden;\n }\n\n ${StyledCardFooter} {\n margin-block-start: ${theme.base.spacing};\n }\n\n ${StyledTag} {\n cursor: pointer;\n }\n\n ${StyledTag} + ${StyledTag} {\n margin-inline-start: 0;\n }\n\n ${isLoading &&\n css`\n & > ${StyledCardContent} {\n height: 4rem;\n }\n `}\n `;\n }\n);\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst StyledMenuPopover = styled.div`\n width: 40ch;\n`;\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }: EditTagModalProps) => {\n const { dismiss } = useModalContext();\n const inputRef = useRef<HTMLInputElement>(null);\n const [filterValue, setFilterValue] = useState('');\n const [editError, setEditError] = useState('');\n const [selected, setSelected] = useState<SelectedTag[]>([]);\n const [items, setItems] = useState<MenuProps['items']>([]);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);\n const t = useI18n();\n\n const showMenu = !!filterValue && !!items?.length;\n\n const selectedTagValues = useMemo(() => {\n return selected.map(({ text }) => {\n return { id: text, text };\n });\n }, [selected]);\n\n useEffect(() => {\n if (showMenu) {\n setPauseSelectedDescendantEvaluation(true);\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelected(\n tags.map(tag => {\n return { text: tag };\n })\n );\n }, [tags]);\n\n useEffect(() => {\n const menuItems = availableTags\n .filter(tag => !selected.some(x => x.text === tag))\n .map(tag => {\n return { id: tag, primary: tag };\n });\n\n if (\n filterValue &&\n !menuItems.some(x => x.id === filterValue) &&\n !selected.some(x => x.text === filterValue)\n ) {\n menuItems.push({\n id: `custom:${filterValue}`,\n primary: t('use_input_value', [filterValue])\n });\n }\n\n setItems(menuItems);\n }, [availableTags, filterValue, selected]);\n\n const setInputValue = (value: string) => {\n setEditError('');\n setFilterValue(value);\n onSearch?.(value);\n };\n\n const addTag = (tag: string) => {\n if (tag && !selected.find(x => x.text === tag)) {\n if (items.find(x => x.id === tag)) {\n setSelected(curr => [...curr, { text: tag }]);\n } else {\n setSelected(curr => [...curr, { text: tag, newTag: true }]);\n }\n setInputValue('');\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n const potentialTags = e.clipboardData.getData('Text').split(' ');\n\n potentialTags.forEach(potentialTag => {\n addTag(potentialTag);\n });\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === ' ') {\n addTag(filterValue);\n }\n };\n\n return (\n <Modal\n heading={t('edit_tags')}\n actions={\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button\n variant='primary'\n onClick={() => {\n onEditTags(selected)\n .then(dismiss)\n .catch((error: unknown) => {\n if (error instanceof Error) {\n setEditError(error.message || t('unknown_error'));\n } else {\n setEditError(t('unknown_error'));\n }\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n {editError && (\n <StyledBanner\n id='edit-tags-error'\n variant='urgent'\n messages={[editError]}\n onDismiss={() => {\n setEditError('');\n }}\n />\n )}\n <MultiSelectInput\n ref={inputRef}\n selected={selectedTagValues}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value.trim());\n }}\n onRemove={(id: string, index: number) => {\n if (selected[index].text === id) {\n const updatedSelected = [...selected];\n updatedSelected.splice(index, 1);\n setSelected(updatedSelected);\n setEditError('');\n }\n }}\n onBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n setInputValue('');\n }}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelectedBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n }}\n onSelectedFocus={() => {\n setPauseSelectedDescendantEvaluation(false);\n }}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n autoFocus\n />\n <Popover\n as={StyledMenuPopover}\n show={showMenu}\n target={inputRef.current}\n placement='bottom-start'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n <Menu\n role='listbox'\n mode='action'\n items={items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={id => {\n if (id.includes('custom:')) {\n const tagValue = id.replace('custom:', '');\n if (!selected.some(x => x.text === tagValue)) {\n setSelected(curr => [...curr, { text: tagValue, newTag: true }]);\n }\n } else {\n setSelected(curr => [...curr, { text: id }]);\n }\n setInputValue('');\n }}\n arrowNavigationUnsupported\n />\n </Popover>\n </Modal>\n );\n};\n\nconst Tags: FunctionComponent<TagsProps & ForwardProps> = forwardRef(function Tags(\n {\n tags,\n availableTags,\n loading,\n error,\n onSearch,\n onTagClick,\n onEditTags,\n ...restProps\n }: PropsWithoutRef<TagsProps>,\n ref: TagsProps['ref']\n) {\n const { create: createModal } = useModalManager();\n const editModalMethods = useRef<ModalMethods<EditTagModalProps>>();\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(containerRef, ref);\n const [footer, setFooter] = useState(false);\n const [viewAll, setViewAll] = useState(false);\n const t = useI18n();\n\n useEffect(() => {\n if (containerRef.current && contentRef.current) {\n if (\n contentRef.current.getBoundingClientRect().bottom >\n containerRef.current.getBoundingClientRect().bottom\n ) {\n setFooter(true);\n } else {\n setFooter(false);\n }\n }\n }, [containerRef.current, contentRef.current, tags]);\n\n useEffect(() => {\n if (!onEditTags) {\n editModalMethods.current?.dismiss();\n } else {\n editModalMethods.current?.update({\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n }\n }, [availableTags, tags, onSearch, onEditTags]);\n\n const openEditModal = () => {\n if (!onEditTags) return;\n\n editModalMethods.current = createModal(EditTagModal, {\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n };\n\n const content = useMemo(() => {\n if (loading) {\n return <Progress placement='local' />;\n }\n\n if (error) {\n if (typeof error === 'boolean') return <ErrorState />;\n if (typeof error === 'string') return <ErrorState message={error} />;\n return <ErrorState {...error} />;\n }\n\n return tags.length > 0 ? (\n <Flex ref={contentRef} container={{ gap: 1, wrap: 'wrap' }}>\n {tags.map(tag => {\n return (\n <Tag key={tag} onClick={() => onTagClick?.(tag)}>\n {tag}\n </Tag>\n );\n })}\n </Flex>\n ) : (\n <EmptyState />\n );\n }, [loading, error, tags]);\n\n return (\n <Card\n ref={consolidatedRef}\n {...restProps}\n as={StyledTags}\n viewAll={viewAll}\n isLoading={loading}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='tag' />\n <Text variant='h3'>{t('tags')}</Text>\n <Count>{tags.length}</Count>\n </Flex>\n <Actions\n items={\n onEditTags\n ? [\n {\n id: 'editTags',\n text: t('edit'),\n icon: 'pencil',\n onClick: openEditModal,\n disabled: !!error\n }\n ]\n : []\n }\n contextualLabel={t('tags')}\n />\n </CardHeader>\n <CardContent>{content}</CardContent>\n {footer && (\n <CardFooter justify='center'>\n <Button variant='link' onClick={() => setViewAll(curr => !curr)}>\n {viewAll ? t('view_less') : t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n});\n\nexport default Tags;\n"]}
|