@pega/cosmos-react-cs 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/components/CallControlPanel/ContactsList.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Icon, registerIcon, Text, StyledGrid, useI18n, ViewAll, StyledSummaryItemActions, StyledPrimary, StyledSecondary, useArrows, useConsolidatedRef, StyledCard } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';
-import * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';
-registerIcon(starIcon, starSolidIcon);
-const StyledContactsList = styled.div(({ theme: { base } }) => {
-    return css `
-    display: flex;
-    flex-flow: column;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    ${StyledCard} {
-      margin: 0 calc(${base.spacing} * -2);
-      padding: 0 calc(${base.spacing} * 2);
-
-      > ${StyledCardContent} {
-        padding: 0;
-        gap: 0;
-      }
-    }
-
-    li${StyledGrid} {
-      border-bottom: 0.0625rem solid ${base.palette['border-line']};
-      padding: 0;
-      > ${StyledPrimary}, > ${StyledSecondary} {
-        align-self: center;
-        font-weight: ${base['font-weight'].normal};
-      }
-    }
-    ${StyledSummaryItemActions} {
-      color: ${base.palette.interactive};
-    }
-  `;
-});
-StyledContactsList.defaultProps = defaultThemeProp;
-const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle }, ref) => {
-    const t = useI18n();
-    const [searchText, setSearchText] = useState('');
-    const containerRef = useConsolidatedRef(ref);
-    const onSearchChange = useCallback((value) => {
-        setSearchText(value.trim());
-    }, []);
-    const favoriteButton = useCallback((phoneNumber, favorite) => (_jsx(Button, { variant: 'simple', icon: true, onClick: (e) => {
-            e.stopPropagation();
-            onFavoriteToggle(phoneNumber, favorite);
-        }, "aria-label": favorite
-            ? t('call_panel_contacts_add_to_favorites')
-            : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }, void 0) }, void 0)), [onFavoriteToggle]);
-    const createList = (list) => {
-        return list.map(item => {
-            return {
-                id: item.phoneNumber,
-                primary: item.primary,
-                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }, void 0),
-                visual: favoriteButton(item.phoneNumber, item.favorite),
-                actions: [
-                    {
-                        text: action.label,
-                        id: 'primary',
-                        icon: action.icon
-                    }
-                ],
-                onClick: () => {
-                    action.callback(item.phoneNumber);
-                },
-                container: {
-                    areas: '"visual primary secondary actions"',
-                    cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'
-                },
-                tabIndex: 0
-            };
-        });
-    };
-    useArrows(containerRef, { selector: ':scope ul > li' });
-    return (_jsx(ViewAll, { as: StyledContactsList, ref: containerRef, items: searchText
-            ? createList(items.filter(({ primary, secondary }) => {
-                return (primary.toLowerCase().includes(searchText.toLowerCase()) ||
-                    secondary.toLowerCase().includes(searchText.toLowerCase()));
-            }))
-            : createList(items), searchInputProps: { onSearchChange } }, void 0));
-});
-export default ContactsList;
-//# sourceMappingURL=ContactsList.js.map

package/lib/components/CallControlPanel/ContactsList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContactsList.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Text,\n  StyledGrid,\n  useI18n,\n  ViewAll,\n  StyledSummaryItemActions,\n  StyledPrimary,\n  StyledSecondary,\n  useArrows,\n  useConsolidatedRef,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\n\nimport type { Contact } from './CallControlPanel.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface ContactsListProps {\n  /** An array of contacts objects. */\n  contacts: Contact[];\n  /**\n   * Primary action the user may select.\n   * @param phoneNumber the number chosen.\n   */\n  action: {\n    label: string;\n    icon: string;\n    callback: (phoneNumber: string) => void;\n  };\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledContactsList = styled.div(({ theme: { base } }) => {\n  return css`\n    display: flex;\n    flex-flow: column;\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    ${StyledCard} {\n      margin: 0 calc(${base.spacing} * -2);\n      padding: 0 calc(${base.spacing} * 2);\n\n      > ${StyledCardContent} {\n        padding: 0;\n        gap: 0;\n      }\n    }\n\n    li${StyledGrid} {\n      border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      padding: 0;\n      > ${StyledPrimary}, > ${StyledSecondary} {\n        align-self: center;\n        font-weight: ${base['font-weight'].normal};\n      }\n    }\n    ${StyledSummaryItemActions} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledContactsList.defaultProps = defaultThemeProp;\n\nconst ContactsList: FunctionComponent<ContactsListProps & ForwardProps> = forwardRef(\n  (\n    { contacts: items, action, onFavoriteToggle }: PropsWithoutRef<ContactsListProps>,\n    ref: ContactsListProps['ref']\n  ) => {\n    const t = useI18n();\n    const [searchText, setSearchText] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n\n    const onSearchChange = useCallback((value: string) => {\n      setSearchText(value.trim());\n    }, []);\n\n    const favoriteButton = useCallback(\n      (phoneNumber: string, favorite: boolean) => (\n        <Button\n          variant='simple'\n          icon\n          onClick={(e: MouseEvent) => {\n            e.stopPropagation();\n            onFavoriteToggle(phoneNumber, favorite);\n          }}\n          aria-label={\n            favorite\n              ? t('call_panel_contacts_add_to_favorites')\n              : t('call_panel_contacts_remove_from_favorites')\n          }\n        >\n          <Icon name={favorite ? 'star-solid' : 'star'} />\n        </Button>\n      ),\n      [onFavoriteToggle]\n    );\n\n    const createList = (list: Contact[]) => {\n      return list.map(item => {\n        return {\n          id: item.phoneNumber,\n          primary: item.primary,\n          secondary: <Text variant='secondary'>{item.secondary}</Text>,\n          visual: favoriteButton(item.phoneNumber, item.favorite),\n          actions: [\n            {\n              text: action.label,\n              id: 'primary',\n              icon: action.icon\n            }\n          ],\n          onClick: () => {\n            action.callback(item.phoneNumber);\n          },\n          container: {\n            areas: '\"visual primary secondary actions\"',\n            cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n          },\n          tabIndex: 0\n        };\n      });\n    };\n\n    useArrows(containerRef, { selector: ':scope ul > li' });\n\n    return (\n      <ViewAll\n        as={StyledContactsList}\n        ref={containerRef}\n        items={\n          searchText\n            ? createList(\n                items.filter(({ primary, secondary }) => {\n                  return (\n                    primary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    secondary.toLowerCase().includes(searchText.toLowerCase())\n                  );\n                })\n              )\n            : createList(items)\n        }\n        searchInputProps={{ onSearchChange }}\n      />\n    );\n  }\n);\n\nexport default ContactsList;\n"]}

package/lib/components/CallControlPanel/DTMFKeypad.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { OmitStrict } from '@pega/cosmos-react-core';
-import { DialPadProps } from '../DialPad/DialPad';
-export declare const StyledDTMFKeypad: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {
-    /** Callback fired on clicking close button. */
-    onClose?: () => void;
-}
-declare const DTMFKeypad: FC<DTMFKeypadProps>;
-export default DTMFKeypad;
-//# sourceMappingURL=DTMFKeypad.d.ts.map

package/lib/components/CallControlPanel/DTMFKeypad.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DTMFKeypad.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAWL,UAAU,EACX,MAAM,yBAAyB,CAAC;AAKjC,OAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI3D,eAAO,MAAM,gBAAgB,mOAc5B,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,YAAY,EAAE,MAAM,CAAC;IACvE,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAqBnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CallControlPanel/DTMFKeypad.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Card, CardHeader, Button, Icon, registerIcon, Flex, Text, useI18n, CardContent, defaultThemeProp } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import DialPad from '../DialPad/DialPad';
-registerIcon(timesIcon);
-export const StyledDTMFKeypad = styled(Card)(({ theme: { base: { spacing }, components: { card } } }) => {
-    return css `
-      min-width: 15rem;
-      ${StyledCardHeader}, ${StyledCardContent} {
-        padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);
-      }
-    `;
-});
-StyledDTMFKeypad.defaultProps = defaultThemeProp;
-const DTMFKeypad = ({ onClose, onDialButtonClick }) => {
-    const t = useI18n();
-    return (_jsxs(StyledDTMFKeypad, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }, void 0) }, void 0) }, void 0), _jsx(CardContent, { container: { itemGap: 1, justify: 'start' }, children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }, void 0) }, void 0)] }, void 0));
-};
-export default DTMFKeypad;
-//# sourceMappingURL=DTMFKeypad.js.map

package/lib/components/CallControlPanel/DTMFKeypad.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DTMFKeypad.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;QAEN,gBAAgB,KAAK,iBAAiB;+BACf,OAAO,UAAU,IAAI,CAAC,OAAO;;KAEvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOjD,MAAM,UAAU,GAAwB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,eACf,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,WAAQ,WACxD,WACI,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,WAAG,WACjD,YACG,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  Button,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  useI18n,\n  CardContent,\n  defaultThemeProp,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad, { DialPadProps } from '../DialPad/DialPad';\n\nregisterIcon(timesIcon);\n\nexport const StyledDTMFKeypad = styled(Card)(\n  ({\n    theme: {\n      base: { spacing },\n      components: { card }\n    }\n  }) => {\n    return css`\n      min-width: 15rem;\n      ${StyledCardHeader}, ${StyledCardContent} {\n        padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);\n      }\n    `;\n  }\n);\n\nStyledDTMFKeypad.defaultProps = defaultThemeProp;\n\nexport interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {\n  /** Callback fired on clicking close button. */\n  onClose?: () => void;\n}\n\nconst DTMFKeypad: FC<DTMFKeypadProps> = ({ onClose, onDialButtonClick }) => {\n  const t = useI18n();\n\n  return (\n    <StyledDTMFKeypad>\n      <CardHeader\n        actions={\n          <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n            <Icon name='times' />\n          </Button>\n        }\n      >\n        <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </Flex>\n      </CardHeader>\n      <CardContent container={{ itemGap: 1, justify: 'start' }}>\n        <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n      </CardContent>\n    </StyledDTMFKeypad>\n  );\n};\n\nexport default DTMFKeypad;\n"]}