@pega/cosmos-react-build 8.8.0 → 9.0.0-build.10.0

package/lib/components/DynamicInput/ConstantControl.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CurrencyInput, DateInput, DateTimeInput, Input, NumberInput, PhoneInput, TextArea, TimeInput } from '@pega/cosmos-react-core';
+import BooleanControl from './BooleanControl';
+const ConstantControl = ({ format, props, required, 'data-testid': testId, id: inputUid }) => {
+    let control = null;
+    const { value } = props;
+    // Note: This is just a typeguard for the value prop.
+    if (typeof value === 'string' || value === undefined) {
+        if (format === 'Text') {
+            control = (_jsx(Input, { ...props, "data-testid": testId, id: inputUid, onChange: (e) => {
+                    props.onChange(e.target.value);
+                }, required: required }));
+        }
+        if (format === 'Text (paragraph)') {
+            control = (_jsx(TextArea, { ...props, "data-testid": testId, id: inputUid, onChange: (e) => {
+                    props.onChange(e.target.value);
+                }, required: required }));
+        }
+        if (format === 'Currency') {
+            control = _jsx(CurrencyInput, { ...props, "data-testid": testId, id: inputUid, required: required });
+        }
+        if (format === 'Percentage') {
+            control = (_jsx(NumberInput, { ...props, "data-testid": testId, id: inputUid, showGroupSeparators: false, numberOfDecimals: undefined, unit: 'percent', required: required }));
+        }
+        if (format === 'Integer') {
+            control = (_jsx(NumberInput, { ...props, "data-testid": testId, id: inputUid, showGroupSeparators: false, 
+                // Note: Getting single occurrence of callback when '.' is entered w/o showDecimal = false.
+                showDecimal: false, required: required }));
+        }
+        if (format === 'Decimal') {
+            control = _jsx(NumberInput, { ...props, "data-testid": testId, id: inputUid, required: required });
+        }
+        if (format === 'Phone') {
+            control = (_jsx(PhoneInput, { ...props, "data-testid": testId, id: inputUid, required: required, showCountryCode: true }));
+        }
+    }
+    if (format === 'Boolean') {
+        control = _jsx(BooleanControl, { ...props, "data-testid": testId, id: inputUid, required: required });
+    }
+    // Note: This is just a typeguard for the value prop.
+    if (typeof value === 'string' ||
+        typeof value === 'number' ||
+        value instanceof Date ||
+        value === undefined) {
+        if (format === 'DateTime') {
+            control = _jsx(DateTimeInput, { ...props, "data-testid": testId, id: inputUid, required: required });
+        }
+        if (format === 'Date') {
+            control = _jsx(DateInput, { ...props, "data-testid": testId, id: inputUid, required: required });
+        }
+        if (format === 'Time') {
+            control = _jsx(TimeInput, { ...props, "data-testid": testId, id: inputUid, required: required });
+        }
+    }
+    return control;
+};
+export default ConstantControl;
+//# sourceMappingURL=ConstantControl.js.map

package/lib/components/DynamicInput/ConstantControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstantControl.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/ConstantControl.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,aAAa,EACb,SAAS,EACT,aAAa,EACb,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACV,MAAM,yBAAyB,CAAC;AAejC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AA2F9C,MAAM,eAAe,GAAG,CAAC,EACvB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,MAAM,EACrB,EAAE,EAAE,QAAQ,EAGW,EAAE,EAAE;IAC3B,IAAI,OAAO,GAAuB,IAAI,CAAC;IAEvC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,qDAAqD;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACrD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,GAAG,CACR,KAAC,KAAK,OACA,KAAK,iBACI,MAAM,EACnB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;oBAC7C,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,MAAM,KAAK,kBAAkB,EAAE,CAAC;YAClC,OAAO,GAAG,CACR,KAAC,QAAQ,OACH,KAAK,iBACI,MAAM,EACnB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE;oBAChD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;YAC1B,OAAO,GAAG,KAAC,aAAa,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAChG,CAAC;QAED,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;YAC5B,OAAO,GAAG,CACR,KAAC,WAAW,OACN,KAAK,iBACI,MAAM,EACnB,EAAE,EAAE,QAAQ,EACZ,mBAAmB,EAAE,KAAK,EAC1B,gBAAgB,EAAE,SAAS,EAC3B,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,GAAG,CACR,KAAC,WAAW,OACN,KAAK,iBACI,MAAM,EACnB,EAAE,EAAE,QAAQ,EACZ,mBAAmB,EAAE,KAAK;gBAC1B,2FAA2F;gBAC3F,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,GAAG,KAAC,WAAW,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAC9F,CAAC;QAED,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;YACvB,OAAO,GAAG,CACR,KAAC,UAAU,OACL,KAAK,iBACI,MAAM,EACnB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,SACf,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,GAAG,KAAC,cAAc,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACjG,CAAC;IAED,qDAAqD;IACrD,IACE,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,YAAY,IAAI;QACrB,KAAK,KAAK,SAAS,EACnB,CAAC;QACD,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;YAC1B,OAAO,GAAG,KAAC,aAAa,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAChG,CAAC;QAED,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,GAAG,KAAC,SAAS,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAC5F,CAAC;QAED,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,GAAG,KAAC,SAAS,OAAK,KAAK,iBAAe,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAC5F,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { ChangeEvent } from 'react';\n\nimport {\n  CurrencyInput,\n  DateInput,\n  DateTimeInput,\n  Input,\n  NumberInput,\n  PhoneInput,\n  TextArea,\n  TimeInput\n} from '@pega/cosmos-react-core';\nimport type {\n  ComboBoxProps,\n  CurrencyInputProps,\n  DateInputProps,\n  DateTimeInputProps,\n  FormControlProps,\n  InputProps,\n  NumberInputProps,\n  OmitStrict,\n  PhoneInputProps,\n  TextAreaProps,\n  TimeInputProps\n} from '@pega/cosmos-react-core';\n\nimport BooleanControl from './BooleanControl';\n\nexport type FormControlPropsToOmit = keyof Pick<\n  FormControlProps,\n  'label' | 'labelHidden' | 'additionalInfo' | 'info' | 'required'\n>;\n\ntype ConstantTextConfig = {\n  format: 'Text';\n  props: OmitStrict<InputProps, FormControlPropsToOmit | 'onChange'> & {\n    onChange: (value: string | undefined) => void;\n  };\n};\n\ntype ConstantDecimalConfig = {\n  format: 'Decimal';\n  props: OmitStrict<NumberInputProps, FormControlPropsToOmit>;\n};\n\ntype ConstantIntegerConfig = {\n  format: 'Integer';\n  props: OmitStrict<\n    NumberInputProps,\n    FormControlPropsToOmit | 'showGroupSeparators' | 'showDecimal'\n  >;\n};\n\ntype ConstantPercentageConfig = {\n  format: 'Percentage';\n  props: OmitStrict<\n    NumberInputProps,\n    FormControlPropsToOmit | 'showGroupSeparators' | 'numberOfDecimals' | 'unit'\n  >;\n};\n\ntype ConstantTextAreaConfig = {\n  format: 'Text (paragraph)';\n  props: OmitStrict<TextAreaProps, FormControlPropsToOmit | 'onChange'> & {\n    onChange: (value: string | undefined) => void;\n  };\n};\n\ntype ConstantDateConfig = {\n  format: 'Date';\n  props: OmitStrict<DateInputProps, FormControlPropsToOmit>;\n};\n\ntype ConstantDateTimeConfig = {\n  format: 'DateTime';\n  props: OmitStrict<DateTimeInputProps, FormControlPropsToOmit>;\n};\n\ntype ConstantTimeConfig = {\n  format: 'Time';\n  props: OmitStrict<TimeInputProps, FormControlPropsToOmit>;\n};\n\nexport type BooleanLabels = 'true|false' | 'always|never';\n\nexport type ConstantBooleanConfig = {\n  format: 'Boolean';\n  props: OmitStrict<ComboBoxProps, FormControlPropsToOmit | 'value' | 'onChange'> & {\n    value?: boolean;\n    onChange: (value: boolean) => void;\n    booleanLabels?: BooleanLabels;\n  };\n};\n\ntype ConstantCurrencyConfig = {\n  format: 'Currency';\n  props: OmitStrict<CurrencyInputProps, FormControlPropsToOmit>;\n};\n\ntype ConstantPhoneConfig = {\n  format: 'Phone';\n  props: OmitStrict<PhoneInputProps, FormControlPropsToOmit | 'showCountryCode'>;\n};\n\nexport type ConstantControlConfig =\n  | ConstantTextConfig\n  | ConstantDecimalConfig\n  | ConstantIntegerConfig\n  | ConstantPercentageConfig\n  | ConstantTextAreaConfig\n  | ConstantDateConfig\n  | ConstantDateTimeConfig\n  | ConstantTimeConfig\n  | ConstantBooleanConfig\n  | ConstantCurrencyConfig\n  | ConstantPhoneConfig;\n\nconst ConstantControl = ({\n  format,\n  props,\n  required,\n  'data-testid': testId,\n  id: inputUid\n}: Pick<FormControlProps, 'id' | 'required' | 'disabled' | 'status' | 'readOnly'> & {\n  'data-testid'?: string;\n} & ConstantControlConfig) => {\n  let control: JSX.Element | null = null;\n\n  const { value } = props;\n  // Note: This is just a typeguard for the value prop.\n  if (typeof value === 'string' || value === undefined) {\n    if (format === 'Text') {\n      control = (\n        <Input\n          {...props}\n          data-testid={testId}\n          id={inputUid}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            props.onChange(e.target.value);\n          }}\n          required={required}\n        />\n      );\n    }\n\n    if (format === 'Text (paragraph)') {\n      control = (\n        <TextArea\n          {...props}\n          data-testid={testId}\n          id={inputUid}\n          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n            props.onChange(e.target.value);\n          }}\n          required={required}\n        />\n      );\n    }\n\n    if (format === 'Currency') {\n      control = <CurrencyInput {...props} data-testid={testId} id={inputUid} required={required} />;\n    }\n\n    if (format === 'Percentage') {\n      control = (\n        <NumberInput\n          {...props}\n          data-testid={testId}\n          id={inputUid}\n          showGroupSeparators={false}\n          numberOfDecimals={undefined}\n          unit='percent'\n          required={required}\n        />\n      );\n    }\n\n    if (format === 'Integer') {\n      control = (\n        <NumberInput\n          {...props}\n          data-testid={testId}\n          id={inputUid}\n          showGroupSeparators={false}\n          // Note: Getting single occurrence of callback when '.' is entered w/o showDecimal = false.\n          showDecimal={false}\n          required={required}\n        />\n      );\n    }\n\n    if (format === 'Decimal') {\n      control = <NumberInput {...props} data-testid={testId} id={inputUid} required={required} />;\n    }\n\n    if (format === 'Phone') {\n      control = (\n        <PhoneInput\n          {...props}\n          data-testid={testId}\n          id={inputUid}\n          required={required}\n          showCountryCode\n        />\n      );\n    }\n  }\n\n  if (format === 'Boolean') {\n    control = <BooleanControl {...props} data-testid={testId} id={inputUid} required={required} />;\n  }\n\n  // Note: This is just a typeguard for the value prop.\n  if (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    value instanceof Date ||\n    value === undefined\n  ) {\n    if (format === 'DateTime') {\n      control = <DateTimeInput {...props} data-testid={testId} id={inputUid} required={required} />;\n    }\n\n    if (format === 'Date') {\n      control = <DateInput {...props} data-testid={testId} id={inputUid} required={required} />;\n    }\n\n    if (format === 'Time') {\n      control = <TimeInput {...props} data-testid={testId} id={inputUid} required={required} />;\n    }\n  }\n  return control;\n};\n\nexport default ConstantControl;\n"]}

package/lib/components/DynamicInput/DynamicInput.d.ts

@@ -1,5 +1,5 @@
-import type { DynamicInputProps } from './DynamicInput.types';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<DynamicInputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+import type { ConstantComponentProps, DynamicInputProps } from './DynamicInput.types';
+declare const _default: (<T extends object = object, ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>, RuleProps extends object = object, FieldReferenceProps extends object = object, ExpressionProps extends object = object>(props: DynamicInputProps<T, ConstantProps, RuleProps, FieldReferenceProps, ExpressionProps>) => JSX.Element | null) & {
     getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["field", "menu", "control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;

package/lib/components/DynamicInput/DynamicInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,iBAAiB,EAAU,MAAM,sBAAsB,CAAC;;;;AAsRtE,wBAAiE"}
+{"version":3,"file":"DynamicInput.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAU,MAAM,sBAAsB,CAAC;0BAwI5F,CAAC,SAAS,MAAM,WAChB,aAAa,SAAS,sBAAsB,CAAC,CAAC,CAAC,8BAC/C,SAAS,SAAS,MAAM,WACxB,mBAAmB,SAAS,MAAM,WAClC,eAAe,SAAS,MAAM,kBAEvB,iBAAiB,CAAC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,eAAe,CAAC,KACxF,GAAG,CAAC,OAAO,GAAG,IAAI;;;AAEvB,wBAAiE"}

package/lib/components/DynamicInput/DynamicInput.js

@@ -1,20 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { ThemeOverride, CurrencyInput, DateInput, DateTimeInput, FormField, Input, NumberInput, PhoneInput, TextArea, TimeInput, useI18n, useTestIds, useUID, withTestIds, Icon, VisuallyHiddenText } from '@pega/cosmos-react-core';
-import { RuleSelect } from '../RuleSelect';
-import { FieldReferenceInput } from '../FieldReference';
+import { ThemeOverride, useI18n, useTestIds, useUID, Icon, VisuallyHiddenText, FormField, withTestIds } from '@pega/cosmos-react-core';
 import { StyledExpressionControl, StyledDynamicInput } from './DynamicInput.styles';
-import BooleanControl from './BooleanControl';
 import SourceButton from './SourceButton';
 import { getCurrentSource, getSourceIcon } from './utils';
 import { getDynamicInputTestIds } from './DynamicInput.test-ids';
-const DynamicInput = forwardRef(({ testId, label: labelProp, sources, onSourceChange, controls, required, hideSourceButton, ...restProps }, ref) => {
+const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp, sources, onSourceChange, controls, required, hideSourceButton, ...restProps }, ref) {
     const testIds = useTestIds(testId, getDynamicInputTestIds);
     const inputUid = useUID();
     const t = useI18n();
     const label = labelProp ?? t('value');
     const currentSource = getCurrentSource(sources);
-    const constantFormat = controls.constant?.format;
+    const constantFormat = controls.constant?.props.format;
     const sourceLabels = {
         Constant: t('constant_label', [
             constantFormat ? t(`dynamicInput_format_${constantFormat}`) : ''
@@ -31,72 +28,25 @@ const DynamicInput = forwardRef(({ testId, label: labelProp, sources, onSourceCh
     };
     let control = _jsx(_Fragment, { children: null });
     if (currentSource === 'Constant' && controls.constant) {
-        const { format, props } = controls.constant;
-        const { value } = props;
-        // Note: This is just a typeguard for the value prop.
-        if (typeof value === 'string' || value === undefined) {
-            if (format === 'Text') {
-                control = (_jsx(Input, { ...props, "data-testid": testIds.control, id: inputUid, onChange: (e) => {
-                        props.onChange(e.target.value);
-                    }, required: required }));
-            }
-            if (format === 'Text (paragraph)') {
-                control = (_jsx(TextArea, { ...props, "data-testid": testIds.control, id: inputUid, onChange: (e) => {
-                        props.onChange(e.target.value);
-                    }, required: required }));
-            }
-            if (format === 'Currency') {
-                control = (_jsx(CurrencyInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-            }
-            if (format === 'Percentage') {
-                control = (_jsx(NumberInput, { ...props, "data-testid": testIds.control, id: inputUid, showGroupSeparators: false, numberOfDecimals: undefined, unit: 'percent', required: required }));
-            }
-            if (format === 'Integer') {
-                control = (_jsx(NumberInput, { ...props, "data-testid": testIds.control, id: inputUid, showGroupSeparators: false, 
-                    // Note: Getting single occurrence of callback when '.' is entered w/o showDecimal = false.
-                    showDecimal: false, required: required }));
-            }
-            if (format === 'Decimal') {
-                control = (_jsx(NumberInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-            }
-            if (format === 'Phone') {
-                control = (_jsx(PhoneInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required, showCountryCode: true }));
-            }
-        }
-        if (format === 'Boolean') {
-            control = (_jsx(BooleanControl, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-        }
-        // Note: This is just a typeguard for the value prop.
-        if (typeof value === 'string' ||
-            typeof value === 'number' ||
-            value instanceof Date ||
-            value === undefined) {
-            if (format === 'DateTime') {
-                control = (_jsx(DateTimeInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-            }
-            if (format === 'Date') {
-                control = (_jsx(DateInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-            }
-            if (format === 'Time') {
-                control = (_jsx(TimeInput, { ...props, "data-testid": testIds.control, id: inputUid, required: required }));
-            }
-        }
+        const { props, component: Component } = controls.constant;
+        control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
     }
     else if (currentSource === 'Rule' && controls.rule) {
-        control = (_jsx(RuleSelect, { ...controls.rule.props, "data-testid": testIds.control, id: inputUid, required: required }));
+        const { props, component: Component } = controls.rule;
+        control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
     }
     else if (currentSource === 'Expression' && controls.expression) {
-        const ExpressionControl = controls.expression.component;
-        const controlProps = controls.expression.props;
-        control = (_jsx(StyledExpressionControl, { container: true, children: _jsx(ExpressionControl, { ...controlProps, "data-testid": testIds.control, id: inputUid, required: required }) }));
+        const { props, component: Component } = controls.expression;
+        control = (_jsx(StyledExpressionControl, { container: true, children: _jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }) }));
     }
     else if (currentSource === 'FieldReference' && controls.fieldReference) {
-        control = (_jsx(FieldReferenceInput, { ...controls.fieldReference.props, "data-testid": testIds.control, id: inputUid, required: required }));
+        const { props, component: Component } = controls.fieldReference;
+        control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
     }
-    return (_jsxs(ThemeOverride, { theme: { base: { 'icon-set': 'streamline' } }, children: [_jsx(FormField, { label: label, labelFor: inputUid, required: required, ...restProps, ref: ref, testId: testIds.field, children: _jsxs(StyledDynamicInput, { children: [_jsx(_Fragment, { children: hideSourceButton ? null : (_jsx(SourceButton, { testId: testIds.menu, sources: sources, constantFormat: controls.constant?.format, icon: currentSource
+    return (_jsxs(ThemeOverride, { theme: { base: { 'icon-set': 'streamline' } }, children: [_jsx(FormField, { label: label, labelFor: inputUid, required: required, ...restProps, ref: ref, testId: testIds.field, children: _jsxs(StyledDynamicInput, { children: [_jsx(_Fragment, { children: hideSourceButton ? null : (_jsx(SourceButton, { testId: testIds.menu, sources: sources, constantFormat: controls.constant?.props.format, icon: currentSource
                                     ? getSourceIcon({
                                         source: currentSource,
-                                        format: currentSource === 'Constant' ? controls.constant?.format : undefined
+                                        format: currentSource === 'Constant' ? controls.constant?.props.format : undefined
                                     })
                                     : undefined, menuItems: sources.map(config => {
                                     const type = config.type;

package/lib/components/DynamicInput/DynamicInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef } from 'react';\n\nimport {\n  ThemeOverride,\n  CurrencyInput,\n  DateInput,\n  DateTimeInput,\n  FormField,\n  Input,\n  NumberInput,\n  PhoneInput,\n  TextArea,\n  TimeInput,\n  useI18n,\n  useTestIds,\n  useUID,\n  withTestIds,\n  Icon,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { RuleSelect } from '../RuleSelect';\nimport { FieldReferenceInput } from '../FieldReference';\n\nimport type { DynamicInputProps, Source } from './DynamicInput.types';\nimport { StyledExpressionControl, StyledDynamicInput } from './DynamicInput.styles';\nimport BooleanControl from './BooleanControl';\nimport SourceButton from './SourceButton';\nimport { getCurrentSource, getSourceIcon } from './utils';\nimport { getDynamicInputTestIds } from './DynamicInput.test-ids';\n\nconst DynamicInput = forwardRef(\n  (\n    {\n      testId,\n      label: labelProp,\n      sources,\n      onSourceChange,\n      controls,\n      required,\n      hideSourceButton,\n      ...restProps\n    }: PropsWithoutRef<DynamicInputProps>,\n    ref: DynamicInputProps['ref']\n  ) => {\n    const testIds = useTestIds(testId, getDynamicInputTestIds);\n    const inputUid = useUID();\n    const t = useI18n();\n\n    const label = labelProp ?? t('value');\n    const currentSource = getCurrentSource(sources);\n    const constantFormat = controls.constant?.format;\n    const sourceLabels: { [key in Source]: string } = {\n      Constant: t('constant_label', [\n        constantFormat ? t(`dynamicInput_format_${constantFormat}`) : ''\n      ]),\n      Expression: t('expression_label'),\n      FieldReference: t('field_reference_label'),\n      Rule: t('rule_label')\n    };\n    const sourceDescriptions: { [key in Source]: string } = {\n      Constant: t('constant_description'),\n      Expression: t('expression_description'),\n      FieldReference: t('field_reference_description'),\n      Rule: t('rule_description')\n    };\n\n    let control: JSX.Element = <>{null}</>;\n\n    if (currentSource === 'Constant' && controls.constant) {\n      const { format, props } = controls.constant;\n      const { value } = props;\n      // Note: This is just a typeguard for the value prop.\n      if (typeof value === 'string' || value === undefined) {\n        if (format === 'Text') {\n          control = (\n            <Input\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                props.onChange(e.target.value);\n              }}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Text (paragraph)') {\n          control = (\n            <TextArea\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n                props.onChange(e.target.value);\n              }}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Currency') {\n          control = (\n            <CurrencyInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Percentage') {\n          control = (\n            <NumberInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              showGroupSeparators={false}\n              numberOfDecimals={undefined}\n              unit='percent'\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Integer') {\n          control = (\n            <NumberInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              showGroupSeparators={false}\n              // Note: Getting single occurrence of callback when '.' is entered w/o showDecimal = false.\n              showDecimal={false}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Decimal') {\n          control = (\n            <NumberInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Phone') {\n          control = (\n            <PhoneInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              required={required}\n              showCountryCode\n            />\n          );\n        }\n      }\n\n      if (format === 'Boolean') {\n        control = (\n          <BooleanControl\n            {...props}\n            data-testid={testIds.control}\n            id={inputUid}\n            required={required}\n          />\n        );\n      }\n\n      // Note: This is just a typeguard for the value prop.\n      if (\n        typeof value === 'string' ||\n        typeof value === 'number' ||\n        value instanceof Date ||\n        value === undefined\n      ) {\n        if (format === 'DateTime') {\n          control = (\n            <DateTimeInput\n              {...props}\n              data-testid={testIds.control}\n              id={inputUid}\n              required={required}\n            />\n          );\n        }\n\n        if (format === 'Date') {\n          control = (\n            <DateInput {...props} data-testid={testIds.control} id={inputUid} required={required} />\n          );\n        }\n\n        if (format === 'Time') {\n          control = (\n            <TimeInput {...props} data-testid={testIds.control} id={inputUid} required={required} />\n          );\n        }\n      }\n    } else if (currentSource === 'Rule' && controls.rule) {\n      control = (\n        <RuleSelect\n          {...controls.rule.props}\n          data-testid={testIds.control}\n          id={inputUid}\n          required={required}\n        />\n      );\n    } else if (currentSource === 'Expression' && controls.expression) {\n      const ExpressionControl = controls.expression.component;\n      const controlProps = controls.expression.props;\n\n      control = (\n        <StyledExpressionControl container>\n          <ExpressionControl\n            {...controlProps}\n            data-testid={testIds.control}\n            id={inputUid}\n            required={required}\n          />\n        </StyledExpressionControl>\n      );\n    } else if (currentSource === 'FieldReference' && controls.fieldReference) {\n      control = (\n        <FieldReferenceInput\n          {...controls.fieldReference.props}\n          data-testid={testIds.control}\n          id={inputUid}\n          required={required}\n        />\n      );\n    }\n\n    return (\n      <ThemeOverride theme={{ base: { 'icon-set': 'streamline' } }}>\n        <FormField\n          label={label}\n          labelFor={inputUid}\n          required={required}\n          {...restProps}\n          ref={ref}\n          testId={testIds.field}\n        >\n          <StyledDynamicInput>\n            <>\n              {hideSourceButton ? null : (\n                <SourceButton\n                  testId={testIds.menu}\n                  sources={sources}\n                  constantFormat={controls.constant?.format}\n                  icon={\n                    currentSource\n                      ? getSourceIcon({\n                          source: currentSource,\n                          format:\n                            currentSource === 'Constant' ? controls.constant?.format : undefined\n                        })\n                      : undefined\n                  }\n                  menuItems={sources.map(config => {\n                    const type = config.type;\n\n                    return {\n                      id: type,\n                      primary: sourceLabels[config.type],\n                      secondary: [sourceDescriptions[type]],\n                      visual: (\n                        <Icon\n                          name={getSourceIcon({\n                            source: type,\n                            format: type === 'Constant' ? constantFormat : undefined\n                          })}\n                          set='streamline'\n                        />\n                      ),\n                      selected: config.selected\n                    };\n                  })}\n                  onSourceChange={onSourceChange}\n                  aria-describedby={`${inputUid}-selected-source`}\n                />\n              )}\n            </>\n            {control}\n          </StyledDynamicInput>\n        </FormField>\n\n        <VisuallyHiddenText id={`${inputUid}-selected-source`}>\n          {currentSource ? t('selected_noun', [sourceLabels[currentSource]]) : ''}\n        </VisuallyHiddenText>\n      </ThemeOverride>\n    );\n  }\n);\n\nexport default withTestIds(DynamicInput, getDynamicInputTestIds);\n"]}
+{"version":3,"file":"DynamicInput.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  ThemeOverride,\n  useI18n,\n  useTestIds,\n  useUID,\n  Icon,\n  VisuallyHiddenText,\n  FormField,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { ConstantComponentProps, DynamicInputProps, Source } from './DynamicInput.types';\nimport { StyledExpressionControl, StyledDynamicInput } from './DynamicInput.styles';\nimport SourceButton from './SourceButton';\nimport { getCurrentSource, getSourceIcon } from './utils';\nimport { getDynamicInputTestIds } from './DynamicInput.test-ids';\n\nconst DynamicInput = forwardRef(function DynamicInput<\n  T extends object,\n  ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>,\n  RuleProps extends object = object,\n  FieldReferenceProps extends object = object,\n  ExpressionProps extends object = object\n>(\n  {\n    testId,\n    label: labelProp,\n    sources,\n    onSourceChange,\n    controls,\n    required,\n    hideSourceButton,\n    ...restProps\n  }: PropsWithoutRef<\n    DynamicInputProps<T, ConstantProps, RuleProps, FieldReferenceProps, ExpressionProps>\n  >,\n  ref: DynamicInputProps<T, ConstantProps, RuleProps, FieldReferenceProps, ExpressionProps>['ref']\n) {\n  const testIds = useTestIds(testId, getDynamicInputTestIds);\n  const inputUid = useUID();\n  const t = useI18n();\n\n  const label = labelProp ?? t('value');\n  const currentSource = getCurrentSource(sources);\n  const constantFormat = controls.constant?.props.format;\n  const sourceLabels: { [key in Source]: string } = {\n    Constant: t('constant_label', [\n      constantFormat ? t(`dynamicInput_format_${constantFormat}`) : ''\n    ]),\n    Expression: t('expression_label'),\n    FieldReference: t('field_reference_label'),\n    Rule: t('rule_label')\n  };\n  const sourceDescriptions: { [key in Source]: string } = {\n    Constant: t('constant_description'),\n    Expression: t('expression_description'),\n    FieldReference: t('field_reference_description'),\n    Rule: t('rule_description')\n  };\n\n  let control: JSX.Element = <>{null}</>;\n\n  if (currentSource === 'Constant' && controls.constant) {\n    const { props, component: Component } = controls.constant;\n    control = (\n      <Component {...props} id={inputUid} data-testid={testIds.control} required={required} />\n    );\n  } else if (currentSource === 'Rule' && controls.rule) {\n    const { props, component: Component } = controls.rule;\n    control = (\n      <Component {...props} id={inputUid} data-testid={testIds.control} required={required} />\n    );\n  } else if (currentSource === 'Expression' && controls.expression) {\n    const { props, component: Component } = controls.expression;\n\n    control = (\n      <StyledExpressionControl container>\n        <Component {...props} id={inputUid} data-testid={testIds.control} required={required} />\n      </StyledExpressionControl>\n    );\n  } else if (currentSource === 'FieldReference' && controls.fieldReference) {\n    const { props, component: Component } = controls.fieldReference;\n    control = (\n      <Component {...props} id={inputUid} data-testid={testIds.control} required={required} />\n    );\n  }\n\n  return (\n    <ThemeOverride theme={{ base: { 'icon-set': 'streamline' } }}>\n      <FormField\n        label={label}\n        labelFor={inputUid}\n        required={required}\n        {...restProps}\n        ref={ref}\n        testId={testIds.field}\n      >\n        <StyledDynamicInput>\n          <>\n            {hideSourceButton ? null : (\n              <SourceButton\n                testId={testIds.menu}\n                sources={sources}\n                constantFormat={controls.constant?.props.format}\n                icon={\n                  currentSource\n                    ? getSourceIcon({\n                        source: currentSource,\n                        format:\n                          currentSource === 'Constant' ? controls.constant?.props.format : undefined\n                      })\n                    : undefined\n                }\n                menuItems={sources.map(config => {\n                  const type = config.type;\n\n                  return {\n                    id: type,\n                    primary: sourceLabels[config.type],\n                    secondary: [sourceDescriptions[type]],\n                    visual: (\n                      <Icon\n                        name={getSourceIcon({\n                          source: type,\n                          format: type === 'Constant' ? constantFormat : undefined\n                        })}\n                        set='streamline'\n                      />\n                    ),\n                    selected: config.selected\n                  };\n                })}\n                onSourceChange={onSourceChange}\n                aria-describedby={`${inputUid}-selected-source`}\n              />\n            )}\n          </>\n          {control}\n        </StyledDynamicInput>\n      </FormField>\n\n      <VisuallyHiddenText id={`${inputUid}-selected-source`}>\n        {currentSource ? t('selected_noun', [sourceLabels[currentSource]]) : ''}\n      </VisuallyHiddenText>\n    </ThemeOverride>\n  );\n}) as <\n  T extends object = object,\n  ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>,\n  RuleProps extends object = object,\n  FieldReferenceProps extends object = object,\n  ExpressionProps extends object = object\n>(\n  props: DynamicInputProps<T, ConstantProps, RuleProps, FieldReferenceProps, ExpressionProps>\n) => JSX.Element | null;\n\nexport default withTestIds(DynamicInput, getDynamicInputTestIds);\n"]}

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

@@ -1,4 +1,3 @@
-export declare const StyledExpressionBuilderButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionControl: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDynamicInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=DynamicInput.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B,oNAAmB,CAAC;AAC9D,eAAO,MAAM,uBAAuB,kNAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB,yGAoD7B,CAAC"}
+{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,uBAAuB,kNAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB,yGAsE9B,CAAC"}

package/lib/components/DynamicInput/DynamicInput.styles.js

@@ -1,60 +1,67 @@
 import styled, { css } from 'styled-components';
-import { Button, Flex, StyledFormControl, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, StyledFormControl, StyledGrid, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
-export const StyledExpressionBuilderButton = styled(Button) ``;
+import { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';
+import { StyledFieldReferenceInput, StyledFieldReferencePicker } from '../FieldReference/FieldReference.styles';
 export const StyledExpressionControl = styled(Flex) ``;
-export const StyledDynamicInput = styled.div(({ theme }) => {
+export const StyledDynamicInput = styled.div(({ theme: { base: { palette: { 'foreground-color': foregroundColor }, 'content-width': contentWidth }, components: { 'form-control': { 'border-color': formControlBorderColor } } } }) => {
     return css `
-    display: flex;
+      display: flex;
 
-    ${StyledFormControl} {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      width: 100%;
-    }
+      ${StyledInputTree} {
+        margin-inline-start: -2.5rem;
+      }
 
-    ${StyledExpressionControl} {
-      position: relative;
-      z-index: 1;
+      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {
+        padding: 0;
+      }
 
-      .react-codemirror2 {
-        min-height: 0;
+      ${StyledContentWrapper} {
+        padding-block-start: 0;
       }
 
-      .CodeMirror,
-      .CodeMirror-wrap {
-        border-color: ${theme.components['form-control']['border-color']};
+      ${StyledFormControl} {
         border-start-start-radius: 0;
         border-end-start-radius: 0;
+        width: 100%;
       }
 
-      ${StyledExpressionBuilderButton} {
-        position: absolute;
-        z-index: 2;
-        inset-block-start: 0.0625rem;
-        inset-inline-end: 0.0625rem;
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
+      ${StyledExpressionControl} {
+        position: relative;
+        z-index: 1;
+
+        .react-codemirror2 {
+          min-height: 0;
+        }
+
+        .CodeMirror,
+        .CodeMirror-wrap {
+          border-color: ${formControlBorderColor};
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+        }
       }
-    }
-
-    ${StyledMenuButton} {
-      z-index: 0;
-      border-inline-end: 0;
-      border-color: ${theme.components['form-control']['border-color']};
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      color: ${theme.base.palette['foreground-color']};
-      &:focus {
-        z-index: 2;
+
+      ${StyledMenuButton} {
+        z-index: 0;
+        border-inline-end: 0;
+        border-color: ${formControlBorderColor};
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        align-self: flex-start;
+        color: ${foregroundColor};
+        &:focus {
+          z-index: 2;
+        }
       }
-    }
 
-    ${StyledMenuButton} + * {
-      flex-grow: 1;
-      z-index: 1;
-    }
-  `;
+      ${StyledMenuButton} + * {
+        flex-grow: 1;
+        z-index: 1;
+        width: 100%;
+        min-width: ${contentWidth.xs};
+      }
+    `;
 });
 StyledDynamicInput.defaultProps = defaultThemeProp;
 //# sourceMappingURL=DynamicInput.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAC9D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;;MAGN,iBAAiB;;;;;;MAMjB,uBAAuB;;;;;;;;;;wBAUL,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;QAKhE,6BAA6B;;;;;;;;;;MAU/B,gBAAgB;;;sBAGA,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;eAGvD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;MAM/C,gBAAgB;;;;GAInB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, Flex, StyledFormControl, defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nexport const StyledExpressionBuilderButton = styled(Button)``;\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div(({ theme }) => {\n  return css`\n    display: flex;\n\n    ${StyledFormControl} {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      width: 100%;\n    }\n\n    ${StyledExpressionControl} {\n      position: relative;\n      z-index: 1;\n\n      .react-codemirror2 {\n        min-height: 0;\n      }\n\n      .CodeMirror,\n      .CodeMirror-wrap {\n        border-color: ${theme.components['form-control']['border-color']};\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      ${StyledExpressionBuilderButton} {\n        position: absolute;\n        z-index: 2;\n        inset-block-start: 0.0625rem;\n        inset-inline-end: 0.0625rem;\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    ${StyledMenuButton} {\n      z-index: 0;\n      border-inline-end: 0;\n      border-color: ${theme.components['form-control']['border-color']};\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      color: ${theme.base.palette['foreground-color']};\n      &:focus {\n        z-index: 2;\n      }\n    }\n\n    ${StyledMenuButton} + * {\n      flex-grow: 1;\n      z-index: 1;\n    }\n  `;\n});\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AACnG,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,eAAe,EAAE,YAAY,EAC9B,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,sBAAsB,EAAE,EAC3D,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;QAGN,eAAe;;;;QAIf,0BAA0B,MAAM,yBAAyB,MAAM,UAAU;;;;QAIzE,oBAAoB;;;;QAIpB,iBAAiB;;;;;;QAMjB,uBAAuB;;;;;;;;;;0BAUL,sBAAsB;;;;;;QAMxC,gBAAgB;;;wBAGA,sBAAsB;;;;iBAI7B,eAAe;;;;;;QAMxB,gBAAgB;;;;qBAIH,YAAY,CAAC,EAAE;;KAE/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Flex, StyledFormControl, StyledGrid, defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nimport { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';\nimport {\n  StyledFieldReferenceInput,\n  StyledFieldReferencePicker\n} from '../FieldReference/FieldReference.styles';\n\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        'content-width': contentWidth\n      },\n      components: {\n        'form-control': { 'border-color': formControlBorderColor }\n      }\n    }\n  }) => {\n    return css`\n      display: flex;\n\n      ${StyledInputTree} {\n        margin-inline-start: -2.5rem;\n      }\n\n      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {\n        padding: 0;\n      }\n\n      ${StyledContentWrapper} {\n        padding-block-start: 0;\n      }\n\n      ${StyledFormControl} {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n        width: 100%;\n      }\n\n      ${StyledExpressionControl} {\n        position: relative;\n        z-index: 1;\n\n        .react-codemirror2 {\n          min-height: 0;\n        }\n\n        .CodeMirror,\n        .CodeMirror-wrap {\n          border-color: ${formControlBorderColor};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n        }\n      }\n\n      ${StyledMenuButton} {\n        z-index: 0;\n        border-inline-end: 0;\n        border-color: ${formControlBorderColor};\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        align-self: flex-start;\n        color: ${foregroundColor};\n        &:focus {\n          z-index: 2;\n        }\n      }\n\n      ${StyledMenuButton} + * {\n        flex-grow: 1;\n        z-index: 1;\n        width: 100%;\n        min-width: ${contentWidth.xs};\n      }\n    `;\n  }\n);\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DynamicInput/DynamicInput.types.d.ts

@@ -1,9 +1,15 @@
-import type { ComponentProps, ComponentType, Ref } from 'react';
-import type { FormFieldProps, InputProps, TextAreaProps, CurrencyInputProps, NumberInputProps, PhoneInputProps, DateTimeInputProps, DateInputProps, TimeInputProps, TestIdProp, OmitStrict, FormControlProps, ComboBoxProps } from '@pega/cosmos-react-core';
-import type { CodeEditor } from '../ExpressionBuilder';
-import type { RuleSelectProps } from '../RuleSelect';
-import type { FieldReferenceInputProps } from '../FieldReference';
-export type Source = 'Constant' | 'Rule' | 'FieldReference' | 'Expression';
+import type { ComponentType, Ref } from 'react';
+import type { FormFieldProps, InputProps, TextAreaProps, CurrencyInputProps, NumberInputProps, PhoneInputProps, DateTimeInputProps, DateInputProps, TimeInputProps, TestIdProp, OmitStrict, FormControlProps, DeferInfer } from '@pega/cosmos-react-core';
+export type ConstantSourceType = 'Constant';
+export type RuleSourceType = 'Rule';
+export type FieldReferenceSourceType = 'FieldReference';
+export type ExpressionSourceType = 'Expression';
+export type VariableSourceType = 'Variable';
+export type Source = ConstantSourceType | RuleSourceType | FieldReferenceSourceType | ExpressionSourceType;
+export type SourceConfig = {
+    type: Source;
+    selected?: boolean;
+}[];
 export type ConstantValueTypeMap = {
     Text: InputProps['value'];
     'Text (paragraph)': TextAreaProps['value'];
@@ -18,76 +24,15 @@ export type ConstantValueTypeMap = {
     Time: TimeInputProps['value'];
 };
 export type ConstantFormat = keyof ConstantValueTypeMap;
-export type SourceConfig = {
-    type: Source;
-    selected?: boolean;
-};
-export type ExpressionControlConfig = {
-    component: ComponentType<ComponentProps<typeof CodeEditor>>;
-    props: ComponentProps<typeof CodeEditor>;
-};
-export type FormControlPropsToOmit = Pick<FormControlProps, 'label' | 'labelHidden' | 'additionalInfo' | 'info' | 'required' | 'status' | 'readOnly' | 'disabled'>;
-type ConstantTextConfig = {
-    format: 'Text';
-    props: OmitStrict<InputProps, keyof FormControlPropsToOmit | 'onChange'> & {
-        onChange: (value: string | undefined) => void;
-    };
-};
-type ConstantDecimalConfig = {
-    format: 'Decimal';
-    props: OmitStrict<NumberInputProps, keyof FormControlPropsToOmit>;
-};
-type ConstantIntegerConfig = {
-    format: 'Integer';
-    props: OmitStrict<NumberInputProps, keyof FormControlPropsToOmit | 'showGroupSeparators' | 'showDecimal'>;
-};
-type ConstantPercentageConfig = {
-    format: 'Percentage';
-    props: OmitStrict<NumberInputProps, keyof FormControlPropsToOmit | 'showGroupSeparators' | 'numberOfDecimals' | 'unit'>;
-};
-type ConstantTextAreaConfig = {
-    format: 'Text (paragraph)';
-    props: OmitStrict<TextAreaProps, keyof FormControlPropsToOmit | 'onChange'> & {
-        onChange: (value: string | undefined) => void;
-    };
-};
-type ConstantDateConfig = {
-    format: 'Date';
-    props: OmitStrict<DateInputProps, keyof FormControlPropsToOmit>;
-};
-type ConstantDateTimeConfig = {
-    format: 'DateTime';
-    props: OmitStrict<DateTimeInputProps, keyof FormControlPropsToOmit>;
-};
-type ConstantTimeConfig = {
-    format: 'Time';
-    props: OmitStrict<TimeInputProps, keyof FormControlPropsToOmit>;
-};
-export type BooleanLabels = 'true|false' | 'always|never';
-export type ConstantBooleanConfig = {
-    format: 'Boolean';
-    props: OmitStrict<ComboBoxProps, keyof FormControlPropsToOmit | 'value' | 'onChange'> & {
-        value?: boolean;
-        onChange: (value: boolean) => void;
-        booleanLabels?: BooleanLabels;
-    };
-};
-type ConstantCurrencyConfig = {
-    format: 'Currency';
-    props: OmitStrict<CurrencyInputProps, keyof FormControlPropsToOmit>;
-};
-type ConstantPhoneConfig = {
-    format: 'Phone';
-    props: OmitStrict<PhoneInputProps, keyof FormControlPropsToOmit | 'showCountryCode'>;
-};
-export type ConstantControlConfig = ConstantTextConfig | ConstantDecimalConfig | ConstantIntegerConfig | ConstantPercentageConfig | ConstantTextAreaConfig | ConstantDateConfig | ConstantDateTimeConfig | ConstantTimeConfig | ConstantBooleanConfig | ConstantCurrencyConfig | ConstantPhoneConfig;
-export type RuleControlConfig = {
-    props: RuleSelectProps;
-};
-export type FieldReferenceConfig = {
-    props: OmitStrict<FieldReferenceInputProps, 'label' | 'labelHidden' | 'status' | 'info' | 'readOnly' | 'additionalInfo'>;
-};
-export interface DynamicInputProps extends TestIdProp, Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {
+export type FormControlPropsToOmit = Pick<FormControlProps, 'label' | 'labelHidden' | 'additionalInfo' | 'info' | 'required' | 'status' | 'readOnly' | 'disabled' | 'value' | 'defaultValue'>;
+export type ConstantComponentProps<T> = OmitStrict<FormControlProps, keyof FormControlPropsToOmit> & {
+    format?: ConstantFormat;
+} & T;
+type ComponentConfig<P> = {
+    component: ComponentType<P>;
+    props: DeferInfer<P>;
+};
+export interface DynamicInputProps<T extends object = object, ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>, RuleProps extends object = object, FieldReferenceProps extends object = object, ExpressionProps extends object = object> extends TestIdProp, Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {
     /**
      * The accessible  and visual field label.
      * When used as an independent control label should represent the data field.
@@ -99,15 +44,15 @@ export interface DynamicInputProps extends TestIdProp, Pick<FormFieldProps, 'lab
      * The form control displayed on the RHS
      */
     controls: {
-        constant?: ConstantControlConfig;
-        rule?: RuleControlConfig;
-        fieldReference?: FieldReferenceConfig;
-        expression?: ExpressionControlConfig;
+        constant?: ComponentConfig<ConstantProps>;
+        rule?: ComponentConfig<RuleProps>;
+        fieldReference?: ComponentConfig<FieldReferenceProps>;
+        expression?: ComponentConfig<ExpressionProps>;
     };
     /**
      * Methods to source a value from.
      */
-    sources: SourceConfig[];
+    sources: SourceConfig;
     /**
      * Called when the source method changes.
      */

package/lib/components/DynamicInput/DynamicInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DynamicInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/DynamicInput/DynamicInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.types.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentType, Ref } from 'react';\n\nimport type {\n  FormFieldProps,\n  InputProps,\n  TextAreaProps,\n  CurrencyInputProps,\n  NumberInputProps,\n  PhoneInputProps,\n  DateTimeInputProps,\n  DateInputProps,\n  TimeInputProps,\n  TestIdProp,\n  OmitStrict,\n  FormControlProps,\n  ComboBoxProps\n} from '@pega/cosmos-react-core';\n\nimport type { CodeEditor } from '../ExpressionBuilder';\nimport type { RuleSelectProps } from '../RuleSelect';\nimport type { FieldReferenceInputProps } from '../FieldReference';\n\nexport type Source = 'Constant' | 'Rule' | 'FieldReference' | 'Expression'; // Input type options\n\nexport type ConstantValueTypeMap = {\n  Text: InputProps['value'];\n  'Text (paragraph)': TextAreaProps['value'];\n  Boolean: boolean;\n  Currency: CurrencyInputProps['value'];\n  Percentage: NumberInputProps['value'];\n  Integer: NumberInputProps['value'];\n  Decimal: NumberInputProps['value'];\n  Phone: PhoneInputProps['value'];\n  DateTime: DateTimeInputProps['value'];\n  Date: DateInputProps['value'];\n  Time: TimeInputProps['value'];\n};\n\nexport type ConstantFormat = keyof ConstantValueTypeMap;\n\nexport type SourceConfig = { type: Source; selected?: boolean };\n\nexport type ExpressionControlConfig = {\n  component: ComponentType<ComponentProps<typeof CodeEditor>>;\n  props: ComponentProps<typeof CodeEditor>;\n};\n\nexport type FormControlPropsToOmit = Pick<\n  FormControlProps,\n  | 'label'\n  | 'labelHidden'\n  | 'additionalInfo'\n  | 'info'\n  | 'required'\n  | 'status'\n  | 'readOnly'\n  | 'disabled'\n>;\n\ntype ConstantTextConfig = {\n  format: 'Text';\n  props: OmitStrict<InputProps, keyof FormControlPropsToOmit | 'onChange'> & {\n    onChange: (value: string | undefined) => void;\n  };\n};\n\ntype ConstantDecimalConfig = {\n  format: 'Decimal';\n  props: OmitStrict<NumberInputProps, keyof FormControlPropsToOmit>;\n};\n\ntype ConstantIntegerConfig = {\n  format: 'Integer';\n  props: OmitStrict<\n    NumberInputProps,\n    keyof FormControlPropsToOmit | 'showGroupSeparators' | 'showDecimal'\n  >;\n};\n\ntype ConstantPercentageConfig = {\n  format: 'Percentage';\n  props: OmitStrict<\n    NumberInputProps,\n    keyof FormControlPropsToOmit | 'showGroupSeparators' | 'numberOfDecimals' | 'unit'\n  >;\n};\n\ntype ConstantTextAreaConfig = {\n  format: 'Text (paragraph)';\n  props: OmitStrict<TextAreaProps, keyof FormControlPropsToOmit | 'onChange'> & {\n    onChange: (value: string | undefined) => void;\n  };\n};\n\ntype ConstantDateConfig = {\n  format: 'Date';\n  props: OmitStrict<DateInputProps, keyof FormControlPropsToOmit>;\n};\n\ntype ConstantDateTimeConfig = {\n  format: 'DateTime';\n  props: OmitStrict<DateTimeInputProps, keyof FormControlPropsToOmit>;\n};\n\ntype ConstantTimeConfig = {\n  format: 'Time';\n  props: OmitStrict<TimeInputProps, keyof FormControlPropsToOmit>;\n};\n\nexport type BooleanLabels = 'true|false' | 'always|never';\n\nexport type ConstantBooleanConfig = {\n  format: 'Boolean';\n  props: OmitStrict<ComboBoxProps, keyof FormControlPropsToOmit | 'value' | 'onChange'> & {\n    value?: boolean;\n    onChange: (value: boolean) => void;\n    booleanLabels?: BooleanLabels;\n  };\n};\n\ntype ConstantCurrencyConfig = {\n  format: 'Currency';\n  props: OmitStrict<CurrencyInputProps, keyof FormControlPropsToOmit>;\n};\n\ntype ConstantPhoneConfig = {\n  format: 'Phone';\n  props: OmitStrict<PhoneInputProps, keyof FormControlPropsToOmit | 'showCountryCode'>;\n};\n\nexport type ConstantControlConfig =\n  | ConstantTextConfig\n  | ConstantDecimalConfig\n  | ConstantIntegerConfig\n  | ConstantPercentageConfig\n  | ConstantTextAreaConfig\n  | ConstantDateConfig\n  | ConstantDateTimeConfig\n  | ConstantTimeConfig\n  | ConstantBooleanConfig\n  | ConstantCurrencyConfig\n  | ConstantPhoneConfig;\n\nexport type RuleControlConfig = {\n  props: RuleSelectProps;\n};\n\nexport type FieldReferenceConfig = {\n  props: OmitStrict<\n    FieldReferenceInputProps,\n    'label' | 'labelHidden' | 'status' | 'info' | 'readOnly' | 'additionalInfo'\n  >;\n};\n\n// ## (DynamicInput) Top level props for the component.\nexport interface DynamicInputProps\n  extends TestIdProp,\n    Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {\n  /**\n   * The accessible  and visual field label.\n   * When used as an independent control label should represent the data field.\n   * When used in combination with another LHS element the default \"Value\" may be sufficient.\n   * @default \"Value\"\n   */\n  label?: string;\n\n  /**\n   * The form control displayed on the RHS\n   */\n  controls: {\n    constant?: ConstantControlConfig;\n    rule?: RuleControlConfig;\n    fieldReference?: FieldReferenceConfig;\n    expression?: ExpressionControlConfig;\n  };\n\n  /**\n   * Methods to source a value from.\n   */\n  sources: SourceConfig[];\n\n  /**\n   * Called when the source method changes.\n   */\n  onSourceChange: (source: Source) => void;\n\n  /**\n   * Ref to the component's root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n\n  /**\n   * Hides source button.\n   */\n  hideSourceButton?: boolean;\n}\n"]}
+{"version":3,"file":"DynamicInput.types.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType, Ref } from 'react';\n\nimport type {\n  FormFieldProps,\n  InputProps,\n  TextAreaProps,\n  CurrencyInputProps,\n  NumberInputProps,\n  PhoneInputProps,\n  DateTimeInputProps,\n  DateInputProps,\n  TimeInputProps,\n  TestIdProp,\n  OmitStrict,\n  FormControlProps,\n  DeferInfer\n} from '@pega/cosmos-react-core';\n\nexport type ConstantSourceType = 'Constant';\nexport type RuleSourceType = 'Rule';\nexport type FieldReferenceSourceType = 'FieldReference';\nexport type ExpressionSourceType = 'Expression';\nexport type VariableSourceType = 'Variable';\n\n// Input type options\nexport type Source =\n  | ConstantSourceType\n  | RuleSourceType\n  | FieldReferenceSourceType\n  | ExpressionSourceType;\n\nexport type SourceConfig = { type: Source; selected?: boolean }[];\n\nexport type ConstantValueTypeMap = {\n  Text: InputProps['value'];\n  'Text (paragraph)': TextAreaProps['value'];\n  Boolean: boolean;\n  Currency: CurrencyInputProps['value'];\n  Percentage: NumberInputProps['value'];\n  Integer: NumberInputProps['value'];\n  Decimal: NumberInputProps['value'];\n  Phone: PhoneInputProps['value'];\n  DateTime: DateTimeInputProps['value'];\n  Date: DateInputProps['value'];\n  Time: TimeInputProps['value'];\n};\n\nexport type ConstantFormat = keyof ConstantValueTypeMap;\n\nexport type FormControlPropsToOmit = Pick<\n  FormControlProps,\n  | 'label'\n  | 'labelHidden'\n  | 'additionalInfo'\n  | 'info'\n  | 'required'\n  | 'status'\n  | 'readOnly'\n  | 'disabled'\n  | 'value'\n  | 'defaultValue'\n>;\n\nexport type ConstantComponentProps<T> = OmitStrict<\n  FormControlProps,\n  keyof FormControlPropsToOmit\n> & {\n  format?: ConstantFormat;\n} & T;\n\ntype ComponentConfig<P> = {\n  component: ComponentType<P>;\n  props: DeferInfer<P>;\n};\n\n// ## (DynamicInput) Top level props for the component.\nexport interface DynamicInputProps<\n  T extends object = object,\n  ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>,\n  RuleProps extends object = object,\n  FieldReferenceProps extends object = object,\n  ExpressionProps extends object = object\n> extends TestIdProp,\n    Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {\n  /**\n   * The accessible  and visual field label.\n   * When used as an independent control label should represent the data field.\n   * When used in combination with another LHS element the default \"Value\" may be sufficient.\n   * @default \"Value\"\n   */\n  label?: string;\n\n  /**\n   * The form control displayed on the RHS\n   */\n  controls: {\n    constant?: ComponentConfig<ConstantProps>;\n    rule?: ComponentConfig<RuleProps>;\n    fieldReference?: ComponentConfig<FieldReferenceProps>;\n    expression?: ComponentConfig<ExpressionProps>;\n  };\n\n  /**\n   * Methods to source a value from.\n   */\n  sources: SourceConfig;\n\n  /**\n   * Called when the source method changes.\n   */\n  onSourceChange: (source: Source) => void;\n\n  /**\n   * Ref to the component's root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n\n  /**\n   * Hides source button.\n   */\n  hideSourceButton?: boolean;\n}\n"]}

package/lib/components/DynamicInput/index.d.ts

@@ -1,3 +1,5 @@
 export { default as DynamicInput } from './DynamicInput';
 export * from './DynamicInput.types';
+export { default as ConstantControl } from './ConstantControl';
+export type { ConstantControlConfig } from './ConstantControl';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/DynamicInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}