@pega/cosmos-react-social 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/lib/components/Chat/RepeatingView.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, Progress, useItemIntersection, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledRepeatingViewItem = styled.li(({ theme }) => {
-    return css `
-    outline: none;
-    &:focus {
-      box-shadow: ${theme.base.shadow.focus};
-    }
-  `;
-});
-StyledRepeatingViewItem.defaultProps = defaultThemeProp;
-export const StyledRepeatingViewUL = styled.ul `
-  list-style-type: none;
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
-`;
-export const StyledRepeatingView = styled.div `
-  position: relative;
-`;
-export const StyledEmptyView = styled.div `
-  position: absolute;
-  bottom: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-`;
-const RepeatingView = forwardRef((props, ref) => {
-    const { children: renderer, offset = -1, loadMore, loading: isLoading = false, rows = [], emptyView, scrollDirection = 'top-to-bottom', ...restProps } = props;
-    const listRef = useConsolidatedRef(ref);
-    useItemIntersection(listRef, offset, () => {
-        loadMore?.();
-    }, ':scope > li');
-    return (_jsxs(Flex, { container: {
-            alignItems: 'center',
-            justify: 'center'
-        }, as: StyledRepeatingView, ...restProps, children: [_jsxs(Flex, { ...restProps, container: {
-                    direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'
-                }, as: StyledRepeatingViewUL, ref: listRef, children: [rows.map(row => {
-                        const { ariaLabel, ...rowRestProps } = row;
-                        return (_jsx(StyledRepeatingViewItem, { "aria-label": ariaLabel, children: renderer(rowRestProps) }, row.id));
-                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }) }, 'loader'))] }), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }))] }));
-});
-export default RepeatingView;
-//# sourceMappingURL=RepeatingView.js.map

package/lib/components/Chat/RepeatingView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,YAC3C,QAAQ,CAAC,YAAY,CAAC,IAD4B,GAAG,CAAC,EAAE,CAEjC,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,IADJ,QAAQ,CAEX,CAC3B,IACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,GAAmB,CAC/C,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Progress,\n  useItemIntersection,\n  useConsolidatedRef,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n  id: string | number;\n  ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n  /** ref to the list element */\n  ref?: Ref<HTMLUListElement>;\n  /** Callback to render the view */\n  children: (row: RepeatingViewRow) => ReactNode;\n  /** Data rows */\n  rows?: RepeatingViewRow[];\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** UI that needs to be shown when list is empty */\n  emptyView?: ReactNode;\n  /** Scroll direction */\n  scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n  return css`\n    outline: none;\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n  list-style-type: none;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n  position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n    const {\n      children: renderer,\n      offset = -1,\n      loadMore,\n      loading: isLoading = false,\n      rows = [],\n      emptyView,\n      scrollDirection = 'top-to-bottom',\n      ...restProps\n    } = props;\n\n    const listRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      listRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > li'\n    );\n\n    return (\n      <Flex\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        as={StyledRepeatingView}\n        {...restProps}\n      >\n        <Flex\n          {...restProps}\n          container={{\n            direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n          }}\n          as={StyledRepeatingViewUL}\n          ref={listRef}\n        >\n          {rows.map(row => {\n            const { ariaLabel, ...rowRestProps } = row;\n            return (\n              <StyledRepeatingViewItem aria-label={ariaLabel} key={row.id}>\n                {renderer(rowRestProps)}\n              </StyledRepeatingViewItem>\n            );\n          })}\n          {isLoading && (\n            <StyledRepeatingViewItem key='loader'>\n              <Progress placement='inline' />\n            </StyledRepeatingViewItem>\n          )}\n        </Flex>\n        {!isLoading && rows.length === 0 && emptyView && (\n          <StyledEmptyView>{emptyView}</StyledEmptyView>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default RepeatingView;\n"]}

package/lib/components/Chat/TranscriptMessage.d.ts

@@ -1,25 +0,0 @@
-import { FunctionComponent, Ref, ReactNode } from 'react';
-import { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';
-export declare type TranscriptHeaderProps = {
-    /** transcript header content */
-    content?: ReactNode;
-    /** meta data */
-    meta?: ReactNode;
-};
-export interface TranscriptMessageProps {
-    /** ref to the element */
-    ref?: Ref<HTMLDivElement>;
-    /** Timestamp */
-    timeStamp: string;
-    /** Transcript content */
-    message: ReactNode;
-    /** Variant of transcript item */
-    variant: 'user' | 'bot' | 'question';
-    /** Avatar information, can be image and name */
-    avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;
-    /** Transcript header */
-    transcriptHeader?: TranscriptHeaderProps;
-}
-declare const TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps>;
-export default TranscriptMessage;
-//# sourceMappingURL=TranscriptMessage.d.ts.map

package/lib/components/Chat/TranscriptMessage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TranscriptMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAG/F,OAAO,EAIL,WAAW,EAIX,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,qBAAqB,GAAG;IAClC,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gBAAgB;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACrC,gDAAgD;IAChD,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACpD,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CAC1C;AAkDD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAwD/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Chat/TranscriptMessage.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, Text, Icon, Avatar, EmojiDisplay, defaultThemeProp, Tooltip } from '@pega/cosmos-react-core';
-const iconMapping = {
-    user: 'user-solid',
-    bot: 'robot-solid',
-    question: 'help'
-};
-const StyledTranscriptIcon = styled.svg ``;
-const StyledTranscriptTimeStamp = styled.span ``;
-const StyledTranscriptHeader = styled.header ``;
-const StyledTranscriptHeaderContent = styled.span ``;
-const StyledTranscriptMessage = styled.div(({ theme: { components: { chat: { transcript: { message: { 'icon-foreground-color': iconForegroundColor } } } } } }) => {
-    return css `
-      width: 100%;
-      line-height: 1rem;
-      padding: 0 0 0.25rem;
-      ${StyledTranscriptIcon} {
-        color: ${iconForegroundColor};
-        flex-shrink: 0;
-      }
-      ${StyledTranscriptTimeStamp} {
-        flex-shrink: 0;
-      }
-      ${StyledTranscriptHeader} {
-        margin-bottom: 0.25rem;
-      }
-      ${StyledTranscriptHeaderContent} {
-        margin-right: 0.5rem;
-      }
-    `;
-});
-StyledTranscriptMessage.defaultProps = defaultThemeProp;
-const TranscriptMessage = forwardRef((props, ref) => {
-    const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;
-    const avatarRef = useRef(null);
-    return (_jsxs(Flex, { container: {
-            gap: 2,
-            alignItems: 'start'
-        }, item: {
-            shrink: 0
-        }, ref: ref, as: StyledTranscriptMessage, ...restProps, children: [_jsx(Text, { as: StyledTranscriptTimeStamp, variant: 'secondary', children: timeStamp }), avatarInfo ? (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: avatarInfo.name, size: 's', shape: 'circle', imageSrc: avatarInfo.imageSrc, ref: avatarRef }), _jsx(Tooltip, { target: avatarRef.current, showDelay: 'none', hideDelay: 'none', children: avatarInfo.name })] })) : (_jsx(Icon, { as: StyledTranscriptIcon, name: iconMapping[variant] })), _jsxs(Flex, { item: {
-                    grow: 1
-                }, children: [transcriptHeader && transcriptHeader.content && (_jsxs(StyledTranscriptHeader, { children: [_jsx(StyledTranscriptHeaderContent, { children: transcriptHeader.content }), transcriptHeader.meta] })), _jsx(EmojiDisplay, { content: message, size: 20 })] })] }));
-});
-export default TranscriptMessage;
-//# sourceMappingURL=TranscriptMessage.js.map

package/lib/components/Chat/TranscriptMessage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TranscriptMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Text,\n  Icon,\n  AvatarProps,\n  Avatar,\n  EmojiDisplay,\n  defaultThemeProp,\n  ForwardProps,\n  Tooltip\n} from '@pega/cosmos-react-core';\n\nexport type TranscriptHeaderProps = {\n  /** transcript header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface TranscriptMessageProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Timestamp */\n  timeStamp: string;\n  /** Transcript content */\n  message: ReactNode;\n  /** Variant of transcript item */\n  variant: 'user' | 'bot' | 'question';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Transcript header */\n  transcriptHeader?: TranscriptHeaderProps;\n}\n\nconst iconMapping = {\n  user: 'user-solid',\n  bot: 'robot-solid',\n  question: 'help'\n};\n\nconst StyledTranscriptIcon = styled.svg``;\n\nconst StyledTranscriptTimeStamp = styled.span``;\n\nconst StyledTranscriptHeader = styled.header``;\n\nconst StyledTranscriptHeaderContent = styled.span``;\n\nconst StyledTranscriptMessage = styled.div(\n  ({\n    theme: {\n      components: {\n        chat: {\n          transcript: {\n            message: { 'icon-foreground-color': iconForegroundColor }\n          }\n        }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      line-height: 1rem;\n      padding: 0 0 0.25rem;\n      ${StyledTranscriptIcon} {\n        color: ${iconForegroundColor};\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptTimeStamp} {\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptHeader} {\n        margin-bottom: 0.25rem;\n      }\n      ${StyledTranscriptHeaderContent} {\n        margin-right: 0.5rem;\n      }\n    `;\n  }\n);\nStyledTranscriptMessage.defaultProps = defaultThemeProp;\n\nconst TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TranscriptMessageProps>, ref: TranscriptMessageProps['ref']) => {\n    const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;\n\n    const avatarRef = useRef<HTMLDivElement | HTMLImageElement>(null);\n\n    return (\n      <Flex\n        container={{\n          gap: 2,\n          alignItems: 'start'\n        }}\n        item={{\n          shrink: 0\n        }}\n        ref={ref}\n        as={StyledTranscriptMessage}\n        {...restProps}\n      >\n        <Text as={StyledTranscriptTimeStamp} variant='secondary'>\n          {timeStamp}\n        </Text>\n        {avatarInfo ? (\n          <>\n            <Avatar\n              name={avatarInfo.name}\n              size='s'\n              shape='circle'\n              imageSrc={avatarInfo.imageSrc}\n              ref={avatarRef}\n            />\n            <Tooltip target={avatarRef.current} showDelay='none' hideDelay='none'>\n              {avatarInfo.name}\n            </Tooltip>\n          </>\n        ) : (\n          <Icon as={StyledTranscriptIcon} name={iconMapping[variant]} />\n        )}\n        <Flex\n          item={{\n            grow: 1\n          }}\n        >\n          {transcriptHeader && transcriptHeader.content && (\n            <StyledTranscriptHeader>\n              <StyledTranscriptHeaderContent>\n                {transcriptHeader.content}\n              </StyledTranscriptHeaderContent>\n              {transcriptHeader.meta}\n            </StyledTranscriptHeader>\n          )}\n          <EmojiDisplay content={message} size={20} />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default TranscriptMessage;\n"]}