@pega/lists-react 8.0.0-build.50.0 → 8.0.0-build.50.2

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,7 +1,9 @@
1
1
  declare namespace _default {
2
2
  function Email(cellProps: any): import("react/jsx-runtime").JSX.Element;
3
3
  function URL(cellProps: any): import("react/jsx-runtime").JSX.Element;
4
- function Phone(cellProps: any): import("react/jsx-runtime").JSX.Element;
4
+ function Phone({ value }: {
5
+ value: any;
6
+ }): import("react/jsx-runtime").JSX.Element;
5
7
  }
6
8
  export default _default;
7
9
  //# sourceMappingURL=Link.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/Link.jsx"],"names":[],"mappings":";IA2BS,wEAAyD;IAC3D,sEAA0D;IACxD,wEAAsD"}
1
+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/Link.jsx"],"names":[],"mappings":";IA2BS,wEAAyD;IAC3D,sEAA0D;IAExD;;gDAA4D"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import styled, { css } from 'styled-components';
3
- import { Link, NoValue } from '@pega/cosmos-react-core';
3
+ import { Link, NoValue, PhoneDisplay } from '@pega/cosmos-react-core';
4
4
  import { isAccessibleValue } from '../../../Utils';
5
5
  // TODO: Refactor this once cosmos components allows overriding the color of Link.
6
6
  const StyledLink = styled(Link)(() => {
@@ -18,6 +18,7 @@ function LinkRenderer({ value, getStyles }, { href = '', target = '_self' } = {}
18
18
  export default {
19
19
  Email: cellProps => LinkRenderer(cellProps, { href: 'mailto:' }),
20
20
  URL: cellProps => LinkRenderer(cellProps, { target: '_blank' }),
21
- Phone: cellProps => LinkRenderer(cellProps, { href: 'tel:' })
21
+ // TODO: PhoneDisplay component does not accept custom foreground color, revisit once it does, to support Conditional formatting for cells.
22
+ Phone: ({ value }) => _jsx(PhoneDisplay, { value: value, variant: 'link' })
22
23
  };
23
24
  //# sourceMappingURL=Link.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/Link.jsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,kFAAkF;AAClF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE;IACnC,OAAO,GAAG,CAAA;MACN,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,IAAI,UAAU,eAAe,GAAG;GAC3E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE;IAC9E,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC;IAElC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QAAE,OAAO,KAAC,OAAO,KAAG,CAAC;IAElD,OAAO,CACL,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,YACxE,KAAK,GACK,CACd,CAAC;AACJ,CAAC;AAED,eAAe;IACb,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAChE,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAC/D,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;CAC9D,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Link, NoValue } from '@pega/cosmos-react-core';\n\nimport { isAccessibleValue } from '../../../Utils';\n\n// TODO: Refactor this once cosmos components allows overriding the color of Link.\nconst StyledLink = styled(Link)(() => {\n return css`\n ${({ foregroundColor }) => foregroundColor && `color: ${foregroundColor};`}\n `;\n});\n\nfunction LinkRenderer({ value, getStyles }, { href = '', target = '_self' } = {}) {\n const { foregroundColor } = getStyles?.() ?? {};\n const hrefVal = `${href}${value}`;\n\n if (!isAccessibleValue(value)) return <NoValue />;\n\n return (\n <StyledLink href={hrefVal} target={target} foregroundColor={foregroundColor}>\n {value}\n </StyledLink>\n );\n}\n\nexport default {\n Email: cellProps => LinkRenderer(cellProps, { href: 'mailto:' }),\n URL: cellProps => LinkRenderer(cellProps, { target: '_blank' }),\n Phone: cellProps => LinkRenderer(cellProps, { href: 'tel:' })\n};\n"]}
1
+ {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/Link.jsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,kFAAkF;AAClF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE;IACnC,OAAO,GAAG,CAAA;MACN,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,IAAI,UAAU,eAAe,GAAG;GAC3E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE;IAC9E,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC;IAElC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QAAE,OAAO,KAAC,OAAO,KAAG,CAAC;IAElD,OAAO,CACL,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,YACxE,KAAK,GACK,CACd,CAAC;AACJ,CAAC;AAED,eAAe;IACb,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAChE,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAC/D,2IAA2I;IAC3I,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,GAAG;CACpE,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Link, NoValue, PhoneDisplay } from '@pega/cosmos-react-core';\n\nimport { isAccessibleValue } from '../../../Utils';\n\n// TODO: Refactor this once cosmos components allows overriding the color of Link.\nconst StyledLink = styled(Link)(() => {\n return css`\n ${({ foregroundColor }) => foregroundColor && `color: ${foregroundColor};`}\n `;\n});\n\nfunction LinkRenderer({ value, getStyles }, { href = '', target = '_self' } = {}) {\n const { foregroundColor } = getStyles?.() ?? {};\n const hrefVal = `${href}${value}`;\n\n if (!isAccessibleValue(value)) return <NoValue />;\n\n return (\n <StyledLink href={hrefVal} target={target} foregroundColor={foregroundColor}>\n {value}\n </StyledLink>\n );\n}\n\nexport default {\n Email: cellProps => LinkRenderer(cellProps, { href: 'mailto:' }),\n URL: cellProps => LinkRenderer(cellProps, { target: '_blank' }),\n // TODO: PhoneDisplay component does not accept custom foreground color, revisit once it does, to support Conditional formatting for cells.\n Phone: ({ value }) => <PhoneDisplay value={value} variant='link' />\n};\n"]}
@@ -23,7 +23,9 @@ declare const _default: {
23
23
  forwardslash: typeof import("./ColumnMergeTemplates/ForwardSlash").default;
24
24
  Email: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
25
25
  URL: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
26
- Phone: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
26
+ Phone: ({ value }: {
27
+ value: any;
28
+ }) => import("react/jsx-runtime").JSX.Element;
27
29
  cellRenderer: {
28
30
  ({ getFormattedValue }: {
29
31
  getFormattedValue?: (() => void) | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAKqB,YAAY;mBAEd,kBAAkB;0BACX,iBAAiB;8BACb,qBAAqB;qBAG9B,YAAY;gCADD,uBAAuB;uBARhC,cAAc;qBAFhB,YAAY;uBACV,cAAc"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/DefaultComponents/CellRenderers/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAKqB,YAAY;mBAEd,kBAAkB;0BACX,iBAAiB;8BACb,qBAAqB;qBAG9B,YAAY;gCADD,uBAAuB;uBARhC,cAAc;qBAFhB,YAAY;uBACV,cAAc"}
@@ -46,7 +46,9 @@ declare const _default: {
46
46
  forwardslash: typeof import("./CellRenderers/ColumnMergeTemplates/ForwardSlash").default;
47
47
  Email: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
48
48
  URL: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
49
- Phone: (cellProps: any) => import("react/jsx-runtime").JSX.Element;
49
+ Phone: ({ value }: {
50
+ value: any;
51
+ }) => import("react/jsx-runtime").JSX.Element;
50
52
  cellRenderer: {
51
53
  ({ getFormattedValue }: {
52
54
  getFormattedValue?: (() => void) | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/index.jsx"],"names":[],"mappings":"AA8BA,uGAKC;;;;;;;;;;AAUD,mGASC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAtDqB,YAAY;iBAEjB,QAAQ;mBACN,UAAU;uBAEN,cAAc;6BAGR,oBAAoB;8BACnB,aAAa;4CAEC,2BAA2B;8CACzB,6BAA6B;8BAC7C,qBAAqB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/index.jsx"],"names":[],"mappings":"AA8BA,uGAKC;;;;;;;;;;AAUD,mGASC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAtDqB,YAAY;iBAEjB,QAAQ;mBACN,UAAU;uBAEN,cAAc;6BAGR,oBAAoB;8BACnB,aAAa;4CAEC,2BAA2B;8CACzB,6BAA6B;8BAC7C,qBAAqB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/HeaderMenu/index.jsx"],"names":[],"mappings":"AAgFA;;;mDA+MC;;;;;;;;;;;;;;;;;;sBA/RqB,YAAY"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/HeaderMenu/index.jsx"],"names":[],"mappings":"AAgFA;;;mDAiNC;;;;;;;;;;;;;;;;;;sBAjSqB,YAAY"}
@@ -153,7 +153,7 @@ export default function HeaderMenu({ column, popoverButtonRef }) {
153
153
  // Don't show the menu for columns which are of action type eg: rowActionMenu, rowDragDrop etc
154
154
  if (firstLevelActions.flat().length === 0 || field.type === ACTION_FIELD_TYPE)
155
155
  return null;
156
- return (_jsxs("div", { className: 'header-menu', children: [_jsx(Button, { variant: 'simple', className: 'button-more', compact: true, "aria-expanded": forceShowMenu, "aria-label": `${translate('Actions')} - ${column.categorizedHeaderLabel}`, label: !forceShowMenu ? `${translate('Actions')}` : undefined, ref: popoverButtonRef, "aria-describedby": sortDescriptionId, onClick: () => {
156
+ return (_jsxs("div", { className: 'header-menu', children: [_jsx(Button, { variant: 'simple', className: 'button-more', compact: true, icon: true, "aria-expanded": forceShowMenu, "aria-label": `${translate('Actions')} - ${column.categorizedHeaderLabel}`, label: !forceShowMenu ? `${translate('Actions')}` : undefined, ref: popoverButtonRef, "aria-describedby": sortDescriptionId, onClick: () => {
157
157
  setMoreContent('default');
158
158
  setForceShowMenu(true);
159
159
  }, onKeyDown: e => {
@@ -162,6 +162,7 @@ export default function HeaderMenu({ column, popoverButtonRef }) {
162
162
  e.preventDefault();
163
163
  }
164
164
  if (e.key === 'Escape' && forceShowMenu) {
165
+ e.stopPropagation();
165
166
  setForceShowMenu(false);
166
167
  setPopperRef(null);
167
168
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/HeaderMenu/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useMemo, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Icon,\n Popover,\n Menu,\n useElement,\n Button,\n VisuallyHiddenText,\n createUID,\n getActiveElement,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { removeEmptyValues, ACTION_FIELD_TYPE } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport DynamicFieldConfiguration from '../DynamicFieldConfiguration';\nimport FilterComponent from '../Filters/Filter';\nimport RFColumnConfigurator from '../RFColumnConfigurator';\nimport GroupingMenu from '../Grouping/GroupingMenu';\n\nimport { getActions, customizeColumn } from './actions';\n\nconst Default = 'default';\nconst Filter = 'Filter';\nconst Grouping = 'Grouping';\nconst DynamicColumnLeft = 'Combine with left';\nconst DynamicColumnRight = 'Combine with right';\nconst CustomizeColumn = 'Format';\nconst sortActionStates = ['Sort-ascending', 'Sort-descending', 'Remove-sort'];\n\nconst ariaSort = {\n asc: 'ascending',\n desc: 'descending'\n};\n\nfunction getFirstLevelActions(actions) {\n return removeEmptyValues(\n actions.map(function mapper(s) {\n if (Array.isArray(s)) {\n return s.map(mapper);\n }\n const { id, icon, label, show = true, onClick, disabled } = s;\n if (!show) {\n return null;\n }\n return {\n 'data-test-id': id,\n primary: label,\n visual: <Icon name={icon} />,\n id: id.replaceAll(' ', '-'), // eg: Combine with right -> Combine-with-right\n onClick,\n disabled\n };\n })\n );\n}\n\nfunction getFocusables(elementRef) {\n return elementRef.querySelectorAll(\n 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]):not([readonly]), input:not([disabled]):not([readonly]), select:not([disabled]):not([readonly])'\n );\n}\n\nfunction headerMenuTabHandler(e, popperRef) {\n const focusables = getFocusables(popperRef);\n const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n const activeEl = getActiveElement();\n\n if (!e.shiftKey && (activeEl === popperRef || activeEl === lastFocusable)) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (e.shiftKey && (activeEl === popperRef || activeEl === firstFocusable)) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n}\n\nexport default function HeaderMenu({ column, popoverButtonRef }) {\n const view = column.parent;\n const {\n state: { clearColFilter }\n } = view;\n const [translate] = useTranslate();\n const { field } = column;\n const uid = createUID();\n const sortDescriptionId = `${uid}_description`;\n const isClearColFilter = clearColFilter === field.id;\n const sort = ariaSort[column?.getSortProperties()?.sortOrder];\n const sortSequence = column?.getSortProperties()?.sortSequence;\n const filtered = column?.filtered;\n\n const [moreContent, setMoreContent] = useState(Default);\n const [forceShowMenu, setForceShowMenu] = useState(false);\n const [sortDescription, setSortDescription] = useState('');\n const [popperRef, setPopperRef] = useElement();\n\n const finishPopOver = useCallback(() => {\n if (moreContent === Filter && isClearColFilter) {\n view.type.clearFilter(null);\n }\n if (popperRef && popoverButtonRef.current) {\n popoverButtonRef.current.focus();\n }\n setForceShowMenu(false);\n }, [moreContent, isClearColFilter, view, popperRef, popoverButtonRef]);\n\n const onUndoHierarchy = useCallback(() => {\n column.parent?.type.clearHierarchicalGroup();\n finishPopOver();\n }, [column, finishPopOver]);\n\n useEffect(() => {\n let sortStr = '';\n if (sort) sortStr = `${translate('Sorted')} ${translate(sort)}`;\n if (sortSequence) sortStr += ` ${translate('Sort priority')} ${sortSequence}`;\n if (filtered) sortStr += ` ${translate('Filtered column')}`;\n setSortDescription(sortStr);\n }, [sort, sortSequence, filtered, translate]);\n\n const actions = useMemo(\n () =>\n getActions({\n column,\n setMoreContent,\n onUndoHierarchy,\n translate,\n finishPopOver\n }),\n [column, onUndoHierarchy, translate, finishPopOver]\n );\n\n const firstLevelActions = useMemo(() => getFirstLevelActions(actions), [actions]);\n\n const content = useMemo(() => {\n switch (moreContent) {\n case Filter:\n return (\n <FilterComponent\n column={column}\n finishPopOver={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n />\n );\n case Grouping:\n return <GroupingMenu column={column} finishPopOver={finishPopOver} />;\n case DynamicColumnLeft:\n case DynamicColumnRight:\n return (\n <DynamicFieldConfiguration\n column={column}\n onSubmit={(title, templateName, bHideColumns) => {\n column.applyMerge(\n moreContent === DynamicColumnLeft ? 'left' : 'right',\n title,\n templateName,\n bHideColumns\n );\n finishPopOver();\n if (templateName === 'multiline') view.type.applyRowHeight('4');\n }}\n onCancel={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n heading={`Combine with ${moreContent === DynamicColumnLeft ? 'left' : 'right'}`}\n />\n );\n case CustomizeColumn:\n return (\n <RFColumnConfigurator\n column={column}\n finishPopOver={finishPopOver}\n onSubmit={(rfName, columnAlias, displayMode) => {\n customizeColumn(column, rfName, displayMode, columnAlias, column.alias);\n }}\n onCancel={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n />\n );\n default:\n return (\n <Menu\n scrollAt='400'\n data-test-id='action-menu'\n items={firstLevelActions.flat()}\n className='action-menu'\n focusControlEl={popoverButtonRef.current}\n onItemClick={id => {\n // NVDA/JAWS reading out the stale sort order on sort action\n // Removing intermediate sort state and adding back when we receive it from column prop\n if (sortActionStates.includes(id)) {\n setSortDescription('');\n }\n }}\n />\n );\n }\n }, [moreContent, column, finishPopOver, popoverButtonRef, firstLevelActions, view.type]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n if (\n moreContent !== Filter &&\n moreContent !== 'Format' &&\n moreContent !== 'Combine with left' &&\n moreContent !== 'Combine with right'\n ) {\n finishPopOver();\n }\n });\n\n useEffect(() => {\n if (isClearColFilter) {\n setMoreContent(Filter);\n setForceShowMenu(true);\n }\n }, [isClearColFilter]);\n\n useEffect(() => {\n // Focus the first focusable element in nested menu content eg: filter,customize column etc\n if (moreContent && popperRef && moreContent !== 'default') {\n getFocusables(popperRef)?.[0]?.focus();\n }\n }, [forceShowMenu, popperRef, moreContent]);\n\n // Don't show the menu for columns which are of action type eg: rowActionMenu, rowDragDrop etc\n if (firstLevelActions.flat().length === 0 || field.type === ACTION_FIELD_TYPE) return null;\n\n return (\n <div className='header-menu'>\n <Button\n variant='simple'\n className='button-more'\n compact\n aria-expanded={forceShowMenu}\n aria-label={`${translate('Actions')} - ${column.categorizedHeaderLabel}`}\n label={!forceShowMenu ? `${translate('Actions')}` : undefined}\n ref={popoverButtonRef}\n aria-describedby={sortDescriptionId}\n onClick={() => {\n setMoreContent('default');\n setForceShowMenu(true);\n }}\n onKeyDown={e => {\n if (forceShowMenu && e.key !== 'Enter') {\n // TODO remove preventDefault when popover steals the focus into its content\n e.preventDefault();\n }\n if (e.key === 'Escape' && forceShowMenu) {\n setForceShowMenu(false);\n setPopperRef(null);\n }\n }}\n >\n <Icon name='more' />\n </Button>\n {forceShowMenu &&\n createPortal(\n <Popover\n className='popper'\n ref={setPopperRef}\n arrow\n target={popoverButtonRef.current}\n placement='bottom-start'\n hideOnTargetHidden\n // TODO: Consume FormDialog cosmos component in nested menu option renderers filter, group etc\n onKeyDown={e => {\n if (e.key === 'Escape' && forceShowMenu) {\n setForceShowMenu(false);\n setPopperRef(null);\n popoverButtonRef.current.focus();\n }\n if (e.key === 'Tab') {\n headerMenuTabHandler(e, popperRef);\n }\n }}\n >\n {content}\n </Popover>,\n column.parent.getDomContainer()\n )}\n\n <VisuallyHiddenText id={sortDescriptionId} aria-hidden>\n {sortDescription}\n </VisuallyHiddenText>\n </div>\n );\n}\n\nHeaderMenu.propTypes = {\n column: PropTypes.objectOf(PropTypes.any),\n popoverButtonRef: PropTypes.objectOf(PropTypes.any)\n};\n\nHeaderMenu.defaultProps = {\n column: {},\n popoverButtonRef: {}\n};\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/HeaderMenu/index.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEtF,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,yBAAyB,MAAM,8BAA8B,CAAC;AACrE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,OAAO,GAAG,SAAS,CAAC;AAC1B,MAAM,MAAM,GAAG,QAAQ,CAAC;AACxB,MAAM,QAAQ,GAAG,UAAU,CAAC;AAC5B,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAC9C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAChD,MAAM,eAAe,GAAG,QAAQ,CAAC;AACjC,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAE9E,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,SAAS,oBAAoB,CAAC,OAAO;IACnC,OAAO,iBAAiB,CACtB,OAAO,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,CAAC;QAC3B,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACrB,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO;YACL,cAAc,EAAE,EAAE;YAClB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI;YAC5B,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,+CAA+C;YAC5E,OAAO;YACP,QAAQ;SACT,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,UAAU;IAC/B,OAAO,UAAU,CAAC,gBAAgB,CAChC,0KAA0K,CAC3K,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,CAAC,EAAE,SAAS;IACxC,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;IACjF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IAEpC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,aAAa,CAAC,EAAE,CAAC;QAC1E,cAAc,EAAE,KAAK,EAAE,CAAC;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;SAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,cAAc,CAAC,EAAE,CAAC;QACjF,aAAa,EAAE,KAAK,EAAE,CAAC;QACvB,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAC7D,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3B,MAAM,EACJ,KAAK,EAAE,EAAE,cAAc,EAAE,EAC1B,GAAG,IAAI,CAAC;IACT,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IACzB,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,MAAM,iBAAiB,GAAG,GAAG,GAAG,cAAc,CAAC;IAC/C,MAAM,gBAAgB,GAAG,cAAc,KAAK,KAAK,CAAC,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,MAAM,EAAE,iBAAiB,EAAE,EAAE,YAAY,CAAC;IAC/D,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,CAAC;IAElC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE/C,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,WAAW,KAAK,MAAM,IAAI,gBAAgB,EAAE,CAAC;YAC/C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,IAAI,SAAS,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;YAC1C,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACnC,CAAC;QACD,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvE,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC7C,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,EAAE,CAAC;QACjB,IAAI,IAAI;YAAE,OAAO,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;QAChE,IAAI,YAAY;YAAE,OAAO,IAAI,IAAI,SAAS,CAAC,eAAe,CAAC,IAAI,YAAY,EAAE,CAAC;QAC9E,IAAI,QAAQ;YAAE,OAAO,IAAI,IAAI,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC5D,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,UAAU,CAAC;QACT,MAAM;QACN,cAAc;QACd,eAAe;QACf,SAAS;QACT,aAAa;KACd,CAAC,EACJ,CAAC,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,CAAC,CACpD,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,QAAQ,WAAW,EAAE,CAAC;YACpB,KAAK,MAAM;gBACT,OAAO,CACL,KAAC,eAAe,IACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,GAAI,CAAC;YACxE,KAAK,iBAAiB,CAAC;YACvB,KAAK,kBAAkB;gBACrB,OAAO,CACL,KAAC,yBAAyB,IACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE;wBAC9C,MAAM,CAAC,UAAU,CACf,WAAW,KAAK,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACpD,KAAK,EACL,YAAY,EACZ,YAAY,CACb,CAAC;wBACF,aAAa,EAAE,CAAC;wBAChB,IAAI,YAAY,KAAK,WAAW;4BAAE,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;oBAClE,CAAC,EACD,QAAQ,EAAE,aAAa,EACvB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,gBAAgB,WAAW,KAAK,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,GAC/E,CACH,CAAC;YACJ,KAAK,eAAe;gBAClB,OAAO,CACL,KAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE;wBAC7C,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC1E,CAAC,EACD,QAAQ,EAAE,aAAa,EACvB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;YACJ;gBACE,OAAO,CACL,KAAC,IAAI,IACH,QAAQ,EAAC,KAAK,kBACD,aAAa,EAC1B,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,EAC/B,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,gBAAgB,CAAC,OAAO,EACxC,WAAW,EAAE,EAAE,CAAC,EAAE;wBAChB,4DAA4D;wBAC5D,uFAAuF;wBACvF,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;4BAClC,kBAAkB,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC;oBACH,CAAC,GACD,CACH,CAAC;QACN,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAEzF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,IACE,WAAW,KAAK,MAAM;YACtB,WAAW,KAAK,QAAQ;YACxB,WAAW,KAAK,mBAAmB;YACnC,WAAW,KAAK,oBAAoB,EACpC,CAAC;YACD,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE,CAAC;YACrB,cAAc,CAAC,MAAM,CAAC,CAAC;YACvB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,WAAW,IAAI,SAAS,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC1D,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5C,8FAA8F;IAC9F,IAAI,iBAAiB,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAC;IAE3F,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,aAAa,EACvB,OAAO,QACP,IAAI,yBACW,aAAa,gBAChB,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,MAAM,CAAC,sBAAsB,EAAE,EACxE,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7D,GAAG,EAAE,gBAAgB,sBACH,iBAAiB,EACnC,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,SAAS,CAAC,CAAC;oBAC1B,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACzB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE;oBACb,IAAI,aAAa,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACvC,4EAA4E;wBAC5E,CAAC,CAAC,cAAc,EAAE,CAAC;oBACrB,CAAC;oBACD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,aAAa,EAAE,CAAC;wBACxC,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC;wBACxB,YAAY,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACR,aAAa;gBACZ,YAAY,CACV,KAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,YAAY,EACjB,KAAK,QACL,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,SAAS,EAAC,cAAc,EACxB,kBAAkB;oBAClB,8FAA8F;oBAC9F,SAAS,EAAE,CAAC,CAAC,EAAE;wBACb,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,aAAa,EAAE,CAAC;4BACxC,gBAAgB,CAAC,KAAK,CAAC,CAAC;4BACxB,YAAY,CAAC,IAAI,CAAC,CAAC;4BACnB,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBACnC,CAAC;wBACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;4BACpB,oBAAoB,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;wBACrC,CAAC;oBACH,CAAC,YAEA,OAAO,GACA,EACV,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAChC,EAEH,KAAC,kBAAkB,IAAC,EAAE,EAAE,iBAAiB,iCACtC,eAAe,GACG,IACjB,CACP,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;CACpD,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,MAAM,EAAE,EAAE;IACV,gBAAgB,EAAE,EAAE;CACrB,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useMemo, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Icon,\n Popover,\n Menu,\n useElement,\n Button,\n VisuallyHiddenText,\n createUID,\n getActiveElement,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { removeEmptyValues, ACTION_FIELD_TYPE } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport DynamicFieldConfiguration from '../DynamicFieldConfiguration';\nimport FilterComponent from '../Filters/Filter';\nimport RFColumnConfigurator from '../RFColumnConfigurator';\nimport GroupingMenu from '../Grouping/GroupingMenu';\n\nimport { getActions, customizeColumn } from './actions';\n\nconst Default = 'default';\nconst Filter = 'Filter';\nconst Grouping = 'Grouping';\nconst DynamicColumnLeft = 'Combine with left';\nconst DynamicColumnRight = 'Combine with right';\nconst CustomizeColumn = 'Format';\nconst sortActionStates = ['Sort-ascending', 'Sort-descending', 'Remove-sort'];\n\nconst ariaSort = {\n asc: 'ascending',\n desc: 'descending'\n};\n\nfunction getFirstLevelActions(actions) {\n return removeEmptyValues(\n actions.map(function mapper(s) {\n if (Array.isArray(s)) {\n return s.map(mapper);\n }\n const { id, icon, label, show = true, onClick, disabled } = s;\n if (!show) {\n return null;\n }\n return {\n 'data-test-id': id,\n primary: label,\n visual: <Icon name={icon} />,\n id: id.replaceAll(' ', '-'), // eg: Combine with right -> Combine-with-right\n onClick,\n disabled\n };\n })\n );\n}\n\nfunction getFocusables(elementRef) {\n return elementRef.querySelectorAll(\n 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]):not([readonly]), input:not([disabled]):not([readonly]), select:not([disabled]):not([readonly])'\n );\n}\n\nfunction headerMenuTabHandler(e, popperRef) {\n const focusables = getFocusables(popperRef);\n const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n const activeEl = getActiveElement();\n\n if (!e.shiftKey && (activeEl === popperRef || activeEl === lastFocusable)) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (e.shiftKey && (activeEl === popperRef || activeEl === firstFocusable)) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n}\n\nexport default function HeaderMenu({ column, popoverButtonRef }) {\n const view = column.parent;\n const {\n state: { clearColFilter }\n } = view;\n const [translate] = useTranslate();\n const { field } = column;\n const uid = createUID();\n const sortDescriptionId = `${uid}_description`;\n const isClearColFilter = clearColFilter === field.id;\n const sort = ariaSort[column?.getSortProperties()?.sortOrder];\n const sortSequence = column?.getSortProperties()?.sortSequence;\n const filtered = column?.filtered;\n\n const [moreContent, setMoreContent] = useState(Default);\n const [forceShowMenu, setForceShowMenu] = useState(false);\n const [sortDescription, setSortDescription] = useState('');\n const [popperRef, setPopperRef] = useElement();\n\n const finishPopOver = useCallback(() => {\n if (moreContent === Filter && isClearColFilter) {\n view.type.clearFilter(null);\n }\n if (popperRef && popoverButtonRef.current) {\n popoverButtonRef.current.focus();\n }\n setForceShowMenu(false);\n }, [moreContent, isClearColFilter, view, popperRef, popoverButtonRef]);\n\n const onUndoHierarchy = useCallback(() => {\n column.parent?.type.clearHierarchicalGroup();\n finishPopOver();\n }, [column, finishPopOver]);\n\n useEffect(() => {\n let sortStr = '';\n if (sort) sortStr = `${translate('Sorted')} ${translate(sort)}`;\n if (sortSequence) sortStr += ` ${translate('Sort priority')} ${sortSequence}`;\n if (filtered) sortStr += ` ${translate('Filtered column')}`;\n setSortDescription(sortStr);\n }, [sort, sortSequence, filtered, translate]);\n\n const actions = useMemo(\n () =>\n getActions({\n column,\n setMoreContent,\n onUndoHierarchy,\n translate,\n finishPopOver\n }),\n [column, onUndoHierarchy, translate, finishPopOver]\n );\n\n const firstLevelActions = useMemo(() => getFirstLevelActions(actions), [actions]);\n\n const content = useMemo(() => {\n switch (moreContent) {\n case Filter:\n return (\n <FilterComponent\n column={column}\n finishPopOver={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n />\n );\n case Grouping:\n return <GroupingMenu column={column} finishPopOver={finishPopOver} />;\n case DynamicColumnLeft:\n case DynamicColumnRight:\n return (\n <DynamicFieldConfiguration\n column={column}\n onSubmit={(title, templateName, bHideColumns) => {\n column.applyMerge(\n moreContent === DynamicColumnLeft ? 'left' : 'right',\n title,\n templateName,\n bHideColumns\n );\n finishPopOver();\n if (templateName === 'multiline') view.type.applyRowHeight('4');\n }}\n onCancel={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n heading={`Combine with ${moreContent === DynamicColumnLeft ? 'left' : 'right'}`}\n />\n );\n case CustomizeColumn:\n return (\n <RFColumnConfigurator\n column={column}\n finishPopOver={finishPopOver}\n onSubmit={(rfName, columnAlias, displayMode) => {\n customizeColumn(column, rfName, displayMode, columnAlias, column.alias);\n }}\n onCancel={finishPopOver}\n popoverButtonRef={popoverButtonRef}\n />\n );\n default:\n return (\n <Menu\n scrollAt='400'\n data-test-id='action-menu'\n items={firstLevelActions.flat()}\n className='action-menu'\n focusControlEl={popoverButtonRef.current}\n onItemClick={id => {\n // NVDA/JAWS reading out the stale sort order on sort action\n // Removing intermediate sort state and adding back when we receive it from column prop\n if (sortActionStates.includes(id)) {\n setSortDescription('');\n }\n }}\n />\n );\n }\n }, [moreContent, column, finishPopOver, popoverButtonRef, firstLevelActions, view.type]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n if (\n moreContent !== Filter &&\n moreContent !== 'Format' &&\n moreContent !== 'Combine with left' &&\n moreContent !== 'Combine with right'\n ) {\n finishPopOver();\n }\n });\n\n useEffect(() => {\n if (isClearColFilter) {\n setMoreContent(Filter);\n setForceShowMenu(true);\n }\n }, [isClearColFilter]);\n\n useEffect(() => {\n // Focus the first focusable element in nested menu content eg: filter,customize column etc\n if (moreContent && popperRef && moreContent !== 'default') {\n getFocusables(popperRef)?.[0]?.focus();\n }\n }, [forceShowMenu, popperRef, moreContent]);\n\n // Don't show the menu for columns which are of action type eg: rowActionMenu, rowDragDrop etc\n if (firstLevelActions.flat().length === 0 || field.type === ACTION_FIELD_TYPE) return null;\n\n return (\n <div className='header-menu'>\n <Button\n variant='simple'\n className='button-more'\n compact\n icon\n aria-expanded={forceShowMenu}\n aria-label={`${translate('Actions')} - ${column.categorizedHeaderLabel}`}\n label={!forceShowMenu ? `${translate('Actions')}` : undefined}\n ref={popoverButtonRef}\n aria-describedby={sortDescriptionId}\n onClick={() => {\n setMoreContent('default');\n setForceShowMenu(true);\n }}\n onKeyDown={e => {\n if (forceShowMenu && e.key !== 'Enter') {\n // TODO remove preventDefault when popover steals the focus into its content\n e.preventDefault();\n }\n if (e.key === 'Escape' && forceShowMenu) {\n e.stopPropagation();\n setForceShowMenu(false);\n setPopperRef(null);\n }\n }}\n >\n <Icon name='more' />\n </Button>\n {forceShowMenu &&\n createPortal(\n <Popover\n className='popper'\n ref={setPopperRef}\n arrow\n target={popoverButtonRef.current}\n placement='bottom-start'\n hideOnTargetHidden\n // TODO: Consume FormDialog cosmos component in nested menu option renderers filter, group etc\n onKeyDown={e => {\n if (e.key === 'Escape' && forceShowMenu) {\n setForceShowMenu(false);\n setPopperRef(null);\n popoverButtonRef.current.focus();\n }\n if (e.key === 'Tab') {\n headerMenuTabHandler(e, popperRef);\n }\n }}\n >\n {content}\n </Popover>,\n column.parent.getDomContainer()\n )}\n\n <VisuallyHiddenText id={sortDescriptionId} aria-hidden>\n {sortDescription}\n </VisuallyHiddenText>\n </div>\n );\n}\n\nHeaderMenu.propTypes = {\n column: PropTypes.objectOf(PropTypes.any),\n popoverButtonRef: PropTypes.objectOf(PropTypes.any)\n};\n\nHeaderMenu.defaultProps = {\n column: {},\n popoverButtonRef: {}\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"RFColumnConfigurator.d.ts","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":"AAuJA;;;;;;4CAgDC;;;;;;;;;;;;sBAtMqB,YAAY"}
1
+ {"version":3,"file":"RFColumnConfigurator.d.ts","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":"AAwJA;;;;;;4CAgDC;;;;;;;;;;;;sBAvMqB,YAAY"}
@@ -36,7 +36,7 @@ const Body = memo(({ column, rfName, columnAlias, displayMode, onRFChange, oncol
36
36
  const renderDisplayMode = column.renderDisplayMode();
37
37
  const [translate] = useTranslate();
38
38
  const label = getFieldLabel(column.field);
39
- const showFormatter = column.formatterName !== 'UserReference';
39
+ const showFormatter = column.formatterName !== 'UserReference' && !column.field.disableFormatting;
40
40
  return (_jsxs(_Fragment, { children: [_jsx(StyledRow, { children: _jsx(Input, { type: 'text', label: translate('Field'), value: label, readOnly: true }) }), _jsx(StyledRow, { children: _jsx(Input, { id: 'customise-label', type: 'text', label: translate('Alias'), onChange: oncolumnAliasChange, placeholder: translate('Enter alias'), value: columnAlias, "data-test-id": 'Customise label' }) }), showFormatter && renderFormatters && (_jsx(StyledRow, { children: _jsxs(Select, { id: 'select-customised-format', label: translate('Format'), onChange: onRFChange, value: rfName || '', "data-test-id": 'Customise format', children: [!isDefaultFormatterExist && (_jsx(Option, { value: DEFAULT_FORMAT, children: translate(DEFAULT_FORMAT) }, DEFAULT_FORMAT)), renderFormatters?.map(v => (_jsx(Option, { value: v.value, children: translate(v.label) }, v.value)))] }) })), renderDisplayMode && (_jsx(StyledRow, { children: _jsx(Select, { id: 'select-customised-display', label: translate('Display'), onChange: onDisplayModeChange, value: displayMode || defaultDisplayMode, "data-test-id": 'Customise display', children: displayModes.map(mode => (_jsx(Option, { value: mode, children: translate(mode) }, mode))) }) }))] }));
41
41
  });
42
42
  Body.displayName = 'Body';
@@ -1 +1 @@
1
- {"version":3,"file":"RFColumnConfigurator.js","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Input, Button, Select, Option, FormDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\nimport { DEFAULT_FORMAT } from '../constants';\n\nconst StyledRow = styled.div`\n margin: 0.625rem 0;\n`;\n\n// Returns user friendly label from field information\nfunction getFieldLabel(field) {\n // Add category information (if applicable)\n if (field.category && field.category.length) {\n const combinedCategories = field.category\n .map(currentCategory => currentCategory.label)\n .join('.');\n return `${combinedCategories}.${field.label}`;\n }\n\n return `${field.label}`;\n}\n\nconst Footer = memo(({ cancel, submit }) => {\n const [translate] = useTranslate();\n return (\n <footer>\n <Button onClick={cancel} data-test-id='cancel'>\n {translate('Cancel')}\n </Button>\n <Button variant='primary' onClick={submit} data-test-id='submit'>\n {translate('Submit')}\n </Button>\n </footer>\n );\n});\n\nFooter.displayName = 'Footer';\n\nFooter.propTypes = {\n cancel: PropTypes.func.isRequired,\n submit: PropTypes.func.isRequired\n};\n\nconst defaultDisplayMode = 'Normal';\nconst displayModes = [defaultDisplayMode, 'Hierarchical'];\n\nconst Body = memo(\n ({\n column,\n rfName,\n columnAlias,\n displayMode,\n onRFChange,\n oncolumnAliasChange,\n onDisplayModeChange\n }) => {\n const renderFormatters = column.getRenderFormatters();\n const isDefaultFormatterExist = renderFormatters?.find(\n formatter => formatter.label === DEFAULT_FORMAT\n );\n const renderDisplayMode = column.renderDisplayMode();\n const [translate] = useTranslate();\n const label = getFieldLabel(column.field);\n const showFormatter = column.formatterName !== 'UserReference';\n return (\n <>\n <StyledRow>\n <Input type='text' label={translate('Field')} value={label} readOnly />\n </StyledRow>\n <StyledRow>\n <Input\n id='customise-label'\n type='text'\n label={translate('Alias')}\n onChange={oncolumnAliasChange}\n placeholder={translate('Enter alias')}\n value={columnAlias}\n data-test-id='Customise label'\n />\n </StyledRow>\n\n {showFormatter && renderFormatters && (\n <StyledRow>\n <Select\n id='select-customised-format'\n label={translate('Format')}\n onChange={onRFChange}\n value={rfName || ''}\n data-test-id='Customise format'\n >\n {!isDefaultFormatterExist && (\n <Option key={DEFAULT_FORMAT} value={DEFAULT_FORMAT}>\n {translate(DEFAULT_FORMAT)}\n </Option>\n )}\n {renderFormatters?.map(v => (\n <Option key={v.value} value={v.value}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </StyledRow>\n )}\n {renderDisplayMode && (\n <StyledRow>\n <Select\n id='select-customised-display'\n label={translate('Display')}\n onChange={onDisplayModeChange}\n value={displayMode || defaultDisplayMode}\n data-test-id='Customise display'\n >\n {displayModes.map(mode => (\n <Option key={mode} value={mode}>\n {translate(mode)}\n </Option>\n ))}\n </Select>\n </StyledRow>\n )}\n </>\n );\n }\n);\n\nBody.displayName = 'Body';\n\nBody.propTypes = {\n column: PropTypes.objectOf(PropTypes.any),\n rfName: PropTypes.string,\n columnAlias: PropTypes.string,\n onRFChange: PropTypes.func,\n oncolumnAliasChange: PropTypes.func,\n displayMode: PropTypes.string,\n onDisplayModeChange: PropTypes.func\n};\n\nBody.defaultProps = {\n column: {},\n rfName: '',\n columnAlias: '',\n onRFChange: () => {},\n oncolumnAliasChange: () => {},\n displayMode: defaultDisplayMode,\n onDisplayModeChange: () => {}\n};\n\nexport default function RFColumnConfigurator({\n column,\n onCancel,\n onSubmit,\n finishPopOver,\n popoverButtonRef\n}) {\n const [columnAlias, setColumnAlias] = useState(column.alias || '');\n const [rfName, setRFName] = useState(column.formatterName || DEFAULT_FORMAT);\n const [displayMode, setDisplayMode] = useState(column.displayMode);\n const [translate] = useTranslate();\n const onSubmitChanges = useCallback(() => {\n const isRFChanged = rfName !== column.formatterName;\n const isLableChanged = columnAlias.trim() !== column.alias?.trim(); // can be undefined\n const isDisplayChanged = displayMode !== column.displayMode;\n\n if (isRFChanged || isLableChanged || isDisplayChanged) {\n onSubmit(\n isRFChanged ? rfName : undefined,\n columnAlias,\n isDisplayChanged ? displayMode : undefined\n );\n }\n finishPopOver();\n }, [column, onSubmit, rfName, columnAlias, finishPopOver, displayMode]);\n\n return (\n <>\n {popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Format')}\n onSubmit={onSubmitChanges}\n onCancel={onCancel}\n target={popoverButtonRef.current}\n >\n <Body\n column={column}\n rfName={rfName}\n columnAlias={columnAlias}\n displayMode={displayMode}\n onRFChange={e => setRFName(e.target.value)}\n oncolumnAliasChange={e => setColumnAlias(e.target.value)}\n onDisplayModeChange={e => setDisplayMode(e.target.value)}\n />\n </FormDialog>\n ) : null}\n </>\n );\n}\n\nRFColumnConfigurator.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n"]}
1
+ {"version":3,"file":"RFColumnConfigurator.js","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3B,CAAC;AAEF,qDAAqD;AACrD,SAAS,aAAa,CAAC,KAAK;IAC1B,2CAA2C;IAC3C,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QAC5C,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAQ;aACtC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC;aAC7C,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,GAAG,kBAAkB,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IAChD,CAAC;IAED,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;IACzC,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,OAAO,CACL,6BACE,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,kBAAe,QAAQ,YAC3C,SAAS,CAAC,QAAQ,CAAC,GACb,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,kBAAe,QAAQ,YAC7D,SAAS,CAAC,QAAQ,CAAC,GACb,IACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,MAAM,CAAC,SAAS,GAAG;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACjC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAClC,CAAC;AAEF,MAAM,kBAAkB,GAAG,QAAQ,CAAC;AACpC,MAAM,YAAY,GAAG,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAE1D,MAAM,IAAI,GAAG,IAAI,CACf,CAAC,EACC,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACpB,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,mBAAmB,EAAE,CAAC;IACtD,MAAM,uBAAuB,GAAG,gBAAgB,EAAE,IAAI,CACpD,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,KAAK,cAAc,CAChD,CAAC;IACF,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrD,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,aAAa,GACjB,MAAM,CAAC,aAAa,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAC9E,OAAO,CACL,8BACE,KAAC,SAAS,cACR,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,SAAG,GAC7D,EACZ,KAAC,SAAS,cACR,KAAC,KAAK,IACJ,EAAE,EAAC,iBAAiB,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,EACrC,KAAK,EAAE,WAAW,kBACL,iBAAiB,GAC9B,GACQ,EAEX,aAAa,IAAI,gBAAgB,IAAI,CACpC,KAAC,SAAS,cACR,MAAC,MAAM,IACL,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,EAC1B,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,MAAM,IAAI,EAAE,kBACN,kBAAkB,aAE9B,CAAC,uBAAuB,IAAI,CAC3B,KAAC,MAAM,IAAsB,KAAK,EAAE,cAAc,YAC/C,SAAS,CAAC,cAAc,CAAC,IADf,cAAc,CAElB,CACV,EACA,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAC1B,KAAC,MAAM,IAAe,KAAK,EAAE,CAAC,CAAC,KAAK,YACjC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IADR,CAAC,CAAC,KAAK,CAEX,CACV,CAAC,IACK,GACC,CACb,EACA,iBAAiB,IAAI,CACpB,KAAC,SAAS,cACR,KAAC,MAAM,IACL,EAAE,EAAC,2BAA2B,EAC9B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAC3B,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,WAAW,IAAI,kBAAkB,kBAC3B,mBAAmB,YAE/B,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACxB,KAAC,MAAM,IAAY,KAAK,EAAE,IAAI,YAC3B,SAAS,CAAC,IAAI,CAAC,IADL,IAAI,CAER,CACV,CAAC,GACK,GACC,CACb,IACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,IAAI,CAAC,SAAS,GAAG;IACf,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,mBAAmB,EAAE,SAAS,CAAC,IAAI;IACnC,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,mBAAmB,EAAE,SAAS,CAAC,IAAI;CACpC,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC7B,WAAW,EAAE,kBAAkB;IAC/B,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,gBAAgB,EACjB;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC;IAC7E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACnE,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,WAAW,GAAG,MAAM,KAAK,MAAM,CAAC,aAAa,CAAC;QACpD,MAAM,cAAc,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,mBAAmB;QACvF,MAAM,gBAAgB,GAAG,WAAW,KAAK,MAAM,CAAC,WAAW,CAAC;QAE5D,IAAI,WAAW,IAAI,cAAc,IAAI,gBAAgB,EAAE,CAAC;YACtD,QAAQ,CACN,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAChC,WAAW,EACX,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAC3C,CAAC;QACJ,CAAC;QACD,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,4BACG,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAC1B,KAAC,UAAU,IACT,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,EAC5B,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,gBAAgB,CAAC,OAAO,YAEhC,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,mBAAmB,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxD,mBAAmB,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACxD,GACS,CACd,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAC;AACJ,CAAC;AAED,oBAAoB,CAAC,SAAS,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IACpD,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACzC,CAAC","sourcesContent":["import { memo, useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Input, Button, Select, Option, FormDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\nimport { DEFAULT_FORMAT } from '../constants';\n\nconst StyledRow = styled.div`\n margin: 0.625rem 0;\n`;\n\n// Returns user friendly label from field information\nfunction getFieldLabel(field) {\n // Add category information (if applicable)\n if (field.category && field.category.length) {\n const combinedCategories = field.category\n .map(currentCategory => currentCategory.label)\n .join('.');\n return `${combinedCategories}.${field.label}`;\n }\n\n return `${field.label}`;\n}\n\nconst Footer = memo(({ cancel, submit }) => {\n const [translate] = useTranslate();\n return (\n <footer>\n <Button onClick={cancel} data-test-id='cancel'>\n {translate('Cancel')}\n </Button>\n <Button variant='primary' onClick={submit} data-test-id='submit'>\n {translate('Submit')}\n </Button>\n </footer>\n );\n});\n\nFooter.displayName = 'Footer';\n\nFooter.propTypes = {\n cancel: PropTypes.func.isRequired,\n submit: PropTypes.func.isRequired\n};\n\nconst defaultDisplayMode = 'Normal';\nconst displayModes = [defaultDisplayMode, 'Hierarchical'];\n\nconst Body = memo(\n ({\n column,\n rfName,\n columnAlias,\n displayMode,\n onRFChange,\n oncolumnAliasChange,\n onDisplayModeChange\n }) => {\n const renderFormatters = column.getRenderFormatters();\n const isDefaultFormatterExist = renderFormatters?.find(\n formatter => formatter.label === DEFAULT_FORMAT\n );\n const renderDisplayMode = column.renderDisplayMode();\n const [translate] = useTranslate();\n const label = getFieldLabel(column.field);\n const showFormatter =\n column.formatterName !== 'UserReference' && !column.field.disableFormatting;\n return (\n <>\n <StyledRow>\n <Input type='text' label={translate('Field')} value={label} readOnly />\n </StyledRow>\n <StyledRow>\n <Input\n id='customise-label'\n type='text'\n label={translate('Alias')}\n onChange={oncolumnAliasChange}\n placeholder={translate('Enter alias')}\n value={columnAlias}\n data-test-id='Customise label'\n />\n </StyledRow>\n\n {showFormatter && renderFormatters && (\n <StyledRow>\n <Select\n id='select-customised-format'\n label={translate('Format')}\n onChange={onRFChange}\n value={rfName || ''}\n data-test-id='Customise format'\n >\n {!isDefaultFormatterExist && (\n <Option key={DEFAULT_FORMAT} value={DEFAULT_FORMAT}>\n {translate(DEFAULT_FORMAT)}\n </Option>\n )}\n {renderFormatters?.map(v => (\n <Option key={v.value} value={v.value}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </StyledRow>\n )}\n {renderDisplayMode && (\n <StyledRow>\n <Select\n id='select-customised-display'\n label={translate('Display')}\n onChange={onDisplayModeChange}\n value={displayMode || defaultDisplayMode}\n data-test-id='Customise display'\n >\n {displayModes.map(mode => (\n <Option key={mode} value={mode}>\n {translate(mode)}\n </Option>\n ))}\n </Select>\n </StyledRow>\n )}\n </>\n );\n }\n);\n\nBody.displayName = 'Body';\n\nBody.propTypes = {\n column: PropTypes.objectOf(PropTypes.any),\n rfName: PropTypes.string,\n columnAlias: PropTypes.string,\n onRFChange: PropTypes.func,\n oncolumnAliasChange: PropTypes.func,\n displayMode: PropTypes.string,\n onDisplayModeChange: PropTypes.func\n};\n\nBody.defaultProps = {\n column: {},\n rfName: '',\n columnAlias: '',\n onRFChange: () => {},\n oncolumnAliasChange: () => {},\n displayMode: defaultDisplayMode,\n onDisplayModeChange: () => {}\n};\n\nexport default function RFColumnConfigurator({\n column,\n onCancel,\n onSubmit,\n finishPopOver,\n popoverButtonRef\n}) {\n const [columnAlias, setColumnAlias] = useState(column.alias || '');\n const [rfName, setRFName] = useState(column.formatterName || DEFAULT_FORMAT);\n const [displayMode, setDisplayMode] = useState(column.displayMode);\n const [translate] = useTranslate();\n const onSubmitChanges = useCallback(() => {\n const isRFChanged = rfName !== column.formatterName;\n const isLableChanged = columnAlias.trim() !== column.alias?.trim(); // can be undefined\n const isDisplayChanged = displayMode !== column.displayMode;\n\n if (isRFChanged || isLableChanged || isDisplayChanged) {\n onSubmit(\n isRFChanged ? rfName : undefined,\n columnAlias,\n isDisplayChanged ? displayMode : undefined\n );\n }\n finishPopOver();\n }, [column, onSubmit, rfName, columnAlias, finishPopOver, displayMode]);\n\n return (\n <>\n {popoverButtonRef.current ? (\n <FormDialog\n heading={translate('Format')}\n onSubmit={onSubmitChanges}\n onCancel={onCancel}\n target={popoverButtonRef.current}\n >\n <Body\n column={column}\n rfName={rfName}\n columnAlias={columnAlias}\n displayMode={displayMode}\n onRFChange={e => setRFName(e.target.value)}\n oncolumnAliasChange={e => setColumnAlias(e.target.value)}\n onDisplayModeChange={e => setDisplayMode(e.target.value)}\n />\n </FormDialog>\n ) : null}\n </>\n );\n}\n\nRFColumnConfigurator.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";;AAKA;;;;4CAUC;;;;;;;;;;sBAfqB,YAAY"}
1
+ {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";;AAKA;;;;4CAYC;;;;;;;;;;sBAjBqB,YAAY"}
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
3
3
  import { memo } from 'react';
4
4
  import CellWrapper from './CellWrapper';
5
5
  function Row({ row, columns, level = 0 }) {
6
- return (_jsx("div", { ...row.getUIProps(), children: columns.map(column => {
6
+ return (_jsx("div", { ...row.getUIProps(), children: columns
7
+ .sort((colA, colB) => colA.order - colB.order)
8
+ .map(column => {
7
9
  column.setExecutionContext(row);
8
10
  if (column.hidden)
9
11
  return null;
@@ -1 +1 @@
1
- {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE;IACtC,OAAO,CACL,iBAAS,GAAG,CAAC,UAAU,EAAE,YACtB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACpB,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,MAAM,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAC;YAC/B,OAAO,KAAC,WAAW,IAAuB,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAAvD,MAAM,CAAC,KAAK,CAAC,EAAE,CAA4C,CAAC;QACvF,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,SAAS,GAAG;IACd,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC,MAAM;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo } from 'react';\n\nimport CellWrapper from './CellWrapper';\n\nfunction Row({ row, columns, level = 0 }) {\n return (\n <div {...row.getUIProps()}>\n {columns.map(column => {\n column.setExecutionContext(row);\n if (column.hidden) return null;\n return <CellWrapper key={column.field.id} row={row} column={column} level={level} />;\n })}\n </div>\n );\n}\n\nRow.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any),\n row: PropTypes.objectOf(PropTypes.any),\n level: PropTypes.number\n};\n\nexport default memo(Row);\n"]}
1
+ {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE;IACtC,OAAO,CACL,iBAAS,GAAG,CAAC,UAAU,EAAE,YACtB,OAAO;aACL,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aAC7C,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,MAAM,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAC;YAC/B,OAAO,KAAC,WAAW,IAAuB,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAAvD,MAAM,CAAC,KAAK,CAAC,EAAE,CAA4C,CAAC;QACvF,CAAC,CAAC,GACA,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,SAAS,GAAG;IACd,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC,MAAM;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo } from 'react';\n\nimport CellWrapper from './CellWrapper';\n\nfunction Row({ row, columns, level = 0 }) {\n return (\n <div {...row.getUIProps()}>\n {columns\n .sort((colA, colB) => colA.order - colB.order)\n .map(column => {\n column.setExecutionContext(row);\n if (column.hidden) return null;\n return <CellWrapper key={column.field.id} row={row} column={column} level={level} />;\n })}\n </div>\n );\n}\n\nRow.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any),\n row: PropTypes.objectOf(PropTypes.any),\n level: PropTypes.number\n};\n\nexport default memo(Row);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAYA,oNAk8BG"}
1
+ {"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAYA,oNAi6BG"}
@@ -38,7 +38,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
38
38
  --letter-spacing: ${theme.components.table.typography['letter-spacing']};
39
39
  --cell-padding: ${theme.base.spacing};
40
40
  --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);
41
- --header-cell-padding: 0 0.12rem 0 var(--cell-padding);
41
+ --header-cell-padding: 0 0.5rem 0 var(--cell-padding);
42
42
  --header-cell-right-align-padding: 0 var(--cell-padding) 0 0.12rem;
43
43
  --header-bg-color: var(--secondary-background);
44
44
  --header-fg-color: ${usableHeaderForeground};
@@ -580,39 +580,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
580
580
  display: contents;
581
581
  }
582
582
  }
583
-
584
- .header-menu {
585
- margin-left: auto;
586
- min-width: 1rem;
587
- height: auto;
588
- width: auto;
589
- display: grid;
590
-
591
- .button-more {
592
- color: var(--header-fg-color);
593
- }
594
- }
595
-
596
- .button-more {
597
- gap: ${theme.base.spacing};
598
- flex-shrink: 0;
599
- white-space: nowrap;
600
- border: none;
601
- background: none !important;
602
- height: auto;
603
- width: auto;
604
- display: grid;
605
- padding: 2px;
606
- min-height: 18px;
607
- min-width: 18px;
608
- margin-right: 0;
609
- margin-inline-end: 0.125rem;
610
- color: var(--forground-color);
611
- :focus,
612
- :hover {
613
- box-shadow: ${theme.base.shadow.focus};
614
- }
615
- }
616
583
  }
617
584
 
618
585
  > .row-reorder-handle {
@@ -1 +1 @@
1
- {"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getLuminance, meetsContrastGuidelines, mix, readableColor } from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n theme,\n style,\n view,\n isFullscreen\n}) => {\n const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);\n const freezeMarginTop = `-${style['--row-height']}`;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const selectedRowColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n const lightGreyColor = theme.base.colors.gray['extra-light'];\n const oddRowBackgroundColor =\n getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n ? theme.components.table.body['secondary-background-color']\n : mix(\n 0.75,\n theme.components.table.body['background-color'],\n theme.components.table.body['secondary-background-color']\n );\n\n const headerForegroundContrast = meetsContrastGuidelines(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n ).AA;\n const usableHeaderForeground = headerForegroundContrast\n ? theme.components.table.header['foreground-color']\n : readableColor(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n );\n const oddRowContrast = meetsContrastGuidelines(\n theme.components.table.body['foreground-color'],\n oddRowBackgroundColor\n ).AA;\n const useableOddRowForeground = oddRowContrast\n ? theme.components.table.body['foreground-color']\n : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);\n\n return css`\n --primary-background: ${theme.base.palette['primary-background']};\n --secondary-background: ${theme.components.table.header['background-color']};\n --forground-color: ${theme.base.palette['foreground-color']};\n --interactive: ${theme.base.palette.interactive};\n --medium-blue: ${theme.base.colors.blue.medium};\n --border-color: ${theme.base.palette['border-line']};\n --border-color-freeze: #a5a5a5;\n --border-width: 0.062rem;\n --border-style: var(--border-width) solid var(--border-color);\n --font-stretch: ${theme.components.table.typography['font-stretch']};\n --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n --cell-padding: ${theme.base.spacing};\n --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n --header-cell-padding: 0 0.12rem 0 var(--cell-padding);\n --header-cell-right-align-padding: 0 var(--cell-padding) 0 0.12rem;\n --header-bg-color: var(--secondary-background);\n --header-fg-color: ${usableHeaderForeground};\n --aggregation-footer-bg-color: color-mix(\n in sRGB,\n var(--header-bg-color) 66%,\n ${theme.base.colors.gray.light} 33%\n );\n --default-group-header-height: 1.5rem;\n --group-header-height: var(--default-group-header-height);\n --box-sizing: content-box;\n --animation-ease: ${theme.base.animation.timing.ease};\n --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n --row-height-multiplier: 1.125;\n --cell-fixed-position: sticky;\n position: relative;\n ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n .small-screen-table {\n --cell-fixed-position: static;\n }\n\n .container {\n ${() => generateRSDataContainerHeightStyles()};\n border: var(--border-style);\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n position: relative;\n letter-spacing: var(--letter-spacing);\n font-stretch: var(--font-stretch);\n }\n\n .hide-rows-till-ready .row[aria-rowindex] {\n visibility: hidden;\n }\n\n .table-drag-proxy {\n background: rgba(0, 0, 0, 0.21);\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .table-drag-line {\n background: #999999;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0.12rem;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .freeze-line {\n /* stylelint-disable unit-allowed-list */\n border-right: solid 1px var(--border-color-freeze);\n position: sticky;\n top: 0;\n bottom: 0;\n width: 1px;\n z-index: 7; /* Footer has 6 z-index so this needs to be more than that */\n pointer-events: none;\n height: 100%;\n float: left;\n margin-top: ${freezeMarginTop};\n }\n\n .freeze-line.freeze-line-hide {\n display: none;\n }\n\n .horizontally-scrolled {\n .freeze-line {\n box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);\n transition: 0.5s;\n }\n }\n\n .cell-fixed {\n z-index: 1;\n }\n\n .group-wrapper {\n overflow: hidden;\n display: inline-flex;\n line-height: var(--group-header-height);\n\n .group-context-count {\n display: inline-flex;\n overflow: hidden;\n }\n }\n\n /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n mark up is generated from cosmos which differentiates from normal table cell markup */\n .group-wrapper .group-context-count dl {\n grid-template-columns: auto;\n }\n\n .fallback,\n .fallback-footer {\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n position: absolute;\n width: 100%;\n z-index: -1;\n box-sizing: var(--box-sizing);\n }\n\n .fallback {\n top: -1px;\n border-bottom: var(--border-style);\n }\n\n .fallback-footer {\n top: 0;\n border-top: var(--border-style);\n }\n\n .sticky-header {\n display: grid;\n position: sticky;\n top: 0;\n z-index: 6;\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n .cell {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n .icons-ph {\n min-width: 1rem;\n }\n\n &.custom-item {\n width: 10em;\n }\n }\n\n .cell:focus {\n outline: 0.125rem auto var(--medium-blue);\n }\n\n .cell.selection-border:focus,\n .cell.editable-cell:focus {\n outline: none 0;\n }\n\n .editable-cell > span {\n height: 100%;\n display: flex;\n padding: 0 6px;\n align-items: center;\n }\n\n .row {\n display: inline-flex;\n height: var(--row-height);\n outline: none 0;\n transition: transform 0.5s var(--animation-ease);\n box-sizing: var(--box-sizing);\n position: relative;\n\n > .row-select-handle {\n display: flex;\n justify-content: center;\n &:active {\n outline: none;\n }\n\n > .header-lable-container {\n min-width: 20px;\n }\n /* stylelint-disable selector-max-class */\n &.cell-fixed > .cell-content {\n flex-grow: unset;\n }\n }\n\n > .cell,\n .group-header-aggregation-row > .cell {\n transition: transform 0.5s var(--animation-ease);\n border-right: var(--border-style);\n ${!theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n display: flex;\n align-items: center;\n\n &::after {\n opacity: 1;\n transition: opacity 0.1s var(--animation-ease);\n }\n\n .row-action-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.cell-action {\n position: sticky;\n z-index: 4;\n right: 0;\n border-right: 0;\n min-width: 32px;\n justify-content: center;\n border-left: var(--border-style);\n\n .cell-content {\n padding: 0;\n overflow: visible;\n }\n\n /* The below styles are needed to avoid ellipses in safari when no text is present\n and to hide the 'Actions' label */\n\n /* stylelint-disable max-nesting-depth */\n\n div.header-label {\n text-overflow: unset;\n span {\n visibility: hidden;\n }\n }\n }\n &.aggregateCell {\n background-color: var(--aggregation-footer-bg-color);\n }\n }\n\n /** Adds bottom border to the last row of a group, when striped-rows are enabled */\n &:has(+ .group-header-row) > .cell {\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n &.header > .cell {\n border-bottom: var(--border-style);\n }\n .group-header-aggregation-row {\n > .cell {\n &.cell-action {\n overflow: initial;\n\n /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */\n &::before {\n content: '';\n position: absolute;\n inline-size: 0;\n inset-inline-start: calc(var(--border-width) * -1);\n inset-block-start: calc(var(--group-header-height) * -1);\n block-size: var(--group-header-height);\n border-inline-start: var(--border-style);\n }\n }\n }\n }\n\n > .cell-action {\n background-color: var(--primary-background);\n }\n\n > .row-reorder-handle {\n padding: 0;\n border-right: 0 !important;\n justify-content: center;\n cursor: move;\n }\n\n .aggregateCell.cell {\n border-right: none;\n }\n\n > .cell.cell-fixed,\n .group-header-aggregation-row > .cell-fixed {\n position: var(--cell-fixed-position);\n z-index: 4;\n\n /* As the row select column and row dragDrop column always have to be frozen */\n &[data-col-id='RowSelect'],\n &[data-col-id='RowDragDrop'],\n &[data-col-id='RowError'] {\n position: sticky;\n flex-shrink: 0;\n z-index: 5;\n }\n }\n\n > .cell.cell-fixed:focus-within,\n .group-header-aggregation-row > .cell-fixed {\n z-index: 6;\n }\n\n &.click {\n cursor: pointer;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n > .cell {\n &:first-child {\n border-end-start-radius: inherit;\n }\n\n &:last-child {\n border-end-end-radius: inherit;\n }\n\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n }\n }\n .row:not(.row-error):not(.group-header-row):not(.header) {\n .cell-fixed {\n background: var(--primary-background);\n }\n }\n ${theme.components.table['striped-rows'] &&\n css`\n /* Targets rows with an odd data-index attribute, excluding group header rows */\n .row[data-index$='1']:not(.group-header-row):not(.header),\n .row[data-index$='3']:not(.group-header-row):not(.header),\n .row[data-index$='5']:not(.group-header-row):not(.header),\n .row[data-index$='7']:not(.group-header-row):not(.header),\n .row[data-index$='9']:not(.group-header-row):not(.header) {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n .cell-fixed {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n }\n > .cell-action {\n background: ${oddRowBackgroundColor};\n }\n }\n `}\n\n .row-error {\n background: ${mix(\n 0.1,\n theme.components['form-field'].error['status-color'],\n theme.base.palette['primary-background']\n )};\n\n /* stylelint-disable no-descending-specificity */\n .cell-fixed,\n .cell-action {\n background: inherit;\n }\n\n > .cell:not(.cell-fixed):not(.cell-action) {\n background: none;\n }\n }\n\n .sort-info-container {\n margin-left: 0.312rem;\n\n .sort-sequence {\n font-size: 0.625rem;\n color: ${theme.base.colors.gray['extra-dark']};\n }\n }\n\n .filter-info-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 0 0 0.312rem;\n\n svg {\n width: 14px;\n height: 14px;\n }\n }\n\n .cell.row-error-column {\n padding: 0;\n border-right: 0;\n text-align: right;\n outline: none;\n\n /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n svg {\n color: ${theme.base.colors.red.medium};\n }\n }\n\n .cell-right-align .filter-info-container svg {\n margin: 0 0.312rem 0 0;\n }\n\n .editable-cell {\n padding: 0;\n border: 2px solid ${theme.base.palette.interactive} !important;\n box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;\n }\n\n .editable-cell input {\n border: none;\n outline: none;\n min-width: calc(100%);\n min-height: 0;\n max-height: 100%;\n box-shadow: none !important;\n border-radius: 0;\n }\n\n .editable-cell.align-right input {\n justify-content: right;\n }\n\n &.show-expand-collapse-all {\n .row > .cell-first {\n padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n &.row-reorder-handle,\n &.row-error-column {\n padding: 0;\n }\n &.row-select-handle {\n padding-left: calc(var(--expand-collapse-all-width) + 0.5rem);\n }\n }\n\n .row-container .row > .cell-first {\n &.row-select-handle {\n padding-inline-start: calc(\n var(--expand-collapse-all-width) - var(--cell-padding) + 0.25rem\n );\n }\n }\n\n /* stylelint-enable selector-max-class */\n .expand-collapse-all {\n position: absolute;\n width: var(--expand-collapse-all-width);\n z-index: 10;\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n border-right: var(--border-style);\n border-bottom: var(--border-style);\n border-start-start-radius: ${theme.base['border-radius']};\n margin-inline-start: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n > button {\n color: var(--forground-color);\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n .no-border-right {\n border-right: 0;\n }\n }\n\n /* stylelint-disable selector-max-class */\n\n .scroll-end {\n &.row-container > .row:last-child {\n & > .cell,\n & .group-header-aggregation-row > .cell {\n border-bottom: 0;\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n .header {\n font-weight: var(--font-weight-semi-bold);\n position: relative; /* This is required to position .border-fix element */\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n\n > .cell.row-error-column {\n border-right: 0;\n }\n > .cell {\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 2;\n position: relative;\n cursor: pointer;\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n font-weight: ${theme.base['font-weight'].bold};\n font-size: ${fontSize.xxs};\n border-right: var(--border-style);\n padding: var(--header-cell-padding);\n\n &:first-child {\n border-start-start-radius: inherit;\n }\n\n &:last-child {\n border-start-end-radius: inherit;\n }\n\n .header-lable-container {\n display: inline-flex;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${fontSize.xs};\n font-weight: var(--font-weight-semi-bold);\n align-items: center;\n }\n\n .header-label {\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* To avoid browser tooltip when we get ellipsis in safari */\n &::after {\n content: '';\n display: block;\n }\n\n /* To utilize smart tooltip making it as a non-box element */\n /* stylelint-disable selector-max-class */\n .cell-content {\n display: contents;\n }\n }\n\n .header-menu {\n margin-left: auto;\n min-width: 1rem;\n height: auto;\n width: auto;\n display: grid;\n\n .button-more {\n color: var(--header-fg-color);\n }\n }\n\n .button-more {\n gap: ${theme.base.spacing};\n flex-shrink: 0;\n white-space: nowrap;\n border: none;\n background: none !important;\n height: auto;\n width: auto;\n display: grid;\n padding: 2px;\n min-height: 18px;\n min-width: 18px;\n margin-right: 0;\n margin-inline-end: 0.125rem;\n color: var(--forground-color);\n :focus,\n :hover {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n > .row-reorder-handle {\n padding: 0;\n }\n\n > .cell-fixed:last-child {\n border-right: var(--border-style);\n }\n\n > .row-select-handle {\n padding-inline-start: calc(var(--cell-padding) / 4);\n justify-content: center;\n }\n\n > .cell-right-align {\n padding: var(--header-cell-right-align-padding);\n justify-content: end;\n\n .header-lable-container {\n flex-direction: row-reverse;\n }\n\n .sort-info-container {\n margin-left: 0;\n margin-right: 0.312rem;\n }\n }\n\n > .cell-first {\n padding: 0 var(--cell-padding);\n }\n\n .row {\n border-bottom: none;\n }\n }\n\n /* 4 selectors required as aggregateCell of only footer need this effect */\n\n .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n border-bottom: none;\n }\n\n /* stylelint-enable selector-max-class */\n .row .cell.cell-last {\n border-right: 0;\n flex-grow: 1;\n }\n\n .row-container {\n --data-row-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--data-row-height)'};\n &:not(.wrap-content-height) > .row:not(.group-header-row) {\n height: var(--data-row-height);\n }\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n & > .row .cell-content {\n /*\n * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n */\n box-sizing: content-box;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: break-all;\n flex-grow: 1;\n\n /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n padding: var(--cell-vertical-padding) var(--cell-padding);\n\n /* setting max-height so that the elements with more height like RTL, align with the row density height */\n max-height: var(--data-row-height);\n\n /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n & * {\n scrollbar-width: none;\n }\n\n /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n &:has(.combined-cell) {\n padding: 0;\n\n /* stylelint-disable-next-line selector-max-class */\n .cell-content {\n flex-grow: unset;\n }\n }\n }\n }\n\n .row .aggregateCell .cell-content {\n line-height: initial;\n padding: 0;\n }\n\n .short-height,\n .medium-height {\n ${StyledStatus} {\n white-space: nowrap;\n }\n }\n\n .short-height {\n ${StyledRadioCheck} ${StyledLabel} {\n min-height: auto;\n }\n }\n\n .medium-height {\n --row-height-multiplier: 4 / 3;\n }\n\n .tall-height {\n --row-height-multiplier: calc(4 / 3 + 0.5);\n > .row:not(.group-header-row) {\n > .cell {\n display: inline-grid;\n align-items: start;\n white-space: normal;\n word-break: break-all;\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable selector-max-class */\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .wrap-content-height {\n --row-height-multiplier: 4 / 3;\n --row-min-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--row-min-height)'};\n\n > .row:not(.group-header-row) {\n height: auto;\n min-height: var(--row-min-height);\n > .cell {\n white-space: normal;\n\n /* -- For BUG-625508 -- */\n word-break: break-word;\n display: inline-grid;\n align-items: start;\n padding-top: var(--cell-vertical-padding);\n padding-bottom: var(--cell-vertical-padding);\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n /* for full-content, the row cells should adjust according to content */\n max-height: none;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .footer {\n .row {\n .cell {\n padding: 0;\n }\n }\n }\n\n /* stylelint-disable no-duplicate-selectors */\n .row-container {\n position: absolute;\n display: grid;\n width: 100%;\n font-size: ${fontSize.s};\n\n > .group-header-row,\n .hierarchical-group-footer-row {\n height: var(--group-header-height);\n .cell {\n padding: 0;\n border-right-width: 0;\n }\n }\n\n > .hierarchical-group-header-row {\n height: var(--group-header-height);\n }\n input.checkbox-on-hover + label {\n opacity: 0;\n }\n input.checkbox-on-hover:checked + label {\n opacity: 1;\n }\n .row.selected-row {\n background-color: ${selectedRowColor};\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${selectedRowColor};\n }\n }\n .row-on-hover:hover {\n background-color: ${lightGreyColor};\n input.checkbox-on-hover + label {\n opacity: 1;\n }\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${lightGreyColor};\n }\n }\n .row.hierarchical-group-footer-row {\n .cell-fixed {\n background: ${lightGreyColor};\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n\n .toolbar-button-applied {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .toolbar-button {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .column-resizer {\n cursor: col-resize;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n width: 0.25rem;\n height: 100%;\n }\n\n .column-resizer:hover,\n .column-resizer:active {\n background: var(--interactive);\n }\n\n .align-right {\n justify-content: right;\n\n .cell-content {\n text-align: right;\n }\n }\n\n .align-left {\n justify-content: left;\n\n .cell-content {\n text-align: left;\n }\n }\n\n .align-center {\n justify-content: center;\n\n .cell-content {\n text-align: center;\n }\n }\n\n .selection-border {\n border: 0.125rem solid var(--medium-blue) !important;\n }\n\n .disable-select {\n user-select: none; /* supported by Chrome and Firefox */\n -webkit-user-select: none; /* Safari */\n }\n\n .popper {\n div.row {\n display: flex;\n vertical-align: middle;\n line-height: unset;\n border-bottom: none;\n outline: none 0;\n height: auto;\n }\n }\n `;\n});\n\nexport default StyledTableContainer;\n"]}
1
+ {"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getLuminance, meetsContrastGuidelines, mix, readableColor } from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n theme,\n style,\n view,\n isFullscreen\n}) => {\n const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);\n const freezeMarginTop = `-${style['--row-height']}`;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const selectedRowColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n const lightGreyColor = theme.base.colors.gray['extra-light'];\n const oddRowBackgroundColor =\n getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n ? theme.components.table.body['secondary-background-color']\n : mix(\n 0.75,\n theme.components.table.body['background-color'],\n theme.components.table.body['secondary-background-color']\n );\n\n const headerForegroundContrast = meetsContrastGuidelines(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n ).AA;\n const usableHeaderForeground = headerForegroundContrast\n ? theme.components.table.header['foreground-color']\n : readableColor(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n );\n const oddRowContrast = meetsContrastGuidelines(\n theme.components.table.body['foreground-color'],\n oddRowBackgroundColor\n ).AA;\n const useableOddRowForeground = oddRowContrast\n ? theme.components.table.body['foreground-color']\n : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);\n\n return css`\n --primary-background: ${theme.base.palette['primary-background']};\n --secondary-background: ${theme.components.table.header['background-color']};\n --forground-color: ${theme.base.palette['foreground-color']};\n --interactive: ${theme.base.palette.interactive};\n --medium-blue: ${theme.base.colors.blue.medium};\n --border-color: ${theme.base.palette['border-line']};\n --border-color-freeze: #a5a5a5;\n --border-width: 0.062rem;\n --border-style: var(--border-width) solid var(--border-color);\n --font-stretch: ${theme.components.table.typography['font-stretch']};\n --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n --cell-padding: ${theme.base.spacing};\n --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n --header-cell-padding: 0 0.5rem 0 var(--cell-padding);\n --header-cell-right-align-padding: 0 var(--cell-padding) 0 0.12rem;\n --header-bg-color: var(--secondary-background);\n --header-fg-color: ${usableHeaderForeground};\n --aggregation-footer-bg-color: color-mix(\n in sRGB,\n var(--header-bg-color) 66%,\n ${theme.base.colors.gray.light} 33%\n );\n --default-group-header-height: 1.5rem;\n --group-header-height: var(--default-group-header-height);\n --box-sizing: content-box;\n --animation-ease: ${theme.base.animation.timing.ease};\n --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n --row-height-multiplier: 1.125;\n --cell-fixed-position: sticky;\n position: relative;\n ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n .small-screen-table {\n --cell-fixed-position: static;\n }\n\n .container {\n ${() => generateRSDataContainerHeightStyles()};\n border: var(--border-style);\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n position: relative;\n letter-spacing: var(--letter-spacing);\n font-stretch: var(--font-stretch);\n }\n\n .hide-rows-till-ready .row[aria-rowindex] {\n visibility: hidden;\n }\n\n .table-drag-proxy {\n background: rgba(0, 0, 0, 0.21);\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .table-drag-line {\n background: #999999;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0.12rem;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .freeze-line {\n /* stylelint-disable unit-allowed-list */\n border-right: solid 1px var(--border-color-freeze);\n position: sticky;\n top: 0;\n bottom: 0;\n width: 1px;\n z-index: 7; /* Footer has 6 z-index so this needs to be more than that */\n pointer-events: none;\n height: 100%;\n float: left;\n margin-top: ${freezeMarginTop};\n }\n\n .freeze-line.freeze-line-hide {\n display: none;\n }\n\n .horizontally-scrolled {\n .freeze-line {\n box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);\n transition: 0.5s;\n }\n }\n\n .cell-fixed {\n z-index: 1;\n }\n\n .group-wrapper {\n overflow: hidden;\n display: inline-flex;\n line-height: var(--group-header-height);\n\n .group-context-count {\n display: inline-flex;\n overflow: hidden;\n }\n }\n\n /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n mark up is generated from cosmos which differentiates from normal table cell markup */\n .group-wrapper .group-context-count dl {\n grid-template-columns: auto;\n }\n\n .fallback,\n .fallback-footer {\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n position: absolute;\n width: 100%;\n z-index: -1;\n box-sizing: var(--box-sizing);\n }\n\n .fallback {\n top: -1px;\n border-bottom: var(--border-style);\n }\n\n .fallback-footer {\n top: 0;\n border-top: var(--border-style);\n }\n\n .sticky-header {\n display: grid;\n position: sticky;\n top: 0;\n z-index: 6;\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n .cell {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n .icons-ph {\n min-width: 1rem;\n }\n\n &.custom-item {\n width: 10em;\n }\n }\n\n .cell:focus {\n outline: 0.125rem auto var(--medium-blue);\n }\n\n .cell.selection-border:focus,\n .cell.editable-cell:focus {\n outline: none 0;\n }\n\n .editable-cell > span {\n height: 100%;\n display: flex;\n padding: 0 6px;\n align-items: center;\n }\n\n .row {\n display: inline-flex;\n height: var(--row-height);\n outline: none 0;\n transition: transform 0.5s var(--animation-ease);\n box-sizing: var(--box-sizing);\n position: relative;\n\n > .row-select-handle {\n display: flex;\n justify-content: center;\n &:active {\n outline: none;\n }\n\n > .header-lable-container {\n min-width: 20px;\n }\n /* stylelint-disable selector-max-class */\n &.cell-fixed > .cell-content {\n flex-grow: unset;\n }\n }\n\n > .cell,\n .group-header-aggregation-row > .cell {\n transition: transform 0.5s var(--animation-ease);\n border-right: var(--border-style);\n ${!theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n display: flex;\n align-items: center;\n\n &::after {\n opacity: 1;\n transition: opacity 0.1s var(--animation-ease);\n }\n\n .row-action-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.cell-action {\n position: sticky;\n z-index: 4;\n right: 0;\n border-right: 0;\n min-width: 32px;\n justify-content: center;\n border-left: var(--border-style);\n\n .cell-content {\n padding: 0;\n overflow: visible;\n }\n\n /* The below styles are needed to avoid ellipses in safari when no text is present\n and to hide the 'Actions' label */\n\n /* stylelint-disable max-nesting-depth */\n\n div.header-label {\n text-overflow: unset;\n span {\n visibility: hidden;\n }\n }\n }\n &.aggregateCell {\n background-color: var(--aggregation-footer-bg-color);\n }\n }\n\n /** Adds bottom border to the last row of a group, when striped-rows are enabled */\n &:has(+ .group-header-row) > .cell {\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n &.header > .cell {\n border-bottom: var(--border-style);\n }\n .group-header-aggregation-row {\n > .cell {\n &.cell-action {\n overflow: initial;\n\n /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */\n &::before {\n content: '';\n position: absolute;\n inline-size: 0;\n inset-inline-start: calc(var(--border-width) * -1);\n inset-block-start: calc(var(--group-header-height) * -1);\n block-size: var(--group-header-height);\n border-inline-start: var(--border-style);\n }\n }\n }\n }\n\n > .cell-action {\n background-color: var(--primary-background);\n }\n\n > .row-reorder-handle {\n padding: 0;\n border-right: 0 !important;\n justify-content: center;\n cursor: move;\n }\n\n .aggregateCell.cell {\n border-right: none;\n }\n\n > .cell.cell-fixed,\n .group-header-aggregation-row > .cell-fixed {\n position: var(--cell-fixed-position);\n z-index: 4;\n\n /* As the row select column and row dragDrop column always have to be frozen */\n &[data-col-id='RowSelect'],\n &[data-col-id='RowDragDrop'],\n &[data-col-id='RowError'] {\n position: sticky;\n flex-shrink: 0;\n z-index: 5;\n }\n }\n\n > .cell.cell-fixed:focus-within,\n .group-header-aggregation-row > .cell-fixed {\n z-index: 6;\n }\n\n &.click {\n cursor: pointer;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n > .cell {\n &:first-child {\n border-end-start-radius: inherit;\n }\n\n &:last-child {\n border-end-end-radius: inherit;\n }\n\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n }\n }\n .row:not(.row-error):not(.group-header-row):not(.header) {\n .cell-fixed {\n background: var(--primary-background);\n }\n }\n ${theme.components.table['striped-rows'] &&\n css`\n /* Targets rows with an odd data-index attribute, excluding group header rows */\n .row[data-index$='1']:not(.group-header-row):not(.header),\n .row[data-index$='3']:not(.group-header-row):not(.header),\n .row[data-index$='5']:not(.group-header-row):not(.header),\n .row[data-index$='7']:not(.group-header-row):not(.header),\n .row[data-index$='9']:not(.group-header-row):not(.header) {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n .cell-fixed {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n }\n > .cell-action {\n background: ${oddRowBackgroundColor};\n }\n }\n `}\n\n .row-error {\n background: ${mix(\n 0.1,\n theme.components['form-field'].error['status-color'],\n theme.base.palette['primary-background']\n )};\n\n /* stylelint-disable no-descending-specificity */\n .cell-fixed,\n .cell-action {\n background: inherit;\n }\n\n > .cell:not(.cell-fixed):not(.cell-action) {\n background: none;\n }\n }\n\n .sort-info-container {\n margin-left: 0.312rem;\n\n .sort-sequence {\n font-size: 0.625rem;\n color: ${theme.base.colors.gray['extra-dark']};\n }\n }\n\n .filter-info-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 0 0 0.312rem;\n\n svg {\n width: 14px;\n height: 14px;\n }\n }\n\n .cell.row-error-column {\n padding: 0;\n border-right: 0;\n text-align: right;\n outline: none;\n\n /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n svg {\n color: ${theme.base.colors.red.medium};\n }\n }\n\n .cell-right-align .filter-info-container svg {\n margin: 0 0.312rem 0 0;\n }\n\n .editable-cell {\n padding: 0;\n border: 2px solid ${theme.base.palette.interactive} !important;\n box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;\n }\n\n .editable-cell input {\n border: none;\n outline: none;\n min-width: calc(100%);\n min-height: 0;\n max-height: 100%;\n box-shadow: none !important;\n border-radius: 0;\n }\n\n .editable-cell.align-right input {\n justify-content: right;\n }\n\n &.show-expand-collapse-all {\n .row > .cell-first {\n padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n &.row-reorder-handle,\n &.row-error-column {\n padding: 0;\n }\n &.row-select-handle {\n padding-left: calc(var(--expand-collapse-all-width) + 0.5rem);\n }\n }\n\n .row-container .row > .cell-first {\n &.row-select-handle {\n padding-inline-start: calc(\n var(--expand-collapse-all-width) - var(--cell-padding) + 0.25rem\n );\n }\n }\n\n /* stylelint-enable selector-max-class */\n .expand-collapse-all {\n position: absolute;\n width: var(--expand-collapse-all-width);\n z-index: 10;\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n border-right: var(--border-style);\n border-bottom: var(--border-style);\n border-start-start-radius: ${theme.base['border-radius']};\n margin-inline-start: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n > button {\n color: var(--forground-color);\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n .no-border-right {\n border-right: 0;\n }\n }\n\n /* stylelint-disable selector-max-class */\n\n .scroll-end {\n &.row-container > .row:last-child {\n & > .cell,\n & .group-header-aggregation-row > .cell {\n border-bottom: 0;\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n .header {\n font-weight: var(--font-weight-semi-bold);\n position: relative; /* This is required to position .border-fix element */\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n\n > .cell.row-error-column {\n border-right: 0;\n }\n > .cell {\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 2;\n position: relative;\n cursor: pointer;\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n font-weight: ${theme.base['font-weight'].bold};\n font-size: ${fontSize.xxs};\n border-right: var(--border-style);\n padding: var(--header-cell-padding);\n\n &:first-child {\n border-start-start-radius: inherit;\n }\n\n &:last-child {\n border-start-end-radius: inherit;\n }\n\n .header-lable-container {\n display: inline-flex;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${fontSize.xs};\n font-weight: var(--font-weight-semi-bold);\n align-items: center;\n }\n\n .header-label {\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* To avoid browser tooltip when we get ellipsis in safari */\n &::after {\n content: '';\n display: block;\n }\n\n /* To utilize smart tooltip making it as a non-box element */\n /* stylelint-disable selector-max-class */\n .cell-content {\n display: contents;\n }\n }\n }\n\n > .row-reorder-handle {\n padding: 0;\n }\n\n > .cell-fixed:last-child {\n border-right: var(--border-style);\n }\n\n > .row-select-handle {\n padding-inline-start: calc(var(--cell-padding) / 4);\n justify-content: center;\n }\n\n > .cell-right-align {\n padding: var(--header-cell-right-align-padding);\n justify-content: end;\n\n .header-lable-container {\n flex-direction: row-reverse;\n }\n\n .sort-info-container {\n margin-left: 0;\n margin-right: 0.312rem;\n }\n }\n\n > .cell-first {\n padding: 0 var(--cell-padding);\n }\n\n .row {\n border-bottom: none;\n }\n }\n\n /* 4 selectors required as aggregateCell of only footer need this effect */\n\n .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n border-bottom: none;\n }\n\n /* stylelint-enable selector-max-class */\n .row .cell.cell-last {\n border-right: 0;\n flex-grow: 1;\n }\n\n .row-container {\n --data-row-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--data-row-height)'};\n &:not(.wrap-content-height) > .row:not(.group-header-row) {\n height: var(--data-row-height);\n }\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n & > .row .cell-content {\n /*\n * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n */\n box-sizing: content-box;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: break-all;\n flex-grow: 1;\n\n /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n padding: var(--cell-vertical-padding) var(--cell-padding);\n\n /* setting max-height so that the elements with more height like RTL, align with the row density height */\n max-height: var(--data-row-height);\n\n /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n & * {\n scrollbar-width: none;\n }\n\n /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n &:has(.combined-cell) {\n padding: 0;\n\n /* stylelint-disable-next-line selector-max-class */\n .cell-content {\n flex-grow: unset;\n }\n }\n }\n }\n\n .row .aggregateCell .cell-content {\n line-height: initial;\n padding: 0;\n }\n\n .short-height,\n .medium-height {\n ${StyledStatus} {\n white-space: nowrap;\n }\n }\n\n .short-height {\n ${StyledRadioCheck} ${StyledLabel} {\n min-height: auto;\n }\n }\n\n .medium-height {\n --row-height-multiplier: 4 / 3;\n }\n\n .tall-height {\n --row-height-multiplier: calc(4 / 3 + 0.5);\n > .row:not(.group-header-row) {\n > .cell {\n display: inline-grid;\n align-items: start;\n white-space: normal;\n word-break: break-all;\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable selector-max-class */\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .wrap-content-height {\n --row-height-multiplier: 4 / 3;\n --row-min-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--row-min-height)'};\n\n > .row:not(.group-header-row) {\n height: auto;\n min-height: var(--row-min-height);\n > .cell {\n white-space: normal;\n\n /* -- For BUG-625508 -- */\n word-break: break-word;\n display: inline-grid;\n align-items: start;\n padding-top: var(--cell-vertical-padding);\n padding-bottom: var(--cell-vertical-padding);\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n /* for full-content, the row cells should adjust according to content */\n max-height: none;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .footer {\n .row {\n .cell {\n padding: 0;\n }\n }\n }\n\n /* stylelint-disable no-duplicate-selectors */\n .row-container {\n position: absolute;\n display: grid;\n width: 100%;\n font-size: ${fontSize.s};\n\n > .group-header-row,\n .hierarchical-group-footer-row {\n height: var(--group-header-height);\n .cell {\n padding: 0;\n border-right-width: 0;\n }\n }\n\n > .hierarchical-group-header-row {\n height: var(--group-header-height);\n }\n input.checkbox-on-hover + label {\n opacity: 0;\n }\n input.checkbox-on-hover:checked + label {\n opacity: 1;\n }\n .row.selected-row {\n background-color: ${selectedRowColor};\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${selectedRowColor};\n }\n }\n .row-on-hover:hover {\n background-color: ${lightGreyColor};\n input.checkbox-on-hover + label {\n opacity: 1;\n }\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${lightGreyColor};\n }\n }\n .row.hierarchical-group-footer-row {\n .cell-fixed {\n background: ${lightGreyColor};\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n\n .toolbar-button-applied {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .toolbar-button {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .column-resizer {\n cursor: col-resize;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n width: 0.25rem;\n height: 100%;\n }\n\n .column-resizer:hover,\n .column-resizer:active {\n background: var(--interactive);\n }\n\n .align-right {\n justify-content: right;\n\n .cell-content {\n text-align: right;\n }\n }\n\n .align-left {\n justify-content: left;\n\n .cell-content {\n text-align: left;\n }\n }\n\n .align-center {\n justify-content: center;\n\n .cell-content {\n text-align: center;\n }\n }\n\n .selection-border {\n border: 0.125rem solid var(--medium-blue) !important;\n }\n\n .disable-select {\n user-select: none; /* supported by Chrome and Firefox */\n -webkit-user-select: none; /* Safari */\n }\n\n .popper {\n div.row {\n display: flex;\n vertical-align: middle;\n line-height: unset;\n border-bottom: none;\n outline: none 0;\n height: auto;\n }\n }\n `;\n});\n\nexport default StyledTableContainer;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/lists-react",
3
- "version": "8.0.0-build.50.0",
3
+ "version": "8.0.0-build.50.2",
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,10 +14,10 @@
14
14
  "build": "tsc -b tsconfig.build.json"
15
15
  },
16
16
  "dependencies": {
17
- "@pega/cosmos-react-condition-builder": "8.0.0-build.50.0",
18
- "@pega/cosmos-react-core": "8.0.0-build.50.0",
19
- "@pega/cosmos-react-rte": "8.0.0-build.50.0",
20
- "@pega/cosmos-react-work": "8.0.0-build.50.0",
17
+ "@pega/cosmos-react-condition-builder": "8.0.0-build.50.2",
18
+ "@pega/cosmos-react-core": "8.0.0-build.50.2",
19
+ "@pega/cosmos-react-rte": "8.0.0-build.50.2",
20
+ "@pega/cosmos-react-work": "8.0.0-build.50.2",
21
21
  "@types/lodash.get": "^4.4.9",
22
22
  "@types/react": "^17.0.62 || ^18.3.3",
23
23
  "@types/react-dom": "^17.0.20 || ^18.3.0",
@@ -25,8 +25,8 @@
25
25
  "dayjs": "^1.11.13",
26
26
  "fast-deep-equal": "^3.1.3",
27
27
  "lodash.get": "^4.4.2",
28
- "pega-repeating-structures-core": "npm:@pega/lists-core@8.0.0-build.50.0",
29
- "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@8.0.0-build.50.0",
28
+ "pega-repeating-structures-core": "npm:@pega/lists-core@8.0.0-build.50.2",
29
+ "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@8.0.0-build.50.2",
30
30
  "polished": "^4.1.0",
31
31
  "prop-types": "^15.8.1",
32
32
  "react": "^17.0.0 || ^18.0.0",
@@ -45,7 +45,7 @@
45
45
  "@testing-library/react": "^16.0.0",
46
46
  "@testing-library/user-event": "^14.6.1",
47
47
  "jest-axe": "^8.0.0",
48
- "srs-utils": "8.0.0-build.50.0",
48
+ "srs-utils": "8.0.0-build.50.2",
49
49
  "typescript": "~5.5.4"
50
50
  }
51
51
  }