@pega/cosmos-react-build 3.0.0-dev.6.0 → 3.0.0-dev.9.0

package/lib/components/LifeCycle/Category.js.map

@@ -1 +1 @@
-{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAO,QAAQ,EAA+B,MAAM,OAAO,CAAC;AAClG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,IAAmB,MAAM,QAAQ,CAAC;AAwBzC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACvF,OAAO,GAAG,CAAA;MACN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;cACS,KAAK,CAAC,IAAI,CAAC,OAAO;GAC7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CACjC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;4BACc,KAAK,CAAC,IAAI,CAAC,OAAO;mCACX,KAAK,CAAC,IAAI,CAAC,OAAO;QAC7C,QAAQ,EAAE,SAAS,KAAK,EAAE;QAC5B,gBAAgB,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;GACrE;KACE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;;;uCAM2B,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;;;;;;;;;;;;oBAY9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;mBAC/B,KAAK,CAAC,IAAI,CAAC,OAAO;mCACF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;eAC/C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;oBAEQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;kCAC5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;0BAGnC,KAAK,CAAC,IAAI,CAAC,OAAO,iBAAiB,KAAK,CAAC,IAAI,CAAC,OAAO;;6BAElD,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EACE,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,IAAI,iBAAiB,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,IAAI,EAAE,OAAO,EAAE,QAAQ,IAAI,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE;QACxD,iBAAiB,GAAG,KAAK,CAAC;KAC3B;IACD,4CAA4C;IAC5C,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,MAAM,KAAK,GAAyB;YAClC,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS;SACjB,CAAC;QACF,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,8BACG,QAAQ,EAAE,KAAK,IAAI,CAClB,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,YACrE,QAAQ,EAAE,KAAK,GACD,CAClB,EACD,MAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,EAAE,EAAE,aACH,IAAI,EAAE,UAAU,aAExB,IAAI;wBACH,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;wBACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAyC,EAAE,KAAa,EAAE,EAAE;4BAC1E,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gCAC3B,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;oCAC1E,iBAAiB,GAAG,KAAK,CAAC;iCAC3B;gCACD,4HAA4H;gCAC5H,MAAM,kBAAkB,GAAG,SAAS,EAAE,CAAC;gCACvC,OAAO,CACL,MAAC,QAAQ,eACN,KAAK,KAAK,CAAC,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAC7D,yBAAO,CAAC,CAAC,UAAU,CAAC,GAAQ,GACvB,CACR,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,YAA2B,EAAE,EAAE;4CAC5C,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,YAAY,CAAC,EAAE,EACnB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,YAAY,CAAC,MAAM,EAC3B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,YAAY,CAAC,KAAK,KACrB,IAAI,KACJ,SAAS,IATR,YAAY,CAAC,EAAE,CAUpB,CACH,CAAC;wCACJ,CAAC,CAAC,KArBW,kBAAkB,CAsBtB,CACZ,CAAC;6BACH;4BACD,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,QAAQ,CAAC,EAAE,EACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,IAAI,EAAE,SAAS,EAC1B,KAAK,EAAE,QAAQ,CAAC,KAAK,KACjB,IAAI,KACJ,SAAS,IAVR,QAAQ,CAAC,EAAE,CAWhB,CACH,CAAC;wBACJ,CAAC,CAAC,EACH,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,IAAI,CAC/B,8BACE,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,YACrB,MAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,aACtE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,cAAE,IAAI,EAAE,OAAO,CAAC,KAAK,GAAQ,IAC3B,GACJ,EACP,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,iBAAc,MAAM,YAC3C,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,GAC7B,IACT,CACJ,IACU,IACZ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  BaseProps,\n  Flex,\n  Button,\n  Icon,\n  Tooltip,\n  useElement,\n  useI18n,\n  createUID,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nStyledCategory.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledParallelTitle.defaultProps = defaultThemeProp;\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const [addTaskEl, setAddTaskEl] = useElement();\n    let showAddTaskButton = true;\n    const t = useI18n();\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    /* Call back for click of add task button */\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledList\n          ref={ref}\n          role='gridcell'\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n        >\n          {item &&\n            item.tasks.length !== 0 &&\n            item.tasks.map((TaskItem: TaskItemProps | TaskItemProps[], index: number) => {\n              if (Array.isArray(TaskItem)) {\n                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n                  showAddTaskButton = false;\n                }\n                /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */\n                const parallelListItemId = createUID();\n                return (\n                  <Fragment key={parallelListItemId}>\n                    {index !== 0 && (\n                      <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                        <span>{t('parallel')}</span>\n                      </Flex>\n                    )}\n                    {TaskItem.map((parallelTask: TaskItemProps) => {\n                      return (\n                        <Task\n                          key={parallelTask.id}\n                          id={parallelTask.id}\n                          value={parallelTask.label}\n                          item={parallelTask}\n                          visual={parallelTask.visual}\n                          stageItem={stageItem}\n                          categoryItem={item}\n                          error={parallelTask.error}\n                          {...task}\n                          {...restProps}\n                        />\n                      );\n                    })}\n                  </Fragment>\n                );\n              }\n              return (\n                <Task\n                  key={TaskItem.id}\n                  id={TaskItem.id}\n                  value={TaskItem.label}\n                  item={TaskItem}\n                  visual={TaskItem.visual}\n                  stageItem={stageItem}\n                  categoryItem={item}\n                  onAddStep={task?.onAddStep}\n                  error={TaskItem.error}\n                  {...task}\n                  {...restProps}\n                />\n              );\n            })}\n          {(showAddTaskButton || !item) && (\n            <>\n              <Flex as={StyledAddTask}>\n                <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n                  <Icon name='plus' />\n                  <Flex>{task?.addTask.title}</Flex>\n                </Button>\n              </Flex>\n              <Tooltip target={addTaskEl} aria-hidden='true'>\n                {`${t('add')} ${task?.addTask.title}`}\n              </Tooltip>\n            </>\n          )}\n        </StyledList>\n      </>\n    );\n  }\n);\n\nexport default Category;\n"]}
+{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  BaseProps,\n  Flex,\n  Button,\n  Icon,\n  Tooltip,\n  useElement,\n  useI18n,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nStyledCategory.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledParallelTitle.defaultProps = defaultThemeProp;\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const [addTaskEl, setAddTaskEl] = useElement();\n    let showAddTaskButton = true;\n    const t = useI18n();\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    /* Call back for click of add task button */\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledList\n          ref={ref}\n          role='gridcell'\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n        >\n          {item &&\n            item.tasks.length !== 0 &&\n            item.tasks.map((TaskItem: TaskItemProps | TaskItemProps[], i: number) => {\n              if (Array.isArray(TaskItem)) {\n                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n                  showAddTaskButton = false;\n                }\n\n                return (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>\n                    {i !== 0 && (\n                      <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                        <span>{t('parallel')}</span>\n                      </Flex>\n                    )}\n                    {TaskItem.map((parallelTask: TaskItemProps) => {\n                      return (\n                        <Task\n                          key={parallelTask.id}\n                          id={parallelTask.id}\n                          value={parallelTask.label}\n                          item={parallelTask}\n                          visual={parallelTask.visual}\n                          stageItem={stageItem}\n                          categoryItem={item}\n                          error={parallelTask.error}\n                          {...task}\n                          {...restProps}\n                        />\n                      );\n                    })}\n                  </Fragment>\n                );\n              }\n              return (\n                <Task\n                  key={TaskItem.id}\n                  id={TaskItem.id}\n                  value={TaskItem.label}\n                  item={TaskItem}\n                  visual={TaskItem.visual}\n                  stageItem={stageItem}\n                  categoryItem={item}\n                  onAddStep={task?.onAddStep}\n                  error={TaskItem.error}\n                  {...task}\n                  {...restProps}\n                />\n              );\n            })}\n          {(showAddTaskButton || !item) && (\n            <>\n              <Flex as={StyledAddTask}>\n                <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n                  <Icon name='plus' />\n                  <Flex>{task?.addTask.title}</Flex>\n                </Button>\n              </Flex>\n              <Tooltip target={addTaskEl} aria-hidden='true'>\n                {`${t('add')} ${task?.addTask.title}`}\n              </Tooltip>\n            </>\n          )}\n        </StyledList>\n      </>\n    );\n  }\n);\n\nexport default Category;\n"]}

package/lib/components/ObjectPreview/ObjectPreview.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithoutRef, ReactNode, Ref } from 'react';
+import { Action, ActionsProps, ForwardProps, OmitStrict, DrawerProps } from '@pega/cosmos-react-core';
+import { PageHeaderProps } from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';
+export interface ObjectPreviewProps extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {
+    open?: boolean;
+    header: OmitStrict<PageHeaderProps, 'status'>;
+    primaryAction: Action;
+    secondaryAction?: Action;
+    additionalActions?: ActionsProps;
+    content: ReactNode;
+    onDismiss: () => void;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps>;
+export default ObjectPreview;
+//# sourceMappingURL=ObjectPreview.d.ts.map

package/lib/components/ObjectPreview/ObjectPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,eAAe,EACf,SAAS,EACT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAEN,YAAY,EAGZ,YAAY,EAGZ,UAAU,EAIV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EAGhB,MAAM,qEAAqE,CAAC;AAE7E,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;IAC5F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA+CD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyCzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectPreview/ObjectPreview.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { Actions, Button, Flex, Icon, OneColumnPage, Drawer, useI18n, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { PageHeader, StyledPage } from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';
+const StyledObjectPreview = styled(Drawer) `
+  height: calc(100vh - 3rem);
+  top: 3rem;
+`;
+const PreviewHeader = ({ header, primaryAction, secondaryAction, additionalActions, onDismiss, dismissButtonRef }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { icon: true, variant: 'simple', ref: dismissButtonRef, label: t('dismiss_label_a11y'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }), _jsxs(Flex, { container: true, children: [secondaryAction && (_jsx(Button, { onClick: secondaryAction.onClick, children: secondaryAction.text })), _jsx(Button, { variant: 'primary', onClick: primaryAction.onClick, children: primaryAction.text }), additionalActions && _jsx(Actions, { ...additionalActions })] })] }), _jsx(PageHeader, { ...header, titleTag: 'h2' })] }));
+};
+const ObjectPreview = forwardRef(({ content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops }, ref) => {
+    const contentRef = useConsolidatedRef(ref);
+    const dismissButtonRef = useRef(null);
+    useEffect(() => {
+        if (open && contentRef.current) {
+            contentRef.current?.querySelector('button')?.focus();
+        }
+    }, [open]);
+    return (_jsx(StyledObjectPreview, { ref: contentRef, open: !!open, nullWhenClosed: true, position: 'fixed', size: '30%', shadow: true, placement: 'right', onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, onBeforeOpen: onBeforeOpen, onBeforeClose: onBeforeClose, children: _jsx(OneColumnPage, { ref: contentRef, title: header.title, as: StyledPage, header: _jsx(PreviewHeader, { dismissButtonRef: dismissButtonRef, header: header, ...restprops }), scrollContent: true, a: content }) }));
+});
+export default ObjectPreview;
+//# sourceMappingURL=ObjectPreview.js.map

package/lib/components/ObjectPreview/ObjectPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectPreview.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,MAAM,EACN,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAEL,OAAO,EAEP,MAAM,EACN,IAAI,EAEJ,IAAI,EACJ,aAAa,EAEb,MAAM,EACN,OAAO,EACP,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,UAAU,EACV,UAAU,EACX,MAAM,qEAAqE,CAAC;AAc7E,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAGzC,CAAC;AAEF,MAAM,aAAa,GAIf,CAAC,EACH,MAAM,EACN,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAC9B,OAAO,EAAE,SAAS,YAElB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,EACT,MAAC,IAAI,IAAC,SAAS,mBACZ,eAAe,IAAI,CAClB,KAAC,MAAM,IAAC,OAAO,EAAE,eAAe,CAAC,OAAO,YAAG,eAAe,CAAC,IAAI,GAAU,CAC1E,EACD,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,CAAC,OAAO,YACrD,aAAa,CAAC,IAAI,GACZ,EACR,iBAAiB,IAAI,KAAC,OAAO,OAAK,iBAAiB,GAAI,IACnD,IACF,EACP,KAAC,UAAU,OAAK,MAAM,EAAE,QAAQ,EAAC,IAAI,GAAG,IACnC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAA2D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,EAC/F,GAA8B,EAC9B,EAAE;IACF,MAAM,UAAU,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAC3D,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,UAAU,CAAC,OAAO,EAAE;YAC9B,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;SACtD;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,mBAAmB,IAClB,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,cAAc,QACd,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,KAAK,EACV,MAAM,QACN,SAAS,EAAC,OAAO,EACjB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,YAE5B,KAAC,aAAa,IACZ,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,EAAE,EAAE,UAAU,EACd,MAAM,EACJ,KAAC,aAAa,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,KAAM,SAAS,GAAI,EAEtF,aAAa,QACb,CAAC,EAAE,OAAO,GACV,GACkB,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useRef,\n  useEffect,\n  RefObject\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  Actions,\n  ActionsProps,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  OneColumnPage,\n  OmitStrict,\n  Drawer,\n  useI18n,\n  useConsolidatedRef,\n  DrawerProps\n} from '@pega/cosmos-react-core';\nimport {\n  PageHeaderProps,\n  PageHeader,\n  StyledPage\n} from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';\n\nexport interface ObjectPreviewProps\n  extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {\n  open?: boolean;\n  header: OmitStrict<PageHeaderProps, 'status'>;\n  primaryAction: Action;\n  secondaryAction?: Action;\n  additionalActions?: ActionsProps;\n  content: ReactNode;\n  onDismiss: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectPreview = styled(Drawer)`\n  height: calc(100vh - 3rem);\n  top: 3rem;\n`;\n\nconst PreviewHeader: FC<\n  OmitStrict<ObjectPreviewProps, 'ref' | 'content' | 'open'> & {\n    dismissButtonRef: RefObject<HTMLButtonElement>;\n  }\n> = ({\n  header,\n  primaryAction,\n  secondaryAction,\n  additionalActions,\n  onDismiss,\n  dismissButtonRef\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ direction: 'column', rowGap: 1 }}>\n      <Flex container={{ justify: 'between' }}>\n        <Button\n          icon\n          variant='simple'\n          ref={dismissButtonRef}\n          label={t('dismiss_label_a11y')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n        <Flex container>\n          {secondaryAction && (\n            <Button onClick={secondaryAction.onClick}>{secondaryAction.text}</Button>\n          )}\n          <Button variant='primary' onClick={primaryAction.onClick}>\n            {primaryAction.text}\n          </Button>\n          {additionalActions && <Actions {...additionalActions} />}\n        </Flex>\n      </Flex>\n      <PageHeader {...header} titleTag='h2' />\n    </Flex>\n  );\n};\n\nconst ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps> = forwardRef(\n  (\n    { content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops },\n    ref: ObjectPreviewProps['ref']\n  ) => {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (open && contentRef.current) {\n        contentRef.current?.querySelector('button')?.focus();\n      }\n    }, [open]);\n\n    return (\n      <StyledObjectPreview\n        ref={contentRef}\n        open={!!open}\n        nullWhenClosed\n        position='fixed'\n        size='30%'\n        shadow\n        placement='right'\n        onAfterOpen={onAfterOpen}\n        onAfterClose={onAfterClose}\n        onBeforeOpen={onBeforeOpen}\n        onBeforeClose={onBeforeClose}\n      >\n        <OneColumnPage\n          ref={contentRef}\n          title={header.title}\n          as={StyledPage}\n          header={\n            <PreviewHeader dismissButtonRef={dismissButtonRef} header={header} {...restprops} />\n          }\n          scrollContent\n          a={content}\n        />\n      </StyledObjectPreview>\n    );\n  }\n);\n\nexport default ObjectPreview;\n"]}

package/lib/components/ObjectPreview/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ObjectPreview } from './ObjectPreview';
+export * from './ObjectPreview';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ObjectPreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/lib/components/ObjectPreview/index.js

@@ -0,0 +1,3 @@
+export { default as ObjectPreview } from './ObjectPreview';
+export * from './ObjectPreview';
+//# sourceMappingURL=index.js.map

package/lib/components/ObjectPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC","sourcesContent":["export { default as ObjectPreview } from './ObjectPreview';\nexport * from './ObjectPreview';\n"]}

package/lib/components/ObjectSelect/ObjectPicker.d.ts

@@ -1,7 +1,8 @@
 import { FC, Ref } from 'react';
 import { BaseProps, ForwardProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
-interface ObjectPickerProps extends BaseProps, NoChildrenProp, Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder'> {
+export interface ObjectPickerProps extends BaseProps, NoChildrenProp, Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder'> {
     items: MenuProps['items'];
+    loading: MenuProps['loading'];
     onSelect: (id: MenuItemProps['id']) => void;
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/ObjectSelect/ObjectPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,SAAS,EAGT,YAAY,EACZ,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,UAAU,iBACR,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAkCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,SAAS,EAGT,YAAY,EACZ,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAmCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo } from 'react';
 import { ComboBox, menuHelpers, createStringMatcher } from '@pega/cosmos-react-core';
-const ObjectPicker = forwardRef(({ items, onSelect, ...restProps }, ref) => {
+const ObjectPicker = forwardRef(({ items, onSelect, loading, ...restProps }, ref) => {
     const [filterValue, setFilterValue] = useState('');
     const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;
     const itemsToRender = useMemo(() => {
@@ -18,7 +18,8 @@ const ObjectPicker = forwardRef(({ items, onSelect, ...restProps }, ref) => {
     return (_jsx(ComboBox, { ...restProps, ref: ref, mode: 'single-select', value: filterValue, onChange: (e) => setFilterValue(e.target.value), onBlur: () => setFilterValue(''), menu: {
             items: itemsToRender,
             onItemClick: onSelect,
-            accent: filterRegex
+            accent: filterRegex,
+            loading
         } }));
 });
 export default ObjectPicker;

package/lib/components/ObjectSelect/ObjectPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;SACpB,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  menuHelpers,\n  ForwardProps,\n  MenuProps,\n  MenuItemProps,\n  createStringMatcher,\n  ComboBoxProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface ObjectPickerProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<\n      ComboBoxProps,\n      | 'id'\n      | 'label'\n      | 'labelHidden'\n      | 'required'\n      | 'disabled'\n      | 'readOnly'\n      | 'name'\n      | 'status'\n      | 'info'\n      | 'placeholder'\n    > {\n  items: MenuProps['items'];\n  onSelect: (id: MenuItemProps['id']) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n  ({ items, onSelect, ...restProps }, ref: ObjectPickerProps['ref']) => {\n    const [filterValue, setFilterValue] = useState('');\n    const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n    const itemsToRender = useMemo(() => {\n      const newItems = filterValue\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return filterRegex?.test(primary);\n          })\n        : items;\n\n      return menuHelpers.mapTree(newItems, item => ({\n        ...item,\n        selected: item.items ? undefined : !!item.selected\n      }));\n    }, [filterValue, items]);\n\n    return (\n      <ComboBox\n        {...restProps}\n        ref={ref}\n        mode='single-select'\n        value={filterValue}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n        onBlur={() => setFilterValue('')}\n        menu={{\n          items: itemsToRender,\n          onItemClick: onSelect,\n          accent: filterRegex\n        }}\n      />\n    );\n  }\n);\n\nexport default ObjectPicker;\n"]}
+{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;YACnB,OAAO;SACR,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  menuHelpers,\n  ForwardProps,\n  MenuProps,\n  MenuItemProps,\n  createStringMatcher,\n  ComboBoxProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface ObjectPickerProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<\n      ComboBoxProps,\n      | 'id'\n      | 'label'\n      | 'labelHidden'\n      | 'required'\n      | 'disabled'\n      | 'readOnly'\n      | 'name'\n      | 'status'\n      | 'info'\n      | 'placeholder'\n    > {\n  items: MenuProps['items'];\n  loading: MenuProps['loading'];\n  onSelect: (id: MenuItemProps['id']) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n  ({ items, onSelect, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n    const [filterValue, setFilterValue] = useState('');\n    const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n    const itemsToRender = useMemo(() => {\n      const newItems = filterValue\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return filterRegex?.test(primary);\n          })\n        : items;\n\n      return menuHelpers.mapTree(newItems, item => ({\n        ...item,\n        selected: item.items ? undefined : !!item.selected\n      }));\n    }, [filterValue, items]);\n\n    return (\n      <ComboBox\n        {...restProps}\n        ref={ref}\n        mode='single-select'\n        value={filterValue}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n        onBlur={() => setFilterValue('')}\n        menu={{\n          items: itemsToRender,\n          onItemClick: onSelect,\n          accent: filterRegex,\n          loading\n        }}\n      />\n    );\n  }\n);\n\nexport default ObjectPicker;\n"]}

package/lib/components/ObjectSelect/ObjectSelect.d.ts

@@ -1,9 +1,12 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps } from '@pega/cosmos-react-core';
+import { ObjectPickerProps } from './ObjectPicker';
 import { ObjectSummaryProps } from './ObjectSummary';
 export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormControlProps, 'value'> {
     /** An array of MenuItemProps to be shown in the ObjectPicker menu. */
     items: MenuProps['items'];
+    /** Boolean to trigger loading state for combobox menu */
+    loading?: ObjectPickerProps['loading'];
     /** The value for the ObjectSummary */
     value?: ObjectSummaryProps['value'];
     /** Props for configuration popover */
@@ -14,6 +17,8 @@ export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormC
     onPreview?: (id: MenuItemProps['id'], e: {
         href: string;
     }) => void;
+    /** Callback fired on click of the link inside summary item */
+    onLinkClick?: ObjectSummaryProps['onLinkClick'];
     /** Ref placed on the element. */
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/ObjectSelect/ObjectSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAEnE,OAAO,EACL,SAAS,EACT,YAAY,EAEZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,yBAAyB,CAAC;AAGjC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAoB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEd,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,8DAA8D;IAC9D,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAChD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectSelect.js

@@ -1,20 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import { useAfterInitialEffect } from '@pega/cosmos-react-core';
 import ObjectPicker from './ObjectPicker';
 import ObjectSummary from './ObjectSummary';
-const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, ...restProps }, ref) => {
+const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, ...restProps }, ref) => {
+    const [mode, setMode] = useState(value ? 'summary' : 'picker');
     const objectPickerRef = useRef(null);
     const objectSummaryRef = useRef(null);
     useAfterInitialEffect(() => {
-        if (disabled)
-            return;
-        const element = value
+        const element = mode === 'summary'
             ? objectSummaryRef.current?.querySelector('a')
             : objectPickerRef.current?.querySelector('input');
         element?.focus();
-    }, [value, disabled]);
-    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => onChange(''), ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e) })) : (_jsx(ObjectPicker, { ...restProps, disabled: disabled, ref: objectPickerRef, items: items, onSelect: onChange })) }));
+    }, [mode]);
+    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => {
+                setMode('picker');
+                onChange('');
+            }, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: id => {
+                setMode('summary');
+                onChange(id);
+            } })) }));
 });
 export default ObjectSelect;
 //# sourceMappingURL=ObjectSelect.js.map

package/lib/components/ObjectSelect/ObjectSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,qBAAqB,EAKtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC5E,GAA6B,EAC7B,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,KAAK;YACnB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC5B,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GACxC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  useAfterInitialEffect,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n  extends BaseProps,\n    NoChildrenProp,\n    Omit<FormControlProps, 'value'> {\n  /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n  items: MenuProps['items'];\n  /** The value for the ObjectSummary */\n  value?: ObjectSummaryProps['value'];\n  /** Props for configuration popover */\n  configuration?: ObjectSummaryProps['configuration'];\n  /** Callback fired when a new item is selected and on clearing the selected item. */\n  onChange: (id: MenuItemProps['id']) => void;\n  /** Callback fired when the preview in the ObjectSummary link is clicked. */\n  onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n  /** Ref placed on the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n  (\n    { items, value, configuration, disabled, onChange, onPreview, ...restProps },\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    useAfterInitialEffect(() => {\n      if (disabled) return;\n      const element = value\n        ? objectSummaryRef.current?.querySelector('a')\n        : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [value, disabled]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={() => onChange('')}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n          />\n        ) : (\n          <ObjectPicker\n            {...restProps}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={onChange}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ObjectSelect;\n"]}
+{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAML,qBAAqB,EAEtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAwBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACb,EACD,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAuB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GACX,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACtD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,EACD,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,EAAE,CAAC,EAAE;gBACb,OAAO,CAAC,SAAS,CAAC,CAAC;gBACnB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,GACD,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef, useState } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  useAfterInitialEffect,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n  extends BaseProps,\n    NoChildrenProp,\n    Omit<FormControlProps, 'value'> {\n  /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n  items: MenuProps['items'];\n  /** Boolean to trigger loading state for combobox menu */\n  loading?: ObjectPickerProps['loading'];\n  /** The value for the ObjectSummary */\n  value?: ObjectSummaryProps['value'];\n  /** Props for configuration popover */\n  configuration?: ObjectSummaryProps['configuration'];\n  /** Callback fired when a new item is selected and on clearing the selected item. */\n  onChange: (id: MenuItemProps['id']) => void;\n  /** Callback fired when the preview in the ObjectSummary link is clicked. */\n  onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n  /** Callback fired on click of the link inside summary item */\n  onLinkClick?: ObjectSummaryProps['onLinkClick'];\n  /** Ref placed on the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      value,\n      configuration,\n      disabled,\n      onChange,\n      onPreview,\n      onLinkClick,\n      loading,\n      ...restProps\n    },\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const [mode, setMode] = useState<'picker' | 'summary'>(value ? 'summary' : 'picker');\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    useAfterInitialEffect(() => {\n      const element =\n        mode === 'summary'\n          ? objectSummaryRef.current?.querySelector('a')\n          : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [mode]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={() => {\n              setMode('picker');\n              onChange('');\n            }}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n            onLinkClick={onLinkClick}\n          />\n        ) : (\n          <ObjectPicker\n            {...restProps}\n            loading={loading}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={id => {\n              setMode('summary');\n              onChange(id);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ObjectSelect;\n"]}

package/lib/components/ObjectSelect/ObjectSummary.d.ts

@@ -14,6 +14,7 @@ export interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'v
     onPreview?: (e: {
         href: string;
     }) => void;
+    onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;
     ref: Ref<HTMLDivElement>;
 }
 declare const ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps>;

package/lib/components/ObjectSelect/ObjectSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAG/F,OAAO,EACL,SAAS,EAKT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAUd,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CA8HzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAY,MAAM,OAAO,CAAC;AAGvE,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAYd,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAiHzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectSelect/ObjectSummary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
-import { SummaryItem, Link, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, getFocusables, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement } from '@pega/cosmos-react-core';
+import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement, useFocusTrap, Link, useEvent } from '@pega/cosmos-react-core';
 import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
 import ObjectConfig from './ObjectConfig';
@@ -15,7 +15,7 @@ const StyledMetaText = styled(Text) `
   -webkit-line-clamp: 2;
   overflow: hidden;
 `;
-const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps }, ref) => {
+const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
     const [buttonEl, setButtonEl] = useElement();
     const [popoverEl, setPopoverEl] = useElement();
@@ -30,42 +30,21 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
         setOpen(false);
         configuration?.onAfterClose?.(id);
     };
-    const onKeydown = useCallback((e) => {
+    const onKeydown = (e) => {
         const { key } = e;
         if (key === 'Escape') {
             setOpen(false);
         }
-        else if (key === 'Tab' && popoverEl) {
-            const focusableContent = getFocusables(popoverRef);
-            if (!focusableContent)
-                return;
-            const firstFocusableElement = focusableContent[0];
-            const lastFocusableElement = focusableContent[focusableContent.length - 1];
-            if (e.shiftKey) {
-                if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement.focus();
-                    e.preventDefault();
-                }
-            }
-            else if (document.activeElement === lastFocusableElement) {
-                firstFocusableElement.focus();
-                e.preventDefault();
-            }
-        }
-    }, [popoverEl]);
-    useEffect(() => {
-        popoverEl?.addEventListener('keydown', onKeydown);
-        return () => {
-            popoverEl?.removeEventListener('keydown', onKeydown);
-        };
-    }, [popoverEl]);
+    };
+    useEvent('keydown', onKeydown, { target: popoverEl });
+    useFocusTrap(popoverRef);
     useAfterInitialEffect(() => {
         if (open)
             popoverEl?.querySelector('button')?.focus();
         else
             buttonEl?.focus();
     }, [open, popoverEl]);
-    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, target: '_blank', onPreview: onPreview, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
 });
 export default ObjectSummary;
 //# sourceMappingURL=ObjectSummary.js.map

package/lib/components/ObjectSelect/ObjectSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Link,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  Popover,\n  getFocusables,\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useDirection,\n  useElement\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: () => void;\n  onPreview?: (e: { href: string }) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    { value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [open, setOpen] = useState(false);\n    const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n    const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    const openPopover = () => {\n      configuration?.onBeforeOpen?.();\n      setOpen(true);\n    };\n\n    const dismissPopover = (id?: string) => {\n      setOpen(false);\n      configuration?.onAfterClose?.(id);\n    };\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          setOpen(false);\n        } else if (key === 'Tab' && popoverEl) {\n          const focusableContent = getFocusables(popoverRef);\n\n          if (!focusableContent) return;\n\n          const firstFocusableElement = focusableContent[0];\n          const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n          if (e.shiftKey) {\n            if (document.activeElement === firstFocusableElement) {\n              lastFocusableElement.focus();\n              e.preventDefault();\n            }\n          } else if (document.activeElement === lastFocusableElement) {\n            firstFocusableElement.focus();\n            e.preventDefault();\n          }\n        }\n      },\n      [popoverEl]\n    );\n\n    useEffect(() => {\n      popoverEl?.addEventListener('keydown', onKeydown);\n      return () => {\n        popoverEl?.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverEl]);\n\n    useAfterInitialEffect(() => {\n      if (open) popoverEl?.querySelector('button')?.focus();\n      else buttonEl?.focus();\n    }, [open, popoverEl]);\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          primary={\n            <Link\n              href={value.href}\n              aria-label={`${label} ${value.primary}`}\n              previewable\n              target='_blank'\n              onPreview={onPreview}\n            >\n              {value.primary}\n            </Link>\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button\n                  ref={setButtonEl}\n                  label={configuration?.label}\n                  icon\n                  variant='simple'\n                  onClick={openPopover}\n                >\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              <Popover\n                ref={popoverRef}\n                placement={rtl ? 'bottom-end' : 'bottom-start'}\n                hideOnTargetHidden\n                show={open}\n                target={buttonEl}\n              >\n                {configuration && open && (\n                  <ObjectConfig\n                    {...configuration}\n                    disabled={disabled}\n                    dismissPopover={dismissPopover}\n                  />\n                )}\n              </Popover>\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}
+{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  Popover,\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useFocusTrap,\n  Link,\n  useEvent\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: () => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [open, setOpen] = useState(false);\n    const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n    const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    const openPopover = () => {\n      configuration?.onBeforeOpen?.();\n      setOpen(true);\n    };\n\n    const dismissPopover = (id?: string) => {\n      setOpen(false);\n      configuration?.onAfterClose?.(id);\n    };\n\n    const onKeydown = (e: KeyboardEvent) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        setOpen(false);\n      }\n    };\n\n    useEvent('keydown', onKeydown, { target: popoverEl });\n    useFocusTrap(popoverRef);\n\n    useAfterInitialEffect(() => {\n      if (open) popoverEl?.querySelector('button')?.focus();\n      else buttonEl?.focus();\n    }, [open, popoverEl]);\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          primary={\n            <Link\n              href={value.href}\n              aria-label={`${label} ${value.primary}`}\n              previewable\n              onPreview={onPreview}\n              onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n            >\n              {value.primary}\n            </Link>\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button\n                  ref={setButtonEl}\n                  label={configuration?.label}\n                  icon\n                  variant='simple'\n                  onClick={openPopover}\n                >\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              <Popover\n                ref={popoverRef}\n                placement={rtl ? 'bottom-end' : 'bottom-start'}\n                hideOnTargetHidden\n                show={open}\n                target={buttonEl}\n              >\n                {configuration && open && (\n                  <ObjectConfig\n                    {...configuration}\n                    disabled={disabled}\n                    dismissPopover={dismissPopover}\n                  />\n                )}\n              </Popover>\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}

package/lib/components/PageTemplates/PageTemplates.d.ts

@@ -2,11 +2,11 @@ import { FunctionComponent, MouseEvent } from 'react';
 import { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardProps, PageTemplateProps, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
 export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {
     metadata?: FieldValueListProps['fields'];
-    branchName?: string;
     status?: {
-        type?: StatusProps['variant'];
+        type: StatusProps['variant'];
         label: string;
     };
+    titleTag?: 'h1' | 'h2';
     additionalInfo?: {
         title: string;
         description?: string;
@@ -19,8 +19,8 @@ export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, O
 }
 export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
 }
-export declare const StyledBranch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageHeader: ({ title, metadata, additionalInfo, actions, status, titleTag }: PageHeaderProps) => JSX.Element;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
 export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;
 export {};

package/lib/components/PageTemplates/PageTemplates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKjB,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,YAAY,yGAQvB,CAAC;AAUH,eAAO,MAAM,UAAU,yGActB,CAAC;AAqIF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAMZ,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,UAAU,yGA4BtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA6FjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,61 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledLabel, StyledRegion } from '@pega/cosmos-react-core';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader } from '@pega/cosmos-react-core';
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: 1.15;
 `;
 const StyledInfoPopover = styled(Popover) `
   max-width: 60ch;
   overflow-wrap: break-word;
 `;
-const StyledMetaFields = styled.dl `
-  dd,
-  dt {
-    display: inline;
-  }
-`;
-export const StyledBranch = styled.div(({ theme }) => {
-    return css `
-    border: 0.0625rem solid ${theme.base.colors.gray.light};
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-    padding: calc(0.5 * ${theme.base.spacing});
-    max-width: 100%;
-    overflow: hidden;
-  `;
-});
-StyledBranch.defaultProps = defaultThemeProp;
 const StyledHeaderContent = styled(SummaryItem) `
   ${StyledSummaryItemActions} {
     align-self: start;
   }
 `;
-export const StyledPage = styled.div(({ theme: { base: { spacing } } }) => {
+export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'primary-background': primaryBackground } } } }) => {
     return css `
+      background: ${primaryBackground};
+      height: 100%;
+
       ${StyledRegion} > ${StyledWorkbench},
-      ${StyledTabPanel} > ${StyledWorkbench} {
+        ${StyledTabPanel} > ${StyledWorkbench} {
         position: absolute;
         width: calc(100% - calc(4 * ${spacing}));
       }
+
+      ${StyledRegion} ${StyledForm} {
+        max-width: 80ch;
+      }
+
+      ${StyledPageHeader} > ${StyledBreadcrumbs} {
+        margin-block-end: 0;
+      }
     `;
 });
 StyledPage.defaultProps = defaultThemeProp;
-const MetaFields = ({ metadata }) => {
-    return (_jsx(Flex, { container: { wrap: 'wrap', colGap: 1, rowGap: 0.25 }, as: StyledMetaFields, children: metadata.map(meta => {
-            return (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'dt', children: [meta.name, _jsx("span", { "aria-hidden": 'true', children: ": " })] }), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value })] }, meta.id));
-        }) }));
-};
-const Branch = ({ branchName, status }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledBranch, children: [status && (_jsx(Flex, { item: { shrink: 0 }, as: Status, variant: status.type, children: status.label })), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }), branchName && _jsx(StyledTextWithEllipsis, { children: branchName })] }));
-};
-const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, status }) => {
+export const PageHeader = ({ title, metadata, additionalInfo, actions, status, titleTag }) => {
     const [open, setOpen] = useState(false);
     const [popoverEl, setPopoverRef] = useElement();
     const [buttonEl, setButtonEl] = useElement();
@@ -83,13 +72,14 @@ const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, stat
             popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
-    return (_jsx(StyledHeaderContent, { container: { rowGap: 0.5 }, primary: _jsxs(Flex, { container: { alignItems: 'start', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+    const metaListItems = useMemo(() => metadata?.map(({ name, value }) => `${name}: ${value}`), [metadata]);
+    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
                                                     setOpen(false);
                                                     additionalInfo.onEdit?.(e);
-                                                }, children: t('edit_details') }))] }) })] }))] }), branchName && status && _jsx(Branch, { branchName: branchName, status: status })] }), secondary: metadata && _jsx(MetaFields, { metadata: metadata }), actions: actions }));
+                                                }, children: t('edit_details') }))] }) })] }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
 };
-export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
-    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true, a: a }));
+export const TabbedPage = forwardRef(({ tabs, ...restProps }, ref) => {
+    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true }));
 });
 export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
     return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), scrollContent: true, a: a, ref: ref }));