@pega/cosmos-react-cs 3.0.0-dev.22.0 → 3.0.0-dev.23.2

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' }) })), [onFavoriteToggle]);
-    const createList = (list) => {
-        return list.map(item => {
-            return {
-                id: item.phoneNumber,
-                primary: item.primary,
-                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }),
-                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 } }));
-});
-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"]}