@pega/cosmos-react-cs 9.19.0 → 9.21.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.
Files changed (3) hide show
  1. package/lib/components/CallControlPanel/ContactList/ContactList.js +1 -1
  2. package/lib/components/CallControlPanel/ContactList/ContactList.js.map +1 -1
  3. package/package.json +3 -3
package/lib/components/CallControlPanel/ContactList/ContactList.js CHANGED
@@ -89,7 +89,7 @@ const ContactList = forwardRef(function ContactList({ contacts: items, onItemCli
89
89
  onFavoriteToggle(phoneNumber, favorite);
90
90
  }, "aria-label": favorite
91
91
  ? t('call_panel_contacts_add_to_favorites')
92
- : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }) })), [onFavoriteToggle]);
92
+ : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star', emphasized: favorite }) })), [onFavoriteToggle]);
93
93
  const createList = (list) => {
94
94
  return list.map(item => {
95
95
  const commonOpts = {
package/lib/components/CallControlPanel/ContactList/ContactList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useCallback, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Icon,\n registerIcon,\n Text,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard,\n RadioButton,\n SummaryItem,\n StyledSummaryItem,\n StyledLabel\n} from '@pega/cosmos-react-core';\nimport type { RadioButtonProps, SummaryItemProps } 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';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\nimport type { BareRoleButtonProps } from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n\n ul {\n list-style: none;\n }\n\n ${StyledRadioCheckCard} {\n background-color: transparent;\n border: 0;\n padding: 0 calc(0.5 * ${base.spacing});\n height: ${components.button.height};\n align-items: center;\n border-radius: 0;\n\n > ${StyledLabel} {\n max-width: 100%;\n width: 100%;\n margin: 0;\n }\n }\n\n li {\n padding: 0;\n height: calc(${components.button.height} + 0.125rem);\n\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n }\n }\n\n ${StyledSummaryItem} {\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n\n @media (pointer: 'coarse') {\n li {\n height: ${components.button.touch.height};\n }\n }\n `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n contacts: Contact[];\n onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n id,\n primary,\n secondary,\n checked,\n container,\n onChange\n}: SummaryItemProps & RadioButtonProps) => {\n return (\n <li key={id}>\n <RadioButton\n variant='card'\n label={\n <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n }\n checked={checked}\n onChange={onChange}\n name={`${id}-contact`}\n />\n </li>\n );\n};\n\nconst CallableContactItem = ({\n visual,\n primary,\n secondary,\n onClick,\n container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n return (\n <li>\n <BareRoleButton onClick={onClick}>\n <SummaryItem\n visual={visual}\n primary={primary}\n secondary={secondary}\n container={container}\n actions={<Icon name='phone-solid' />}\n />\n </BareRoleButton>\n </li>\n );\n};\n\nconst ContactList = forwardRef(function ContactList(\n { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n ref: ContactListProps['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: SelectableContact[]) => {\n return list.map(item => {\n const commonOpts = {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n }\n };\n return variant === 'select'\n ? {\n ...commonOpts,\n as: SelectableContactItem,\n checked: item.selected,\n onChange: () => onItemClick(item.phoneNumber)\n }\n : {\n ...commonOpts,\n as: CallableContactItem,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n onClick: () => onItemClick(item.phoneNumber)\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n return (\n <ViewAll\n as={StyledContactList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ phoneNumber, primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) ||\n secondary.toLowerCase().includes(searchText.toLowerCase()) ||\n phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n});\n\nexport default ContactList;\n"]}
1
+ {"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useCallback, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Icon,\n registerIcon,\n Text,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard,\n RadioButton,\n SummaryItem,\n StyledSummaryItem,\n StyledLabel\n} from '@pega/cosmos-react-core';\nimport type { RadioButtonProps, SummaryItemProps } 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';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\nimport type { BareRoleButtonProps } from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n\n ul {\n list-style: none;\n }\n\n ${StyledRadioCheckCard} {\n background-color: transparent;\n border: 0;\n padding: 0 calc(0.5 * ${base.spacing});\n height: ${components.button.height};\n align-items: center;\n border-radius: 0;\n\n > ${StyledLabel} {\n max-width: 100%;\n width: 100%;\n margin: 0;\n }\n }\n\n li {\n padding: 0;\n height: calc(${components.button.height} + 0.125rem);\n\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n }\n }\n\n ${StyledSummaryItem} {\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n\n @media (pointer: 'coarse') {\n li {\n height: ${components.button.touch.height};\n }\n }\n `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n contacts: Contact[];\n onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n id,\n primary,\n secondary,\n checked,\n container,\n onChange\n}: SummaryItemProps & RadioButtonProps) => {\n return (\n <li key={id}>\n <RadioButton\n variant='card'\n label={\n <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n }\n checked={checked}\n onChange={onChange}\n name={`${id}-contact`}\n />\n </li>\n );\n};\n\nconst CallableContactItem = ({\n visual,\n primary,\n secondary,\n onClick,\n container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n return (\n <li>\n <BareRoleButton onClick={onClick}>\n <SummaryItem\n visual={visual}\n primary={primary}\n secondary={secondary}\n container={container}\n actions={<Icon name='phone-solid' />}\n />\n </BareRoleButton>\n </li>\n );\n};\n\nconst ContactList = forwardRef(function ContactList(\n { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n ref: ContactListProps['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'} emphasized={favorite} />\n </Button>\n ),\n [onFavoriteToggle]\n );\n\n const createList = (list: SelectableContact[]) => {\n return list.map(item => {\n const commonOpts = {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n }\n };\n return variant === 'select'\n ? {\n ...commonOpts,\n as: SelectableContactItem,\n checked: item.selected,\n onChange: () => onItemClick(item.phoneNumber)\n }\n : {\n ...commonOpts,\n as: CallableContactItem,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n onClick: () => onItemClick(item.phoneNumber)\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n return (\n <ViewAll\n as={StyledContactList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ phoneNumber, primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) ||\n secondary.toLowerCase().includes(searchText.toLowerCase()) ||\n phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n});\n\nexport default ContactList;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-cs",
3
- "version": "9.19.0",
3
+ "version": "9.21.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": false,
@@ -14,8 +14,8 @@
14
14
  "build": "tsc -b tsconfig.build.json"
15
15
  },
16
16
  "dependencies": {
17
- "@pega/cosmos-react-core": "9.19.0",
18
- "@pega/cosmos-react-dnd": "9.19.0",
17
+ "@pega/cosmos-react-core": "9.21.0",
18
+ "@pega/cosmos-react-dnd": "9.21.0",
19
19
  "@types/react": "^17.0.62 || ^18.3.3",
20
20
  "@types/react-dom": "^17.0.20 || ^18.3.0",
21
21
  "polished": "^4.1.0",