@pega/cosmos-react-build 2.1.2 → 3.0.0-dev.2.0

package/lib/components/Workbench/Workbench.js

@@ -18,7 +18,7 @@ const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel
             cols: 'min-content minmax(10rem, 1fr) min-content',
             rows: 'auto minmax(0, 1fr)',
             areas: '"header header header" "utility main configuration"'
-        }, as: StyledWorkbench, ref: ref, children: [_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, zoomLevel: zoomValue, onZoomLevelChange: setZoomValue, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }, void 0) }, void 0), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }, void 0) }, void 0)), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: _jsx(ZoomContainer, { zoomLevel: zoomValue / 100, children: children }, void 0) }, void 0) }, void 0), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }, void 0) }, void 0)] }, void 0));
+        }, as: StyledWorkbench, ref: ref, children: [_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, zoomLevel: zoomValue, onZoomLevelChange: setZoomValue, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }, void 0) }, void 0), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }, void 0) }, void 0)), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: _jsx(ZoomContainer, { style: { '--workbench-zoom-level': zoomValue / 100 }, children: children }, void 0) }, void 0) }, void 0), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }, void 0) }, void 0)] }, void 0));
 });
 export default Workbench;
 //# sourceMappingURL=Workbench.js.map

package/lib/components/Workbench/Workbench.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,SAAS,GAAsC,UAAU,CAC7D,CACE,EACE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,kBAAkB,EAClB,OAAO,EACP,uBAAuB,EACS,EAClC,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,uBAAuB,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,CAC5B,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,uBAAuB,CAAC,CAClE,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,OAAO;YAAE,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qDAAqD;SAC7D,EACD,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,YAAY,EAC/B,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,WACpC,WACG,EACN,eAAe,CAAC,OAAO,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAC7B,KAAC,YAAY,OAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,oBAAoB,WAAI,WACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,cACT,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAG,GAAG,YAAG,QAAQ,WAAiB,WAC1D,WACR,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,WAAI,WACzC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef } from 'react';\n\nimport { ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';\nimport { UtilityPanelProps, WorkbenchProps } from './Workbench.types';\nimport ConfigurationPanel from './ConfigurationPanel';\nimport UtilityPanel from './UtilityPanel';\n\nconst Workbench: FC<WorkbenchProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      utilityPanels = [],\n      configurationPanel,\n      toolbar,\n      initiallyVisiblePanelId\n    }: PropsWithoutRef<WorkbenchProps>,\n    ref: WorkbenchProps['ref']\n  ) => {\n    const [zoomValue, setZoomValue] = useState(100);\n\n    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState<\n      UtilityPanelProps['id'] | undefined\n    >(initiallyVisiblePanelId);\n\n    const panelContentRef = useRef<UtilityPanelProps | undefined>(\n      utilityPanels.find(panel => panel.id === initiallyVisiblePanelId)\n    );\n    const onToggle = (panelId?: UtilityPanelProps['id']) => {\n      setCurrentlyOpenPanelId(panelId);\n      if (panelId) panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);\n    };\n\n    return (\n      <Grid\n        container={{\n          cols: 'min-content minmax(10rem, 1fr) min-content',\n          rows: 'auto minmax(0, 1fr)',\n          areas: '\"header header header\" \"utility main configuration\"'\n        }}\n        as={StyledWorkbench}\n        ref={ref}\n      >\n        <Grid item={{ area: 'header' }}>\n          <Toolbar\n            {...toolbar}\n            zoomLevel={zoomValue}\n            onZoomLevelChange={setZoomValue}\n            options={utilityPanels}\n            onToggle={onToggle}\n            currentPanelId={currentlyOpenPanelId}\n          />\n        </Grid>\n        {panelContentRef.current && (\n          <Grid item={{ area: 'utility' }}>\n            <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n          </Grid>\n        )}\n        <Grid item={{ area: 'main' }}>\n          <StyledMain>\n            <ZoomContainer zoomLevel={zoomValue / 100}>{children}</ZoomContainer>\n          </StyledMain>\n        </Grid>\n        <Grid item={{ area: 'configuration' }}>\n          <ConfigurationPanel {...configurationPanel} />\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default Workbench;\n"]}
+{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,EAAiB,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,SAAS,GAAsC,UAAU,CAC7D,CACE,EACE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,kBAAkB,EAClB,OAAO,EACP,uBAAuB,EACS,EAClC,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,uBAAuB,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,CAC5B,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,uBAAuB,CAAC,CAClE,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,OAAO;YAAE,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qDAAqD;SAC7D,EACD,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,YAAY,EAC/B,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,WACpC,WACG,EACN,eAAe,CAAC,OAAO,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAC7B,KAAC,YAAY,OAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,oBAAoB,WAAI,WACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,cACT,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,SAAS,GAAG,GAAG,EAAmB,YACjF,QAAQ,WACK,WACL,WACR,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,WAAI,WACzC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef, CSSProperties } from 'react';\n\nimport { ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';\nimport { UtilityPanelProps, WorkbenchProps } from './Workbench.types';\nimport ConfigurationPanel from './ConfigurationPanel';\nimport UtilityPanel from './UtilityPanel';\n\nconst Workbench: FC<WorkbenchProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      utilityPanels = [],\n      configurationPanel,\n      toolbar,\n      initiallyVisiblePanelId\n    }: PropsWithoutRef<WorkbenchProps>,\n    ref: WorkbenchProps['ref']\n  ) => {\n    const [zoomValue, setZoomValue] = useState(100);\n\n    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState<\n      UtilityPanelProps['id'] | undefined\n    >(initiallyVisiblePanelId);\n\n    const panelContentRef = useRef<UtilityPanelProps | undefined>(\n      utilityPanels.find(panel => panel.id === initiallyVisiblePanelId)\n    );\n    const onToggle = (panelId?: UtilityPanelProps['id']) => {\n      setCurrentlyOpenPanelId(panelId);\n      if (panelId) panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);\n    };\n\n    return (\n      <Grid\n        container={{\n          cols: 'min-content minmax(10rem, 1fr) min-content',\n          rows: 'auto minmax(0, 1fr)',\n          areas: '\"header header header\" \"utility main configuration\"'\n        }}\n        as={StyledWorkbench}\n        ref={ref}\n      >\n        <Grid item={{ area: 'header' }}>\n          <Toolbar\n            {...toolbar}\n            zoomLevel={zoomValue}\n            onZoomLevelChange={setZoomValue}\n            options={utilityPanels}\n            onToggle={onToggle}\n            currentPanelId={currentlyOpenPanelId}\n          />\n        </Grid>\n        {panelContentRef.current && (\n          <Grid item={{ area: 'utility' }}>\n            <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n          </Grid>\n        )}\n        <Grid item={{ area: 'main' }}>\n          <StyledMain>\n            <ZoomContainer style={{ '--workbench-zoom-level': zoomValue / 100 } as CSSProperties}>\n              {children}\n            </ZoomContainer>\n          </StyledMain>\n        </Grid>\n        <Grid item={{ area: 'configuration' }}>\n          <ConfigurationPanel {...configurationPanel} />\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default Workbench;\n"]}

package/lib/components/Workbench/Workbench.styles.d.ts

@@ -4,7 +4,6 @@ export declare const StyledToolbar: import("styled-components").StyledComponent<
 export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWorkbench: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ZoomContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    zoomLevel: number;
-}, never>;
+export declare const ZoomContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Workbench.styles.d.ts.map

package/lib/components/Workbench/Workbench.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAmB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA8BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAItB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,aAAa;eAA2B,MAAM;SAIzD,CAAC"}
+{"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA8BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAGtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

package/lib/components/Workbench/Workbench.styles.js

@@ -1,15 +1,17 @@
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp } from '@pega/cosmos-react-core';
+import { readableColor } from 'polished';
+import { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';
 import { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';
 export const StyledPanelToggleWrapper = styled.div `
   height: 100%;
 `;
 StyledPanelToggleWrapper.defaultProps = defaultThemeProp;
 export const UtilityPanelToggle = styled(Button)(props => {
-    const { theme: { base: { colors }, components: { link: { color: linkColor } } } } = props;
+    const { theme: { base: { colors, palette }, components: { link: { color: linkColor } } } } = props;
+    const color = tryCatch(() => readableColor(palette['primary-background']));
     return css `
     background-color: transparent;
-    color: ${colors.slate['extra-dark']};
+    color: ${color};
 
     &[aria-selected='true'] {
       background-color: ${colors.blue['extra-light']};
@@ -45,7 +47,6 @@ export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, co
 });
 StyledToolbar.defaultProps = defaultThemeProp;
 export const StyledMain = styled.div `
-  width: 100%;
   height: 100%;
   overflow: auto;
 `;
@@ -62,10 +63,14 @@ export const StyledPanel = styled.div(({ theme }) => {
   `;
 });
 StyledPanel.defaultProps = defaultThemeProp;
-export const ZoomContainer = styled.div(({ zoomLevel }) => {
-    return css `
-    transform: scale(${zoomLevel});
-  `;
-});
+export const ZoomContainer = styled.div `
+  transform: scale(var(--workbench-zoom-level));
+`;
 ZoomContainer.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Workbench.styles.js.map

package/lib/components/Workbench/Workbench.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kEAAkE,CAAC;AAEtG,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EAChB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;aAEC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;0BAGb,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EACnC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;uCAChB,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;QAEzD,kBAAkB;;;;QAIlB,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;KAGzD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;uBACW,SAAS;GAC7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';\n\nexport const StyledPanelToggleWrapper = styled.div`\n  height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n  const {\n    theme: {\n      base: { colors },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  } = props;\n\n  return css`\n    background-color: transparent;\n    color: ${colors.slate['extra-dark']};\n\n    &[aria-selected='true'] {\n      background-color: ${colors.blue['extra-light']};\n      color: ${linkColor};\n    }\n  `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette, colors }\n    }\n  }) => {\n    return css`\n      height: 2.5rem;\n      padding: 0 calc(2 * ${spacing});\n      background-color: ${palette['primary-background']};\n      border-bottom: 0.0625rem solid ${colors.gray['extra-light']};\n\n      ${StyledStepperInput} {\n        width: 8rem;\n      }\n\n      ${StyledPanelToggleWrapper}:empty {\n        display: none;\n      }\n\n      ${StyledPanelToggleWrapper}:not(:last-child) {\n        ::after {\n          content: '';\n          margin: 0 calc(2 * ${spacing});\n          height: 80%;\n          border: 0.0625rem solid ${colors.gray['extra-light']};\n        }\n      }\n    `;\n  }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div`\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n`;\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n  height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const ZoomContainer = styled.div<{ zoomLevel: number }>(({ zoomLevel }) => {\n  return css`\n    transform: scale(${zoomLevel});\n  `;\n});\n\nZoomContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kEAAkE,CAAC;AAEtG,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EACnC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;uCAChB,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;QAEzD,kBAAkB;;;;QAIlB,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;KAGzD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\nimport { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';\n\nexport const StyledPanelToggleWrapper = styled.div`\n  height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n  const {\n    theme: {\n      base: { colors, palette },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  } = props;\n\n  const color = tryCatch(() => readableColor(palette['primary-background']));\n\n  return css`\n    background-color: transparent;\n    color: ${color};\n\n    &[aria-selected='true'] {\n      background-color: ${colors.blue['extra-light']};\n      color: ${linkColor};\n    }\n  `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette, colors }\n    }\n  }) => {\n    return css`\n      height: 2.5rem;\n      padding: 0 calc(2 * ${spacing});\n      background-color: ${palette['primary-background']};\n      border-bottom: 0.0625rem solid ${colors.gray['extra-light']};\n\n      ${StyledStepperInput} {\n        width: 8rem;\n      }\n\n      ${StyledPanelToggleWrapper}:empty {\n        display: none;\n      }\n\n      ${StyledPanelToggleWrapper}:not(:last-child) {\n        ::after {\n          content: '';\n          margin: 0 calc(2 * ${spacing});\n          height: 80%;\n          border: 0.0625rem solid ${colors.gray['extra-light']};\n        }\n      }\n    `;\n  }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div`\n  height: 100%;\n  overflow: auto;\n`;\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n  height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const ZoomContainer = styled.div`\n  transform: scale(var(--workbench-zoom-level));\n`;\n\nZoomContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

package/lib/index.d.ts

@@ -4,6 +4,7 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
+export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
 export * from './components/PageTemplates';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/index.js

@@ -5,6 +5,7 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
+export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
 export * from './components/PageTemplates';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport * from './components/Visual';\nexport { default as Workbench } from './components/Workbench';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport * from './components/Visual';\nexport { default as Workbench } from './components/Workbench';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "2.1.2",
+  "version": "3.0.0-dev.2.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.1.2",
-    "@pega/cosmos-react-dnd": "2.1.2",
+    "@pega/cosmos-react-core": "3.0.0-dev.2.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.2.0",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
@@ -29,16 +29,15 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-backgrounds": "^6.4.8",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storysource": "^6.4.8",
-    "@storybook/addon-toolbars": "^6.4.8",
-    "@storybook/addons": "^6.4.8",
-    "@storybook/react": "^6.4.8",
+    "@storybook/addon-a11y": "^6.4.12",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-backgrounds": "^6.4.12",
+    "@storybook/addon-storysource": "^6.4.12",
+    "@storybook/addon-toolbars": "^6.4.12",
+    "@storybook/addons": "^6.4.12",
+    "@storybook/react": "^6.4.12",
     "@storybook/testing-react": "0.0.18",
-    "@storybook/theming": "^6.4.8",
+    "@storybook/theming": "^6.4.12",
     "enzyme": "^3.11.0",
     "typescript": "~4.5.2"
   }

package/lib/components/FlowModeller/NodeLibrary.d.ts

@@ -1,13 +0,0 @@
-import { FC, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { NodeLibraryItem } from './Node/Node.types';
-export interface NodeLibraryProps {
-    show: boolean;
-    target: HTMLElement | null;
-    items: NodeLibraryItem[];
-    onClick: (libItem: NodeLibraryItem) => void;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const NodeLibrary: FC<NodeLibraryProps & ForwardProps>;
-export default NodeLibrary;
-//# sourceMappingURL=NodeLibrary.d.ts.map

package/lib/components/FlowModeller/NodeLibrary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAwFpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"NodeLibrary.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  useI18n,\n  cap,\n  createStringMatcher\n} from '@pega/cosmos-react-core';\n\nimport { NodeLibraryItem } from './Node/Node.types';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nexport interface NodeLibraryProps {\n  show: boolean;\n  target: HTMLElement | null;\n  items: NodeLibraryItem[];\n  onClick: (libItem: NodeLibraryItem) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NodeLibrary: FC<NodeLibraryProps & ForwardProps> = forwardRef(\n  (\n    { show, target, items, onClick }: PropsWithoutRef<NodeLibraryProps>,\n    ref: NodeLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const t = useI18n();\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': nodeItem.type.color,\n                    '--fg-color': readableColor(nodeItem.type.color)\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as NodeLibraryItem;\n        onClick(selectedNode);\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={t('search_nodes')}\n                  placeholder={t('search_nodes')}\n                />\n              }\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default NodeLibrary;\n"]}