@pega/cosmos-react-cs 2.0.0-dev.13.0 → 2.0.0-dev.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/CallControlPanel/CallControlPanelIcon.js +1 -1
- package/lib/components/CallControlPanel/CallControlPanelIcon.js.map +1 -1
- package/lib/components/CallControlPanel/StopWatch.d.ts +1 -1
- package/lib/components/CallControlPanel/StopWatch.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.d.ts +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.d.ts.map +1 -1
- package/lib/components/TaskManager/Picker/Picker.d.ts.map +1 -1
- package/lib/components/TaskManager/Picker/Picker.js +6 -1
- package/lib/components/TaskManager/Picker/Picker.js.map +1 -1
- package/package.json +3 -3
|
@@ -52,7 +52,7 @@ export const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
|
|
|
52
52
|
z-index: 1;
|
|
53
53
|
width: 0.875rem;
|
|
54
54
|
height: 0.875rem;
|
|
55
|
-
fill: ${p => p.theme.base.colors.gray.
|
|
55
|
+
fill: ${p => p.theme.base.colors.gray.medium};
|
|
56
56
|
}
|
|
57
57
|
`;
|
|
58
58
|
StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,gBAAgB,EAEhB,IAAI,EAGJ,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAkBjC,MAAM,YAAY,GAAyE;IACzF,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,cAAc;IACpB,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF,MAAM,WAAW,GAA0D;IACzE,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;IACb,aAAa,EAAE,OAAO;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACjC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAGtE,CAAC;IACF,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;;;;;;;;;;IAUjD,UAAU;;;;;CAKb,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;MAC5D,UAAU;;;;;;;YAOJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' | 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames | undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n title={label}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
|
|
@@ -3,7 +3,7 @@ interface StopWatchProps {
|
|
|
3
3
|
startTime: number | Date;
|
|
4
4
|
timeout?: number | Date;
|
|
5
5
|
}
|
|
6
|
-
export declare const StyledStopWatch: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme,
|
|
6
|
+
export declare const StyledStopWatch: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<import("@pega/cosmos-react-core").TextProps, "variant"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>;
|
|
7
7
|
declare const StopWatch: FunctionComponent<StopWatchProps>;
|
|
8
8
|
export default StopWatch;
|
|
9
9
|
//# sourceMappingURL=StopWatch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StopWatch.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAOzE,UAAU,cAAc;IACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"StopWatch.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAOzE,UAAU,cAAc;IACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,qRAG3B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAwBhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -58,7 +58,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
|
|
|
58
58
|
|
|
59
59
|
${StyledCardFooter} {
|
|
60
60
|
${StyledFieldValueList} {
|
|
61
|
-
border-top: solid 0.0625rem ${base.colors.gray.
|
|
61
|
+
border-top: solid 0.0625rem ${base.colors.gray.medium};
|
|
62
62
|
padding-top: calc(2 * ${base.spacing});
|
|
63
63
|
color: ${base.colors.white};
|
|
64
64
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,IAAI,EACJ,WAAW,EAGX,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,MAAM,EACN,cAAc,EACd,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAEP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAqB1F,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;;;;eAKG,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;aACvB,IAAI,CAAC,MAAM,CAAC,KAAK;kCACI,IAAI,CAAC,SAAS,CAAC,KAAK;2BAC3B,IAAI,CAAC,OAAO;;;0BAGb,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;;;UAK/C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;;;;;;;MAQP,gBAAgB;QACd,YAAY;wCACoB,IAAI,CAAC,OAAO;;;;MAI9C,iBAAiB;yBACE,IAAI,CAAC,OAAO;;QAE7B,UAAU;iBACD,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;;MAS5B,gBAAgB;QACd,oBAAoB;sCACU,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n SummaryItem,\n StatusProps,\n ForwardProps,\n defaultThemeProp,\n Flex,\n StyledText,\n Avatar,\n FieldValueList,\n StyledFieldName,\n CardFooter,\n StyledFieldValueList,\n StyledButton,\n useI18n,\n FieldValueListProps,\n useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Primary information of the notification. For example caller name . */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller */\n secondaryText?: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Callback when accept button is clicked. */\n onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-inline-end: 1rem;\n inset-block-start: 4rem;\n width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n z-index: ${base['z-index'].modal};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n\n &:not(& &) {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardHeader} {\n ${StyledButton} {\n margin-inline-start: calc(2 * ${base.spacing});\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledCardFooter} {\n ${StyledFieldValueList} {\n border-top: solid 0.0625rem ${base.colors.gray.medium};\n padding-top: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledFieldName} {\n color: ${base.colors.white};\n }\n }\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(\n (\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n onAccept\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) => {\n const t = useI18n();\n\n return (\n <StyledInteractionNotification ref={ref}>\n <CardHeader\n actions={\n <Button variant='primary' onClick={onAccept}>\n {t('accept')}\n </Button>\n }\n >\n <SummaryItem\n visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n primary={title}\n />\n </CardHeader>\n <CardContent>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1'>{primaryText}</Text>\n {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n </CardContent>\n {fields && fields.length !== 0 && (\n <CardFooter>\n <FieldValueList variant='inline' fields={fields} />\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n }\n );\n\nexport default InteractionNotification;\n"]}
|
|
@@ -25,7 +25,7 @@ export interface InteractionTimerProps extends BaseProps, AsProp {
|
|
|
25
25
|
export declare const StyledInteractionTimerIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
26
26
|
export declare const StyledInteractionTimerIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
|
|
27
27
|
export declare const StyledInteractionTimerMetaText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
28
|
-
export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme,
|
|
28
|
+
export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<InteractionTimerProps, "sla"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
|
|
29
29
|
declare const InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps>;
|
|
30
30
|
export default InteractionTimer;
|
|
31
31
|
//# sourceMappingURL=InteractionTimer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM;IAC9D,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM;IAC9D,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOA2DlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,EASb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAiI5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,
|
|
1
|
+
{"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,EASb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAiI5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+KzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -134,11 +134,16 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
|
|
|
134
134
|
}
|
|
135
135
|
else {
|
|
136
136
|
setSelections(cur => {
|
|
137
|
+
let secondary;
|
|
138
|
+
if (parentItem)
|
|
139
|
+
secondary = menuHelpers.isItem(parentItem)
|
|
140
|
+
? parentItem.primary
|
|
141
|
+
: parentItem.label;
|
|
137
142
|
return [
|
|
138
143
|
...cur,
|
|
139
144
|
{
|
|
140
145
|
...clickedItem,
|
|
141
|
-
secondary
|
|
146
|
+
secondary,
|
|
142
147
|
onRemoveItem: removeTasks
|
|
143
148
|
}
|
|
144
149
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Menu,\n menuHelpers,\n EmptyState,\n SearchInput,\n SummaryItem,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';\nimport { ItemRendererProps } from '@pega/cosmos-react-dnd/lib/components/DragDrop/DragDrop.types';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nconst StyledPickerHeader = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(2 * ${theme.base.spacing});\n `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nconst StyledAddTasks = styled.div(({ theme }) => {\n return css`\n /* temporary remove height once list is replaced with flat list */\n height: calc(45 * 0.5rem);\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n header {\n padding-top: 0;\n border-bottom: none;\n }\n `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nconst StyledSelectedTasks = styled.div(({ theme }) => {\n return css`\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n > h3 {\n padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n }\n `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} 0;\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledPickerFooter = styled.div(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing};\n `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nconst StyledDDList = styled.ul`\n height: 20rem;\n overflow-y: auto;\n`;\n\nconst StyledPicker = styled.div`\n height: 100%;\n`;\n\nconst StyledDragHandle = styled.div`\n cursor: move;\n > svg {\n display: block;\n }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n dragRef,\n previewRef,\n data\n}: ItemRendererProps<SelectedItemProps>) => {\n const t = useI18n();\n return (\n <StyledSummaryItem\n ref={previewRef}\n visual={\n <StyledDragHandle ref={dragRef}>\n <Icon name='drag' />\n </StyledDragHandle>\n }\n primary={data?.primary}\n secondary={data?.secondary}\n actions={\n <Button\n variant='simple'\n icon\n label={t('task_manager_delete_task')}\n onClick={() => data?.onRemoveItem(data.id)}\n >\n <Icon name='trash' />\n </Button>\n }\n />\n );\n};\n\nconst DraggableSelectedList = ({\n selectedItems,\n onChange,\n itemRenderer\n}: DraggableSelectedListProps) => {\n return (\n <DragDropManager>\n <DragDropList\n as={StyledDDList}\n accept='string'\n items={selectedItems.map(item => ({\n id: item.id,\n type: 'string',\n data: item\n }))}\n itemRenderer={itemRenderer}\n onChange={onChange}\n />\n </DragDropManager>\n );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n const [searchInput, setSearchInput] = useState('');\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') onCancel?.();\n },\n [onCancel]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers\n .flatten(initialItems)\n .filter(({ primary, items: childItems }: MenuItemProps) => {\n return filterRegex.test(primary) && !childItems?.length;\n })\n : initialItems,\n item => {\n let selectable = false;\n if (!item.items) {\n selectable = true;\n }\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, initialItems, filterRegex]);\n\n const removeTasks = useCallback((uid: string) => {\n setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n }, []);\n\n return (\n <Flex as={StyledPicker} container={{ direction: 'column' }} ref={ref} id={id}>\n <Flex\n as={StyledPickerHeader}\n container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n >\n <Text variant='h3'>{t('add_tasks')}</Text>\n <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex container>\n <Flex as={StyledAddTasks}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n const parentItem = menuHelpers.getParentItem(renderItems, uid);\n if (clickedItem) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => {\n return [\n ...cur,\n {\n ...clickedItem,\n secondary: parentItem?.primary && [parentItem?.primary],\n onRemoveItem: removeTasks\n } as SelectedItemProps\n ];\n });\n }\n setSearchInput('');\n }\n }}\n focusControlEl={searchEleRef.current || undefined}\n emptyText={emptyText || t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode='multi-select'\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <SearchInput\n ref={searchEleRef}\n value={searchInput}\n onSearchChange={setSearchInput}\n placeholder={placeholder || t('search_placeholder_default')}\n autoFocus\n />\n </Flex>\n }\n />\n </Flex>\n <Flex as={StyledSelectedTasks} container={{ direction: 'column' }}>\n <Text variant='h3'>{t('selected_tasks')}</Text>\n\n {selections.length > 0 ? (\n <DraggableSelectedList\n selectedItems={selections}\n onChange={newItems => {\n setSelections(\n newItems.map(({ type, data }) => ({\n ...data,\n type\n })) as SelectedItemProps[]\n );\n }}\n itemRenderer={SelectedItemRenderer}\n />\n ) : (\n <EmptyState message={t('no_selected_tasks')} />\n )}\n </Flex>\n </Flex>\n <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', selections?.length)}\n >\n {t('add')}\n {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n </Button>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Picker;\n"]}
|
|
1
|
+
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Menu,\n menuHelpers,\n EmptyState,\n SearchInput,\n SummaryItem,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';\nimport { ItemRendererProps } from '@pega/cosmos-react-dnd/lib/components/DragDrop/DragDrop.types';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nconst StyledPickerHeader = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(2 * ${theme.base.spacing});\n `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nconst StyledAddTasks = styled.div(({ theme }) => {\n return css`\n /* temporary remove height once list is replaced with flat list */\n height: calc(45 * 0.5rem);\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n header {\n padding-top: 0;\n border-bottom: none;\n }\n `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nconst StyledSelectedTasks = styled.div(({ theme }) => {\n return css`\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n > h3 {\n padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n }\n `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} 0;\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledPickerFooter = styled.div(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing};\n `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nconst StyledDDList = styled.ul`\n height: 20rem;\n overflow-y: auto;\n`;\n\nconst StyledPicker = styled.div`\n height: 100%;\n`;\n\nconst StyledDragHandle = styled.div`\n cursor: move;\n > svg {\n display: block;\n }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n dragRef,\n previewRef,\n data\n}: ItemRendererProps<SelectedItemProps>) => {\n const t = useI18n();\n return (\n <StyledSummaryItem\n ref={previewRef}\n visual={\n <StyledDragHandle ref={dragRef}>\n <Icon name='drag' />\n </StyledDragHandle>\n }\n primary={data?.primary}\n secondary={data?.secondary}\n actions={\n <Button\n variant='simple'\n icon\n label={t('task_manager_delete_task')}\n onClick={() => data?.onRemoveItem(data.id)}\n >\n <Icon name='trash' />\n </Button>\n }\n />\n );\n};\n\nconst DraggableSelectedList = ({\n selectedItems,\n onChange,\n itemRenderer\n}: DraggableSelectedListProps) => {\n return (\n <DragDropManager>\n <DragDropList\n as={StyledDDList}\n accept='string'\n items={selectedItems.map(item => ({\n id: item.id,\n type: 'string',\n data: item\n }))}\n itemRenderer={itemRenderer}\n onChange={onChange}\n />\n </DragDropManager>\n );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n const [searchInput, setSearchInput] = useState('');\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') onCancel?.();\n },\n [onCancel]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers\n .flatten(initialItems)\n .filter(({ primary, items: childItems }: MenuItemProps) => {\n return filterRegex.test(primary) && !childItems?.length;\n })\n : initialItems,\n item => {\n let selectable = false;\n if (!item.items) {\n selectable = true;\n }\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, initialItems, filterRegex]);\n\n const removeTasks = useCallback((uid: string) => {\n setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n }, []);\n\n return (\n <Flex as={StyledPicker} container={{ direction: 'column' }} ref={ref} id={id}>\n <Flex\n as={StyledPickerHeader}\n container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n >\n <Text variant='h3'>{t('add_tasks')}</Text>\n <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex container>\n <Flex as={StyledAddTasks}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n const parentItem = menuHelpers.getParentItem(renderItems, uid);\n if (clickedItem) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => {\n let secondary;\n if (parentItem)\n secondary = menuHelpers.isItem(parentItem)\n ? parentItem.primary\n : parentItem.label;\n return [\n ...cur,\n {\n ...clickedItem,\n secondary,\n onRemoveItem: removeTasks\n } as SelectedItemProps\n ];\n });\n }\n setSearchInput('');\n }\n }}\n focusControlEl={searchEleRef.current || undefined}\n emptyText={emptyText || t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode='multi-select'\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <SearchInput\n ref={searchEleRef}\n value={searchInput}\n onSearchChange={setSearchInput}\n placeholder={placeholder || t('search_placeholder_default')}\n autoFocus\n />\n </Flex>\n }\n />\n </Flex>\n <Flex as={StyledSelectedTasks} container={{ direction: 'column' }}>\n <Text variant='h3'>{t('selected_tasks')}</Text>\n\n {selections.length > 0 ? (\n <DraggableSelectedList\n selectedItems={selections}\n onChange={newItems => {\n setSelections(\n newItems.map(({ type, data }) => ({\n ...data,\n type\n })) as SelectedItemProps[]\n );\n }}\n itemRenderer={SelectedItemRenderer}\n />\n ) : (\n <EmptyState message={t('no_selected_tasks')} />\n )}\n </Flex>\n </Flex>\n <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', selections?.length)}\n >\n {t('add')}\n {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n </Button>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Picker;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "2.0.0-dev.
|
|
3
|
+
"version": "2.0.0-dev.14.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "2.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "2.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "2.0.0-dev.14.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.0.0-dev.14.0",
|
|
25
25
|
"polished": "^4.1.0",
|
|
26
26
|
"react": "^16.14.0 || ^17.0.0",
|
|
27
27
|
"react-dom": "^16.14.0 || ^17.0.0",
|