@pega/react-sdk-components 23.1.10 → 23.1.12

package/lib/components/field/DateTime/DateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { KeyboardDateTimePicker } from '@material-ui/pickers';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface DateTimeProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on DateTime here\n}\n\nexport default function DateTime(props: DateTimeProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps()[\"value\"];\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant=\"stacked\" />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\n  }\n\n  const handleChange = (date) => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = (date) => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <KeyboardDateTimePicker\n      variant=\"inline\"\n      inputVariant=\"outlined\"\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size=\"small\"\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onAccept={handleAccept}\n      data-test-id={testId}\n    />\n  );\n}\n"]}
+{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { KeyboardDateTimePicker } from '@material-ui/pickers';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface DateTimeProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on DateTime here\n}\n\nexport default function DateTime(props: DateTimeProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\n  }\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <KeyboardDateTimePicker\n      variant='inline'\n      inputVariant='outlined'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onAccept={handleAccept}\n      data-test-id={testId}\n    />\n  );\n}\n"]}

package/lib/components/field/Decimal/Decimal.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import type { PConnFieldProps } from '../../../types/PConnProps';
+import { PConnFieldProps } from '../../../types/PConnProps';
 interface DecimalProps extends PConnFieldProps {
     currencyISOCode?: string;
     decimalPrecision?: number;
     showGroupSeparators?: string;
+    formatter?: string;
 }
 export default function Decimal(props: DecimalProps): JSX.Element;
 export {};

package/lib/components/field/Decimal/Decimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIjE,UAAU,YAAa,SAAQ,eAAe;IAE5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eAkGlD"}
+{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAM5D,UAAU,YAAa,SAAQ,eAAe;IAE5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eAoFlD"}

package/lib/components/field/Decimal/Decimal.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
 import handleEvent from '../../helpers/event-utils';
@@ -9,45 +9,35 @@ export default function Decimal(props) {
     const FieldValueList = getComponentFromMap('FieldValueList');
     const { getPConnect, label, required, disabled, value = '', validatemessage, status, 
     /* onChange, onBlur, */
-    readOnly, helperText, displayMode, hideLabel, currencyISOCode = 'USD', decimalPrecision = 2, showGroupSeparators = true, testId } = props;
+    readOnly, helperText, displayMode, hideLabel, currencyISOCode = 'USD', decimalPrecision = 2, showGroupSeparators = true, testId, placeholder, formatter } = props;
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
-    const propName = pConn.getStateProps()["value"];
+    const propName = pConn.getStateProps().value;
     const helperTextToDisplay = validatemessage || helperText;
-    const [decValue, setDecimalvalue] = useState('');
-    const [theCurrDec, setCurrDec] = useState('.');
-    const [theCurrSep, setCurrSep] = useState(',');
-    useEffect(() => {
-        const theSymbols = getCurrencyCharacters(currencyISOCode);
-        setCurrDec(theSymbols.theDecimalIndicator);
-        setCurrSep(theSymbols.theDigitGroupSeparator);
-    }, [currencyISOCode]);
-    useEffect(() => {
-        setDecimalvalue(value.toString());
-    }, [value]);
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    const theCurrDec = theSymbols.theDecimalIndicator;
+    const theCurrSep = theSymbols.theDigitGroupSeparator;
+    const theCurrSym = theSymbols.theCurrencySymbol;
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    let formattedValue = '';
+    if (formatter === 'Currency') {
+        formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
+    }
+    else {
+        formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    }
     if (displayMode === 'LABELS_LEFT') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: "stacked" });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
     }
-    let readOnlyProp = {}; // Note: empty if NOT ReadOnly
-    if (readOnly) {
-        readOnlyProp = { readOnly: true };
-    }
-    let testProp = {};
-    testProp = {
+    const testProp = {
         'data-test-id': testId
     };
-    function decimalOnChange(event) {
-        // update internal value
-        setDecimalvalue(event?.target?.value);
-    }
     function decimalOnBlur(event, inValue) {
         handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
     }
-    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: "", size: "small", required: required, disabled: disabled, onChange: decimalOnChange, onBlur: !readOnly ? decimalOnBlur : undefined, error: status === 'error', label: label, value: decValue, type: "text", outputFormat: "number", textAlign: "left", InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: decValue } }, currencySymbol: "", decimalCharacter: theCurrDec, digitGroupSeparator: showGroupSeparators ? theCurrSep : '', decimalPlaces: decimalPrecision }));
+    return (_jsx(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', required: required, disabled: disabled, error: status === 'error', label: label, value: value, readOnly: !!readOnly, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { inputProps: { ...testProp } }, currencySymbol: readOnly && formatter === 'Currency' ? theCurrSym : '', decimalCharacter: theCurrDec, digitGroupSeparator: showGroupSeparators ? theCurrSep : '', decimalPlaces: decimalPrecision, onBlur: !readOnly ? decimalOnBlur : undefined }));
 }
 //# sourceMappingURL=Decimal.js.map

package/lib/components/field/Decimal/Decimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\ninterface DecimalProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Decimal here\n  currencyISOCode?: string;\n  decimalPrecision?: number;\n  showGroupSeparators?: string;\n}\n\nexport default function Decimal(props: DecimalProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    helperText,\n    displayMode,\n    hideLabel,\n    currencyISOCode = 'USD',\n    decimalPrecision = 2,\n    showGroupSeparators = true,\n    testId\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps()[\"value\"];\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const [decValue, setDecimalvalue] = useState('');\n  const [theCurrDec, setCurrDec] = useState('.');\n  const [theCurrSep, setCurrSep] = useState(',');\n\n  useEffect(() => {\n    const theSymbols = getCurrencyCharacters(currencyISOCode);\n    setCurrDec(theSymbols.theDecimalIndicator);\n    setCurrSep(theSymbols.theDigitGroupSeparator);\n  }, [currencyISOCode]);\n\n  useEffect(() => {\n    setDecimalvalue(value.toString());\n  }, [value]);\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant=\"stacked\" />;\n  }\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  function decimalOnChange(event) {\n    // update internal value\n    setDecimalvalue(event?.target?.value);\n  }\n\n  function decimalOnBlur(event, inValue) {\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=\"\"\n      size=\"small\"\n      required={required}\n      disabled={disabled}\n      onChange={decimalOnChange}\n      onBlur={!readOnly ? decimalOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={decValue}\n      type=\"text\"\n      outputFormat=\"number\"\n      textAlign=\"left\"\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}\n      currencySymbol=\"\"\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalPlaces={decimalPrecision}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"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","sourcesContent":["import CurrencyTextField from '@unicef/material-ui-currency-textfield';\n\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\n/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,\nas per the locale.\n*/\n\ninterface DecimalProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Decimal here\n  currencyISOCode?: string;\n  decimalPrecision?: number;\n  showGroupSeparators?: string;\n  formatter?: string;\n}\n\nexport default function Decimal(props: DecimalProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    helperText,\n    displayMode,\n    hideLabel,\n    currencyISOCode = 'USD',\n    decimalPrecision = 2,\n    showGroupSeparators = true,\n    testId,\n    placeholder,\n    formatter\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const theSymbols = getCurrencyCharacters(currencyISOCode);\n  const theCurrDec = theSymbols.theDecimalIndicator;\n  const theCurrSep = theSymbols.theDigitGroupSeparator;\n  const theCurrSym = theSymbols.theCurrencySymbol;\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n\n  let formattedValue = '';\n  if (formatter === 'Currency') {\n    formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);\n  } else {\n    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);\n  }\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  const testProp = {\n    'data-test-id': testId\n  };\n\n  function decimalOnBlur(event, inValue) {\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      readOnly={!!readOnly}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ inputProps: { ...testProp } }}\n      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalPlaces={decimalPrecision}\n      onBlur={!readOnly ? decimalOnBlur : undefined}\n    />\n  );\n}\n"]}

package/lib/components/field/Decimal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Decimal';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Decimal';\n"]}

package/lib/components/field/Dropdown/Dropdown.d.ts

@@ -1,3 +1,15 @@
 /// <reference types="react" />
-export default function Dropdown(props: any): JSX.Element | null;
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface DropdownProps extends PConnFieldProps {
+    datasource?: any[];
+    onRecordChange?: any;
+    fieldMetadata?: any;
+    listType: string;
+    deferDatasource?: boolean;
+    datasourceMetadata?: any;
+    parameters?: any;
+    columns: any[];
+}
+export default function Dropdown(props: DropdownProps): JSX.Element | null;
+export {};
 //# sourceMappingURL=Dropdown.d.ts.map

package/lib/components/field/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AA0BA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,sBAmHrC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAwC5D,UAAU,aAAc,SAAQ,eAAe;IAE7C,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sBA4KpD"}

package/lib/components/field/Dropdown/Dropdown.js

@@ -1,43 +1,115 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
+import isDeepEqual from 'fast-deep-equal/react';
 import Utils from '../../helpers/utils';
+import { getDataPage } from '../../helpers/data_page';
 import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
-// Can't use DropdownProps with 8.23 until getLocaleRuleNameFromKeys is NOT private
-// interface DropdownProps extends PConnFieldProps {
-//   // If any, enter additional props that only exist on Dropdown here
-//   datasource?: Array<any>,
-//   onRecordChange?: any,
-//   fieldMetadata?: any,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   listType: string,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   additionalProps?: object
-// }
-export default function Dropdown(props /* : DropdownProps */) {
+const flattenParameters = (params = {}) => {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+        const { name, value: theVal } = params[key];
+        flatParams[name] = theVal;
+    });
+    return flatParams;
+};
+const preProcessColumns = columnList => {
+    return columnList.map(col => {
+        const tempColObj = { ...col };
+        tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+        return tempColObj;
+    });
+};
+const getDisplayFieldsMetaData = columnList => {
+    const displayColumns = columnList.filter(col => col.display === 'true');
+    const metaDataObj = { key: '', primary: '', secondary: [] };
+    const keyCol = columnList.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (let index = 0; index < displayColumns.length; index += 1) {
+        if (displayColumns[index].primary === 'true') {
+            metaDataObj.primary = displayColumns[index].value;
+        }
+        else {
+            metaDataObj.secondary.push(displayColumns[index].value);
+        }
+    }
+    return metaDataObj;
+};
+export default function Dropdown(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const FieldValueList = getComponentFromMap('FieldValueList');
-    const { getPConnect, label, required, disabled, value = '', datasource = [], validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel, onRecordChange, fieldMetadata } = props;
-    let { placeholder = "" } = props;
+    const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, deferDatasource, datasourceMetadata, hideLabel, onRecordChange, fieldMetadata } = props;
+    let { placeholder = '' } = props;
+    const context = getPConnect().getContextName();
+    let { listType, parameters, datasource = [], columns = [] } = props;
     placeholder = placeholder || 'Select...';
     const [options, setOptions] = useState([]);
+    const [theDatasource, setDatasource] = useState(null);
     const helperTextToDisplay = validatemessage || helperText;
     const thePConn = getPConnect();
     const actionsApi = thePConn.getActionsApi();
-    const propName = thePConn.getStateProps()["value"];
+    const propName = thePConn.getStateProps().value;
     const className = thePConn.getCaseInfo().getClassName();
     const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+    if (!isDeepEqual(datasource, theDatasource)) {
+        // inbound datasource is different, so update theDatasource (to trigger useEffect)
+        setDatasource(datasource);
+    }
+    // convert associated to datapage listtype and transform props
+    // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+        listType = 'datapage';
+        datasource = datasourceMetadata.datasource.name;
+        const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+        parameters = flattenParameters(dataSourceParameters);
+        const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+        const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+        columns = [
+            {
+                key: 'true',
+                setProperty: 'Associated property',
+                value: valueProp
+            },
+            {
+                display: 'true',
+                primary: 'true',
+                useForSearch: true,
+                value: displayProp
+            }
+        ];
+    }
+    columns = preProcessColumns(columns);
+    useEffect(() => {
+        if (theDatasource) {
+            const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
+            const optionsList = [...list];
+            optionsList.unshift({
+                key: placeholder,
+                value: thePConn.getLocalizedValue(placeholder, '', '')
+            }); // 2nd and 3rd args empty string until typedef marked correctly
+            setOptions(optionsList);
+        }
+    }, [theDatasource]);
     useEffect(() => {
-        const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
-        const optionsList = [...list];
-        optionsList.unshift({
-            key: placeholder,
-            value: thePConn.getLocalizedValue(placeholder, '', '')
-        }); // 2nd and 3rd args empty string until typedef marked correctly
-        setOptions(optionsList);
-    }, [datasource]);
-    const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;
+        if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+            getDataPage(datasource, parameters, context).then((results) => {
+                const optionsData = [];
+                const displayColumn = getDisplayFieldsMetaData(columns);
+                results?.forEach(element => {
+                    const val = element[displayColumn.primary]?.toString();
+                    const obj = {
+                        key: element[displayColumn.key] || element.pyGUID,
+                        value: val
+                    };
+                    optionsData.push(obj);
+                });
+                setOptions(optionsData);
+            });
+        }
+    }, []);
+    const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
     let displayName = metaData?.datasource?.propertyForDisplayText;
     displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
     const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
@@ -46,10 +118,14 @@ export default function Dropdown(props /* : DropdownProps */) {
     const localePath = localeContext === 'datapage' ? displayName : localeName;
     let readOnlyProp = {};
     if (displayMode === 'LABELS_LEFT') {
-        return (React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }));
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
+            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }));
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return (React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), variant: "stacked" }));
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
+            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), variant: 'stacked' }));
     }
     if (readOnly) {
         readOnlyProp = { readOnly: true };
@@ -58,7 +134,7 @@ export default function Dropdown(props /* : DropdownProps */) {
     testProp = {
         'data-test-id': testId
     };
-    const handleChange = (evt) => {
+    const handleChange = evt => {
         const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
         handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
         if (onRecordChange) {
@@ -67,6 +143,6 @@ export default function Dropdown(props /* : DropdownProps */) {
     };
     // Material UI shows a warning if the component is rendered before options are set.
     //  So, hold off on rendering anything until options are available...
-    return options.length === 0 ? null : (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: thePConn.getLocalizedValue(placeholder, '', ''), size: "small", required: required, disabled: disabled, onChange: !readOnly ? handleChange : undefined, error: status === 'error', label: label, value: value === '' && !readOnly ? placeholder : value, select: true, InputProps: { ...readOnlyProp, ...testProp } }, options.map((option) => (React.createElement(MenuItem, { key: option.key, value: option.key }, thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)))))));
+    return options.length === 0 ? null : (_jsx(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: thePConn.getLocalizedValue(placeholder, '', ''), size: 'small', required: required, disabled: disabled, onChange: !readOnly ? handleChange : undefined, error: status === 'error', label: label, value: value === '' && !readOnly ? placeholder : value, select: true, InputProps: { ...readOnlyProp, ...testProp }, children: options.map((option) => (_jsx(MenuItem, { value: option.key, children: thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }, option.key))) }));
 }
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/field/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { TextField } from '@material-ui/core';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\n// import type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface IOption {\n  key: string;\n  value: string;\n}\n\n// Can't use DropdownProps with 8.23 until getLocaleRuleNameFromKeys is NOT private\n// interface DropdownProps extends PConnFieldProps {\n//   // If any, enter additional props that only exist on Dropdown here\n//   datasource?: Array<any>,\n//   onRecordChange?: any,\n//   fieldMetadata?: any,\n//   // eslint-disable-next-line react/no-unused-prop-types\n//   listType: string,\n//   // eslint-disable-next-line react/no-unused-prop-types\n//   additionalProps?: object\n// }\n\n\nexport default function Dropdown(props /* : DropdownProps */) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    datasource = [],\n    validatemessage,\n    status,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    onRecordChange,\n    fieldMetadata\n  } = props;\n  let { placeholder = \"\" } = props;\n  placeholder = placeholder || 'Select...';\n  const [options, setOptions] = useState<Array<IOption>>([]);\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps()[\"value\"];\n  const className = thePConn.getCaseInfo().getClassName();\n  const refName = propName?.slice(propName.lastIndexOf('.') + 1);\n\n  useEffect(() => {\n    const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly\n    const optionsList = [...list];\n    optionsList.unshift({\n      key: placeholder,\n      value: thePConn.getLocalizedValue(placeholder, '', '')\n    }); // 2nd and 3rd args empty string until typedef marked correctly\n    setOptions(optionsList);\n  }, [datasource]);\n\n  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;\n\n  let displayName = metaData?.datasource?.propertyForDisplayText;\n  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);\n  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';\n  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;\n  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;\n  const localePath = localeContext === 'datapage' ? displayName : localeName;\n\n  let readOnlyProp = {};\n\n  if (displayMode === 'LABELS_LEFT') {\n    return (\n      <FieldValueList\n        name={hideLabel ? '' : label}\n        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n      />\n    );\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return (\n      <FieldValueList\n        name={hideLabel ? '' : label}\n        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n        variant=\"stacked\"\n      />\n    );\n  }\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = (evt) => {\n    const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;\n    handleEvent(actionsApi, 'changeNblur', propName, selectedValue);\n    if (onRecordChange) {\n      onRecordChange(evt);\n    }\n  };\n\n  // Material UI shows a warning if the component is rendered before options are set.\n  //  So, hold off on rendering anything until options are available...\n  return options.length === 0 ? null : (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly\n      size=\"small\"\n      required={required}\n      disabled={disabled}\n      onChange={!readOnly ? handleChange : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value === '' && !readOnly ? placeholder : value}\n      select\n      InputProps={{ ...readOnlyProp, ...testProp }}\n    >\n      {options.map((option: any) => (\n        <MenuItem key={option.key} value={option.key}>\n          {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { TextField } from '@material-ui/core';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport isDeepEqual from 'fast-deep-equal/react';\nimport Utils from '../../helpers/utils';\nimport { getDataPage } from '../../helpers/data_page';\nimport handleEvent from '../../helpers/event-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface IOption {\n  key: string;\n  value: string;\n}\n\nconst flattenParameters = (params = {}) => {\n  const flatParams = {};\n  Object.keys(params).forEach(key => {\n    const { name, value: theVal } = params[key];\n    flatParams[name] = theVal;\n  });\n\n  return flatParams;\n};\n\nconst preProcessColumns = columnList => {\n  return columnList.map(col => {\n    const tempColObj = { ...col };\n    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;\n    return tempColObj;\n  });\n};\n\nconst getDisplayFieldsMetaData = columnList => {\n  const displayColumns = columnList.filter(col => col.display === 'true');\n  const metaDataObj: any = { key: '', primary: '', secondary: [] };\n  const keyCol = columnList.filter(col => col.key === 'true');\n  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';\n  for (let index = 0; index < displayColumns.length; index += 1) {\n    if (displayColumns[index].primary === 'true') {\n      metaDataObj.primary = displayColumns[index].value;\n    } else {\n      metaDataObj.secondary.push(displayColumns[index].value);\n    }\n  }\n  return metaDataObj;\n};\n\ninterface DropdownProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Dropdown here\n  datasource?: any[];\n  onRecordChange?: any;\n  fieldMetadata?: any;\n  listType: string;\n  deferDatasource?: boolean;\n  datasourceMetadata?: any;\n  parameters?: any;\n  columns: any[];\n}\n\nexport default function Dropdown(props: DropdownProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    deferDatasource,\n    datasourceMetadata,\n    hideLabel,\n    onRecordChange,\n    fieldMetadata\n  } = props;\n  let { placeholder = '' } = props;\n  const context = getPConnect().getContextName();\n  let { listType, parameters, datasource = [], columns = [] } = props;\n  placeholder = placeholder || 'Select...';\n  const [options, setOptions] = useState<IOption[]>([]);\n  const [theDatasource, setDatasource] = useState<any[] | null>(null);\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = (thePConn.getStateProps() as any).value;\n  const className = thePConn.getCaseInfo().getClassName();\n  const refName = propName?.slice(propName.lastIndexOf('.') + 1);\n\n  if (!isDeepEqual(datasource, theDatasource)) {\n    // inbound datasource is different, so update theDatasource (to trigger useEffect)\n    setDatasource(datasource);\n  }\n\n  // convert associated to datapage listtype and transform props\n  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList\n  if (deferDatasource && datasourceMetadata?.datasource?.name) {\n    listType = 'datapage';\n    datasource = datasourceMetadata.datasource.name;\n    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;\n    parameters = flattenParameters(dataSourceParameters);\n    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;\n    const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;\n    columns = [\n      {\n        key: 'true',\n        setProperty: 'Associated property',\n        value: valueProp\n      },\n      {\n        display: 'true',\n        primary: 'true',\n        useForSearch: true,\n        value: displayProp\n      }\n    ];\n  }\n  columns = preProcessColumns(columns);\n\n  useEffect(() => {\n    if (theDatasource) {\n      const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly\n      const optionsList = [...list];\n      optionsList.unshift({\n        key: placeholder,\n        value: thePConn.getLocalizedValue(placeholder, '', '')\n      }); // 2nd and 3rd args empty string until typedef marked correctly\n      setOptions(optionsList);\n    }\n  }, [theDatasource]);\n\n  useEffect(() => {\n    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {\n      getDataPage(datasource, parameters, context).then((results: any) => {\n        const optionsData: any[] = [];\n        const displayColumn = getDisplayFieldsMetaData(columns);\n        results?.forEach(element => {\n          const val = element[displayColumn.primary]?.toString();\n          const obj = {\n            key: element[displayColumn.key] || element.pyGUID,\n            value: val\n          };\n          optionsData.push(obj);\n        });\n        setOptions(optionsData);\n      });\n    }\n  }, []);\n\n  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;\n\n  let displayName = metaData?.datasource?.propertyForDisplayText;\n  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);\n  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';\n  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;\n  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;\n  const localePath = localeContext === 'datapage' ? displayName : localeName;\n\n  let readOnlyProp = {};\n\n  if (displayMode === 'LABELS_LEFT') {\n    return (\n      <FieldValueList\n        name={hideLabel ? '' : label}\n        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'\n        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n      />\n    );\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return (\n      <FieldValueList\n        name={hideLabel ? '' : label}\n        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'\n        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n        variant='stacked'\n      />\n    );\n  }\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = evt => {\n    const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;\n    handleEvent(actionsApi, 'changeNblur', propName, selectedValue);\n    if (onRecordChange) {\n      onRecordChange(evt);\n    }\n  };\n\n  // Material UI shows a warning if the component is rendered before options are set.\n  //  So, hold off on rendering anything until options are available...\n  return options.length === 0 ? null : (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={!readOnly ? handleChange : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value === '' && !readOnly ? placeholder : value}\n      select\n      InputProps={{ ...readOnlyProp, ...testProp }}\n    >\n      {options.map((option: any) => (\n        <MenuItem key={option.key} value={option.key}>\n          {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}\n          {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n}\n"]}

package/lib/components/field/Email/Email.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PConnFieldProps } from '../../../types/PConnProps';
+import { PConnFieldProps } from '../../../types/PConnProps';
 interface EmailProps extends PConnFieldProps {
 }
 export default function Email(props: EmailProps): JSX.Element;

package/lib/components/field/Email/Email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,UAAU,UAAW,SAAQ,eAAe;CAE3C;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAiE9C"}
+{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,UAAW,SAAQ,eAAe;CAE3C;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAkE9C"}

package/lib/components/field/Email/Email.js

@@ -1,29 +1,28 @@
-import React from 'react';
-import { TextField, InputAdornment } from '@material-ui/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAdornment, TextField } from '@material-ui/core';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function Email(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const TextInput = getComponentFromMap('TextInput');
     const FieldValueList = getComponentFromMap('FieldValueList');
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel, placeholder } = props;
     const helperTextToDisplay = validatemessage || helperText;
     if (displayMode === 'LABELS_LEFT') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: value });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: "stacked" });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
-        return React.createElement(TextInput, { ...props });
+        return _jsx(TextInput, { ...props });
     }
     let testProp = {};
     testProp = {
         'data-test-id': testId
     };
-    return (React.createElement(TextField, { fullWidth: true, variant: "outlined", helperText: helperTextToDisplay, placeholder: "", size: "small", required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: "email", InputProps: {
-            startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                React.createElement(MailOutlineIcon, null))),
+    return (_jsx(TextField, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'email', InputProps: {
+            startAdornment: (_jsx(InputAdornment, { position: 'start', children: _jsx(MailOutlineIcon, {}) })),
             inputProps: { ...testProp }
         } }));
 }

package/lib/components/field/Email/Email.js.map

@@ -1 +1 @@
-{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAOhF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,8EAA8E;IAC9E,MAAM,SAAS,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;KACvE;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KACzF;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;gBAC9B,oBAAC,eAAe,OAAG,CACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface EmailProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Date here\n}\n\nexport default function Email(props: EmailProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} variant=\"stacked\" />;\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant=\"outlined\"\n      helperText={helperTextToDisplay}\n      placeholder=\"\"\n      size=\"small\"\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type=\"email\"\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <MailOutlineIcon />\n          </InputAdornment>\n        ),\n        inputProps: { ...testProp }\n      }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAOhF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,8EAA8E;IAC9E,MAAM,SAAS,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;KACvE;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KACzF;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,KAAC,cAAc,IAAC,QAAQ,EAAC,OAAO,YAC9B,KAAC,eAAe,KAAG,GACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { InputAdornment, TextField } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\n\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface EmailProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Date here\n}\n\nexport default function Email(props: EmailProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    placeholder\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='email'\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position='start'>\n            <MailOutlineIcon />\n          </InputAdornment>\n        ),\n        inputProps: { ...testProp }\n      }}\n    />\n  );\n}\n"]}

package/lib/components/field/Email/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Email/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default } from './Email';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Email/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default } from './Email';\n"]}

package/lib/components/field/Group/Group.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface GroupProps extends PConnFieldProps {
+    children: ReactElement[];
+    heading: string;
+    showHeading: boolean;
+    instructions?: string;
+    collapsible: boolean;
+    type: string;
+}
+export default function Group(props: GroupProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=Group.d.ts.map

package/lib/components/field/Group/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,UAAW,SAAQ,eAAe;IAC1C,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,sBAwB9C"}

package/lib/components/field/Group/Group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Grid } from '@material-ui/core';
+import FieldGroup from '../../designSystemExtension/FieldGroup';
+export default function Group(props) {
+    const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+    const isReadOnly = displayMode === 'LABELS_LEFT';
+    const content = useMemo(() => {
+        return (_jsx(Grid, { container: true, spacing: 2, children: children?.map(child => (_jsx(Grid, { item: true, xs: 12, children: child }, child.key))) }));
+    }, [children, type, isReadOnly]);
+    if (!children)
+        return null;
+    return (_jsx(FieldGroup, { name: showHeading ? heading : undefined, collapsible: collapsible, instructions: instructions, children: content }));
+}
+//# sourceMappingURL=Group.js.map

package/lib/components/field/Group/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../src/components/field/Group/Group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,wCAAwC,CAAC;AAYhE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE/F,MAAM,UAAU,GAAG,WAAW,KAAK,aAAa,CAAC;IAEjD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACtB,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,KAAK,IADgB,KAAK,CAAC,GAAG,CAE1B,CACR,CAAC,GACG,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,OAAO,CACL,KAAC,UAAU,IAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,YACtG,OAAO,GACG,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { ReactElement, useMemo } from 'react';\nimport { Grid } from '@material-ui/core';\nimport FieldGroup from '../../designSystemExtension/FieldGroup';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface GroupProps extends PConnFieldProps {\n  children: ReactElement[];\n  heading: string;\n  showHeading: boolean;\n  instructions?: string;\n  collapsible: boolean;\n  type: string;\n}\n\nexport default function Group(props: GroupProps) {\n  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;\n\n  const isReadOnly = displayMode === 'LABELS_LEFT';\n\n  const content = useMemo(() => {\n    return (\n      <Grid container spacing={2}>\n        {children?.map(child => (\n          <Grid item xs={12} key={child.key}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    );\n  }, [children, type, isReadOnly]);\n\n  if (!children) return null;\n\n  return (\n    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>\n      {content}\n    </FieldGroup>\n  );\n}\n"]}

package/lib/components/field/Group/index.d.ts

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

package/lib/components/field/Group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/field/Group/index.js

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

package/lib/components/field/Group/index.js.map

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

package/lib/components/field/Integer/Integer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PConnFieldProps } from '../../../types/PConnProps';
+import { PConnFieldProps } from '../../../types/PConnProps';
 interface IntegerProps extends PConnFieldProps {
 }
 export default function Integer(props: IntegerProps): JSX.Element;

package/lib/components/field/Integer/Integer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Integer.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,UAAU,YAAa,SAAQ,eAAe;CAE7C;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eA6ElD"}
+{"version":3,"file":"Integer.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,YAAa,SAAQ,eAAe;CAE7C;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eA8ElD"}