@pega/cosmos-react-work 9.21.1 → 9.23.0

package/lib/components/Tasks/Tasks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  defaultThemeProp,\n  ListToolbar,\n  EmptyState,\n  useTestIds,\n  Avatar,\n  withTestIds,\n  Progress,\n  getActiveElement,\n  useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n  AvatarProps,\n  BaseProps,\n  ForwardProps,\n  ListToolbarProps,\n  NoChildrenProp,\n  SearchInputProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps extends BaseProps {\n  /** Unique key for this group, typically the case type class name. */\n  id: string;\n  /** Display name for the card header (localized case type label). */\n  name: string;\n  /** Optional visual element rendered before the heading (e.g. a case-type icon). */\n  visual?: ReactNode;\n  /** Assignments belonging to this group. */\n  items: TaskItemProps[];\n  /** Total count on the server (may exceed items.length before Show More). */\n  count?: number;\n  /** Marks this group as the Approvals card. Controls visual treatment. */\n  isApprovals?: boolean;\n  /** Callback when Show More is clicked for this group (e.g. to trigger a fetch). */\n  onShowMore?: () => void;\n  /** Flag while this group is loading more items. */\n  loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading text to render at the top of the list. */\n  name: ListToolbarProps['name'];\n  /** A visual to accompany the header text. */\n  avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n  /** Definition of view selection. */\n  viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n  /** Integer representing the total count of tasks. */\n  count?: number;\n  /**\n   * Whether to display the result count in the header.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Opt-in search configuration. */\n  search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n  onExpandToggle?: () => void;\n  /**\n   * Flag indicating more items are being fetched\n   * @default false\n   */\n  loadingMore?: boolean;\n  /**\n   * Whether to fit Tasks widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /**\n   * Callback invoked with the calculated item limit based on available height.\n   * Only fires when fitToParent is true.\n   */\n  onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n  | {\n      /**\n       * Rendering variant.\n       * @default 'list'\n       */\n      variant?: 'list';\n      /** An array of TaskItemProps to generate the list. */\n      items?: TaskItemProps[];\n      /** Not applicable for the list variant. */\n      groups?: never;\n    }\n  | {\n      /** Rendering variant. */\n      variant: 'cards';\n      /** Not applicable for the cards variant. */\n      items?: never;\n      /** Groups to render as cards. */\n      groups: TaskGroupProps[];\n    };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n  theme,\n  openItem,\n  fitToParent\n}) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n      `\n    : css`\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n        ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n          padding-block-end: calc(${theme.base.spacing} / 2);\n        }\n      `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n  overflow: auto;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-block-size: 0;\n  min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count,\n    showCount = true,\n    search,\n    loadingMore = false,\n    fitToParent = false,\n    onExpandToggle,\n    onItemLimitChange,\n    variant,\n    groups,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n  const progressRef = useRef<HTMLDivElement>(null);\n  const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n  const containerSize = useMonitoredSize(containerEl, 0);\n\n  const totalCount = count ?? items.length;\n  const hasMore = count !== undefined && count > items.length;\n  const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} headingTag='h2' />\n    ) : (\n      <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n    );\n  }, [items, openItem]);\n\n  useEffect(() => {\n    if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n      toggleButtonRef?.current.focus();\n    }\n  }, [loadingMore]);\n\n  // Measure available height and calculate item limit when fitToParent is enabled\n  useLayoutEffect(() => {\n    if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n    const container = containerEl;\n    const containerHeight = container.getBoundingClientRect().height;\n    if (containerHeight === 0) return;\n\n    const header = container.querySelector('header');\n    const footer = container.querySelector('footer');\n    const headerHeight = header ? header.getBoundingClientRect().height : 0;\n    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n    const listItems = container.querySelectorAll('ul > li');\n    if (listItems.length === 0) return;\n\n    const itemHeight = listItems[0].getBoundingClientRect().height;\n    if (itemHeight === 0) return;\n\n    const availableHeight = containerHeight - headerHeight - footerHeight;\n    const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n    onItemLimitChange(newLimit);\n  }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n  if (variant === 'cards' && groups !== undefined) {\n    return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n  }\n\n  return (\n    <StyledTasks\n      data-testid={testIds.root}\n      {...restProps}\n      openItem={!!openItem}\n      fitToParent={fitToParent}\n      data-app-region\n      data-focusable-form-container=''\n      ref={setContainerEl}\n    >\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {avatar && <Avatar {...avatar} />}\n          <ListToolbar\n            name={name}\n            headingTag='h2'\n            viewSelector={viewSelector}\n            count={showCount && count !== undefined ? { total: count } : undefined}\n            search={search}\n            item={{ grow: 1 }}\n          />\n        </CardHeader>\n      )}\n\n      {fitToParent ? (\n        <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n      ) : (\n        <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n      )}\n\n      <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n      {hasFooter && !loadingMore && (\n        <CardFooter justify='center'>\n          <Button\n            data-testid={testIds.showMoreLess}\n            variant='link'\n            aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!hasMore) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n            ref={toggleButtonRef}\n          >\n            {t(hasMore ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
+{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  defaultThemeProp,\n  ListToolbar,\n  EmptyState,\n  useTestIds,\n  Avatar,\n  withTestIds,\n  Progress,\n  getActiveElement,\n  useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n  AvatarProps,\n  BaseProps,\n  ForwardProps,\n  ListToolbarProps,\n  NoChildrenProp,\n  SearchInputProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps extends BaseProps {\n  /** Unique key for this group, typically the case type class name. */\n  id: string;\n  /** Display name for the card header (localized case type label). */\n  name: string;\n  /** Optional visual element rendered before the heading (e.g. a case-type icon). */\n  visual?: ReactNode;\n  /** Assignments belonging to this group. */\n  items: TaskItemProps[];\n  /** Total count on the server (may exceed items.length before Show More). */\n  count?: number;\n  /** Marks this group as the Approvals card. Controls visual treatment. */\n  isApprovals?: boolean;\n  /** Callback when Show More is clicked for this group (e.g. to trigger a fetch). */\n  onShowMore?: () => void;\n  /** Flag while this group is loading more items. */\n  loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading text to render at the top of the list. */\n  name: ListToolbarProps['name'];\n  /** A visual to accompany the header text. */\n  avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n  /** Definition of view selection. */\n  viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n  /** Integer representing the total count of tasks. */\n  count?: number;\n  /**\n   * Whether to display the result count in the header.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Opt-in search configuration. */\n  search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n  onExpandToggle?: () => void;\n  /**\n   * Flag indicating more items are being fetched\n   * @default false\n   */\n  loadingMore?: boolean;\n  /**\n   * Whether to fit Tasks widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /**\n   * Callback invoked with the calculated item limit based on available height.\n   * Only fires when fitToParent is true.\n   */\n  onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n  | {\n      /**\n       * Rendering variant.\n       * @default 'list'\n       */\n      variant?: 'list';\n      /** An array of TaskItemProps to generate the list. */\n      items?: TaskItemProps[];\n      /** Not applicable for the list variant. */\n      groups?: never;\n    }\n  | {\n      /** Rendering variant. */\n      variant: 'cards';\n      /** Not applicable for the cards variant. */\n      items?: never;\n      /** Groups to render as cards. */\n      groups: TaskGroupProps[];\n    };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n  theme,\n  openItem,\n  fitToParent\n}) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n      `\n    : css`\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n        ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n          padding-block-end: calc(${theme.base.spacing} / 2);\n        }\n      `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n  overflow: auto;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-block-size: 0;\n  min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count,\n    showCount = true,\n    search,\n    loadingMore = false,\n    fitToParent = false,\n    onExpandToggle,\n    onItemLimitChange,\n    variant,\n    groups,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n  const progressRef = useRef<HTMLDivElement>(null);\n  const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n  const containerSize = useMonitoredSize(containerEl, 0);\n\n  const totalCount = count ?? items.length;\n  const hasMore = count !== undefined && count > items.length;\n  const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} headingTag='h2' />\n    ) : (\n      <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n    );\n  }, [items, openItem]);\n\n  useEffect(() => {\n    if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n      toggleButtonRef?.current.focus();\n    }\n  }, [loadingMore]);\n\n  // Measure available height and calculate item limit when fitToParent is enabled\n  useLayoutEffect(() => {\n    if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n    const container = containerEl;\n    const containerHeight = container.getBoundingClientRect().height;\n    if (containerHeight === 0) return;\n\n    const header = container.querySelector('header');\n    const footer = container.querySelector('footer');\n    const headerHeight = header ? header.getBoundingClientRect().height : 0;\n    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n    const listItems = container.querySelectorAll('ul > li');\n    if (listItems.length === 0) return;\n\n    const itemHeight = listItems[0].getBoundingClientRect().height;\n    if (itemHeight === 0) return;\n\n    const availableHeight = containerHeight - headerHeight - footerHeight;\n    const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n    onItemLimitChange(newLimit);\n  }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n  if (variant === 'cards' && groups !== undefined) {\n    return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n  }\n\n  return (\n    <StyledTasks\n      data-testid={testIds.root}\n      {...restProps}\n      openItem={!!openItem}\n      fitToParent={fitToParent}\n      data-app-region\n      data-focusable-form-container=''\n      ref={setContainerEl}\n    >\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {avatar && <Avatar {...avatar} />}\n          <ListToolbar\n            name={name}\n            headingTag='h2'\n            viewSelector={viewSelector}\n            count={showCount && count !== undefined ? { total: count } : undefined}\n            search={search}\n            item={{ grow: 1 }}\n          />\n        </CardHeader>\n      )}\n\n      {fitToParent ? (\n        <StyledCardContent>\n          {items.length > 0 ? TaskItems : !loadingMore && <EmptyState />}\n        </StyledCardContent>\n      ) : (\n        <CardContent>{items.length > 0 ? TaskItems : !loadingMore && <EmptyState />}</CardContent>\n      )}\n\n      <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n      {hasFooter && !loadingMore && (\n        <CardFooter justify='center'>\n          <Button\n            data-testid={testIds.showMoreLess}\n            variant='link'\n            aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!hasMore) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n            ref={toggleButtonRef}\n          >\n            {t(hasMore ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.21.1",
+  "version": "9.23.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.21.1",
-    "@pega/cosmos-react-rte": "9.21.1",
+    "@pega/cosmos-react-core": "9.23.0",
+    "@pega/cosmos-react-rte": "9.23.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",