@pega/cosmos-react-build 3.0.0-dev.25.0 → 3.0.0-dev.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +8 -2
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.js +6 -7
- package/lib/components/ExpressionBuilder/ExpressionBuilder.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.d.ts +9 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.js +51 -10
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.d.ts +38 -13
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionDetails.d.ts +6 -0
- package/lib/components/ExpressionBuilder/ExpressionDetails.d.ts.map +1 -0
- package/lib/components/ExpressionBuilder/ExpressionDetails.js +12 -0
- package/lib/components/ExpressionBuilder/ExpressionDetails.js.map +1 -0
- package/lib/components/ExpressionBuilder/ExpressionItem.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionItem.js +16 -6
- package/lib/components/ExpressionBuilder/ExpressionItem.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionList.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionList.js +17 -7
- package/lib/components/ExpressionBuilder/ExpressionList.js.map +1 -1
- package/lib/components/ExpressionBuilder/index.d.ts +2 -1
- package/lib/components/ExpressionBuilder/index.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/index.js +1 -0
- package/lib/components/ExpressionBuilder/index.js.map +1 -1
- package/lib/components/ObjectSelect/ObjectPicker.d.ts.map +1 -1
- package/lib/components/ObjectSelect/ObjectPicker.js +4 -0
- package/lib/components/ObjectSelect/ObjectPicker.js.map +1 -1
- package/lib/components/Workbench/ConfigurationPanel.d.ts.map +1 -1
- package/lib/components/Workbench/ConfigurationPanel.js +4 -14
- package/lib/components/Workbench/ConfigurationPanel.js.map +1 -1
- package/lib/components/Workbench/Workbench.styles.d.ts +1 -0
- package/lib/components/Workbench/Workbench.styles.d.ts.map +1 -1
- package/lib/components/Workbench/Workbench.styles.js +4 -0
- package/lib/components/Workbench/Workbench.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAgDA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AAmGhF,QAAA,MAAM,QAAQ,iMAmIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useMemo, useState, useContext, useRef, useEffect } from 'react';
|
|
3
|
-
import { Flex, Icon, Switch,
|
|
3
|
+
import { Flex, Icon, Switch, SkipLinks, Drawer, useDirection, useI18n, useAfterInitialEffect, StandardTree, useConsolidatedRef, useTransitionState, MetaList, Avatar } from '@pega/cosmos-react-core';
|
|
4
4
|
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
5
5
|
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
6
6
|
import AppHeader from '../AppHeader';
|
|
@@ -53,6 +53,12 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
|
|
|
53
53
|
states: expandCollapseStates,
|
|
54
54
|
defaultState: 'expanded'
|
|
55
55
|
});
|
|
56
|
+
const skipLinks = useMemo(() => [
|
|
57
|
+
{
|
|
58
|
+
label: t('go_to_main_content'),
|
|
59
|
+
target: { ariaLabel: t('main_content'), selector: 'main' }
|
|
60
|
+
}
|
|
61
|
+
], [t]);
|
|
56
62
|
const navExpanded = navState === 'expanded' || navState === 'expanding';
|
|
57
63
|
const navContent = useMemo(() => {
|
|
58
64
|
return (_jsx(Flex, { item: { grow: 1 }, as: StyledScrollWrap, children: _jsx(StandardTree, { ...navigation }) }));
|
|
@@ -65,7 +71,7 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
|
|
|
65
71
|
drawerData,
|
|
66
72
|
setDrawerData,
|
|
67
73
|
navState
|
|
68
|
-
}), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(
|
|
74
|
+
}), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen && !!drawerData, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
|
|
69
75
|
if (backButtonRef.current &&
|
|
70
76
|
document.activeElement !== backButtonRef.current) {
|
|
71
77
|
backButtonRef.current.focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useContext,\n useRef,\n useEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipNavigation,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef,\n useTransitionState,\n MetaList,\n Avatar\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\n\nimport {\n StyledHeader,\n StyledUtils,\n StyledUtilItem,\n StyledScrollWrap,\n StyledNavContent,\n StyledMain,\n StyledDrawerWrapper,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual, meta }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n {visual && <Avatar {...visual} name={text} shape='squircle' />}\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n {meta && <MetaList wrapItems items={meta} />}\n </Flex>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n const { start } = useDirection();\n\n const onDrawerClose = () => {\n setDrawerOpen(false);\n setDrawerData(undefined);\n };\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n <StyledDrawerCloseButton\n variant='simple'\n onClick={onDrawerClose}\n aria-label={t('close_noun', [text])}\n icon\n ref={ref}\n >\n <Icon name={`caret-${start}`} />\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({\n items,\n onItemClick,\n onClose,\n currentItemId,\n devMode\n}: UtilsProps & { onClose: () => void }) => {\n const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n const t = useI18n();\n\n useEffect(() => {\n setShowDevMode(devMode ?? false);\n }, [devMode]);\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n setDrawerData(undefined);\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch\n label={t('dev_mode').toUpperCase()}\n onChange={() => setShowDevMode(cur => !cur)}\n on={showDevMode}\n />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem\n key={id}\n role='menuitem'\n aria-current={drawerData?.id !== id && currentItemId === id ? 'true' : undefined}\n >\n <BareButton\n onClick={() => {\n setDrawerData({ label, id });\n setDrawerOpen(true);\n onItemClick(id);\n }}\n >\n {label}\n </BareButton>\n </StyledUtilItem>\n );\n })}\n </ul>\n )}\n </StyledUtils>\n );\n};\n\nconst AppShell = forwardRef(\n (\n {\n main,\n appHeader,\n appInfo,\n utils,\n navigation,\n hideNav = false\n }: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n ) => {\n const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);\n const [drawerData, setDrawerData] = useState(\n utils?.items.find(i => i.id === utils?.currentItemId)\n );\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const { state: navState, toggle: toggleNavState } = useTransitionState({\n ref: navRef,\n property: 'width',\n states: expandCollapseStates,\n defaultState: 'expanded'\n });\n\n const navExpanded = navState === 'expanded' || navState === 'expanding';\n\n const navContent = useMemo(() => {\n return (\n <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n <StandardTree {...navigation} />\n </Flex>\n );\n }, [navigation]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n drawerOpen,\n setDrawerOpen,\n drawerData,\n setDrawerData,\n navState\n }),\n [navExpanded, drawerOpen, drawerData, navState]\n )}\n >\n <SkipNavigation />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen && !!drawerData}\n nullWhenClosed\n position='absolute'\n placement={rtl ? 'right' : 'left'}\n onBeforeOpen={utils?.drawer?.onBeforeOpen}\n onAfterOpen={() => {\n if (\n backButtonRef.current &&\n document.activeElement !== backButtonRef.current\n ) {\n backButtonRef.current.focus();\n }\n utils?.drawer?.onAfterOpen?.();\n }}\n onBeforeClose={utils?.drawer?.onBeforeClose}\n onAfterClose={utils?.drawer?.onAfterClose}\n >\n <DrawerHeader ref={backButtonRef} text={drawerData?.label || ''} />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' || navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonA11y}\n onClick={toggleNavState}\n >\n <Icon name='arrow-micro-right' />\n </StyledNavToggle>\n </StyledNav>\n )}\n <Flex item={{ grow: 1 }} as={StyledMain}>\n {main}\n </Flex>\n </Flex>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useContext,\n useRef,\n useEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipLinks,\n SkipLinksProps,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef,\n useTransitionState,\n MetaList,\n Avatar\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\n\nimport {\n StyledHeader,\n StyledUtils,\n StyledUtilItem,\n StyledScrollWrap,\n StyledNavContent,\n StyledMain,\n StyledDrawerWrapper,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual, meta }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n {visual && <Avatar {...visual} name={text} shape='squircle' />}\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n {meta && <MetaList wrapItems items={meta} />}\n </Flex>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n const { start } = useDirection();\n\n const onDrawerClose = () => {\n setDrawerOpen(false);\n setDrawerData(undefined);\n };\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n <StyledDrawerCloseButton\n variant='simple'\n onClick={onDrawerClose}\n aria-label={t('close_noun', [text])}\n icon\n ref={ref}\n >\n <Icon name={`caret-${start}`} />\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({\n items,\n onItemClick,\n onClose,\n currentItemId,\n devMode\n}: UtilsProps & { onClose: () => void }) => {\n const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n const t = useI18n();\n\n useEffect(() => {\n setShowDevMode(devMode ?? false);\n }, [devMode]);\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n setDrawerData(undefined);\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch\n label={t('dev_mode').toUpperCase()}\n onChange={() => setShowDevMode(cur => !cur)}\n on={showDevMode}\n />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem\n key={id}\n role='menuitem'\n aria-current={drawerData?.id !== id && currentItemId === id ? 'true' : undefined}\n >\n <BareButton\n onClick={() => {\n setDrawerData({ label, id });\n setDrawerOpen(true);\n onItemClick(id);\n }}\n >\n {label}\n </BareButton>\n </StyledUtilItem>\n );\n })}\n </ul>\n )}\n </StyledUtils>\n );\n};\n\nconst AppShell = forwardRef(\n (\n {\n main,\n appHeader,\n appInfo,\n utils,\n navigation,\n hideNav = false\n }: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n ) => {\n const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);\n const [drawerData, setDrawerData] = useState(\n utils?.items.find(i => i.id === utils?.currentItemId)\n );\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const { state: navState, toggle: toggleNavState } = useTransitionState({\n ref: navRef,\n property: 'width',\n states: expandCollapseStates,\n defaultState: 'expanded'\n });\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const navExpanded = navState === 'expanded' || navState === 'expanding';\n\n const navContent = useMemo(() => {\n return (\n <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n <StandardTree {...navigation} />\n </Flex>\n );\n }, [navigation]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n drawerOpen,\n setDrawerOpen,\n drawerData,\n setDrawerData,\n navState\n }),\n [navExpanded, drawerOpen, drawerData, navState]\n )}\n >\n <SkipLinks items={skipLinks} />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen && !!drawerData}\n nullWhenClosed\n position='absolute'\n placement={rtl ? 'right' : 'left'}\n onBeforeOpen={utils?.drawer?.onBeforeOpen}\n onAfterOpen={() => {\n if (\n backButtonRef.current &&\n document.activeElement !== backButtonRef.current\n ) {\n backButtonRef.current.focus();\n }\n utils?.drawer?.onAfterOpen?.();\n }}\n onBeforeClose={utils?.drawer?.onBeforeClose}\n onAfterClose={utils?.drawer?.onAfterClose}\n >\n <DrawerHeader ref={backButtonRef} text={drawerData?.label || ''} />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' || navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonA11y}\n onClick={toggleNavState}\n >\n <Icon name='arrow-micro-right' />\n </StyledNavToggle>\n </StyledNav>\n )}\n <Flex item={{ grow: 1 }} as={StyledMain}>\n {main}\n </Flex>\n </Flex>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAIxF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiI/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
3
|
-
import { Flex, SearchInput, TextArea, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Flex, SearchInput, TextArea, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
|
|
4
4
|
import ExpressionList from './ExpressionList';
|
|
5
5
|
import { StyledExpressionBuilder, StyledExpressionEditor } from './ExpressionBuilder.styles';
|
|
6
6
|
const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, handle, ...restProps }, ref) => {
|
|
@@ -16,7 +16,7 @@ const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, hand
|
|
|
16
16
|
useImperativeHandle(handle, () => ({
|
|
17
17
|
getExpression
|
|
18
18
|
}), [getExpression]);
|
|
19
|
-
const
|
|
19
|
+
const addExpression = (expression) => {
|
|
20
20
|
if (!textArea.current)
|
|
21
21
|
return;
|
|
22
22
|
const currentValue = textArea.current.value;
|
|
@@ -25,7 +25,6 @@ const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, hand
|
|
|
25
25
|
setSelection(prev => {
|
|
26
26
|
return { start: prev.start + expression.length, end: prev.start + expression.length };
|
|
27
27
|
});
|
|
28
|
-
textArea.current.focus();
|
|
29
28
|
};
|
|
30
29
|
const onBlur = () => {
|
|
31
30
|
if (!textArea.current)
|
|
@@ -43,8 +42,8 @@ const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, hand
|
|
|
43
42
|
}
|
|
44
43
|
setSelection(currentSelection);
|
|
45
44
|
};
|
|
46
|
-
const
|
|
47
|
-
list.
|
|
45
|
+
const onItemAdd = (id) => {
|
|
46
|
+
list.onItemAdd(id, addExpression);
|
|
48
47
|
};
|
|
49
48
|
useEffect(() => {
|
|
50
49
|
if (defaultValue && textArea.current) {
|
|
@@ -58,14 +57,14 @@ const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, hand
|
|
|
58
57
|
pad: 1
|
|
59
58
|
}, item: {
|
|
60
59
|
grow: 1
|
|
61
|
-
}, children: [_jsxs(Flex, { container: {
|
|
60
|
+
}, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', role: 'status', children: t('results_count', [list.items?.length || 0], { count: list.items?.length || 0 }) }), _jsxs(Flex, { container: {
|
|
62
61
|
direction: 'column',
|
|
63
62
|
justify: 'between',
|
|
64
63
|
gap: 1
|
|
65
64
|
}, item: {
|
|
66
65
|
grow: 1,
|
|
67
66
|
basis: '50%'
|
|
68
|
-
}, children: [_jsx(SearchInput, { ...search }), _jsx(ExpressionList, { ...list,
|
|
67
|
+
}, children: [_jsx(SearchInput, { ...search }), _jsx(ExpressionList, { ...list, onItemAdd: onItemAdd })] }), _jsx(Flex, { as: StyledExpressionEditor, container: {
|
|
69
68
|
direction: 'column',
|
|
70
69
|
justify: 'between'
|
|
71
70
|
}, item: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\n\nimport {\n Flex,\n ForwardProps,\n SearchInput,\n TextArea,\n useI18n,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport ExpressionList from './ExpressionList';\nimport { StyledExpressionBuilder, StyledExpressionEditor } from './ExpressionBuilder.styles';\n\nconst ExpressionBuilder: FunctionComponent<ExpressionBuilderProps & ForwardProps> = forwardRef(\n (\n {\n list,\n search,\n errors,\n defaultValue,\n handle,\n ...restProps\n }: PropsWithoutRef<ExpressionBuilderProps>,\n ref: ExpressionBuilderProps['ref']\n ) => {\n const t = useI18n();\n const textArea = useRef<HTMLInputElement>();\n const [selection, setSelection] = useState<{ start: number; end: number }>({\n start: 0,\n end: 0\n });\n\n const getExpression = () => {\n return textArea.current?.value || '';\n };\n\n useImperativeHandle(\n handle,\n () => ({\n getExpression\n }),\n [getExpression]\n );\n\n const addExpression = (expression: string) => {\n if (!textArea.current) return;\n const currentValue = textArea.current.value;\n const newValue = `${currentValue.slice(0, selection.start)}${expression}${currentValue.slice(\n selection.end\n )}`;\n textArea.current.value = newValue;\n setSelection(prev => {\n return { start: prev.start + expression.length, end: prev.start + expression.length };\n });\n };\n\n const onBlur = () => {\n if (!textArea.current) return;\n const lastIndex = textArea.current.value.length >= 0 ? textArea.current.value.length : 0;\n const selectionStart =\n textArea.current.selectionStart === null ? lastIndex : textArea.current.selectionStart;\n const selectionEnd =\n textArea.current.selectionEnd === null ? lastIndex : textArea.current.selectionEnd;\n const currentSelection = {\n start: selectionStart,\n end: selectionEnd\n };\n if (selectionStart > selectionEnd) {\n currentSelection.start = selectionEnd;\n currentSelection.end = selectionStart;\n }\n\n setSelection(currentSelection);\n };\n\n const onItemAdd = (id: ExpressionItemProps['id']) => {\n list.onItemAdd(id, addExpression);\n };\n\n useEffect(() => {\n if (defaultValue && textArea.current) {\n setSelection({ start: defaultValue.length, end: defaultValue.length });\n textArea.current.value = defaultValue;\n }\n }, []);\n\n return (\n <Flex\n {...restProps}\n as={StyledExpressionBuilder}\n ref={ref}\n container={{\n justify: 'between',\n colGap: 2,\n pad: 1\n }}\n item={{\n grow: 1\n }}\n >\n <VisuallyHiddenText aria-live='polite' role='status'>\n {t('results_count', [list.items?.length || 0], { count: list.items?.length || 0 })}\n </VisuallyHiddenText>\n {/* Column 1 */}\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n gap: 1\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <SearchInput {...search} />\n <ExpressionList {...list} onItemAdd={onItemAdd} />\n </Flex>\n {/* Column 2 */}\n <Flex\n as={StyledExpressionEditor}\n container={{\n direction: 'column',\n justify: 'between'\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <TextArea\n status={errors ? 'error' : undefined}\n ref={textArea}\n onBlur={onBlur}\n label={t('expression_editor')}\n labelHidden\n info={errors}\n />\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default ExpressionBuilder;\n"]}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { ExpressionItemProps } from './ExpressionBuilder.types';
|
|
2
|
+
export declare const StyledExpressionSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
3
|
export declare const StyledExpressionList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
3
4
|
export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export declare const StyledExpressionEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const StyledParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const StyledInputParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const StyledExpressionDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
export declare const StyledExpandCollapseContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
export declare const StyledExpressionItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
|
|
11
|
+
expanded: ExpressionItemProps['expanded'];
|
|
12
|
+
}, never>;
|
|
5
13
|
//# sourceMappingURL=ExpressionBuilder.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAYlC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAMjC,CAAC;AAEH,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAIpD,eAAO,MAAM,2BAA2B,yGAQtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;cACrB,mBAAmB,CAAC,UAAU,CAAC;SAkBzC,CAAC"}
|
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { defaultThemeProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';
|
|
3
3
|
import StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';
|
|
4
4
|
import { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
|
|
5
|
-
export const
|
|
5
|
+
export const StyledExpressionSummary = styled.div(({ theme }) => {
|
|
6
6
|
return css `
|
|
7
|
-
background-color: ${theme.base.palette['primary-background']};
|
|
8
7
|
padding-block: ${theme.base.spacing};
|
|
9
8
|
padding-inline: calc(0.5 * ${theme.base.spacing});
|
|
10
|
-
:not(:last-child) {
|
|
11
|
-
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
12
|
-
}
|
|
13
|
-
& + & {
|
|
14
|
-
margin-inline-start: 0;
|
|
15
|
-
}
|
|
16
9
|
`;
|
|
17
10
|
});
|
|
18
|
-
|
|
11
|
+
StyledExpressionSummary.defaultProps = defaultThemeProp;
|
|
19
12
|
export const StyledExpressionList = styled.ul `
|
|
20
13
|
overflow-y: auto;
|
|
21
14
|
flex-grow: 1;
|
|
15
|
+
list-style: none;
|
|
22
16
|
`;
|
|
23
17
|
export const StyledExpressionBuilder = styled.div(({ theme }) => {
|
|
24
18
|
return css `
|
|
@@ -41,4 +35,51 @@ export const StyledExpressionEditor = styled.div(() => {
|
|
|
41
35
|
}
|
|
42
36
|
`;
|
|
43
37
|
});
|
|
38
|
+
export const StyledParamsGroup = styled.div(({ theme }) => {
|
|
39
|
+
return css `
|
|
40
|
+
margin-block-start: calc(2 * ${theme.base.spacing});
|
|
41
|
+
|
|
42
|
+
${StyledText} {
|
|
43
|
+
margin-block-end: ${theme.base.spacing};
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
46
|
+
});
|
|
47
|
+
StyledParamsGroup.defaultProps = defaultThemeProp;
|
|
48
|
+
export const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {
|
|
49
|
+
return css `
|
|
50
|
+
max-width: ${theme.base['content-width'].lg};
|
|
51
|
+
`;
|
|
52
|
+
});
|
|
53
|
+
StyledInputParamsGroup.defaultProps = defaultThemeProp;
|
|
54
|
+
export const StyledExpressionDetails = styled.div ``;
|
|
55
|
+
StyledExpressionDetails.defaultProps = defaultThemeProp;
|
|
56
|
+
export const StyledExpandCollapseContent = styled.div(({ theme }) => {
|
|
57
|
+
return css `
|
|
58
|
+
padding-inline: calc(2 * ${theme.base.spacing});
|
|
59
|
+
padding-block-end: calc(2 * ${theme.base.spacing});
|
|
60
|
+
${StyledButton} {
|
|
61
|
+
align-self: flex-end;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
});
|
|
65
|
+
StyledExpandCollapseContent.defaultProps = defaultThemeProp;
|
|
66
|
+
export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
|
|
67
|
+
return css `
|
|
68
|
+
list-style: none;
|
|
69
|
+
background-color: ${theme.base.palette['primary-background']};
|
|
70
|
+
${expanded &&
|
|
71
|
+
css `
|
|
72
|
+
background-color: ${theme.base.palette['secondary-background']};
|
|
73
|
+
`}
|
|
74
|
+
|
|
75
|
+
:not(:last-child) {
|
|
76
|
+
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
${StyledExpressionDetails} {
|
|
80
|
+
padding-block-end: calc(2 * ${theme.base.spacing});
|
|
81
|
+
}
|
|
82
|
+
`;
|
|
83
|
+
});
|
|
84
|
+
StyledExpressionItem.defaultProps = defaultThemeProp;
|
|
44
85
|
//# sourceMappingURL=ExpressionBuilder.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';\nimport StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\n\nexport const StyledExpressionSummary = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n padding-inline: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledExpressionSummary.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul`\n overflow-y: auto;\n flex-grow: 1;\n list-style: none;\n`;\n\nexport const StyledExpressionBuilder = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n min-height: calc(30 * ${theme.base.spacing});\n max-height: 100%;\n max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n\n ${StyledTextArea} {\n flex-grow: 1;\n }\n `;\n});\n\nStyledExpressionBuilder.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionEditor = styled.div(() => {\n return css`\n ${StyledFormField} {\n flex-grow: 1;\n }\n `;\n});\n\nexport const StyledParamsGroup = styled.div(({ theme }) => {\n return css`\n margin-block-start: calc(2 * ${theme.base.spacing});\n\n ${StyledText} {\n margin-block-end: ${theme.base.spacing};\n }\n `;\n});\n\nStyledParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].lg};\n `;\n});\n\nStyledInputParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionDetails = styled.div``;\n\nStyledExpressionDetails.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseContent = styled.div(({ theme }) => {\n return css`\n padding-inline: calc(2 * ${theme.base.spacing});\n padding-block-end: calc(2 * ${theme.base.spacing});\n ${StyledButton} {\n align-self: flex-end;\n }\n `;\n});\n\nStyledExpandCollapseContent.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionItem = styled.li<{\n expanded: ExpressionItemProps['expanded'];\n}>(({ theme, expanded }) => {\n return css`\n list-style: none;\n background-color: ${theme.base.palette['primary-background']};\n ${expanded &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n `}\n\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n ${StyledExpressionDetails} {\n padding-block-end: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledExpressionItem.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Ref } from 'react';
|
|
2
|
-
import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps } from '@pega/cosmos-react-core';
|
|
1
|
+
import { ComponentType, Ref } from 'react';
|
|
2
|
+
import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps, FieldValueListProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface ExpressionItemProps {
|
|
4
4
|
/** Id of the item */
|
|
5
5
|
id: string;
|
|
@@ -7,23 +7,33 @@ export interface ExpressionItemProps {
|
|
|
7
7
|
primary: string;
|
|
8
8
|
/** Type of expression item. Eg: Decision, When, Automation etc. */
|
|
9
9
|
type: string;
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
/**
|
|
10
|
+
/** Callback for add event */
|
|
11
|
+
onAdd: (id: ExpressionItemProps['id']) => void;
|
|
12
|
+
/** Callback for expand event */
|
|
13
13
|
onExpand?: (id: ExpressionItemProps['id']) => void;
|
|
14
|
-
/**
|
|
15
|
-
|
|
14
|
+
/** Callback for collapse event */
|
|
15
|
+
onCollapse?: (id: ExpressionItemProps['id']) => void;
|
|
16
|
+
/** Show the expanded details */
|
|
17
|
+
expanded?: boolean;
|
|
18
|
+
/** Expression details to show in expanded view */
|
|
19
|
+
details?: ExpressionDetailsProps;
|
|
16
20
|
}
|
|
17
21
|
export interface ExpressionListProps extends BaseProps {
|
|
18
22
|
ref?: Ref<HTMLDivElement>;
|
|
19
23
|
/** Expression builder items */
|
|
20
|
-
items?: OmitStrict<ExpressionItemProps, '
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
+
items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];
|
|
25
|
+
/** Callback for item add */
|
|
26
|
+
onItemAdd: ExpressionItemProps['onAdd'];
|
|
27
|
+
/** Callback for item expand */
|
|
24
28
|
onItemExpand?: ExpressionItemProps['onExpand'];
|
|
29
|
+
/** Callback for item collapse */
|
|
30
|
+
onItemCollapse?: ExpressionItemProps['onCollapse'];
|
|
25
31
|
/** No items */
|
|
26
32
|
emptyText?: EmptyStateProps['message'];
|
|
33
|
+
/** Expanded items data */
|
|
34
|
+
details: {
|
|
35
|
+
[id: string]: ExpressionDetailsProps;
|
|
36
|
+
};
|
|
27
37
|
}
|
|
28
38
|
export interface HandleValue {
|
|
29
39
|
/** Returns the expression value */
|
|
@@ -32,8 +42,8 @@ export interface HandleValue {
|
|
|
32
42
|
export interface ExpressionBuilderProps extends BaseProps {
|
|
33
43
|
ref?: Ref<HTMLDivElement>;
|
|
34
44
|
/** Expression items list */
|
|
35
|
-
list: OmitStrict<ExpressionListProps, 'ref' | '
|
|
36
|
-
|
|
45
|
+
list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {
|
|
46
|
+
onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;
|
|
37
47
|
};
|
|
38
48
|
/** Search input props */
|
|
39
49
|
search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'>;
|
|
@@ -44,4 +54,19 @@ export interface ExpressionBuilderProps extends BaseProps {
|
|
|
44
54
|
/** Imperative handle */
|
|
45
55
|
handle?: Ref<HandleValue>;
|
|
46
56
|
}
|
|
57
|
+
export interface InputParams<P> {
|
|
58
|
+
id: string;
|
|
59
|
+
renderer: ComponentType<P>;
|
|
60
|
+
rendererProps: P;
|
|
61
|
+
}
|
|
62
|
+
export interface ExpressionDetailsProps extends BaseProps {
|
|
63
|
+
/** Primary details of the expression */
|
|
64
|
+
primary: Required<FieldValueListProps['fields']>;
|
|
65
|
+
/** Output params of the expression */
|
|
66
|
+
outputParams?: Required<FieldValueListProps['fields']>;
|
|
67
|
+
/** Input params of the expression */
|
|
68
|
+
inputParams?: InputParams<any>[];
|
|
69
|
+
/** Ref to the component */
|
|
70
|
+
ref?: Ref<HTMLElement>;
|
|
71
|
+
}
|
|
47
72
|
//# sourceMappingURL=ExpressionBuilder.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n BaseProps,\n EmptyStateProps,\n OmitStrict,\n SearchInputProps,\n TextAreaProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n /** Id of the item */\n id: string;\n /** Item name to be displayed as rule name */\n primary: string;\n /** Type of expression item. Eg: Decision, When, Automation etc. */\n type: string;\n /**
|
|
1
|
+
{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport {\n BaseProps,\n EmptyStateProps,\n OmitStrict,\n SearchInputProps,\n TextAreaProps,\n FieldValueListProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n /** Id of the item */\n id: string;\n /** Item name to be displayed as rule name */\n primary: string;\n /** Type of expression item. Eg: Decision, When, Automation etc. */\n type: string;\n /** Callback for add event */\n onAdd: (id: ExpressionItemProps['id']) => void;\n /** Callback for expand event */\n onExpand?: (id: ExpressionItemProps['id']) => void;\n /** Callback for collapse event */\n onCollapse?: (id: ExpressionItemProps['id']) => void;\n /** Show the expanded details */\n expanded?: boolean;\n /** Expression details to show in expanded view */\n details?: ExpressionDetailsProps;\n}\n\nexport interface ExpressionListProps extends BaseProps {\n ref?: Ref<HTMLDivElement>;\n /** Expression builder items */\n items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];\n /** Callback for item add */\n onItemAdd: ExpressionItemProps['onAdd'];\n /** Callback for item expand */\n onItemExpand?: ExpressionItemProps['onExpand'];\n /** Callback for item collapse */\n onItemCollapse?: ExpressionItemProps['onCollapse'];\n /** No items */\n emptyText?: EmptyStateProps['message'];\n /** Expanded items data */\n details: {\n [id: string]: ExpressionDetailsProps;\n };\n}\n\nexport interface HandleValue {\n /** Returns the expression value */\n getExpression: () => string;\n}\n\nexport interface ExpressionBuilderProps extends BaseProps {\n ref?: Ref<HTMLDivElement>;\n /** Expression items list */\n list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {\n onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;\n };\n /** Search input props */\n search: Pick<\n Required<SearchInputProps>,\n 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'\n > &\n Pick<SearchInputProps, 'defaultFilter'>;\n\n /** Default expression to set in the text area */\n defaultValue?: string;\n /** Compiled error message */\n errors?: TextAreaProps['info'];\n /** Imperative handle */\n handle?: Ref<HandleValue>;\n}\n\nexport interface InputParams<P> {\n id: string;\n renderer: ComponentType<P>;\n rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps {\n /** Primary details of the expression */\n primary: Required<FieldValueListProps['fields']>;\n /** Output params of the expression */\n outputParams?: Required<FieldValueListProps['fields']>;\n /** Input params of the expression */\n inputParams?: InputParams<any>[];\n /** Ref to the component */\n ref?: Ref<HTMLElement>;\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ExpressionDetailsProps } from './ExpressionBuilder.types';
|
|
4
|
+
declare const ExpressionDetails: FunctionComponent<ExpressionDetailsProps & ForwardProps>;
|
|
5
|
+
export default ExpressionDetails;
|
|
6
|
+
//# sourceMappingURL=ExpressionDetails.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAwB,YAAY,EAAiB,MAAM,yBAAyB,CAAC;AAE5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA8B/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { FieldValueList, Flex, Text, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
import { StyledExpressionDetails, StyledInputParamsGroup, StyledParamsGroup } from './ExpressionBuilder.styles';
|
|
5
|
+
const ExpressionDetails = forwardRef(({ primary, inputParams, outputParams, ...restProps }, ref) => {
|
|
6
|
+
const t = useI18n();
|
|
7
|
+
return (_jsxs(Flex, { ...restProps, ref: ref, container: { direction: 'column' }, as: StyledExpressionDetails, children: [_jsx(FieldValueList, { fields: primary }), outputParams && (_jsxs(StyledParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('output_parameters') }), _jsx(FieldValueList, { fields: outputParams })] })), inputParams && (_jsxs(StyledInputParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('input_parameters') }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: inputParams.map(({ id, renderer: Renderer, rendererProps }) => {
|
|
8
|
+
return _jsx(Renderer, { ...rendererProps }, id);
|
|
9
|
+
}) })] }))] }));
|
|
10
|
+
});
|
|
11
|
+
export default ExpressionDetails;
|
|
12
|
+
//# sourceMappingURL=ExpressionDetails.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpressionDetails.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAgB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG5F,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,GAAkC,EAAE,EAAE;IAC3F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,uBAAuB,aAE3B,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,GAAI,EAClC,YAAY,IAAI,CACf,MAAC,iBAAiB,eAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,cAAc,IAAC,MAAM,EAAE,YAAY,GAAI,IACtB,CACrB,EACA,WAAW,IAAI,CACd,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;4BAC7D,OAAO,KAAC,QAAQ,OAAc,aAAa,IAArB,EAAE,CAAuB,CAAC;wBAClD,CAAC,CAAC,GACG,IACgB,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent } from 'react';\n\nimport { FieldValueList, Flex, ForwardProps, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { ExpressionDetailsProps } from './ExpressionBuilder.types';\nimport {\n StyledExpressionDetails,\n StyledInputParamsGroup,\n StyledParamsGroup\n} from './ExpressionBuilder.styles';\n\nconst ExpressionDetails: FunctionComponent<ExpressionDetailsProps & ForwardProps> = forwardRef(\n ({ primary, inputParams, outputParams, ...restProps }, ref: ExpressionDetailsProps['ref']) => {\n const t = useI18n();\n return (\n <Flex\n {...restProps}\n ref={ref}\n container={{ direction: 'column' }}\n as={StyledExpressionDetails}\n >\n <FieldValueList fields={primary} />\n {outputParams && (\n <StyledParamsGroup>\n <Text variant='h4'>{t('output_parameters')}</Text>\n <FieldValueList fields={outputParams} />\n </StyledParamsGroup>\n )}\n {inputParams && (\n <StyledInputParamsGroup>\n <Text variant='h4'>{t('input_parameters')}</Text>\n <Flex container={{ direction: 'column', gap: 1 }}>\n {inputParams.map(({ id, renderer: Renderer, rendererProps }) => {\n return <Renderer key={id} {...rendererProps} />;\n })}\n </Flex>\n </StyledInputParamsGroup>\n )}\n </Flex>\n );\n }\n);\n\nexport default ExpressionDetails;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EAIL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAUhE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA8EzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,17 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
|
-
import { Button, Flex, Icon, registerIcon, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Button, ExpandCollapse, Flex, Icon, registerIcon, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
|
|
5
5
|
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
|
|
6
|
-
import { StyledExpressionItem } from './ExpressionBuilder.styles';
|
|
6
|
+
import { StyledExpandCollapseContent, StyledExpressionSummary, StyledExpressionItem } from './ExpressionBuilder.styles';
|
|
7
|
+
import ExpressionDetails from './ExpressionDetails';
|
|
7
8
|
registerIcon(caretLeftIcon, caretRightIcon);
|
|
8
|
-
const ExpressionItem = ({ id, primary, type,
|
|
9
|
+
const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, details, expanded = false, ...restProps }) => {
|
|
9
10
|
const { end: caretDirection } = useDirection();
|
|
10
11
|
const t = useI18n();
|
|
11
12
|
const caretIcon = useMemo(() => {
|
|
12
|
-
return
|
|
13
|
-
}, [
|
|
14
|
-
return (_jsxs(
|
|
13
|
+
return expanded ? 'caret-down' : `caret-${caretDirection}`;
|
|
14
|
+
}, [expanded, caretDirection]);
|
|
15
|
+
return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { ...restProps, as: StyledExpressionSummary, id: id, container: { gap: 1, alignItems: 'center' }, children: [_jsx(Button, { icon: true, variant: 'simple', onClick: onCollapse || onExpand
|
|
16
|
+
? () => {
|
|
17
|
+
if (expanded) {
|
|
18
|
+
onCollapse?.(id);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
onExpand?.(id);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
: undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'primary', children: primary }), _jsx(Text, { variant: 'secondary', children: type })] }), !expanded && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { ...details }), _jsx(Button, { variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
|
|
15
25
|
};
|
|
16
26
|
export default ExpressionItem;
|
|
17
27
|
//# sourceMappingURL=ExpressionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,MAAM,EACN,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAGnG,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,MAAM,EACN,cAAc,EACd,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAGnG,OAAO,EACL,2BAA2B,EAC3B,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,MAAM,cAAc,GAA0D,CAAC,EAC7E,EAAE,EACF,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC;IAC7D,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,aACtC,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE3C,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EACL,UAAU,IAAI,QAAQ;4BACpB,CAAC,CAAC,GAAG,EAAE;gCACH,IAAI,QAAQ,EAAE;oCACZ,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;iCAClB;qCAAM;oCACL,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;iCAChB;4BACH,CAAC;4BACH,CAAC,CAAC,SAAS,gBAEH,GAAG,IAAI,KAAK,OAAO,EAAE,mBAClB,QAAQ,EACvB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,YAE7C,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAI,GAClB,EAET,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC9E,KAAC,IAAI,IAAC,OAAO,EAAC,SAAS,YAAE,OAAO,GAAQ,EACxC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,GAAQ,IAClC,EAEN,CAAC,QAAQ,IAAI,CACZ,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBACZ,CAAC,CAAC,UAAU,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAAE,CAAC,CAAC,EAClD,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,YAEf,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,IACI,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,QAAQ,YAClC,MAAC,IAAI,IAAC,EAAE,EAAE,2BAA2B,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtE,OAAO,IAAI,KAAC,iBAAiB,OAAK,OAAO,GAAI,EAC9C,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBACZ,CAAC,CAAC,UAAU,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAAE,CAAC,CAAC,YAEjD,CAAC,CAAC,KAAK,CAAC,GACF,IACJ,GACQ,IACI,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n Button,\n ExpandCollapse,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n Text,\n useDirection,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n StyledExpandCollapseContent,\n StyledExpressionSummary,\n StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n id,\n primary,\n type,\n onAdd,\n onExpand,\n onCollapse,\n details,\n expanded = false,\n ...restProps\n}) => {\n const { end: caretDirection } = useDirection();\n const t = useI18n();\n\n const caretIcon = useMemo(() => {\n return expanded ? 'caret-down' : `caret-${caretDirection}`;\n }, [expanded, caretDirection]);\n\n return (\n <StyledExpressionItem expanded={expanded}>\n <Flex\n {...restProps}\n as={StyledExpressionSummary}\n id={id}\n container={{ gap: 1, alignItems: 'center' }}\n >\n <Button\n icon\n variant='simple'\n onClick={\n onCollapse || onExpand\n ? () => {\n if (expanded) {\n onCollapse?.(id);\n } else {\n onExpand?.(id);\n }\n }\n : undefined\n }\n aria-label={`${type}: ${primary}`}\n aria-expanded={expanded}\n label={expanded ? t('collapse') : t('expand')}\n >\n <Icon name={caretIcon} />\n </Button>\n\n <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n <Text variant='primary'>{primary}</Text>\n <Text variant='secondary'>{type}</Text>\n </Flex>\n\n {!expanded && (\n <Button\n icon\n variant='simple'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n label={t('add')}\n >\n <Icon name='plus' />\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!expanded}>\n <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n {details && <ExpressionDetails {...details} />}\n <Button\n variant='primary'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n >\n {t('add')}\n </Button>\n </Flex>\n </ExpandCollapse>\n </StyledExpressionItem>\n );\n};\n\nexport default ExpressionItem;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIrF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIrF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -4,18 +4,28 @@ import { forwardRef, useState } from 'react';
|
|
|
4
4
|
import { EmptyState, Flex } from '@pega/cosmos-react-core';
|
|
5
5
|
import ExpressionItem from './ExpressionItem';
|
|
6
6
|
import { StyledExpressionList } from './ExpressionBuilder.styles';
|
|
7
|
-
const ExpressionList = forwardRef(({ items, emptyText,
|
|
8
|
-
const [
|
|
7
|
+
const ExpressionList = forwardRef(({ items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) => {
|
|
8
|
+
const [expandedItems, setExpandedItems] = useState([]);
|
|
9
9
|
const handleItemExpand = (id) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
setExpandedItems(prev => {
|
|
11
|
+
const itemIndex = prev.indexOf(id);
|
|
12
|
+
if (itemIndex !== -1)
|
|
13
|
+
return prev;
|
|
13
14
|
onItemExpand?.(id);
|
|
14
|
-
return id;
|
|
15
|
+
return [...prev, id];
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
const handleItemCollapse = (id) => {
|
|
19
|
+
setExpandedItems(prev => {
|
|
20
|
+
const itemIndex = prev.indexOf(id);
|
|
21
|
+
if (itemIndex === -1)
|
|
22
|
+
return prev;
|
|
23
|
+
onItemCollapse?.(id);
|
|
24
|
+
return prev.filter(itemId => itemId !== id);
|
|
15
25
|
});
|
|
16
26
|
};
|
|
17
27
|
return (_jsx(Flex, { ...restProps, as: StyledExpressionList, ref: ref, children: items && items.length > 0 ? (items.map(item => {
|
|
18
|
-
return (_createElement(ExpressionItem, { ...item,
|
|
28
|
+
return (_createElement(ExpressionItem, { ...item, onAdd: onItemAdd, onExpand: handleItemExpand, onCollapse: handleItemCollapse, expanded: expandedItems.includes(item.id), key: item.id, details: details?.[item.id] }));
|
|
19
29
|
})) : (_jsx(EmptyState, { message: emptyText })) }));
|
|
20
30
|
});
|
|
21
31
|
export default ExpressionList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGzE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGzE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EACpF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,EAA6B,EAAE,EAAE;QACzD,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAA6B,EAAE,EAAE;QAC3D,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,oBAAoB,EAAE,GAAG,EAAE,GAAG,YACpD,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,OAAO,CACL,eAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,SAAS,GAAI,CACnC,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, useState } from 'react';\n\nimport { EmptyState, Flex, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\n\nconst ExpressionList: FunctionComponent<ExpressionListProps & ForwardProps> = forwardRef(\n (\n { items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps },\n ref: ExpressionListProps['ref']\n ) => {\n const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n const handleItemExpand = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex !== -1) return prev;\n onItemExpand?.(id);\n return [...prev, id];\n });\n };\n\n const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex === -1) return prev;\n onItemCollapse?.(id);\n return prev.filter(itemId => itemId !== id);\n });\n };\n\n return (\n <Flex {...restProps} as={StyledExpressionList} ref={ref}>\n {items && items.length > 0 ? (\n items.map(item => {\n return (\n <ExpressionItem\n {...item}\n onAdd={onItemAdd}\n onExpand={handleItemExpand}\n onCollapse={handleItemCollapse}\n expanded={expandedItems.includes(item.id)}\n key={item.id}\n details={details?.[item.id]}\n />\n );\n })\n ) : (\n <EmptyState message={emptyText} />\n )}\n </Flex>\n );\n }\n);\n\nexport default ExpressionList;\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default } from './ExpressionBuilder';
|
|
2
|
-
export { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue } from './ExpressionBuilder.types';
|
|
2
|
+
export { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue, InputParams } from './ExpressionBuilder.types';
|
|
3
3
|
export { default as ExpressionItem } from './ExpressionItem';
|
|
4
4
|
export { default as ExpressionList } from './ExpressionList';
|
|
5
|
+
export { default as ExpressionDetails } from './ExpressionDetails';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default } from './ExpressionBuilder';
|
|
2
2
|
export { default as ExpressionItem } from './ExpressionItem';
|
|
3
3
|
export { default as ExpressionList } from './ExpressionList';
|
|
4
|
+
export { default as ExpressionDetails } from './ExpressionDetails';
|
|
4
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAQ9C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './ExpressionBuilder';\nexport {\n ExpressionListProps,\n ExpressionItemProps,\n ExpressionBuilderProps,\n HandleValue,\n InputParams\n} from './ExpressionBuilder.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAGT,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EAMd,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC;IAC7F,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAGT,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EAMd,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC;IAC7F,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA6DtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -30,6 +30,10 @@ const ObjectPicker = forwardRef(({ items, onSelect, createProps, loading, ...res
|
|
|
30
30
|
target: '_blank',
|
|
31
31
|
'aria-label': t('create_in_new_tab')
|
|
32
32
|
}), children: [_jsx(Icon, { name: 'plus' }), t('create_new'), createProps.href && _jsx(Icon, { name: 'open' })] }) })) : undefined
|
|
33
|
+
}, onKeyDown: e => {
|
|
34
|
+
if (e.key === 'Tab') {
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
33
37
|
} }));
|
|
34
38
|
});
|
|
35
39
|
export default ObjectPicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EAIR,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,QAAQ,EACR,WAAW,EAGX,mBAAmB,EAGnB,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,kBAAkB,EAElB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAyBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IACzF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;YACnB,OAAO;YACP,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YACnC,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,KACxB,CAAC,WAAW,CAAC,IAAI,IAAI;wBACvB,IAAI,EAAE,WAAW,CAAC,IAAI;wBACtB,MAAM,EAAE,QAAQ;wBAChB,YAAY,EAAE,CAAC,CAAC,mBAAmB,CAAC;qBACrC,CAAC,aAEF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,CAAC,CAAC,YAAY,CAAC,EACf,WAAW,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,IAClC,GACJ,CACR,CAAC,CAAC,CAAC,SAAS;SACd,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n useState,\n useMemo,\n ChangeEvent,\n FunctionComponent,\n MouseEventHandler\n} from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp,\n Flex,\n Button,\n Icon,\n useI18n,\n useConsolidatedRef,\n ButtonProps,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(openIcon, plusIcon);\n\nexport interface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n > {\n items: MenuProps['items'];\n loading: MenuProps['loading'];\n onSelect: MenuItemProps['onClick'];\n createProps?: { onClick?: MouseEventHandler<HTMLButtonElement>; href?: ButtonProps['href'] };\n ref?: ComboBoxProps['ref'];\n}\n\nconst ObjectPicker: FunctionComponent<ObjectPickerProps> = forwardRef(\n ({ items, onSelect, createProps, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const t = useI18n();\n const comboboxRef = useConsolidatedRef(ref);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={comboboxRef}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex,\n loading,\n footer: createProps ? (\n <Flex container={{ justify: 'start' }}>\n <Button\n type='button'\n variant='simple'\n onClick={createProps.onClick}\n {...(createProps.href && {\n href: createProps.href,\n target: '_blank',\n 'aria-label': t('create_in_new_tab')\n })}\n >\n <Icon name='plus' />\n {t('create_new')}\n {createProps.href && <Icon name='open' />}\n </Button>\n </Flex>\n ) : undefined\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}
|
|
1
|
+
{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n useMemo,\n ChangeEvent,\n FunctionComponent,\n MouseEventHandler\n} from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp,\n Flex,\n Button,\n Icon,\n useI18n,\n useConsolidatedRef,\n ButtonProps,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(openIcon, plusIcon);\n\nexport interface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n > {\n items: MenuProps['items'];\n loading: MenuProps['loading'];\n onSelect: MenuItemProps['onClick'];\n createProps?: { onClick?: MouseEventHandler<HTMLButtonElement>; href?: ButtonProps['href'] };\n ref?: ComboBoxProps['ref'];\n}\n\nconst ObjectPicker: FunctionComponent<ObjectPickerProps> = forwardRef(\n ({ items, onSelect, createProps, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const t = useI18n();\n const comboboxRef = useConsolidatedRef(ref);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={comboboxRef}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex,\n loading,\n footer: createProps ? (\n <Flex container={{ justify: 'start' }}>\n <Button\n type='button'\n variant='simple'\n onClick={createProps.onClick}\n {...(createProps.href && {\n href: createProps.href,\n target: '_blank',\n 'aria-label': t('create_in_new_tab')\n })}\n >\n <Icon name='plus' />\n {t('create_new')}\n {createProps.href && <Icon name='open' />}\n </Button>\n </Flex>\n ) : undefined\n }}\n onKeyDown={e => {\n if (e.key === 'Tab') {\n return false;\n }\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkBnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { StyledPanel, StyledTextWithEllipsis } from './Workbench.styles';
|
|
2
|
+
import { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } from './Workbench.styles';
|
|
5
4
|
const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
|
|
6
5
|
const t = useI18n();
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
onDismiss();
|
|
10
|
-
}, [onDismiss]);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
document.addEventListener('keydown', onKeyDown);
|
|
13
|
-
return () => {
|
|
14
|
-
document.removeEventListener('keydown', onKeyDown);
|
|
15
|
-
};
|
|
16
|
-
}, [onKeyDown]);
|
|
17
|
-
return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, min: '0', max: '25rem', children: _jsxs(Flex, { container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: header }), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }) })] }), content] }) }));
|
|
6
|
+
useEscape(onDismiss);
|
|
7
|
+
return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, children: _jsxs(Flex, { as: StyledPanelContent, container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: header }), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }) })] }), content] }) }));
|
|
18
8
|
};
|
|
19
9
|
export default ConfigurationPanel;
|
|
20
10
|
//# sourceMappingURL=ConfigurationPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAG7F,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,SAAS,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,cAAc,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,IAAI,YACjE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9E,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,GAA0B,EACtE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,YACrF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,OAAO,IACH,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';\n\nimport { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n const t = useI18n();\n\n useEscape(onDismiss);\n\n return (\n <ExpandCollapse as={StyledPanel} dimension='width' collapsed={!open}>\n <Flex as={StyledPanelContent} container={{ pad: 2, direction: 'column', gap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n <Button variant='simple' icon onClick={onDismiss} label={t('close_configuration_panel')}>\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n </Flex>\n </ExpandCollapse>\n );\n};\n\nexport default ConfigurationPanel;\n"]}
|
|
@@ -5,5 +5,6 @@ export declare const StyledToolbar: import("styled-components").StyledComponent<
|
|
|
5
5
|
export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
6
|
export declare const StyledWorkbench: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
7
|
export declare const StyledPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const StyledPanelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
9
|
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>;
|
|
9
10
|
//# sourceMappingURL=Workbench.styles.d.ts.map
|
|
@@ -1 +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,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA2BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAYtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}
|
|
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,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA2BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAYtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}
|
|
@@ -62,6 +62,10 @@ export const StyledPanel = styled.div(({ theme }) => {
|
|
|
62
62
|
`;
|
|
63
63
|
});
|
|
64
64
|
StyledPanel.defaultProps = defaultThemeProp;
|
|
65
|
+
export const StyledPanelContent = styled.div `
|
|
66
|
+
width: 25rem;
|
|
67
|
+
`;
|
|
68
|
+
StyledPanelContent.defaultProps = defaultThemeProp;
|
|
65
69
|
export const StyledTextWithEllipsis = styled(Text) `
|
|
66
70
|
overflow: hidden;
|
|
67
71
|
white-space: nowrap;
|
|
@@ -1 +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;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnF,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,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,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,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';\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 }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\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: 100%;\n border: 0.0625rem solid ${palette['border-line']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 100%;\n overflow: auto;\n background-color: ${palette['app-background']};\n `;\n }\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 StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
|
|
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;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnF,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,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,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,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,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';\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 }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\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: 100%;\n border: 0.0625rem solid ${palette['border-line']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 100%;\n overflow: auto;\n background-color: ${palette['app-background']};\n `;\n }\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 StyledPanelContent = styled.div`\n width: 25rem;\n`;\n\nStyledPanelContent.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.26.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.26.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.26.0",
|
|
25
25
|
"@types/dagre": "^0.7.46",
|
|
26
26
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
27
27
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|