npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.0 → 2.0.0-dev.21.1 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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.

Files changed (180) hide show

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { Ref } from 'react';
+declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean | undefined) => {
+    containerRef: Ref<HTMLElement | null>;
+    regionWrappedStates: boolean[];
+};
+export default useTrackWrappedRegions;
+//# sourceMappingURL=useTrackWrappedRegions.d.ts.map

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE;kBAEpB,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { useRef, useEffect, useState } from 'react';
+import { debounce } from '@pega/cosmos-react-core';
+const useTrackWrappedRegions = (regionElArray, disabled) => {
+    const containerRef = useRef(null);
+    const [regionWrappedStates, setRegionWrappedStates] = useState(new Array(regionElArray.length).fill(false));
+    useEffect(() => {
+        if (disabled)
+            return;
+        let isMounted = true;
+        const observer = new ResizeObserver(debounce(entries => {
+            if (isMounted) {
+                const containerWidth = entries[0].contentRect.width;
+                const newWrappedStates = [...regionWrappedStates];
+                regionElArray.forEach((regionEl, index) => {
+                    const regionWidth = regionEl?.getBoundingClientRect().width;
+                    if (regionWidth !== undefined && regionWidth >= containerWidth) {
+                        newWrappedStates[index] = true;
+                    }
+                    else {
+                        newWrappedStates[index] = false;
+                    }
+                });
+                setRegionWrappedStates(newWrappedStates);
+            }
+        }, 100));
+        if (containerRef.current && regionElArray.length) {
+            observer.observe(containerRef.current);
+        }
+        return () => {
+            isMounted = false;
+            observer.disconnect();
+        };
+    }, [containerRef, regionElArray]);
+    return { containerRef, regionWrappedStates };
+};
+export default useTrackWrappedRegions;
+//# sourceMappingURL=useTrackWrappedRegions.js.map

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAO,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState, Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n regionElArray: (HTMLElement | null)[],\n disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n const containerRef = useRef<HTMLElement | null>(null);\n const [regionWrappedStates, setRegionWrappedStates] = useState(\n new Array(regionElArray.length).fill(false)\n );\n\n useEffect(() => {\n if (disabled) return;\n\n let isMounted = true;\n\n const observer = new ResizeObserver(\n debounce(entries => {\n if (isMounted) {\n const containerWidth = entries[0].contentRect.width;\n const newWrappedStates = [...regionWrappedStates];\n\n regionElArray.forEach((regionEl, index) => {\n const regionWidth = regionEl?.getBoundingClientRect().width;\n\n if (regionWidth !== undefined && regionWidth >= containerWidth) {\n newWrappedStates[index] = true;\n } else {\n newWrappedStates[index] = false;\n }\n });\n\n setRegionWrappedStates(newWrappedStates);\n }\n }, 100)\n );\n\n if (containerRef.current && regionElArray.length) {\n observer.observe(containerRef.current);\n }\n\n return () => {\n isMounted = false;\n observer.disconnect();\n };\n }, [containerRef, regionElArray]);\n\n return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}

package/lib/components/Confirmation/Confirmation.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { ForwardProps, UnorderedListProps } from '@pega/cosmos-react-core';
+export interface ConfirmationProps {
+    /** The title of the confirmation */
+    title: string;
+    /** Region for a Field Value List component */
+    details: ReactNode;
+    /** Array of React nodes to be put into a list  */
+    whatsNext?: UnorderedListProps['items'];
+    /** Region for a Tasks component */
+    tasks?: ReactNode;
+    /** Called when the done/close button is clicked */
+    onClose?: () => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLElement>;
+}
+declare const Confirmation: FunctionComponent<ConfirmationProps & ForwardProps>;
+export default Confirmation;
+//# sourceMappingURL=Confirmation.d.ts.map

package/lib/components/Confirmation/Confirmation.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledWhatsNextList = styled(UnorderedList) `
+  padding-inline-start: 0;
+`;
+StyledWhatsNextList.defaultProps = defaultThemeProp;
+const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
+    const t = useI18n();
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: title }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }, void 0), details] }, void 0), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }, void 0), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList }, void 0)] }, void 0)), tasks && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_open_tasks') }, void 0), tasks] }, void 0)), onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+});
+export default Confirmation;
+//# sourceMappingURL=Confirmation.js.map

package/lib/components/Confirmation/Confirmation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EACjC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,WAAQ,EACpD,OAAO,YACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,WAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,WAAI,YAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,WAAQ,EACvD,KAAK,YACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,WACH,WACJ,CACR,YACI,WACK,WACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Card,\n CardContent,\n ForwardProps,\n Flex,\n Text,\n useI18n,\n UnorderedList,\n Button,\n defaultThemeProp,\n UnorderedListProps\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps {\n /** The title of the confirmation */\n title: string;\n /** Region for a Field Value List component */\n details: ReactNode;\n /** Array of React nodes to be put into a list */\n whatsNext?: UnorderedListProps['items'];\n /** Region for a Tasks component */\n tasks?: ReactNode;\n /** Called when the done/close button is clicked */\n onClose?: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n (\n { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n ref\n ) => {\n const t = useI18n();\n\n return (\n <Card {...restProps} ref={ref}>\n <CardContent>\n <Flex container={{ gap: 3, direction: 'column' }}>\n <Text variant='h2'>{title}</Text>\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h3'>{t('confirmation_details')}</Text>\n {details}\n </Flex>\n {whatsNext && (\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n </Flex>\n )}\n {tasks && (\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h3'>{t('confirmation_open_tasks')}</Text>\n {tasks}\n </Flex>\n )}\n {onClose && (\n <Flex container={{ justify: 'end' }}>\n <Button onClick={onClose} variant='primary'>\n {t('done')}\n </Button>\n </Flex>\n )}\n </Flex>\n </CardContent>\n </Card>\n );\n }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Confirmation/index.d.ts ADDED Viewed

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

package/lib/components/Confirmation/index.d.ts.map ADDED Viewed

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

package/lib/components/Confirmation/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './Confirmation';
2	+ //# sourceMappingURL=index.js.map

package/lib/components/Confirmation/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Confirmation';\nexport { ConfirmationProps } from './Confirmation';\n"]}

package/lib/components/Details/Details.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { FieldValueListProps, ForwardProps, BaseProps } from '@pega/cosmos-react-core';
+export interface DetailsProps extends BaseProps {
+    /** The set of field values to render in the Highlighted Data list. */
+    highlightedFields?: FieldValueListProps['fields'];
+    /** List of React components below the highlighted data and line seperation. */
+    regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];
+}
+export declare const StyledDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHighlightedFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Details: FunctionComponent<DetailsProps & ForwardProps>;
+export default Details;
+//# sourceMappingURL=Details.d.ts.map

package/lib/components/Details/Details.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAKL,mBAAmB,EACnB,YAAY,EACZ,SAAS,EAGV,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;CACpF;AAED,eAAO,MAAM,aAAa,yGAAe,CAAC;AAE1C,eAAO,MAAM,uBAAuB,yGAmBlC,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA4B3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Grid, defaultThemeProp, FieldValueList, StyledFieldValueList, calculateFontSize } from '@pega/cosmos-react-core';
+export const StyledDetails = styled.div ``;
+export const StyledHighlightedFields = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    ${StyledFieldValueList} {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
+      padding-block-end: calc(1.5 * ${theme.base.spacing});
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      column-gap: calc(5 * ${theme.base.spacing});
+      dd {
+        font-size: ${fontSize[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
+    }
+    & + div {
+      padding-block-start: calc(1.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledHighlightedFields.defaultProps = defaultThemeProp;
+const Details = ({ highlightedFields, regions }) => {
+    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }, void 0) }, void 0)), regions && regions.length > 0 && (_jsx(Grid, { container: {
+                    cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
+                    alignItems: 'start',
+                    alignContent: 'start',
+                    gap: 2
+                }, children: regions?.map((colItem, i) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return _jsx("div", { children: colItem }, i);
+                }) }, void 0))] }, void 0));
+};
+export default Details;
+//# sourceMappingURL=Details.js.map

package/lib/components/Details/Details.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,WAAI,WACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,WACG,CACR,YACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Grid,\n defaultThemeProp,\n FieldValueList,\n StyledFieldValueList,\n FieldValueListProps,\n ForwardProps,\n BaseProps,\n calculateFontSize,\n FontSize\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps {\n /** The set of field values to render in the Highlighted Data list. */\n highlightedFields?: FieldValueListProps['fields'];\n /** List of React components below the highlighted data and line seperation. */\n regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n ${StyledFieldValueList} {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n padding-block-end: calc(1.5 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n column-gap: calc(5 * ${theme.base.spacing});\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n }\n\n & + div {\n padding-block-start: calc(1.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n highlightedFields,\n regions\n}: DetailsProps) => {\n return (\n <StyledDetails>\n {highlightedFields && (\n <StyledHighlightedFields>\n <FieldValueList variant='stacked' fields={highlightedFields} />\n </StyledHighlightedFields>\n )}\n {regions && regions.length > 0 && (\n <Grid\n container={{\n cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n alignItems: 'start',\n alignContent: 'start',\n gap: 2\n }}\n >\n {regions?.map((colItem, i) => {\n // eslint-disable-next-line react/no-array-index-key\n return <div key={i}>{colItem}</div>;\n })}\n </Grid>\n )}\n </StyledDetails>\n );\n};\n\nexport default Details;\n"]}

package/lib/components/Details/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default } from './Details';
+export { DetailsProps } from './Details';
+export { StyledDetails, StyledHighlightedFields } from './Details';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Details/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Details/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default } from './Details';
+export { StyledDetails, StyledHighlightedFields } from './Details';
+//# sourceMappingURL=index.js.map

package/lib/components/Details/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Details';\nexport { DetailsProps } from './Details';\nexport { StyledDetails, StyledHighlightedFields } from './Details';\n"]}

package/lib/components/Glimpse/Glimpse.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, Ref } from 'react';
+import { FunctionComponent, Ref } from 'react';
 import { BaseProps, FieldValueListProps, ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
 export interface GlimpseProps extends BaseProps {
     /** The unique id for the operator. */
@@ -14,7 +14,7 @@ export interface GlimpseProps extends BaseProps {
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledGlimpse: import("styled-components").StyledComponent<React.FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledGlimpse: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Glimpse: FunctionComponent<GlimpseProps & ForwardProps>;
 export default Glimpse;
 //# sourceMappingURL=Glimpse.d.ts.map

package/lib/components/Glimpse/Glimpse.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,EAAE,~~EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAGnF~~,OAAO,EACL,SAAS,EAMT,mBAAmB,EACnB,YAAY,EACZ,aAAa,EAId,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,~~uLAUxB~~,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsB3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EAMT,mBAAmB,EACnB,YAAY,EACZ,aAAa,EAId,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,iLAUxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsB3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Glimpse/Glimpse.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Card, CardContent, CardHeader, defaultThemeProp, FieldValueList, MetaList, StyledFieldValueList, SummaryItem } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
@@ -15,11 +16,7 @@ export const StyledGlimpse = styled(Card)(({ theme }) => {
 });
 StyledGlimpse.defaultProps = defaultThemeProp;
 const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (React.createElement(StyledGlimpse, { ref: ref },
-        React.createElement(CardHeader, null,
-            React.createElement(SummaryItem, { primary: primary, secondary: React.createElement(MetaList, { items: secondary }), visual: visual })),
-        !!fields.length && (React.createElement(CardContent, null,
-            React.createElement(FieldValueList, { fields: fields })))));
+    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }, void 0), visual: visual }, void 0) }, void 0), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }, void 0) }, void 0))] }, void 0));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,~~EAAE,~~EAAE,~~UAAU,EAA2C,MAAM,OAAO,CAAC;~~AACnF~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EACR,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,~~oBAAC~~,aAAa,IAAC,GAAG,EAAE,GAAG~~;QACrB~~,~~oBAAC~~,UAAU~~;YACT~~,~~oBAAC~~,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,~~oBAAC~~,QAAQ,IAAC,KAAK,EAAE,SAAS,~~GAAI~~,EACzC,MAAM,EAAE,MAAM,~~GACd~~,~~CACS;QACZ~~,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,~~oBAAC~~,WAAW~~;YACV~~,~~oBAAC~~,cAAc,IAAC,MAAM,EAAE,MAAM,~~GAAI~~,~~CACtB~~,CACf,~~CACa~~,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import ~~React,~~ { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n BaseProps,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n FieldValueList,\n FieldValueListProps,\n ForwardProps,\n MenuItemProps,\n MetaList,\n StyledFieldValueList,\n SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps {\n /** The unique id for the operator. /\n id: string;\n /* The primary piece of item information as a string. /\n primary: MenuItemProps['primary'];\n /* Secondary info about an item. Useful for additional metadata or context. /\n secondary?: MenuItemProps['secondary'];\n /* A visual to assist identifying an item. e.g. Avatar or Icon. /\n visual?: MenuItemProps['visual'];\n /* The set of field values to render in the list. /\n fields?: FieldValueListProps['fields'];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardContent} {\n border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n\n ${StyledFieldValueList} {\n padding-top: calc(1.5 ${theme.base.spacing});\n }\n `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n (\n { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n ref: GlimpseProps['ref']\n ) => {\n return (\n <StyledGlimpse ref={ref}>\n <CardHeader>\n <SummaryItem\n primary={primary}\n secondary={<MetaList items={secondary} />}\n visual={visual}\n />\n </CardHeader>\n {!!fields.length && (\n <CardContent>\n <FieldValueList fields={fields} />\n </CardContent>\n )}\n </StyledGlimpse>\n );\n }\n);\n\nexport default Glimpse;\n"]}
1	+ {"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EACR,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,WAAI,EACzC,MAAM,EAAE,MAAM,WACd,WACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,WAAI,WACtB,CACf,YACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n BaseProps,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n FieldValueList,\n FieldValueListProps,\n ForwardProps,\n MenuItemProps,\n MetaList,\n StyledFieldValueList,\n SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps {\n /** The unique id for the operator. /\n id: string;\n /* The primary piece of item information as a string. /\n primary: MenuItemProps['primary'];\n /* Secondary info about an item. Useful for additional metadata or context. /\n secondary?: MenuItemProps['secondary'];\n /* A visual to assist identifying an item. e.g. Avatar or Icon. /\n visual?: MenuItemProps['visual'];\n /* The set of field values to render in the list. /\n fields?: FieldValueListProps['fields'];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardContent} {\n border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n\n ${StyledFieldValueList} {\n padding-top: calc(1.5 ${theme.base.spacing});\n }\n `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n (\n { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n ref: GlimpseProps['ref']\n ) => {\n return (\n <StyledGlimpse ref={ref}>\n <CardHeader>\n <SummaryItem\n primary={primary}\n secondary={<MetaList items={secondary} />}\n visual={visual}\n />\n </CardHeader>\n {!!fields.length && (\n <CardContent>\n <FieldValueList fields={fields} />\n </CardContent>\n )}\n </StyledGlimpse>\n );\n }\n);\n\nexport default Glimpse;\n"]}

package/lib/components/SearchResults/Filter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"~~AAmBA~~,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAyB,MAAM,uBAAuB,CAAC;~~AAE~~/F,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;~~AAqCD~~,QAAA,MAAM,MAAM,kEAMT,WAAW,GAAG,oBAAoB,KAAG,~~WA4EvC~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAyB,MAAM,uBAAuB,CAAC;AAK/F,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,MAAM,kEAMT,WAAW,GAAG,oBAAoB,KAAG,WA6EvC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/SearchResults/Filter.js CHANGED Viewed

@@ -1,42 +1,15 @@
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Checkbox, CheckboxGroup, ExpandCollapse, Flex, Icon, StyledIcon, RadioButton, RadioButtonGroup, Text, defaultThemeProp, useI18n, calculateFontSize } from '@pega/cosmos-react-core';
-const StyledFilter = styled.div(props => {
-    const { base } = props.theme;
-    return css `
-    border-bottom: 0.0625rem solid ${base.palette['border-line']};
-    padding-bottom: calc(${base.spacing} * 2);
-    margin-bottom: calc(${base.spacing} * 2);
-    > :last-child > :first-child {
-      padding-block-start: ${base.spacing};
-    }
-  `;
-});
-const FilterButton = styled(Button)(({ theme: { base } }) => {
-    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
-    return css `
-    font-size: ${fontSize.xl};
-    ${StyledIcon} {
-      transition: transform ${base.animation.speed} ${base.animation.timing.ease};
-    }
-    &[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(0);
-    }
-    &[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(-90deg);
-    }
-  `;
-});
-FilterButton.defaultProps = defaultThemeProp;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Checkbox, CheckboxGroup, ExpandCollapse, Flex, Icon, registerIcon, RadioButton, RadioButtonGroup, Text, useI18n } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { StyledFilter, StyledFilterButton } from './SearchResults.styles';
+registerIcon(caretDownIcon);
 const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...control }) => {
     const t = useI18n();
     const [filterExpanded, setFilterExpanded] = useState(expanded);
     let filterControl;
     let filterActive = false;
+    // eslint-disable-next-line sonarjs/no-small-switch
     switch (control.type) {
         case 'select': {
             const { selectType, items } = control;
@@ -46,33 +19,27 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
                 SelectFilterGroup = RadioButtonGroup;
                 SelectFilter = RadioButton;
             }
-            filterControl = (React.createElement(SelectFilterGroup, { label: name, labelHidden: true, onChange: e => {
+            filterControl = (_jsx(SelectFilterGroup, { label: name, labelHidden: true, onChange: e => {
                     const item = items.find((x) => x.id === e.target.id);
                     if (!item)
                         return;
                     const newItem = { ...item, checked: !item.checked };
-                    onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({
+                    onFilterChange?.({
                         name,
                         type: control.type,
                         value: newItem
                     });
-                } }, control.items.map((filterOption) => {
-                if (filterOption.checked)
-                    filterActive = true;
-                return (React.createElement(SelectFilter, { key: filterOption.id, id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }));
-            })));
+                }, children: control.items.map((filterOption) => {
+                    if (filterOption.checked)
+                        filterActive = true;
+                    return (_jsx(SelectFilter, { id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }, filterOption.id));
+                }) }, void 0));
             break;
         }
         default:
             filterControl = null;
     }
-    return (React.createElement(StyledFilter, null,
-        React.createElement(Flex, { container: { justify: 'between' } },
-            React.createElement(Flex, { as: FilterButton, container: { itemGap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', name) },
-                React.createElement(Icon, { name: 'caret-down' }),
-                React.createElement(Text, { variant: 'h3', as: 'span' }, name)),
-            filterActive && (React.createElement(Button, { variant: 'link', onClick: () => onClearFilter === null || onClearFilter === void 0 ? void 0 : onClearFilter(name) }, t('clear')))),
-        React.createElement(ExpandCollapse, { collapsed: !filterExpanded }, filterControl)));
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }, void 0), _jsx(Text, { variant: 'h3', as: 'span', children: name }, void 0)] }, void 0), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }, void 0))] }, void 0), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl }, void 0)] }, void 0));
 };
 export default Filter;
 //# sourceMappingURL=Filter.js.map

package/lib/components/SearchResults/Filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,~~EAAE,~~EAAE,~~QAAQ,EAAE,MAAM,OAAO,CAAC;~~AACxC~~,OAAO,~~MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,~~EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,~~UAAU~~,~~EACV~~,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,~~gBAAgB,EAChB,~~OAAO,~~EACP~~,~~iBAAiB,EAClB,~~MAAM,yBAAyB,CAAC;~~AASjC~~,~~MAAM~~,~~YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,~~KAAK,~~CAAC~~,~~EAAE;IACtC,~~MAAM,~~EAAE~~,~~IAAI,EAAE,GAAG,KAAK,~~CAAC~~,KAAK,CAAC~~;~~IAC7B~~,OAAO,~~GAAG~~,~~CAAA;qCACyB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;2BACrC,IAAI,CAAC,OAAO;0BACb,IAAI,CAAC,OAAO;;;6BAGT,IAAI,CAAC,OAAO;;GAEtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,~~YAAY,~~GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,~~EAAE,~~KAAK~~,EAAE,~~EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC1D,~~MAAM,~~QAAQ~~,~~GAAG,iBAAiB,~~CAAC,~~IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,~~YAAY,CAAC,~~CAAC~~,CAAC~~;IAE1E~~,~~OAAO,GAAG,CAAA;iBACK,QAAQ,~~CAAC~~,EAAE;;MAEtB,UAAU~~;~~8BACc~~,~~IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,~~MAAM,~~CAAC,IAAI;;;8BAGlD,UAAU;;;;+BAIT,UAAU;;;GAGtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,~~MAAM,~~MAAM,~~GAAG,CAAC,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,GAAG,OAAO,EACyB,EAAe,EAAE;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE/D,IAAI,aAAa,CAAC;IAClB,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,QAAQ,OAAO,CAAC,IAAI,EAAE;QACpB,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;YACtC,IAAI,iBAAiB,GAAG,aAAa,CAAC;YACtC,IAAI,YAAY,GAAG,QAAQ,CAAC;YAC5B,IAAI,UAAU,KAAK,eAAe,EAAE;gBAClC,iBAAiB,GAAG,gBAAgB,CAAC;gBACrC,YAAY,GAAG,WAAW,CAAC;aAC5B;YACD,aAAa,GAAG,CACd,~~oBAAC~~,iBAAiB,IAChB,KAAK,EAAE,IAAI,EACX,WAAW,QACX,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAwB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oBAC5E,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAEpD,cAAc,~~aAAd~~,~~cAAc,uBAAd,cAAc,CAAG~~;wBACf,IAAI;wBACJ,IAAI,EAAE,OAAO,CAAC,IAAI;wBAClB,KAAK,EAAE,OAAO;qBACf,CAAC,CAAC;gBACL,CAAC,~~IAEA~~,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,YAAmC,EAAE,EAAE;~~gBACzD~~,IAAI,YAAY,CAAC,OAAO;~~oBAAE~~,YAAY,GAAG,IAAI,CAAC;~~gBAC9C~~,OAAO,CACL,~~oBAAC~~,YAAY,~~IACX~~,~~GAAG,~~EAAE,~~YAAY,CAAC,~~EAAE,~~EACpB,EAAE,EAAE,~~YAAY,CAAC,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,~~GAC7B~~,CACH,CAAC;~~YACJ~~,CAAC,CAAC,~~CACgB~~,CACrB,CAAC;YACF,MAAM;SACP;QACD;YACE,aAAa,GAAG,IAAI,CAAC;KACxB;IAED,OAAO,CACL,~~oBAAC~~,YAAY~~;QACX~~,~~oBAAC~~,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE~~;YACrC~~,~~oBAAC~~,IAAI,IACH,EAAE,EAAE,~~YAAY~~,~~EAChB~~,SAAS,EAAE,EAAE,~~OAAO~~,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,~~EAC/C~~,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAChC,cAAc,gBACjB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC~~;gBAErE~~,~~oBAAC~~,IAAI,IAAC,IAAI,EAAC,YAAY,~~GAAG;gBAC1B~~,~~oBAAC~~,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,~~IACzB~~,IAAI,~~CACA~~,~~CACF;YACN~~,YAAY,IAAI,CACf,~~oBAAC~~,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,~~aAAb~~,~~aAAa~~,~~uBAAb,aAAa,CAAG,~~IAAI,CAAC,~~IACxD~~,CAAC,CAAC,OAAO,CAAC,~~CACJ~~,CACV,~~CACI;QACP~~,~~oBAAC~~,cAAc,IAAC,SAAS,EAAE,CAAC,cAAc,~~IAAG~~,aAAa,~~CAAkB~~,~~CAC~~/D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import ~~React,~~ { useState } from 'react';\~~nimport styled, { css } from 'styled-components';\~~n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n ExpandCollapse,\n Flex,\n Icon,\n ~~StyledIcon~~,\n RadioButton,\n RadioButtonGroup,\n Text,\n ~~defaultThemeProp,\n~~ useI18n~~,\n calculateFontSize~~\n} from '@pega/cosmos-react-core';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\~~n\ninterface~~ ~~FilterComponentProps~~ {~~\n onFilterChange?:~~ ~~SearchResultsProps['onFilterChange'];\n onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst~~ StyledFilter = ~~styled.div(props => {\n const { base~~ } = ~~props~~.~~theme;\n return css`\n border-bottom: 0.0625rem solid ${base.palette[~~'~~border-line']}~~;\n ~~padding-bottom: calc~~(~~${base.spacing} * 2~~);\n ~~margin-bottom: calc(${base.spacing} * 2);\n~~\~~n >~~ ~~:last-child~~ ~~> :first-child~~ {\n ~~padding-block-start: ${base.spacing};\n }\n~~ ~~`;\n});\n\nconst~~ ~~FilterButton = styled(Button)(({ theme: { base } }) => {\n const fontSize = calculateFontSize(base~~['~~font-size~~']~~, base['font-scale'])~~;\n\n ~~return~~ ~~css`\n font-size: ${fontSize.xl};\n\n ${StyledIcon} {\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n\n &~~[~~aria-expanded=~~'~~true~~'] ~~${StyledIcon} {\n transform: rotate(0)~~;\n }\n\~~n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(-90deg);\n }\n `;\n});\n\nFilterButton.defaultProps = defaultThemeProp;\n\~~nconst Filter = ({\n onFilterChange,\n onClearFilter,\n name,\n expanded = true,\n ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n const t = useI18n();\n const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n let filterControl;\n let filterActive = false;\n switch (control.type) {\n case 'select': {\n const { selectType, items } = control;\n let SelectFilterGroup = CheckboxGroup;\n let SelectFilter = Checkbox;\n if (selectType === 'single-select') {\n SelectFilterGroup = RadioButtonGroup;\n SelectFilter = RadioButton;\n }\n filterControl = (\n <SelectFilterGroup\n label={name}\n labelHidden\n onChange={e => {\n const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n if (!item) return;\n const newItem = { ...item, checked: !item.checked };\n\n onFilterChange?.({\n name,\n type: control.type,\n value: newItem\n });\n }}\n >\n {control.items.map((filterOption: SelectFilterItemProps) => {\n if (filterOption.checked) filterActive = true;\n return (\n <SelectFilter\n key={filterOption.id}\n id={filterOption.id}\n name={filterOption.name}\n label={filterOption.label}\n checked={filterOption.checked}\n />\n );\n })}\n </SelectFilterGroup>\n );\n break;\n }\n default:\n filterControl = null;\n }\n\n return (\n <StyledFilter>\n <Flex container={{ justify: 'between' }}>\n <Flex\n as={~~FilterButton~~}\n container={{ ~~itemGap~~: 1, alignItems: 'center' }}\n variant='text'\n onClick={() => setFilterExpanded(curr => !curr)}\n aria-expanded={filterExpanded}\n aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', name)}\n >\n <Icon name='caret-down' />\n <Text variant='h3' as='span'>\n {name}\n </Text>\n </Flex>\n {filterActive && (\n <Button variant='link' onClick={() => onClearFilter?.(name)}>\n {t('clear')}\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n </StyledFilter>\n );\n};\n\nexport default Filter;\n"]}
1	+ {"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAGnG,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,YAAY,CAAC,aAAa,CAAC,CAAC;AAO5B,MAAM,MAAM,GAAG,CAAC,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,GAAG,OAAO,EACyB,EAAe,EAAE;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE/D,IAAI,aAAa,CAAC;IAClB,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,mDAAmD;IACnD,QAAQ,OAAO,CAAC,IAAI,EAAE;QACpB,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;YACtC,IAAI,iBAAiB,GAAG,aAAa,CAAC;YACtC,IAAI,YAAY,GAAG,QAAQ,CAAC;YAC5B,IAAI,UAAU,KAAK,eAAe,EAAE;gBAClC,iBAAiB,GAAG,gBAAgB,CAAC;gBACrC,YAAY,GAAG,WAAW,CAAC;aAC5B;YACD,aAAa,GAAG,CACd,KAAC,iBAAiB,IAChB,KAAK,EAAE,IAAI,EACX,WAAW,QACX,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAwB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oBAC5E,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAEpD,cAAc,EAAE,CAAC;wBACf,IAAI;wBACJ,IAAI,EAAE,OAAO,CAAC,IAAI;wBAClB,KAAK,EAAE,OAAO;qBACf,CAAC,CAAC;gBACL,CAAC,YAEA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,YAAmC,EAAE,EAAE;oBACzD,IAAI,YAAY,CAAC,OAAO;wBAAE,YAAY,GAAG,IAAI,CAAC;oBAC9C,OAAO,CACL,KAAC,YAAY,IAEX,EAAE,EAAE,YAAY,CAAC,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,IAJxB,YAAY,CAAC,EAAE,CAKpB,CACH,CAAC;gBACJ,CAAC,CAAC,WACgB,CACrB,CAAC;YACF,MAAM;SACP;QACD;YACE,aAAa,GAAG,IAAI,CAAC;KACxB;IAED,OAAO,CACL,MAAC,YAAY,eACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC3C,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAChC,cAAc,gBACjB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,aAEvE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,EAC1B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,IAAI,WACA,YACF,EACN,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,YACxD,CAAC,CAAC,OAAO,CAAC,WACJ,CACV,YACI,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,cAAc,YAAG,aAAa,WAAkB,YAC/D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { useState } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n ExpandCollapse,\n Flex,\n Icon,\n registerIcon,\n RadioButton,\n RadioButtonGroup,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n onFilterChange?: SearchResultsProps['onFilterChange'];\n onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n onFilterChange,\n onClearFilter,\n name,\n expanded = true,\n ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n const t = useI18n();\n const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n let filterControl;\n let filterActive = false;\n // eslint-disable-next-line sonarjs/no-small-switch\n switch (control.type) {\n case 'select': {\n const { selectType, items } = control;\n let SelectFilterGroup = CheckboxGroup;\n let SelectFilter = Checkbox;\n if (selectType === 'single-select') {\n SelectFilterGroup = RadioButtonGroup;\n SelectFilter = RadioButton;\n }\n filterControl = (\n <SelectFilterGroup\n label={name}\n labelHidden\n onChange={e => {\n const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n if (!item) return;\n const newItem = { ...item, checked: !item.checked };\n\n onFilterChange?.({\n name,\n type: control.type,\n value: newItem\n });\n }}\n >\n {control.items.map((filterOption: SelectFilterItemProps) => {\n if (filterOption.checked) filterActive = true;\n return (\n <SelectFilter\n key={filterOption.id}\n id={filterOption.id}\n name={filterOption.name}\n label={filterOption.label}\n checked={filterOption.checked}\n />\n );\n })}\n </SelectFilterGroup>\n );\n break;\n }\n default:\n filterControl = null;\n }\n\n return (\n <StyledFilter>\n <Flex container={{ justify: 'between' }}>\n <Flex\n as={StyledFilterButton}\n container={{ gap: 1, alignItems: 'center' }}\n variant='text'\n onClick={() => setFilterExpanded(curr => !curr)}\n aria-expanded={filterExpanded}\n aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Icon name='caret-down' />\n <Text variant='h3' as='span'>\n {name}\n </Text>\n </Flex>\n {filterActive && (\n <Button variant='link' onClick={() => onClearFilter?.(name)}>\n {t('clear')}\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n </StyledFilter>\n );\n};\n\nexport default Filter;\n"]}

package/lib/components/SearchResults/SearchResult.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"~~AAaA~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAmB1D,QAAA,MAAM,YAAY,2CAMf,iBAAiB,KAAG,WAetB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAmB1D,QAAA,MAAM,YAAY,2CAMf,iBAAiB,KAAG,WAetB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/SearchResults/SearchResult.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize } from '@pega/cosmos-react-core';
 const StyledSearchResult = styled.article(({ theme }) => {
@@ -15,13 +15,7 @@ const StyledDescription = styled(Text) `
   word-break: break-word;
 `;
 const SearchResult = ({ id, title, link, description, meta = [] }) => {
-    return (React.createElement(Flex, { as: StyledSearchResult, container: { direction: 'column', itemGap: 1 } },
-        React.createElement(Flex, { container: { direction: 'column-reverse' } },
-            React.createElement(Text, { variant: 'h2' },
-                React.createElement(Link, { ...link }, title)),
-            React.createElement(Text, { variant: 'secondary', as: 'div' }, id)),
-        description && React.createElement(StyledDescription, { forwardedAs: 'p' }, description),
-        !!meta.length && React.createElement(MetaList, { items: meta })));
+    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column-reverse' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: title }, void 0) }, void 0), _jsx(Text, { variant: 'secondary', as: 'div', children: id }, void 0)] }, void 0), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description }, void 0), !!meta.length && _jsx(MetaList, { items: meta }, void 0)] }, void 0));
 };
 export default SearchResult;
 //# sourceMappingURL=SearchResult.js.map

package/lib/components/SearchResults/SearchResult.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,~~MAAM,~~OAAO,CAAC;AAC1B,OAAO,MAAM,~~EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACS,EAAe,EAAE;IACnC,OAAO,CACL,~~oBAAC~~,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,~~OAAO~~,EAAE,CAAC,EAAE~~;QAC1E~~,~~oBAAC~~,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE~~;YAC9C~~,~~oBAAC~~,IAAI,IAAC,OAAO,EAAC,IAAI~~;gBAChB~~,~~oBAAC~~,IAAI,OAAK,IAAI,~~IAAG~~,KAAK,~~CAAQ~~,~~CACzB;YACP~~,~~oBAAC~~,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,~~IAC~~/B,EAAE,~~CACE~~,~~CACF;QACN~~,WAAW,IAAI,~~oBAAC~~,iBAAiB,IAAC,WAAW,EAAC,GAAG,~~IAAE~~,WAAW,~~CAAqB;QACnF~~,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,~~oBAAC~~,QAAQ,IAAC,KAAK,EAAE,IAAI,~~GAAI~~,~~CACtC~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import ~~React from 'react';\nimport~~ styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Text,\n MetaList,\n Link,\n Flex,\n StyledPopover,\n calculateFontSize\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n h2 ${StyledPopover} {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight'].normal};\n }\n `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n word-break: break-word;\n`;\n\nconst SearchResult = ({\n id,\n title,\n link,\n description,\n meta = []\n}: SearchResultProps): JSX.Element => {\n return (\n <Flex as={StyledSearchResult} container={{ direction: 'column', ~~itemGap~~: 1 }}>\n <Flex container={{ direction: 'column-reverse' }}>\n <Text variant='h2'>\n <Link {...link}>{title}</Link>\n </Text>\n <Text variant='secondary' as='div'>\n {id}\n </Text>\n </Flex>\n {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n {!!meta.length && <MetaList items={meta} />}\n </Flex>\n );\n};\n\nexport default SearchResult;\n"]}
1	+ {"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACS,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YAAG,KAAK,WAAQ,WACzB,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,YAC/B,EAAE,WACE,YACF,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,WAAqB,EACnF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,YACtC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Text,\n MetaList,\n Link,\n Flex,\n StyledPopover,\n calculateFontSize\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n h2 ${StyledPopover} {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight'].normal};\n }\n `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n word-break: break-word;\n`;\n\nconst SearchResult = ({\n id,\n title,\n link,\n description,\n meta = []\n}: SearchResultProps): JSX.Element => {\n return (\n <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n <Flex container={{ direction: 'column-reverse' }}>\n <Text variant='h2'>\n <Link {...link}>{title}</Link>\n </Text>\n <Text variant='secondary' as='div'>\n {id}\n </Text>\n </Flex>\n {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n {!!meta.length && <MetaList items={meta} />}\n </Flex>\n );\n};\n\nexport default SearchResult;\n"]}

package/lib/components/SearchResults/SearchResults.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,~~EAAkC~~,iBAAiB,~~EAAmB~~,MAAM,OAAO,CAAC;~~AAGlG~~,OAAO,~~EAOL~~,YAAY,~~EAab~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,OAAO,~~EAAE~~,kBAAkB,~~EAAkC~~,MAAM,uBAAuB,CAAC;~~AAoH3F~~,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAgNvE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,YAAY,EAcb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AA2E/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgMvE,CAAC;AAEF,eAAe,aAAa,CAAC"}