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

package/lib/components/FlowModeller/index.js

@@ -3,6 +3,10 @@ export { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
 export { default as FlowRenderer } from './Renderer/Renderer';
 export { DirectedGraph } from './Renderer/Utils/Graph';
 export { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';
-export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode } from './Utils/AddNodeUtils';
+export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode } from './Utils/addNodeUtils';
 export { default as FlowModellerHelper } from './helper';
+export { default as DeletePopover } from './DeletePopover';
+export { default as Connector } from './Connector';
+export { default as Node } from './Node';
+export { default as deleteNodeUtils } from './Utils/deleteNodeUtils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAKL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAO9D,OAAO,EAAE,aAAa,EAA6B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAE5E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default, FlowModellerProps } from './FlowModeller';\nexport {\n  ActionParams,\n  NodeProps,\n  NodeType,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nexport { default as FlowRenderer } from './Renderer/Renderer';\nexport {\n  RendererProps,\n  RendererConnectorProps,\n  RendererNodeProps,\n  AddNodeHandlerParams\n} from './Renderer/Renderer.types';\nexport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nexport { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';\nexport { PlottedGraphConnector, PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nexport {\n  default as PlaceHolderHelper,\n  isPlaceHolderConnector,\n  isPlaceHolderNode,\n  PlaceHolderConnector,\n  PlaceHolderNode\n} from './Utils/AddNodeUtils';\nexport { default as FlowModellerHelper } from './helper';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAKL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAO9D,OAAO,EAAE,aAAa,EAA6B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAE5E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAqB,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default, FlowModellerProps } from './FlowModeller';\nexport {\n  ActionParams,\n  NodeProps,\n  NodeType,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nexport { default as FlowRenderer } from './Renderer/Renderer';\nexport {\n  RendererProps,\n  RendererConnectorProps,\n  RendererNodeProps,\n  AddNodeHandlerParams\n} from './Renderer/Renderer.types';\nexport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nexport { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';\nexport { PlottedGraphConnector, PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nexport {\n  default as PlaceHolderHelper,\n  isPlaceHolderConnector,\n  isPlaceHolderNode,\n  PlaceHolderConnector,\n  PlaceHolderNode\n} from './Utils/addNodeUtils';\nexport { default as FlowModellerHelper } from './helper';\nexport { default as DeletePopover, DeleteNodeOutcome } from './DeletePopover';\nexport { default as Connector } from './Connector';\nexport { default as Node } from './Node';\nexport { default as deleteNodeUtils } from './Utils/deleteNodeUtils';\n"]}

package/lib/components/ItemLibrary/ItemLibrary.d.ts

@@ -1,15 +1,15 @@
 import { FC, Ref } from 'react';
-import { SearchInputProps, ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export interface ItemVisual {
-    color: string;
-    icon: string;
-}
+import { SearchInputProps, ForwardProps, MenuItemProps, PopoverProps } from '@pega/cosmos-react-core';
+import { ColorName } from '../../utils';
 export interface LibraryItem extends MenuItemProps {
     id: string;
     type: ItemVisual;
     items?: LibraryItem[];
 }
+export interface ItemVisual {
+    color: ColorName;
+    icon: string;
+}
 export interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {
     show: boolean;
     target: HTMLElement | null;
@@ -17,7 +17,9 @@ export interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {
     onClick?: (libItem: T) => void;
     ref?: Ref<HTMLDivElement>;
     placeholder?: SearchInputProps['placeholder'];
+    position?: PopoverProps['placement'];
 }
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const ItemLibrary: FC<ItemLibraryProps & ForwardProps>;
 export default ItemLibrary;
 //# sourceMappingURL=ItemLibrary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,gBAAgB,EAChB,YAAY,EAKZ,aAAa,EAMd,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAMD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC/C;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAyFpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ItemLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,gBAAgB,EAChB,YAAY,EAKZ,aAAa,EAMb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AACD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAiGpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ItemLibrary/ItemLibrary.js

@@ -3,6 +3,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Icon, Menu, menuHelpers, Popover, SearchInput, cap, createStringMatcher, defaultThemeProp } from '@pega/cosmos-react-core';
+import { colorMap } from '../../utils';
 export const StyledIcon = styled.div(({ theme }) => {
     return css `
     min-height: 2rem;
@@ -19,7 +20,7 @@ StyledIcon.defaultProps = defaultThemeProp;
 const StyledPopover = styled(Popover) `
   min-width: 40ch;
 `;
-const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, ref) => {
+const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder, position = 'bottom-start' }, ref) => {
     const [search, setSearch] = useState('');
     const searchEleRef = useRef(null);
     useEffect(() => {
@@ -43,9 +44,9 @@ const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, r
             return {
                 ...node,
                 visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, style: {
-                        '--bg-color': nodeItem.type.color,
-                        '--fg-color': readableColor(nodeItem.type.color)
-                    }, children: _jsx(Icon, { name: nodeItem.type.icon }, void 0) }, void 0)) : undefined,
+                        '--bg-color': colorMap[nodeItem.type.color],
+                        '--fg-color': readableColor(colorMap[nodeItem.type.color])
+                    }, children: _jsx(Icon, { name: nodeItem.type.icon }) })) : undefined,
                 count: node.items ? node.items.length : undefined,
                 secondary: node.secondary,
                 selected: selectable ? !!node.selected : undefined
@@ -58,7 +59,7 @@ const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, r
             onClick(selectedNode);
         }
     }, [onClick]);
-    return (_jsx(_Fragment, { children: show && (_jsx(StyledPopover, { show: show, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }, void 0) }, void 0) }, void 0)) }, void 0));
+    return (_jsx(_Fragment, { children: show && (_jsx(StyledPopover, { show: show, placement: position, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }), focusControlEl: searchEleRef.current || undefined }) })) }));
 });
 export default ItemLibrary;
 //# sourceMappingURL=ItemLibrary.js.map

package/lib/components/ItemLibrary/ItemLibrary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport interface ItemVisual {\n  color: string;\n  icon: string;\n}\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n}\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    { show, target, items, onClick, placeholder }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': nodeItem.type.color,\n                    '--fg-color': readableColor(nodeItem.type.color)\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}
+{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\nexport interface ItemVisual {\n  color: ColorName;\n  icon: string;\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    {\n      show,\n      target,\n      items,\n      onClick,\n      placeholder,\n      position = 'bottom-start'\n    }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': colorMap[nodeItem.type.color],\n                    '--fg-color': readableColor(colorMap[nodeItem.type.color])\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} placement={position} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n              focusControlEl={searchEleRef.current || undefined}\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}

package/lib/components/LifeCycle/Category.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAST,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAEH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAUvF,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAEH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA+G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAST,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAUvF,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA+G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/LifeCycle/Category.js

@@ -12,6 +12,7 @@ export const StyledCategory = styled.h3(({ showTitle, theme }) => {
     margin: ${theme.base.spacing} 0 0 0;
   `;
 });
+StyledCategory.defaultProps = defaultThemeProp;
 export const StyledList = styled.ol(({ category, theme, id }) => {
     return css `
       margin-block-start: ${theme.base.spacing};
@@ -21,6 +22,7 @@ export const StyledList = styled.ol(({ category, theme, id }) => {
   `}
     `;
 });
+StyledList.defaultProps = defaultThemeProp;
 export const StyledParallelTitle = styled.div(({ theme }) => {
     return css `
     position: relative;
@@ -48,6 +50,7 @@ export const StyledParallelTitle = styled.div(({ theme }) => {
     }
   `;
 });
+StyledParallelTitle.defaultProps = defaultThemeProp;
 export const StyledAddTask = styled.div(({ theme }) => {
     return css `
     > button {
@@ -78,7 +81,7 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
         };
         task?.addTask.onAddTask?.(param, e);
     };
-    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label }, void 0)), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
+    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label })), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
                         item.tasks.length !== 0 &&
                         item.tasks.map((TaskItem, index) => {
                             if (Array.isArray(TaskItem)) {
@@ -87,12 +90,12 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
                                 }
                                 /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */
                                 const parallelListItemId = createUID();
-                                return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }, void 0) }, void 0)), TaskItem.map((parallelTask) => {
+                                return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }) })), TaskItem.map((parallelTask) => {
                                             return (_jsx(Task, { id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error, ...task, ...restProps }, parallelTask.id));
                                         })] }, parallelListItemId));
                             }
                             return (_jsx(Task, { id: TaskItem.id, value: TaskItem.label, item: TaskItem, visual: TaskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: TaskItem.error, ...task, ...restProps }, TaskItem.id));
-                        }), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx(Flex, { children: task?.addTask.title }, void 0)] }, void 0) }, void 0), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` }, void 0)] }, void 0))] }, void 0)] }, void 0));
+                        }), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }), _jsx(Flex, { children: task?.addTask.title })] }) }), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` })] }))] })] }));
 });
 export default Category;
 //# sourceMappingURL=Category.js.map

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

@@ -1 +1 @@
-{"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  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\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\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\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  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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAaD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LifeCycle/LifeCycle.js

@@ -5,7 +5,6 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
 import LifeCycleList from './LifeCycleList';
 const StyledLifeCycle = styled.ol ``;
-StyledLifeCycle.defaultProps = defaultThemeProp;
 const StyledAddButton = styled(Button)(({ theme }) => {
     return css `
     align-self: flex-start;
@@ -65,10 +64,10 @@ const LifeCycle = forwardRef(({ items, categories, alternateItems = [], onAddSta
     return (_jsxs(Flex, { container: { itemGap: 2 }, ref: ref, children: [_jsxs(Flex, { as: StyledLifeCycle, ref: lifeCycleEl, container: true, role: 'grid', "aria-label": t('stage'), children: [items.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
                         return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, prevStageVariant: stageArray[index - 1]?.type, categories: categoriesState }));
-                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem, index, stageArray) => {
+                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }) })] }), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
                         return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, categories: categoriesState, stageVariant: 'alternate', prevStageVariant: stageArray[index - 1]?.type, stage: alternateStage }));
-                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0))] }, void 0));
+                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }) })] }))] }));
 });
 export default LifeCycle;
 //# sourceMappingURL=LifeCycle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLDivElement>;\n  /* Array of stages and its contents */\n  items: StageItemProps[];\n  /* Array of alternate stages and its contents */\n  alternateItems?: StageItemProps[];\n  /* Props for the task component */\n  task: TaskProps[];\n  /* Props for the Stage component */\n  stage: StageProps;\n  /* Props for the AlternatStage component */\n  alternateStage: StageProps;\n  /* Props for the Cluster component */\n  categories: CategoriesProps[];\n  /* Props for the Step component */\n  step: StepProps[];\n  /* Call back function for on AddState */\n  onAddStage: () => void;\n  /* Call back function to add alternate stages */\n  onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      categories,\n      alternateItems = [],\n      onAddStage,\n      onAddAlternateStage,\n      stage,\n      alternateStage,\n      ...restProps\n    }: PropsWithoutRef<LifeCycleProps>,\n    ref: LifeCycleProps['ref']\n  ) => {\n    const lifeCycleEl = useRef(null);\n    const t = useI18n();\n    const [categoriesState, setcategoriesState] = useState(categories);\n    const categoryElements: HTMLElement[] = [];\n    const setRef = (element: HTMLOListElement) => {\n      if (element) {\n        categoryElements.push(element);\n      }\n    };\n\n    useLayoutEffect(() => {\n      let isHeightChanged = false;\n      const categoriesColumn = [...categories];\n      if (categoriesColumn && categoriesColumn.length > 0) {\n        categoriesColumn.forEach((categoryItem, index) => {\n          const categoryElm = [...categoryElements];\n          let isActiveElement = false;\n          const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n            if (element.getAttribute('data-id') === categoryItem.id) {\n              if (categoryItem.elementId === element.getAttribute('id')) {\n                isActiveElement = true;\n              }\n              return true;\n            }\n            return false;\n          });\n          if (!isActiveElement) {\n            categoryItem.elementId = '';\n            categoryItem.height = 0;\n          }\n          categoryComponent.forEach(categoryElement => {\n            const columnHeight = categoryItem?.height ?? 0;\n            const height = categoryElement.scrollHeight;\n            const elementId = categoryElement.getAttribute('id');\n            if (\n              height > columnHeight ||\n              (categoryItem.elementId === elementId && height !== columnHeight)\n            ) {\n              isHeightChanged = true;\n              categoriesColumn[index].height = height;\n              if (elementId) categoriesColumn[index].elementId = elementId;\n            }\n          });\n        });\n        if (isHeightChanged) {\n          isHeightChanged = false;\n          setcategoriesState(categoriesColumn);\n        }\n      }\n    });\n\n    return (\n      <Flex container={{ itemGap: 2 }} ref={ref}>\n        <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n          {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n            const listId = stageItem.id;\n            return (\n              <LifeCycleList\n                {...restProps}\n                key={listId}\n                id={listId}\n                item={stageItem}\n                isFirstItem={index === 0}\n                isLastItem={index === stageArray.length - 1}\n                ref={setRef}\n                stage={stage}\n                prevStageVariant={stageArray[index - 1]?.type}\n                categories={categoriesState}\n              />\n            );\n          })}\n          <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n            <Icon name='plus' />\n          </StyledAddButton>\n        </Flex>\n        {alternateItems.length !== 0 && (\n          <Flex\n            as={StyledLifeCycle}\n            container\n            ref={lifeCycleEl}\n            role='grid'\n            aria-label={t('alternate_stage')}\n          >\n            {alternateItems.map(\n              (stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n                const listId = stageItem.id;\n                return (\n                  <LifeCycleList\n                    {...restProps}\n                    key={listId}\n                    id={listId}\n                    item={stageItem}\n                    isFirstItem={index === 0}\n                    isLastItem={index === stageArray.length - 1}\n                    ref={setRef}\n                    categories={categoriesState}\n                    stageVariant='alternate'\n                    prevStageVariant={stageArray[index - 1]?.type}\n                    stage={alternateStage}\n                  />\n                );\n              }\n            )}\n            <StyledAddButton\n              variant='simple'\n              label={t('add_alternate_stage')}\n              icon\n              onClick={onAddAlternateStage}\n            >\n              <Icon name='plus' />\n            </StyledAddButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default LifeCycle;\n"]}
+{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLDivElement>;\n  /* Array of stages and its contents */\n  items: StageItemProps[];\n  /* Array of alternate stages and its contents */\n  alternateItems?: StageItemProps[];\n  /* Props for the task component */\n  task: TaskProps[];\n  /* Props for the Stage component */\n  stage: StageProps;\n  /* Props for the AlternatStage component */\n  alternateStage: StageProps;\n  /* Props for the Cluster component */\n  categories: CategoriesProps[];\n  /* Props for the Step component */\n  step: StepProps[];\n  /* Call back function for on AddState */\n  onAddStage: () => void;\n  /* Call back function to add alternate stages */\n  onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      categories,\n      alternateItems = [],\n      onAddStage,\n      onAddAlternateStage,\n      stage,\n      alternateStage,\n      ...restProps\n    }: PropsWithoutRef<LifeCycleProps>,\n    ref: LifeCycleProps['ref']\n  ) => {\n    const lifeCycleEl = useRef(null);\n    const t = useI18n();\n    const [categoriesState, setcategoriesState] = useState(categories);\n    const categoryElements: HTMLElement[] = [];\n    const setRef = (element: HTMLOListElement) => {\n      if (element) {\n        categoryElements.push(element);\n      }\n    };\n\n    useLayoutEffect(() => {\n      let isHeightChanged = false;\n      const categoriesColumn = [...categories];\n      if (categoriesColumn && categoriesColumn.length > 0) {\n        categoriesColumn.forEach((categoryItem, index) => {\n          const categoryElm = [...categoryElements];\n          let isActiveElement = false;\n          const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n            if (element.getAttribute('data-id') === categoryItem.id) {\n              if (categoryItem.elementId === element.getAttribute('id')) {\n                isActiveElement = true;\n              }\n              return true;\n            }\n            return false;\n          });\n          if (!isActiveElement) {\n            categoryItem.elementId = '';\n            categoryItem.height = 0;\n          }\n          categoryComponent.forEach(categoryElement => {\n            const columnHeight = categoryItem?.height ?? 0;\n            const height = categoryElement.scrollHeight;\n            const elementId = categoryElement.getAttribute('id');\n            if (\n              height > columnHeight ||\n              (categoryItem.elementId === elementId && height !== columnHeight)\n            ) {\n              isHeightChanged = true;\n              categoriesColumn[index].height = height;\n              if (elementId) categoriesColumn[index].elementId = elementId;\n            }\n          });\n        });\n        if (isHeightChanged) {\n          isHeightChanged = false;\n          setcategoriesState(categoriesColumn);\n        }\n      }\n    });\n\n    return (\n      <Flex container={{ itemGap: 2 }} ref={ref}>\n        <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n          {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n            const listId = stageItem.id;\n            return (\n              <LifeCycleList\n                {...restProps}\n                key={listId}\n                id={listId}\n                item={stageItem}\n                isFirstItem={index === 0}\n                isLastItem={index === stageArray.length - 1}\n                ref={setRef}\n                stage={stage}\n                prevStageVariant={stageArray[index - 1]?.type}\n                categories={categoriesState}\n              />\n            );\n          })}\n          <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n            <Icon name='plus' />\n          </StyledAddButton>\n        </Flex>\n        {alternateItems.length !== 0 && (\n          <Flex\n            as={StyledLifeCycle}\n            container\n            ref={lifeCycleEl}\n            role='grid'\n            aria-label={t('alternate_stage')}\n          >\n            {alternateItems.map(\n              (stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n                const listId = stageItem.id;\n                return (\n                  <LifeCycleList\n                    {...restProps}\n                    key={listId}\n                    id={listId}\n                    item={stageItem}\n                    isFirstItem={index === 0}\n                    isLastItem={index === stageArray.length - 1}\n                    ref={setRef}\n                    categories={categoriesState}\n                    stageVariant='alternate'\n                    prevStageVariant={stageArray[index - 1]?.type}\n                    stage={alternateStage}\n                  />\n                );\n              }\n            )}\n            <StyledAddButton\n              variant='simple'\n              label={t('add_alternate_stage')}\n              icon\n              onClick={onAddAlternateStage}\n            >\n              <Icon name='plus' />\n            </StyledAddButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default LifeCycle;\n"]}

package/lib/components/LifeCycle/LifeCycle.types.d.ts

@@ -1,14 +1,12 @@
 import { MouseEvent } from 'react';
 import { Action, StatusProps } from '@pega/cosmos-react-core';
-export interface VisualColorProps {
-    color: 'magenta' | 'studio' | 'congressBlue' | 'Japaneselaurel' | 'violet' | 'yellow' | 'orange' | 'darkyellow';
-}
+import { ColorName } from '../../utils';
 export declare type StageType = 'start' | 'default' | 'default-wait' | 'resolution' | 'alternate' | 'alternate-wait';
 export interface StepItemProps {
     id: string;
     label: string;
     visual: {
-        color: VisualColorProps['color'];
+        color: ColorName;
         icon: string;
         label: string;
         imgurl: string;

package/lib/components/LifeCycle/LifeCycle.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAsB,MAAM,yBAAyB,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,oBAAY,SAAS,GACjB,OAAO,GACP,SAAS,GACT,cAAc,GACd,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,SAAS,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AA6DD,eAAO,MAAM,YAAY,gBACV,SAAS,YACZ,SAAS,GAAG,IAAI,cACd,OAAO,GAAG,SAAS,cAoBhC,CAAC"}
+{"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAsB,MAAM,yBAAyB,CAAC;AAElF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,oBAAY,SAAS,GACjB,OAAO,GACP,SAAS,GACT,cAAc,GACd,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,SAAS,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,SAAS,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AA6DD,eAAO,MAAM,YAAY,gBACV,SAAS,YACZ,SAAS,GAAG,IAAI,cACd,OAAO,GAAG,SAAS,cAoBhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps, WorkTheme as Theme } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n  color:\n    | 'magenta'\n    | 'studio'\n    | 'congressBlue'\n    | 'Japaneselaurel'\n    | 'violet'\n    | 'yellow'\n    | 'orange'\n    | 'darkyellow';\n}\n\nexport type StageType =\n  | 'start'\n  | 'default'\n  | 'default-wait'\n  | 'resolution'\n  | 'alternate'\n  | 'alternate-wait';\n\nexport interface StepItemProps {\n  id: string;\n  label: string;\n  visual: {\n    color: VisualColorProps['color'];\n    icon: string;\n    label: string;\n    imgurl: string;\n  };\n  status: { type?: StatusProps['variant'] | ''; label: string };\n  error: string;\n}\n\nexport interface TaskItemProps {\n  id: string;\n  label: string;\n  visual: {\n    imgurl: string;\n  };\n  error: string;\n  steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have the stage label */\n  label: string;\n  /* Data model should have the categoryData array */\n  categories: CategoryItemProps[];\n  /* Data model should have the stageType as below */\n  type: StageType;\n  error: string;\n}\n\nexport interface CategoryItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have id of the stage item */\n  categoryId: string;\n  /* Data model should have the categoryData array */\n  tasks: TaskItemProps[] | TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n  label: string;\n  id: string;\n}\n\nexport interface LifeCycleActionParam {\n  value?: string;\n  stage?: StageItemProps;\n  task?: TaskItemProps;\n  category?: CategoryItemProps;\n  step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n  onClick: (\n    param: LifeCycleActionParam,\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n}\n\nexport interface StageInfo {\n  id: StageType;\n  visual: {\n    bgColor: string;\n    bgHover: string;\n    tailPointed?: boolean;\n    headPointed?: boolean;\n  };\n}\n\nconst StageTypeDefaults: Record<StageType, StageInfo> = {\n  start: {\n    id: 'start',\n    visual: {\n      bgColor: Theme.base.colors.blue.dark,\n      bgHover: Theme.base.colors.blue.medium,\n      tailPointed: false,\n      headPointed: true\n    }\n  },\n  default: {\n    id: 'default',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: true\n    }\n  },\n  'default-wait': {\n    id: 'default-wait',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  resolution: {\n    id: 'resolution',\n    visual: {\n      bgColor: Theme.base.colors.green.medium,\n      bgHover: Theme.base.colors.green.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  alternate: {\n    id: 'alternate',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  },\n  'alternate-wait': {\n    id: 'alternate-wait',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  }\n};\n\n// calculates the final stage info based on prev type and returns the final stage info\n// second param is mandatory for accurate results, optional only for the first stage\nexport const getStageInfo = (\n  currentType: StageType,\n  prevType: StageType | null,\n  isLastItem: boolean | undefined\n) => {\n  const currentStageInfo = StageTypeDefaults[currentType] || StageTypeDefaults.default;\n  // cloning, to avoid getting modified\n  const result: StageInfo = {\n    ...currentStageInfo,\n    visual: {\n      ...currentStageInfo.visual\n    }\n  };\n\n  if (prevType) {\n    const prevStageInfo = StageTypeDefaults[prevType] || StageTypeDefaults.start;\n    result.visual.tailPointed =\n      currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;\n  }\n  if (isLastItem) {\n    result.visual.headPointed = false;\n  }\n  return result;\n};\n"]}
+{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps, WorkTheme as Theme } from '@pega/cosmos-react-core';\n\nimport { ColorName } from '../../utils';\n\nexport type StageType =\n  | 'start'\n  | 'default'\n  | 'default-wait'\n  | 'resolution'\n  | 'alternate'\n  | 'alternate-wait';\n\nexport interface StepItemProps {\n  id: string;\n  label: string;\n  visual: {\n    color: ColorName;\n    icon: string;\n    label: string;\n    imgurl: string;\n  };\n  status: { type?: StatusProps['variant'] | ''; label: string };\n  error: string;\n}\n\nexport interface TaskItemProps {\n  id: string;\n  label: string;\n  visual: {\n    imgurl: string;\n  };\n  error: string;\n  steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have the stage label */\n  label: string;\n  /* Data model should have the categoryData array */\n  categories: CategoryItemProps[];\n  /* Data model should have the stageType as below */\n  type: StageType;\n  error: string;\n}\n\nexport interface CategoryItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have id of the stage item */\n  categoryId: string;\n  /* Data model should have the categoryData array */\n  tasks: TaskItemProps[] | TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n  label: string;\n  id: string;\n}\n\nexport interface LifeCycleActionParam {\n  value?: string;\n  stage?: StageItemProps;\n  task?: TaskItemProps;\n  category?: CategoryItemProps;\n  step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n  onClick: (\n    param: LifeCycleActionParam,\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n}\n\nexport interface StageInfo {\n  id: StageType;\n  visual: {\n    bgColor: string;\n    bgHover: string;\n    tailPointed?: boolean;\n    headPointed?: boolean;\n  };\n}\n\nconst StageTypeDefaults: Record<StageType, StageInfo> = {\n  start: {\n    id: 'start',\n    visual: {\n      bgColor: Theme.base.colors.blue.dark,\n      bgHover: Theme.base.colors.blue.medium,\n      tailPointed: false,\n      headPointed: true\n    }\n  },\n  default: {\n    id: 'default',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: true\n    }\n  },\n  'default-wait': {\n    id: 'default-wait',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  resolution: {\n    id: 'resolution',\n    visual: {\n      bgColor: Theme.base.colors.green.medium,\n      bgHover: Theme.base.colors.green.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  alternate: {\n    id: 'alternate',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  },\n  'alternate-wait': {\n    id: 'alternate-wait',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  }\n};\n\n// calculates the final stage info based on prev type and returns the final stage info\n// second param is mandatory for accurate results, optional only for the first stage\nexport const getStageInfo = (\n  currentType: StageType,\n  prevType: StageType | null,\n  isLastItem: boolean | undefined\n) => {\n  const currentStageInfo = StageTypeDefaults[currentType] || StageTypeDefaults.default;\n  // cloning, to avoid getting modified\n  const result: StageInfo = {\n    ...currentStageInfo,\n    visual: {\n      ...currentStageInfo.visual\n    }\n  };\n\n  if (prevType) {\n    const prevStageInfo = StageTypeDefaults[prevType] || StageTypeDefaults.start;\n    result.visual.tailPointed =\n      currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;\n  }\n  if (isLastItem) {\n    result.visual.headPointed = false;\n  }\n  return result;\n};\n"]}

package/lib/components/LifeCycle/LifeCycleList.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, Ref } from 'react';
-import type { NoChildrenProp } from '@pega/cosmos-react-core';
+import { NoChildrenProp } from '@pega/cosmos-react-core';
 import { StageItemProps, StageType } from './LifeCycle.types';
 import { StageProps } from './Stage';
 import { CategoriesProps } from './Category';

package/lib/components/LifeCycle/LifeCycleList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAmC,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/F,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,EAAE,SAAS,CAAC;IAE5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAoB,cAAc,EAA2B,MAAM,yBAAyB,CAAC;AAEpG,OAAO,EAAE,cAAc,EAAmC,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/F,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,EAAE,SAAS,CAAC;IAE5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAsBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/LifeCycle/LifeCycleList.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { createUID, useDirection } from '@pega/cosmos-react-core';
+import { defaultThemeProp, createUID, useDirection } from '@pega/cosmos-react-core';
 import { getStageInfo } from './LifeCycle.types';
 import Stage from './Stage';
 import Category from './Category';
@@ -23,6 +23,7 @@ const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
     `}
   `;
 });
+StyledLifeCycleList.defaultProps = defaultThemeProp;
 const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, stage: stageProps, task, step, prevStageVariant, stageVariant, id, ...restProps }, ref) => {
     const showTitle = isFirstItem || false;
     let sortedCategory = [];
@@ -45,7 +46,7 @@ const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, s
         sortedCategory = catgoryItem(item.categories);
     }
     const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);
-    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
+    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }), sortedCategory.length !== 0 &&
                 sortedCategory.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\nimport { createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport { StageItemProps, CategoryItemProps, getStageInfo, StageType } from './LifeCycle.types';\nimport Stage, { StageProps } from './Stage';\nimport Category, { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLOListElement>;\n  /* Array of categories  column props */\n  categories: CategoriesProps[];\n  /* Array of Task props */\n  task: TaskProps[];\n  /* Array of Step props */\n  stage?: StageProps;\n  /* Array of Stage props */\n  step?: StepProps[];\n  /* Data model should be have stages array */\n  item: StageItemProps;\n  /* Count of number of stages */\n  isFirstItem?: boolean;\n  /* Index of stages item */\n  isLastItem?: boolean;\n  /* type of stages */\n  stageVariant?: StageType;\n  prevStageVariant: StageType;\n  /* id for the list item */\n  id?: string;\n}\n\nconst StyledLifeCycleList = styled.li<{ lastItem: boolean | undefined }>(({ theme, lastItem }) => {\n  const { rtl } = useDirection();\n  return css`\n    list-style-type: none;\n    padding: 0 ${theme.base.spacing} 0 0;\n    width: 15rem;\n    ${lastItem &&\n    css`\n      padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;\n    `}\n    ${lastItem &&\n    rtl &&\n    css`\n      padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(\n  (\n    {\n      item,\n      isFirstItem,\n      isLastItem,\n      categories,\n      stage: stageProps,\n      task,\n      step,\n      prevStageVariant,\n      stageVariant,\n      id,\n      ...restProps\n    }: LifeCycleListProps,\n    ref: LifeCycleListProps['ref']\n  ) => {\n    const showTitle = isFirstItem || false;\n    let sortedCategory: CategoryItemProps[] = [];\n    const listId = id || createUID();\n\n    /* Function used to rearrange the category data depends on Categories order */\n    const catgoryItem = (categoryData: CategoryItemProps[]) => {\n      const sortedColumn: CategoryItemProps[] = [];\n      if (categories && categories.length > 0 && categoryData.length > 0) {\n        categories.forEach(categoryColumnItem => {\n          categoryData.forEach((categoryItem: CategoryItemProps) => {\n            if (categoryItem.categoryId === categoryColumnItem.id) {\n              sortedColumn.push(categoryItem);\n            }\n          });\n        });\n      }\n      return sortedColumn;\n    };\n\n    if (categories && categories.length !== 0) {\n      sortedCategory = catgoryItem(item.categories);\n    }\n\n    const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);\n    return (\n      <StyledLifeCycleList key={listId} role='row' lastItem={isLastItem}>\n        <Stage\n          value={item.label}\n          stageInfo={stageInfo}\n          item={item}\n          error={item.error}\n          id={item.id}\n          {...stageProps}\n        />\n        {sortedCategory.length !== 0 &&\n          sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n            return (\n              <Category\n                {...restProps}\n                key={categoryItem.categoryId}\n                role='gridcell'\n                id={categoryItem.categoryId}\n                ref={ref}\n                category={categories[categoryindex]}\n                item={categoryItem}\n                showTitle={showTitle}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n              />\n            );\n          })}\n        {sortedCategory.length === 0 &&\n          categories.length === 0 &&\n          item.categories.length > 0 &&\n          item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n\n            return (\n              <Category\n                key={categoryItem.categoryId}\n                role='gridcell'\n                id={categoryItem.categoryId}\n                ref={ref}\n                item={categoryItem}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n                showTitle={showTitle}\n              />\n            );\n          })}\n      </StyledLifeCycleList>\n    );\n  }\n);\n\nexport default LifeCycleList;\n"]}
+{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, NoChildrenProp, createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport { StageItemProps, CategoryItemProps, getStageInfo, StageType } from './LifeCycle.types';\nimport Stage, { StageProps } from './Stage';\nimport Category, { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLOListElement>;\n  /* Array of categories  column props */\n  categories: CategoriesProps[];\n  /* Array of Task props */\n  task: TaskProps[];\n  /* Array of Step props */\n  stage?: StageProps;\n  /* Array of Stage props */\n  step?: StepProps[];\n  /* Data model should be have stages array */\n  item: StageItemProps;\n  /* Count of number of stages */\n  isFirstItem?: boolean;\n  /* Index of stages item */\n  isLastItem?: boolean;\n  /* type of stages */\n  stageVariant?: StageType;\n  prevStageVariant: StageType;\n  /* id for the list item */\n  id?: string;\n}\n\nconst StyledLifeCycleList = styled.li<{ lastItem: boolean | undefined }>(({ theme, lastItem }) => {\n  const { rtl } = useDirection();\n  return css`\n    list-style-type: none;\n    padding: 0 ${theme.base.spacing} 0 0;\n    width: 15rem;\n    ${lastItem &&\n    css`\n      padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;\n    `}\n    ${lastItem &&\n    rtl &&\n    css`\n      padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nStyledLifeCycleList.defaultProps = defaultThemeProp;\n\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(\n  (\n    {\n      item,\n      isFirstItem,\n      isLastItem,\n      categories,\n      stage: stageProps,\n      task,\n      step,\n      prevStageVariant,\n      stageVariant,\n      id,\n      ...restProps\n    }: LifeCycleListProps,\n    ref: LifeCycleListProps['ref']\n  ) => {\n    const showTitle = isFirstItem || false;\n    let sortedCategory: CategoryItemProps[] = [];\n    const listId = id || createUID();\n\n    /* Function used to rearrange the category data depends on Categories order */\n    const catgoryItem = (categoryData: CategoryItemProps[]) => {\n      const sortedColumn: CategoryItemProps[] = [];\n      if (categories && categories.length > 0 && categoryData.length > 0) {\n        categories.forEach(categoryColumnItem => {\n          categoryData.forEach((categoryItem: CategoryItemProps) => {\n            if (categoryItem.categoryId === categoryColumnItem.id) {\n              sortedColumn.push(categoryItem);\n            }\n          });\n        });\n      }\n      return sortedColumn;\n    };\n\n    if (categories && categories.length !== 0) {\n      sortedCategory = catgoryItem(item.categories);\n    }\n\n    const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);\n    return (\n      <StyledLifeCycleList key={listId} role='row' lastItem={isLastItem}>\n        <Stage\n          value={item.label}\n          stageInfo={stageInfo}\n          item={item}\n          error={item.error}\n          id={item.id}\n          {...stageProps}\n        />\n        {sortedCategory.length !== 0 &&\n          sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n            return (\n              <Category\n                {...restProps}\n                key={categoryItem.categoryId}\n                role='gridcell'\n                id={categoryItem.categoryId}\n                ref={ref}\n                category={categories[categoryindex]}\n                item={categoryItem}\n                showTitle={showTitle}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n              />\n            );\n          })}\n        {sortedCategory.length === 0 &&\n          categories.length === 0 &&\n          item.categories.length > 0 &&\n          item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n\n            return (\n              <Category\n                key={categoryItem.categoryId}\n                role='gridcell'\n                id={categoryItem.categoryId}\n                ref={ref}\n                item={categoryItem}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n                showTitle={showTitle}\n              />\n            );\n          })}\n      </StyledLifeCycleList>\n    );\n  }\n);\n\nexport default LifeCycleList;\n"]}

package/lib/components/LifeCycle/Stage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,EAAE,CAAC,GAAG,eAAe,EAAE,CAAC;IACnE,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,sBAAsB;IACtB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,cAAc;WAAuB,MAAM;SAatD,CAAC;AAEH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAEH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAEH,eAAO,MAAM,WAAW;YAEZ,OAAO;SAuJjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyIhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,EAAE,CAAC,GAAG,eAAe,EAAE,CAAC;IACnE,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,sBAAsB;IACtB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,cAAc;WAAuB,MAAM;SAatD,CAAC;AAIH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAIH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;SA2IjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyIhE,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/LifeCycle/Stage.js

@@ -7,8 +7,8 @@ export const StyledWrapper = styled.div `
 `;
 export const StyledDragIcon = styled.div(({ theme, error }) => {
     return css `
-    width: 0%;
-    transition: width ${theme.base.animation.speed};
+    width: 1.5rem;
+    visibility: hidden;
     ${error &&
         css `
       display: block;
@@ -19,6 +19,7 @@ export const StyledDragIcon = styled.div(({ theme, error }) => {
     text-align: center;
   `;
 });
+StyledDragIcon.defaultProps = defaultThemeProp;
 export const StyledInput = styled.input(({ error, theme }) => {
     return css `
     height: ${theme.components.input.height};
@@ -51,6 +52,7 @@ export const StyledInput = styled.input(({ error, theme }) => {
         `}
   `;
 });
+StyledInput.defaultProps = defaultThemeProp;
 export const StyledStageActions = styled.div(({ theme, error }) => {
     return css `
     z-index: 2;
@@ -67,6 +69,7 @@ export const StyledStageActions = styled.div(({ theme, error }) => {
     }
   `;
 });
+StyledStageActions.defaultProps = defaultThemeProp;
 export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
     const { visual: { bgColor, bgHover, tailPointed, headPointed } } = stageInfo;
     const { rtl } = useDirection();
@@ -89,20 +92,8 @@ export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
 
     &:hover {
       cursor: pointer;
-      ${StyledDragIcon} {
-        @keyframes anim {
-          0% {
-            transform: scale(0);
-          }
-          100% {
-            transform: scale(1);
-          }
-        }
-        animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-        width: 10%;
-        transition: width ${theme.base.animation.speed};
-      }
-      ${StyledStageActions} {
+
+      ${StyledDragIcon},${StyledStageActions} {
         ${css `
           visibility: visible;
         `}
@@ -288,7 +279,7 @@ const Stage = forwardRef(({ value, actions, stageInfo, onChange, onFocus, onBlur
             return actionItem;
         });
     }
-    return (_jsx(Flex, { container: { inline: true }, as: StyledStage, ...restProps, ref: ref, stageInfo: stageInfo, status: error, role: 'columnheader', children: _jsxs(Flex, { as: StyledWrapper, container: { inline: true }, children: [_jsx(Flex, { as: StyledDragIcon, error: error, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), _jsxs(Flex, { container: true, children: [_jsxs(Flex, { as: StyledInputWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: stageName, type: 'text', ref: setInputEl, error: error, id: item.id, onChange: onInputChange, "aria-label": stageName, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }, void 0))] }, void 0), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
+    return (_jsx(Flex, { container: { inline: true }, as: StyledStage, ...restProps, ref: ref, stageInfo: stageInfo, status: error, role: 'columnheader', children: _jsxs(Flex, { as: StyledWrapper, container: { inline: true }, children: [_jsx(Flex, { as: StyledDragIcon, error: error, children: _jsx(Icon, { name: 'drag' }) }), _jsxs(Flex, { container: true, children: [_jsxs(Flex, { as: StyledInputWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: stageName, type: 'text', ref: setInputEl, error: error, id: item.id, onChange: onInputChange, "aria-label": stageName, onFocus: onInputFocus, onBlur: onInputBlur }), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }))] }), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] })] }) }));
 });
 export default Stage;
 //# sourceMappingURL=Stage.js.map