@pega/lists-react 10.0.0-build.4.24 → 10.0.0-build.4.25
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.
- package/lib/Core/Utils/styles.d.ts.map +1 -1
- package/lib/Core/Utils/styles.js +5 -1
- package/lib/Core/Utils/styles.js.map +1 -1
- package/lib/Core/Views/Kanban/Kanban.styles.d.ts +3 -0
- package/lib/Core/Views/Kanban/Kanban.styles.d.ts.map +1 -1
- package/lib/Core/Views/Kanban/Kanban.styles.js +5 -0
- package/lib/Core/Views/Kanban/Kanban.styles.js.map +1 -1
- package/lib/Core/Views/Kanban/KanbanLane.d.ts.map +1 -1
- package/lib/Core/Views/Kanban/KanbanLane.js +3 -3
- package/lib/Core/Views/Kanban/KanbanLane.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAmElE,eAAO,MAAM,sBAAsB,GAAI,wBAGpC;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,gDAUA,CAAC;AAGF,eAAO,MAAM,mCAAmC,mDAM/C,CAAC"}
|
package/lib/Core/Utils/styles.js
CHANGED
|
@@ -34,7 +34,11 @@ function getHeightStyles(view, isFullscreen) {
|
|
|
34
34
|
if (basicMode) {
|
|
35
35
|
calculatedHeight = 'auto';
|
|
36
36
|
}
|
|
37
|
-
if (height) {
|
|
37
|
+
if (typeof height === 'string' && height.startsWith('--')) {
|
|
38
|
+
// CSS variable: explicit height takes precedence over basicMode.
|
|
39
|
+
calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;
|
|
40
|
+
}
|
|
41
|
+
else if (typeof height === 'number') {
|
|
38
42
|
calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;
|
|
39
43
|
}
|
|
40
44
|
if (viewHeight) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAC9C,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAE9C,SAAS,eAAe,CAAC,IAAsB,EAAE,YAAqB;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,MAAM,EACJ,UAAU,EACV,IAAI,EAAE,EACJ,SAAS,EACT,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,yBAAyB,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,EAC9F,EACF,GAAG,IAAI,CAAC;IAET,MAAM,qBAAqB,GAAG,yBAAyB;QACrD,CAAC,CAAC,OAAO,yBAAyB,KAAK,6BAA6B,GAAG;QACvE,CAAC,CAAC,6BAA6B,CAAC;IAElC,MAAM,WAAW,GAAG,6BAA6B,CAAC;IAElD,sDAAsD;IACtD,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,oBAAoB,qBAAqB,OAAO,WAAW,GAAG;SAC1E,CAAC;IACJ,CAAC;IAED,0BAA0B;IAC1B,IAAI,mBAAmB,GAAG,MAAM,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,mBAAmB,GAAG,6BAA6B,CAAC;IACtD,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,mBAAmB,GAAG,YAAY,SAAS,OAAO,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IACtH,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QAChE,mBAAmB,GAAG,gBAAgB,SAAS,KAAK,6BAA6B,MAAM,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IAC3J,CAAC;IAED,sBAAsB;IACtB,yHAAyH;IACzH,IAAI,gBAAgB,GAAG,mBAAmB,CAAC;IAC3C,IAAI,SAAS,EAAE,CAAC;QACd,gBAAgB,GAAG,MAAM,CAAC;IAC5B,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from 'styled-components';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nconst DEFAULT_READONLY_TABLE_HEIGHT = '600px';\nconst MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';\n\nfunction getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean) {\n if (!view) return {};\n\n const {\n viewHeight,\n meta: {\n basicMode,\n height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {}\n }\n } = view;\n\n const maxHeightMinimumValue = maxHeightMinValueVariable\n ? `var(${maxHeightMinValueVariable}, ${MAX_HEIGHT_MIN_VALUE_FALLBACK})`\n : MAX_HEIGHT_MIN_VALUE_FALLBACK;\n\n const cardPadding = 'var(--rs-card-padding, 0px)';\n\n // Fullscreen mode overrides other height calculations\n if (isFullscreen) {\n return {\n height: 'auto',\n minHeight: 'auto',\n maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`\n };\n }\n\n // Max-height calculations\n let calculatedMaxHeight = 'none';\n if (basicMode) {\n calculatedMaxHeight = DEFAULT_READONLY_TABLE_HEIGHT;\n }\n if (typeof maxHeight === 'number') {\n calculatedMaxHeight = `calc(max(${maxHeight}px, ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n }\n if (typeof maxHeight === 'string' && maxHeight.startsWith('--')) {\n calculatedMaxHeight = `calc(max(var(${maxHeight}, ${DEFAULT_READONLY_TABLE_HEIGHT}), ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n }\n\n // Height calculations\n // For landing pages stretch the repeating view to the max available height even though there might be less or no records\n let calculatedHeight = calculatedMaxHeight;\n if (basicMode) {\n calculatedHeight = 'auto';\n }\n if (typeof height === 'string' && height.startsWith('--')) {\n // CSS variable: explicit height takes precedence over basicMode.\n calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;\n } else if (typeof height === 'number') {\n calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;\n }\n if (viewHeight) {\n calculatedHeight = `calc(${viewHeight}px - ${deltaAdjustment}px - ${cardPadding})`;\n }\n\n return {\n height: calculatedHeight,\n minHeight: minHeight ? `${minHeight}px` : 'auto',\n maxHeight: calculatedMaxHeight\n };\n}\n\n// Exposes styles to be set on the RS template\nexport const generateRSHeightStyles = ({\n view,\n isFullscreen\n}: {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}) => {\n const { height, minHeight, maxHeight } = getHeightStyles(view, isFullscreen);\n\n return css`\n display: flex;\n flex-direction: column;\n height: ${height};\n min-height: ${minHeight};\n max-height: ${maxHeight};\n `;\n};\n\n// Exposes styles to be set on the container that contains the data records and need to be expanded and collapsed based on records\nexport const generateRSDataContainerHeightStyles = () => {\n return css`\n display: flex;\n flex: 1 1 auto;\n overflow: hidden;\n `;\n};\n"]}
|
|
@@ -8,6 +8,9 @@ export declare const StyledKanbanBoard: import("styled-components/dist/types").I
|
|
|
8
8
|
export declare const StyledKanbanLane: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
9
9
|
export declare const StyledKanbanLaneHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
10
10
|
export declare const StyledKanbanCards: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
11
|
+
export declare const StyledEmptyKanbanCards: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
|
|
12
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
13
|
+
}, never>> & string;
|
|
11
14
|
export declare const StyledKanbanCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
12
15
|
export {};
|
|
13
16
|
//# sourceMappingURL=Kanban.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kanban.styles.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,+PAKjC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAIF,eAAO,MAAM,gBAAgB,uNAO5B,CAAC;AAIF,eAAO,MAAM,sBAAsB,uNASlC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAa5B,CAAC"}
|
|
1
|
+
{"version":3,"file":"Kanban.styles.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,+PAKjC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAIF,eAAO,MAAM,gBAAgB,uNAO5B,CAAC;AAIF,eAAO,MAAM,sBAAsB,uNASlC,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM7B,CAAC;AAKF,eAAO,MAAM,sBAAsB;;mBAIlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAa5B,CAAC"}
|
|
@@ -37,6 +37,11 @@ export const StyledKanbanCards = styled.div `
|
|
|
37
37
|
overflow: auto;
|
|
38
38
|
`;
|
|
39
39
|
StyledKanbanCards.defaultProps = defaultThemeProp;
|
|
40
|
+
// Set minimum height of 5 rem for empty lane to avoid collapsing the lane when there are no cards.
|
|
41
|
+
export const StyledEmptyKanbanCards = styled(StyledKanbanCards)(({ theme }) => css `
|
|
42
|
+
min-block-size: calc(${theme.base.spacing} * 10);
|
|
43
|
+
`);
|
|
44
|
+
StyledEmptyKanbanCards.defaultProps = defaultThemeProp;
|
|
40
45
|
export const StyledKanbanCard = styled.div(({ theme }) => css `
|
|
41
46
|
box-sizing: border-box;
|
|
42
47
|
inline-size: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kanban.styles.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAC;AAGhH,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC3B,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;GAEjD,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,GAAG,EAAE,CAAC,GAAG,CAAA;;;;GAIR,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;qBAEC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;GAEzD,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;GAKtD,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;sBAGE,KAAK,CAAC,IAAI,CAAC,OAAO;yBACf,KAAK,CAAC,IAAI,CAAC,OAAO;;MAErC,mBAAmB;;;;;GAKtB,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport { generateRSHeightStyles } from '../../Utils/styles';\n\ninterface StyledKanbanContainerProps {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}\n\nexport const StyledKanbanContainer = styled.div<StyledKanbanContainerProps>(\n ({ view, isFullscreen }) => css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n min-inline-size: 0;\n `\n);\n\nStyledKanbanContainer.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanBoard = styled.div(\n () => css`\n flex: 1 1 auto;\n min-block-size: 0;\n overflow: auto;\n `\n);\n\nStyledKanbanBoard.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLane = styled.section(\n ({ theme }) => css`\n min-block-size: 0;\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.palette['secondary-background']};\n overflow: hidden;\n `\n);\n\nStyledKanbanLane.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLaneHeader = styled.header(\n ({ theme }) => css`\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n\n > :first-child {\n min-inline-size: 0;\n }\n `\n);\n\nStyledKanbanLaneHeader.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCards = styled.div`\n position: relative;\n flex: 1 1 auto;\n min-block-size: 0;\n display: flex;\n overflow: auto;\n`;\n\nStyledKanbanCards.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCard = styled.div(\n ({ theme }) => css`\n box-sizing: border-box;\n inline-size: 100%;\n padding-inline: ${theme.base.spacing};\n padding-block-end: ${theme.base.spacing};\n\n ${StyledSelectionCard} {\n inline-size: 100%;\n max-inline-size: 100%;\n min-inline-size: 0;\n }\n `\n);\n\nStyledKanbanCard.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Kanban.styles.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/Kanban.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAC;AAGhH,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC3B,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;GAEjD,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,GAAG,EAAE,CAAC,GAAG,CAAA;;;;GAIR,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;qBAEC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;GAEzD,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;GAKtD,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,mGAAmG;AACnG,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAC7D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;2BACO,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1C,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;sBAGE,KAAK,CAAC,IAAI,CAAC,OAAO;yBACf,KAAK,CAAC,IAAI,CAAC,OAAO;;MAErC,mBAAmB;;;;;GAKtB,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport { generateRSHeightStyles } from '../../Utils/styles';\n\ninterface StyledKanbanContainerProps {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}\n\nexport const StyledKanbanContainer = styled.div<StyledKanbanContainerProps>(\n ({ view, isFullscreen }) => css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n min-inline-size: 0;\n `\n);\n\nStyledKanbanContainer.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanBoard = styled.div(\n () => css`\n flex: 1 1 auto;\n min-block-size: 0;\n overflow: auto;\n `\n);\n\nStyledKanbanBoard.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLane = styled.section(\n ({ theme }) => css`\n min-block-size: 0;\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.palette['secondary-background']};\n overflow: hidden;\n `\n);\n\nStyledKanbanLane.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanLaneHeader = styled.header(\n ({ theme }) => css`\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n\n > :first-child {\n min-inline-size: 0;\n }\n `\n);\n\nStyledKanbanLaneHeader.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCards = styled.div`\n position: relative;\n flex: 1 1 auto;\n min-block-size: 0;\n display: flex;\n overflow: auto;\n`;\n\nStyledKanbanCards.defaultProps = defaultThemeProp;\n\n// Set minimum height of 5 rem for empty lane to avoid collapsing the lane when there are no cards.\nexport const StyledEmptyKanbanCards = styled(StyledKanbanCards)(\n ({ theme }) => css`\n min-block-size: calc(${theme.base.spacing} * 10);\n `\n);\n\nStyledEmptyKanbanCards.defaultProps = defaultThemeProp;\n\nexport const StyledKanbanCard = styled.div(\n ({ theme }) => css`\n box-sizing: border-box;\n inline-size: 100%;\n padding-inline: ${theme.base.spacing};\n padding-block-end: ${theme.base.spacing};\n\n ${StyledSelectionCard} {\n inline-size: 100%;\n max-inline-size: 100%;\n min-inline-size: 0;\n }\n `\n);\n\nStyledKanbanCard.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanLane.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"KanbanLane.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAWlE,UAAU,eAAe;IACvB,IAAI,EAAE,WAAW,CAAC,cAAc,CAAC;IACjC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAChC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAClC,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC1C,UAAU,EAAE,SAAS,CAAC;IACtB,mFAAmF;IACnF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,MAAM,EACP,EAAE,eAAe,2CAmCjB;kBA5CQ,UAAU;;;AAgDnB,eAAO,MAAM,eAAe,GAAI,gBAAgB,oBAAoB,4CAoBnE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Count, Flex, Grid } from '@pega/cosmos-react-core';
|
|
3
3
|
import KanbanLaneHeader from './KanbanLaneHeader';
|
|
4
4
|
import KanbanLaneVirtualizer from './KanbanLaneVirtualizer';
|
|
5
|
-
import { StyledKanbanCards, StyledKanbanLane, StyledKanbanLaneHeader } from './Kanban.styles';
|
|
5
|
+
import { StyledEmptyKanbanCards, StyledKanbanCards, StyledKanbanLane, StyledKanbanLaneHeader } from './Kanban.styles';
|
|
6
6
|
function KanbanLane({ lane, laneColumn, meta, visibleColumns, headerColumn, subHeadingsColumns, emptyState, laneId }) {
|
|
7
7
|
const laneRows = lane.getRows?.() ?? [];
|
|
8
|
-
return (_jsxs(Flex, { as: StyledKanbanLane, "data-kanban-lane": true, role: 'listitem', container: { direction: 'column' }, children: [_jsxs(Grid, { as: StyledKanbanLaneHeader, container: { cols: 'minmax(0, 1fr) auto', alignItems: 'center', gap: 0.5, pad: 1 }, children: [_jsx(KanbanLaneHeader, { column: laneColumn, groupHeader: lane }), _jsx(Count, { children: lane.count })] }), lane.count === 0 ? (_jsx(Flex, { as:
|
|
8
|
+
return (_jsxs(Flex, { as: StyledKanbanLane, "data-kanban-lane": true, role: 'listitem', container: { direction: 'column' }, children: [_jsxs(Grid, { as: StyledKanbanLaneHeader, container: { cols: 'minmax(0, 1fr) auto', alignItems: 'center', gap: 0.5, pad: 1 }, children: [_jsx(KanbanLaneHeader, { column: laneColumn, groupHeader: lane }), _jsx(Count, { children: lane.count })] }), lane.count === 0 ? (_jsx(Flex, { as: StyledEmptyKanbanCards, container: { direction: 'column', gap: 1, pad: 1 }, children: emptyState })) : (_jsx(StyledKanbanCards, { children: _jsx(KanbanLaneVirtualizer, { laneId: laneId, rows: laneRows, meta: meta, visibleColumns: visibleColumns, headerColumn: headerColumn, subHeadingsColumns: subHeadingsColumns }) }))] }));
|
|
9
9
|
}
|
|
10
10
|
KanbanLane.displayName = 'KanbanLane';
|
|
11
11
|
export const EmptyKanbanLane = ({ emptyState }) => {
|
|
@@ -15,7 +15,7 @@ export const EmptyKanbanLane = ({ emptyState }) => {
|
|
|
15
15
|
gap: 0.5,
|
|
16
16
|
pad: 1,
|
|
17
17
|
justifyItems: 'end'
|
|
18
|
-
}, children: _jsx(Count, { children: 0 }) }), _jsx(Flex, { as:
|
|
18
|
+
}, children: _jsx(Count, { children: 0 }) }), _jsx(Flex, { as: StyledEmptyKanbanCards, container: { direction: 'column', gap: 1, pad: 1 }, children: emptyState })] }));
|
|
19
19
|
};
|
|
20
20
|
export default KanbanLane;
|
|
21
21
|
//# sourceMappingURL=KanbanLane.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanLane.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"KanbanLane.js","sourceRoot":"","sources":["../../../../Core/Views/Kanban/KanbanLane.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,iBAAiB,CAAC;AAkBzB,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,MAAM,EACU;IAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC;IAExC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,4BAEpB,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAElC,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,aAElF,KAAC,gBAAgB,IAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,GAAI,EAC3D,KAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAS,IACtB,EACN,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAClB,KAAC,IAAI,IAAC,EAAE,EAAE,sBAAsB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YACjF,UAAU,GACN,CACR,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,cAChB,KAAC,qBAAqB,IACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,GACtC,GACgB,CACrB,IACI,CACR,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAwB,EAAE,EAAE;IACtE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC5E,KAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;oBACT,IAAI,EAAE,qBAAqB;oBAC3B,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;oBACR,GAAG,EAAE,CAAC;oBACN,YAAY,EAAE,KAAK;iBACpB,YAED,KAAC,KAAK,cAAE,CAAC,GAAS,GACb,EACP,KAAC,IAAI,IAAC,EAAE,EAAE,sBAAsB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YACjF,UAAU,GACN,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Count, Flex, Grid } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport KanbanLaneHeader from './KanbanLaneHeader';\nimport KanbanLaneVirtualizer from './KanbanLaneVirtualizer';\nimport {\n StyledEmptyKanbanCards,\n StyledKanbanCards,\n StyledKanbanLane,\n StyledKanbanLaneHeader\n} from './Kanban.styles';\n\ninterface KanbanLaneProps {\n lane: RsCoreTypes.GroupGenerator;\n laneColumn?: RsCoreTypes.Column;\n meta: RsCoreTypes.Meta;\n visibleColumns: RsCoreTypes.Column[];\n headerColumn?: RsCoreTypes.Column;\n subHeadingsColumns?: RsCoreTypes.Column[];\n emptyState: ReactNode;\n /** Stable identifier for the lane, used to scope the card virtualizer instance. */\n laneId: string;\n}\n\ninterface EmptyKanbanLaneProps {\n emptyState: ReactNode;\n}\n\nfunction KanbanLane({\n lane,\n laneColumn,\n meta,\n visibleColumns,\n headerColumn,\n subHeadingsColumns,\n emptyState,\n laneId\n}: KanbanLaneProps) {\n const laneRows = lane.getRows?.() ?? [];\n\n return (\n <Flex\n as={StyledKanbanLane}\n data-kanban-lane\n role='listitem'\n container={{ direction: 'column' }}\n >\n <Grid\n as={StyledKanbanLaneHeader}\n container={{ cols: 'minmax(0, 1fr) auto', alignItems: 'center', gap: 0.5, pad: 1 }}\n >\n <KanbanLaneHeader column={laneColumn} groupHeader={lane} />\n <Count>{lane.count}</Count>\n </Grid>\n {lane.count === 0 ? (\n <Flex as={StyledEmptyKanbanCards} container={{ direction: 'column', gap: 1, pad: 1 }}>\n {emptyState}\n </Flex>\n ) : (\n <StyledKanbanCards>\n <KanbanLaneVirtualizer\n laneId={laneId}\n rows={laneRows}\n meta={meta}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n subHeadingsColumns={subHeadingsColumns}\n />\n </StyledKanbanCards>\n )}\n </Flex>\n );\n}\n\nKanbanLane.displayName = 'KanbanLane';\n\nexport const EmptyKanbanLane = ({ emptyState }: EmptyKanbanLaneProps) => {\n return (\n <Flex as={StyledKanbanLane} role='listitem' container={{ direction: 'column' }}>\n <Grid\n as={StyledKanbanLaneHeader}\n container={{\n cols: 'minmax(0, 1fr) auto',\n alignItems: 'center',\n gap: 0.5,\n pad: 1,\n justifyItems: 'end'\n }}\n >\n <Count>{0}</Count>\n </Grid>\n <Flex as={StyledEmptyKanbanCards} container={{ direction: 'column', gap: 1, pad: 1 }}>\n {emptyState}\n </Flex>\n </Flex>\n );\n};\n\nexport default KanbanLane;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/lists-react",
|
|
3
|
-
"version": "10.0.0-build.4.
|
|
3
|
+
"version": "10.0.0-build.4.25",
|
|
4
4
|
"description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|
|
@@ -14,17 +14,17 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-condition-builder": "10.0.0-build.4.
|
|
18
|
-
"@pega/cosmos-react-core": "10.0.0-build.4.
|
|
19
|
-
"@pega/cosmos-react-rte": "10.0.0-build.4.
|
|
17
|
+
"@pega/cosmos-react-condition-builder": "10.0.0-build.4.25",
|
|
18
|
+
"@pega/cosmos-react-core": "10.0.0-build.4.25",
|
|
19
|
+
"@pega/cosmos-react-rte": "10.0.0-build.4.25",
|
|
20
20
|
"@types/lodash-es": "^4.17.12",
|
|
21
21
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
22
22
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
23
23
|
"dayjs": "^1.11.13",
|
|
24
24
|
"fast-deep-equal": "^3.1.3",
|
|
25
25
|
"lodash-es": "^4.18.1",
|
|
26
|
-
"pega-repeating-structures-core": "npm:@pega/lists-core@10.0.0-build.4.
|
|
27
|
-
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@10.0.0-build.4.
|
|
26
|
+
"pega-repeating-structures-core": "npm:@pega/lists-core@10.0.0-build.4.25",
|
|
27
|
+
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@10.0.0-build.4.25",
|
|
28
28
|
"polished": "^4.1.0",
|
|
29
29
|
"prop-types": "^15.8.1",
|
|
30
30
|
"react": "^17.0.0 || ^18.0.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@testing-library/react": "^16.0.0",
|
|
43
43
|
"@testing-library/user-event": "^14.6.1",
|
|
44
44
|
"jest-axe": "^8.0.0",
|
|
45
|
-
"srs-utils": "10.0.0-build.4.
|
|
45
|
+
"srs-utils": "10.0.0-build.4.25",
|
|
46
46
|
"typescript": "~6.0.3"
|
|
47
47
|
}
|
|
48
48
|
}
|