@pega/cosmos-react-build 2.0.0-rc.2 → 2.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +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;
|
|
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,EAAE,eAAe,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE1F,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,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;CAClF;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,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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;iBAEP,OAAO;iBACP,OAAO;YACZ,OAAO;SA2KjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgHhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { readableColor } from 'polished';
|
|
5
4
|
import { Flex, Actions, Icon, Tooltip, useElement, defaultThemeProp, useDirection, StyledTooltip, StyledButton } from '@pega/cosmos-react-core';
|
|
6
5
|
export const StyledWrapper = styled.div `
|
|
7
6
|
overflow: hidden;
|
|
@@ -93,7 +92,6 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
|
|
|
93
92
|
bgColor = theme.base.colors.blue.medium;
|
|
94
93
|
bgHover = theme.base.colors.blue.light;
|
|
95
94
|
}
|
|
96
|
-
const textColor = readableColor(bgHover);
|
|
97
95
|
const { rtl } = useDirection();
|
|
98
96
|
const roundedEndsStyles = css `
|
|
99
97
|
content: '';
|
|
@@ -233,8 +231,6 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
|
|
|
233
231
|
css `
|
|
234
232
|
border: 0.0625rem solid transparent;
|
|
235
233
|
background: ${bgHover};
|
|
236
|
-
|
|
237
|
-
/* color: ${textColor}; */
|
|
238
234
|
`}
|
|
239
235
|
}
|
|
240
236
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithChildren,\n Ref,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n BaseProps,\n ForwardProps,\n Actions,\n Icon,\n Tooltip,\n useElement,\n FormControlProps,\n defaultThemeProp,\n useDirection,\n StyledTooltip,\n Action,\n StyledButton\n} from '@pega/cosmos-react-core';\n\nimport { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';\n\nexport interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. */\n actions?: LifeCycleAction[];\n /** Callback for Add stage */\n onAddStage?: () => void;\n /** Callback for Adding alternate stage */\n onAddAlternateStage?: () => void;\n /** Input Change */\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /** onFocus of input */\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /** Pass text for the task. */\n value: string;\n /* unique id of the component */\n id: string;\n /** Controls the styling of the stage. */\n variant?: StageItemProps['type'] | 'default';\n /** To make the stage with pointed tail */\n tailPointed?: boolean;\n /** To make the stage with pointed head */\n headPointed?: boolean;\n /** Full data object which can be passed to the callback */\n item: StageItemProps;\n /* The status is used to show the input error status and the info on tooltip in case of error */\n error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n overflow: hidden;\n`;\n\nexport const StyledDragIcon = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n width: 0%;\n transition: width ${theme.base.animation.speed};\n ${error &&\n css`\n display: block;\n `}\n padding: 0 calc(0.5 * ${theme.base.spacing});\n margin: calc(0.5 * ${theme.base.spacing}) 0;\n color: ${theme.base.colors.white};\n text-align: center;\n `;\n});\n\nexport const StyledInput = styled.input<{ error: string | undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n color: ${theme.base.colors.white};\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n color: ${theme.base.colors.black};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:focus:enabled {\n color: ${theme.base.colors.black};\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n `}\n `;\n});\n\nexport const StyledStageActions = styled.div<{\n error?: string;\n}>(({ theme, error }) => {\n return css`\n z-index: 2;\n visibility: hidden;\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n ${error &&\n css`\n visibility: visible;\n `}\n\n & > ${StyledButton} {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'variant'> & {\n tailPointed: boolean;\n headPointed: boolean;\n status: boolean;\n }\n>(({ variant, theme, tailPointed, headPointed, status }) => {\n let bgColor;\n let bgHover = '';\n switch (variant) {\n case 'start':\n bgColor = theme.base.colors.blue.dark;\n bgHover = theme.base.colors.blue.medium;\n break;\n case 'default':\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n break;\n case 'resolution':\n bgColor = theme.base.colors.green.medium;\n bgHover = theme.base.colors.green.light;\n break;\n case 'alternate':\n bgColor = theme.base.colors.red.light;\n bgHover = theme.base.colors.red['extra-light'];\n break;\n // eslint-disable-next-line sonarjs/no-duplicated-branches\n default:\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n }\n const textColor = readableColor(bgHover);\n const { rtl } = useDirection();\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n\n return css`\n position: relative;\n padding: calc(0.5 * ${theme.base.spacing});\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n ${StyledDragIcon} {\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${!headPointed &&\n css`\n &::after {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${!tailPointed &&\n css`\n &::before {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${StyledDragIcon} {\n ${css`\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n `}\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n\n ${!headPointed &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n 0.0625rem;\n `}\n }\n `}\n\n ${!tailPointed &&\n css`\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 0 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 0;\n `}\n }\n `}\n\n ${StyledInput} {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgColor};\n `}\n :hover:not([readonly]):not([disabled]):not(:focus) {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgHover};\n\n /* color: ${textColor}; */\n `}\n }\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n (\n {\n value,\n actions,\n variant = 'default',\n headPointed = true,\n tailPointed = true,\n onChange,\n onFocus,\n id,\n item,\n error,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n ) => {\n const [inputEl, setInputEl] = useElement();\n const [stageName, setStageName] = useState(value);\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStageName(e.target.value);\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onFocus?.(param, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n actions?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e);\n }\n });\n };\n\n /* Deep copy of actions object is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n return (\n <Flex\n container={{ inline: true }}\n as={StyledStage}\n {...restProps}\n ref={ref}\n variant={variant || 'default'}\n tailPointed={tailPointed}\n headPointed={headPointed}\n status={error}\n role='columnheader'\n >\n <Flex as={StyledWrapper} container={{ inline: true }}>\n <Flex as={StyledDragIcon} error={error}>\n <Icon name='drag' />\n </Flex>\n <Flex container>\n <Flex\n as={StyledInputWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={stageName}\n type='text'\n ref={setInputEl}\n error={error}\n id={item.id}\n onChange={onInputChange}\n aria-label={stageName}\n onFocus={onInputFocus}\n />\n {stageName && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error || stageName}\n </Tooltip>\n )}\n </Flex>\n <StyledStageActions error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </StyledStageActions>\n </Flex>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Stage;\n"]}
|
|
1
|
+
{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithChildren,\n Ref,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n BaseProps,\n ForwardProps,\n Actions,\n Icon,\n Tooltip,\n useElement,\n FormControlProps,\n defaultThemeProp,\n useDirection,\n StyledTooltip,\n Action,\n StyledButton\n} from '@pega/cosmos-react-core';\n\nimport { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';\n\nexport interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. */\n actions?: LifeCycleAction[];\n /** Callback for Add stage */\n onAddStage?: () => void;\n /** Callback for Adding alternate stage */\n onAddAlternateStage?: () => void;\n /** Input Change */\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /** onFocus of input */\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /** Pass text for the task. */\n value: string;\n /* unique id of the component */\n id: string;\n /** Controls the styling of the stage. */\n variant?: StageItemProps['type'] | 'default';\n /** To make the stage with pointed tail */\n tailPointed?: boolean;\n /** To make the stage with pointed head */\n headPointed?: boolean;\n /** Full data object which can be passed to the callback */\n item: StageItemProps;\n /* The status is used to show the input error status and the info on tooltip in case of error */\n error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n overflow: hidden;\n`;\n\nexport const StyledDragIcon = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n width: 0%;\n transition: width ${theme.base.animation.speed};\n ${error &&\n css`\n display: block;\n `}\n padding: 0 calc(0.5 * ${theme.base.spacing});\n margin: calc(0.5 * ${theme.base.spacing}) 0;\n color: ${theme.base.colors.white};\n text-align: center;\n `;\n});\n\nexport const StyledInput = styled.input<{ error: string | undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n color: ${theme.base.colors.white};\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n color: ${theme.base.colors.black};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:focus:enabled {\n color: ${theme.base.colors.black};\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n `}\n `;\n});\n\nexport const StyledStageActions = styled.div<{\n error?: string;\n}>(({ theme, error }) => {\n return css`\n z-index: 2;\n visibility: hidden;\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n ${error &&\n css`\n visibility: visible;\n `}\n\n & > ${StyledButton} {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'variant'> & {\n tailPointed: boolean;\n headPointed: boolean;\n status: boolean;\n }\n>(({ variant, theme, tailPointed, headPointed, status }) => {\n let bgColor;\n let bgHover = '';\n switch (variant) {\n case 'start':\n bgColor = theme.base.colors.blue.dark;\n bgHover = theme.base.colors.blue.medium;\n break;\n case 'default':\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n break;\n case 'resolution':\n bgColor = theme.base.colors.green.medium;\n bgHover = theme.base.colors.green.light;\n break;\n case 'alternate':\n bgColor = theme.base.colors.red.light;\n bgHover = theme.base.colors.red['extra-light'];\n break;\n // eslint-disable-next-line sonarjs/no-duplicated-branches\n default:\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n }\n const { rtl } = useDirection();\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n\n return css`\n position: relative;\n padding: calc(0.5 * ${theme.base.spacing});\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n ${StyledDragIcon} {\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${!headPointed &&\n css`\n &::after {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${!tailPointed &&\n css`\n &::before {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${StyledDragIcon} {\n ${css`\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n `}\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n\n ${!headPointed &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n 0.0625rem;\n `}\n }\n `}\n\n ${!tailPointed &&\n css`\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 0 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 0;\n `}\n }\n `}\n\n ${StyledInput} {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgColor};\n `}\n :hover:not([readonly]):not([disabled]):not(:focus) {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgHover};\n `}\n }\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n (\n {\n value,\n actions,\n variant = 'default',\n headPointed = true,\n tailPointed = true,\n onChange,\n onFocus,\n id,\n item,\n error,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n ) => {\n const [inputEl, setInputEl] = useElement();\n const [stageName, setStageName] = useState(value);\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStageName(e.target.value);\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onFocus?.(param, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n actions?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e);\n }\n });\n };\n\n /* Deep copy of actions object is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n return (\n <Flex\n container={{ inline: true }}\n as={StyledStage}\n {...restProps}\n ref={ref}\n variant={variant || 'default'}\n tailPointed={tailPointed}\n headPointed={headPointed}\n status={error}\n role='columnheader'\n >\n <Flex as={StyledWrapper} container={{ inline: true }}>\n <Flex as={StyledDragIcon} error={error}>\n <Icon name='drag' />\n </Flex>\n <Flex container>\n <Flex\n as={StyledInputWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={stageName}\n type='text'\n ref={setInputEl}\n error={error}\n id={item.id}\n onChange={onInputChange}\n aria-label={stageName}\n onFocus={onInputFocus}\n />\n {stageName && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error || stageName}\n </Tooltip>\n )}\n </Flex>\n <StyledStageActions error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </StyledStageActions>\n </Flex>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Stage;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.3",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "2.0.0-rc.
|
|
24
|
-
"@pega/cosmos-react-dnd": "2.0.0-rc.
|
|
23
|
+
"@pega/cosmos-react-core": "2.0.0-rc.3",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.0.0-rc.3",
|
|
25
25
|
"dagre": "^0.8.5",
|
|
26
26
|
"polished": "^4.1.0",
|
|
27
27
|
"react": "^16.14.0 || ^17.0.0",
|