@pega/react-sdk-components 0.23.26 → 0.23.28

package/lib/components/designSystemExtension/Operator/Operator.js

@@ -1,83 +1,82 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 import Popover from '@material-ui/core/Popover';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Utils from '../../helpers/utils';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
     root: {
         padding: theme.spacing(1),
-        margin: theme.spacing(1),
+        margin: theme.spacing(1)
     },
     popover: {
         padding: theme.spacing(1),
-        margin: theme.spacing(1),
+        margin: theme.spacing(1)
     }
 }));
 export default function Operator(props) {
     // const componentName = "Operator";
-    const { caseOpConfig } = props;
     const classes = useStyles();
-    const fieldLabel = caseOpConfig.label.toLowerCase();
-    let caseOpLabel = "---";
-    let caseOpName = "---";
-    let caseOpId = "";
-    let caseTime = null;
-    if (fieldLabel === "create operator") {
-        caseOpLabel = caseOpConfig.createLabel;
-        caseOpName = caseOpConfig.createOperator.userName;
-        caseTime = caseOpConfig.createDateTime;
-        caseOpId = caseOpConfig.createOperator.userId;
+    const fieldLabel = props.label.toLowerCase();
+    let caseOpLabel = '---';
+    let caseOpName = '---';
+    let caseOpId = '';
+    let caseTime = '';
+    if (fieldLabel === 'create operator') {
+        caseOpLabel = props.createLabel;
+        caseOpName = props.createOperator.userName;
+        caseTime = props.createDateTime;
+        caseOpId = props.createOperator.userId;
     }
-    else if (fieldLabel === "update operator") {
-        caseOpLabel = caseOpConfig.updateLabel;
-        caseOpName = caseOpConfig.updateOperator.userName;
-        caseTime = caseOpConfig.updateDateTime;
-        caseOpId = caseOpConfig.updateOperator.userId;
+    else if (fieldLabel === 'update operator') {
+        caseOpLabel = props.updateLabel;
+        caseOpName = props.updateOperator.userName;
+        caseTime = props.updateDateTime;
+        caseOpId = props.updateOperator.userId;
     }
     // Popover-related
     const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
     const [popoverFields, setPopoverFields] = useState([]);
     const popoverOpen = Boolean(popoverAnchorEl);
     const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
-    const handlePopoverClose = (() => {
+    const handlePopoverClose = () => {
         setPopoverAnchorEl(null);
-    });
+    };
     function showOperatorDetails(event) {
         const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+        const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+        const localeCategory = 'Operator';
         operatorPreviewPromise.then((res) => {
-            const fillerString = "---";
+            const fillerString = '---';
             let fields = [];
-            if (res.data &&
-                res.data.pyOperatorInfo &&
-                res.data.pyOperatorInfo.pyUserName) {
+            if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
                 fields = [
                     {
-                        id: "pyPosition",
-                        name: "Position",
+                        id: 'pyPosition',
+                        name: localizedVal('Position', localeCategory),
                         value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
                     },
                     {
-                        id: "pyOrganization",
-                        name: "Organization",
+                        id: 'pyOrganization',
+                        name: localizedVal('Organization', localeCategory),
                         value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
                     },
                     {
-                        id: "ReportToUserName",
-                        name: "Reports to",
+                        id: 'ReportToUserName',
+                        name: localizedVal('Reports to', localeCategory),
                         value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
                     },
                     {
-                        id: "pyTelephone",
-                        name: "Telephone",
-                        value: res.data.pyOperatorInfo.pyTelephone ? React.createElement("a", { href: `tel:${res.data.pyOperatorInfo.pyTelephone}` }, res.data.pyOperatorInfo.pyTelephone) : fillerString
+                        id: 'pyTelephone',
+                        name: localizedVal('Telephone', localeCategory),
+                        value: res.data.pyOperatorInfo.pyTelephone ? (_jsx("a", { href: `tel:${res.data.pyOperatorInfo.pyTelephone}`, children: res.data.pyOperatorInfo.pyTelephone })) : (fillerString)
                     },
                     {
-                        id: "pyEmailAddress",
-                        name: "Email address",
-                        value: res.data.pyOperatorInfo.pyEmailAddress ? React.createElement("a", { href: `mailto:${res.data.pyOperatorInfo.pyEmailAddress}` }, res.data.pyOperatorInfo.pyEmailAddress) : fillerString
+                        id: 'pyEmailAddress',
+                        name: localizedVal('Email address', localeCategory),
+                        value: res.data.pyOperatorInfo.pyEmailAddress ? (_jsx("a", { href: `mailto:${res.data.pyOperatorInfo.pyEmailAddress}`, children: res.data.pyOperatorInfo.pyEmailAddress })) : (fillerString)
                     }
                 ];
             }
@@ -86,28 +85,28 @@ export default function Operator(props) {
                 console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
                 fields = [
                     {
-                        id: "pyPosition",
-                        name: "Position",
+                        id: 'pyPosition',
+                        name: localizedVal('Position', localeCategory),
                         value: fillerString
                     },
                     {
-                        id: "pyOrganization",
-                        name: "Organization",
+                        id: 'pyOrganization',
+                        name: localizedVal('Organization', localeCategory),
                         value: fillerString
                     },
                     {
-                        id: "ReportToUserName",
-                        name: "Reports to",
+                        id: 'ReportToUserName',
+                        name: localizedVal('Reports to', localeCategory),
                         value: fillerString
                     },
                     {
-                        id: "pyTelephone",
-                        name: "Telephone",
+                        id: 'pyTelephone',
+                        name: localizedVal('Telephone', localeCategory),
                         value: fillerString
                     },
                     {
-                        id: "pyEmailAddress",
-                        name: "Email address",
+                        id: 'pyEmailAddress',
+                        name: localizedVal('Email address', localeCategory),
                         value: fillerString
                     }
                 ];
@@ -125,31 +124,15 @@ export default function Operator(props) {
             return;
         }
         // There are fields, so build the grid.
-        return React.createElement(Grid, { container: true, className: classes.popover, spacing: 1 },
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Typography, { variant: "h6" }, caseOpName)),
-            popoverFields.map((field) => {
-                return React.createElement(React.Fragment, { key: field.id },
-                    React.createElement(Grid, { container: true, item: true, xs: 12, spacing: 1 },
-                        React.createElement(Grid, { item: true, xs: 6 },
-                            React.createElement(Typography, { variant: "caption" }, field.name)),
-                        React.createElement(Grid, { item: true, xs: 6 },
-                            React.createElement(Typography, { variant: "subtitle2" }, field.value))));
-            }));
+        return (_jsxs(Grid, { container: true, className: classes.popover, spacing: 1, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: 'h6', children: caseOpName }) }), popoverFields.map(field => {
+                    return (_jsx(React.Fragment, { children: _jsxs(Grid, { container: true, item: true, xs: 12, spacing: 1, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'caption', children: field.name }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'subtitle2', children: field.value }) })] }) }, field.id));
+                })] }));
     }
     // End of popover-related
-    return React.createElement(React.Fragment, null,
-        React.createElement(TextField, { defaultValue: caseOpName, label: caseOpLabel, onClick: showOperatorDetails, InputProps: {
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
-            } }),
-        React.createElement("br", null),
-        Utils.generateDateTime(caseTime, "DateTime-Since"),
-        React.createElement(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, PaperProps: { style: { maxWidth: '45ch' } } }, getPopoverGrid()));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { defaultValue: caseOpName, label: caseOpLabel, onClick: showOperatorDetails, InputProps: {
+                    readOnly: true,
+                    disableUnderline: true,
+                    inputProps: { style: { cursor: 'pointer' } }
+                } }), _jsx("br", {}), Utils.generateDateTime(caseTime, 'DateTime-Since'), _jsx(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, PaperProps: { style: { maxWidth: '45ch' } }, children: getPopoverGrid() })] }));
 }
-Operator.defaultProps = {};
-Operator.propTypes = {
-    caseOpConfig: PropTypes.object.isRequired,
-};
 //# sourceMappingURL=Operator.js.map

package/lib/components/designSystemExtension/Operator/Operator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Operator/Operator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useState} from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from '@material-ui/core/TextField';\nimport Popover from '@material-ui/core/Popover';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport Utils from '../../helpers/utils';\n\ndeclare const PCore: any;\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    padding: theme.spacing(1),\n    margin: theme.spacing(1),\n  },\n  popover: {\n    padding: theme.spacing(1),\n    margin: theme.spacing(1),\n  }\n}));\n\nexport default function Operator(props) {\n  // const componentName = \"Operator\";\n  const { caseOpConfig } = props;\n  const classes = useStyles();\n\n  const fieldLabel = caseOpConfig.label.toLowerCase();\n  let caseOpLabel = \"---\";\n  let caseOpName = \"---\";\n  let caseOpId = \"\";\n  let caseTime = null;\n\n  if (fieldLabel === \"create operator\") {\n    caseOpLabel = caseOpConfig.createLabel;\n    caseOpName = caseOpConfig.createOperator.userName;\n    caseTime = caseOpConfig.createDateTime;\n    caseOpId = caseOpConfig.createOperator.userId;\n  } else if (fieldLabel === \"update operator\") {\n    caseOpLabel = caseOpConfig.updateLabel;\n    caseOpName = caseOpConfig.updateOperator.userName;\n    caseTime = caseOpConfig.updateDateTime;\n    caseOpId = caseOpConfig.updateOperator.userId;\n  }\n\n  // Popover-related\n  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);\n  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);\n\n  const popoverOpen = Boolean(popoverAnchorEl);\n  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;\n\n  const handlePopoverClose = (() => {\n    setPopoverAnchorEl(null);\n  })\n\n  function showOperatorDetails(event) {\n\n    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);\n\n    operatorPreviewPromise.then((res) => {\n      const fillerString = \"---\";\n      let fields: any = [];\n      if (\n        res.data &&\n        res.data.pyOperatorInfo &&\n        res.data.pyOperatorInfo.pyUserName\n      ) {\n        fields = [\n          {\n            id: \"pyPosition\",\n            name: \"Position\",\n            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString\n          },\n          {\n            id: \"pyOrganization\",\n            name: \"Organization\",\n            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString\n          },\n          {\n            id: \"ReportToUserName\",\n            name: \"Reports to\",\n            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString\n          },\n          {\n            id: \"pyTelephone\",\n            name: \"Telephone\",\n            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString\n          },\n          {\n            id: \"pyEmailAddress\",\n            name: \"Email address\",\n            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString\n          }\n        ];\n      } else {\n        // eslint-disable-next-line no-console\n        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);\n        fields = [\n          {\n            id: \"pyPosition\",\n            name: \"Position\",\n            value: fillerString\n          },\n          {\n            id: \"pyOrganization\",\n            name: \"Organization\",\n            value: fillerString\n          },\n          {\n            id: \"ReportToUserName\",\n            name: \"Reports to\",\n            value: fillerString\n          },\n          {\n            id: \"pyTelephone\",\n            name: \"Telephone\",\n            value: fillerString\n          },\n          {\n            id: \"pyEmailAddress\",\n            name: \"Email address\",\n            value: fillerString\n          }\n        ];\n      }\n      // Whatever the fields are, update the component's popoverFields\n      setPopoverFields(fields);\n    });\n\n    setPopoverAnchorEl(event.currentTarget);\n  }\n\n  function getPopoverGrid() {\n    // return popoverFields.map((field) => {\n    //   return <div className={classes.popover}>{field.name}: {field.value}</div>\n    // })\n\n    if (popoverFields.length === 0) {\n      return;\n    }\n\n    // There are fields, so build the grid.\n    return <Grid container className={classes.popover} spacing={1}>\n      <Grid item xs={12}><Typography variant=\"h6\">{caseOpName}</Typography></Grid>\n      {popoverFields.map((field) => {\n        return <React.Fragment key={field.id}>\n          <Grid container item xs={12} spacing={1}>\n            <Grid item xs={6}><Typography variant=\"caption\">{field.name}</Typography></Grid>\n            <Grid item xs={6}><Typography variant=\"subtitle2\">{field.value}</Typography></Grid>\n          </Grid>\n        </React.Fragment>\n      })}\n    </Grid>\n\n  }\n\n  // End of popover-related\n\n  return <React.Fragment>\n      <TextField\n        defaultValue={caseOpName}\n        label={caseOpLabel}\n        onClick={showOperatorDetails}\n        InputProps={{\n          readOnly: true,\n          disableUnderline: true,\n          inputProps: {style: {cursor: 'pointer'}}\n        }}\n      />\n      <br />\n      {Utils.generateDateTime(caseTime, \"DateTime-Since\")}\n\n      <Popover\n        id={popoverId}\n        open={popoverOpen}\n        anchorEl={popoverAnchorEl}\n        onClose={handlePopoverClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}\n        transformOrigin={{ vertical: 'top', horizontal: 'center'}}\n        PaperProps={{ style: {maxWidth: '45ch'}}}\n      >\n        {getPopoverGrid()}\n      </Popover>\n    </React.Fragment>;\n\n}\n\nOperator.defaultProps = {\n}\n\nOperator.propTypes = {\n  caseOpConfig: PropTypes.object.isRequired,\n};\n"]}
+{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Operator/Operator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport Popover from '@material-ui/core/Popover';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport Utils from '../../helpers/utils';\nimport { PConnProps } from '../../../types/PConnProps';\n\n// Operator is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface OperatorProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  label: string;\n  createDateTime: string;\n  createLabel: string;\n  createOperator: { userName: string; userId: string };\n  updateDateTime: string;\n  updateLabel: string;\n  updateOperator: { userName: string; userId: string };\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    padding: theme.spacing(1),\n    margin: theme.spacing(1)\n  },\n  popover: {\n    padding: theme.spacing(1),\n    margin: theme.spacing(1)\n  }\n}));\n\nexport default function Operator(props: OperatorProps) {\n  // const componentName = \"Operator\";\n  const classes = useStyles();\n\n  const fieldLabel = props.label.toLowerCase();\n  let caseOpLabel = '---';\n  let caseOpName = '---';\n  let caseOpId = '';\n  let caseTime = '';\n\n  if (fieldLabel === 'create operator') {\n    caseOpLabel = props.createLabel;\n    caseOpName = props.createOperator.userName;\n    caseTime = props.createDateTime;\n    caseOpId = props.createOperator.userId;\n  } else if (fieldLabel === 'update operator') {\n    caseOpLabel = props.updateLabel;\n    caseOpName = props.updateOperator.userName;\n    caseTime = props.updateDateTime;\n    caseOpId = props.updateOperator.userId;\n  }\n\n  // Popover-related\n  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);\n  const [popoverFields, setPopoverFields] = useState<any[]>([]);\n\n  const popoverOpen = Boolean(popoverAnchorEl);\n  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;\n\n  const handlePopoverClose = () => {\n    setPopoverAnchorEl(null);\n  };\n\n  function showOperatorDetails(event) {\n    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);\n    const localizedVal = PCore.getLocaleUtils().getLocaleValue;\n    const localeCategory = 'Operator';\n\n    operatorPreviewPromise.then((res: any) => {\n      const fillerString = '---';\n      let fields: any = [];\n      if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {\n        fields = [\n          {\n            id: 'pyPosition',\n            name: localizedVal('Position', localeCategory),\n            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString\n          },\n          {\n            id: 'pyOrganization',\n            name: localizedVal('Organization', localeCategory),\n            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString\n          },\n          {\n            id: 'ReportToUserName',\n            name: localizedVal('Reports to', localeCategory),\n            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString\n          },\n          {\n            id: 'pyTelephone',\n            name: localizedVal('Telephone', localeCategory),\n            value: res.data.pyOperatorInfo.pyTelephone ? (\n              <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>\n            ) : (\n              fillerString\n            )\n          },\n          {\n            id: 'pyEmailAddress',\n            name: localizedVal('Email address', localeCategory),\n            value: res.data.pyOperatorInfo.pyEmailAddress ? (\n              <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>\n            ) : (\n              fillerString\n            )\n          }\n        ];\n      } else {\n        // eslint-disable-next-line no-console\n        console.log(\n          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`\n        );\n        fields = [\n          {\n            id: 'pyPosition',\n            name: localizedVal('Position', localeCategory),\n            value: fillerString\n          },\n          {\n            id: 'pyOrganization',\n            name: localizedVal('Organization', localeCategory),\n            value: fillerString\n          },\n          {\n            id: 'ReportToUserName',\n            name: localizedVal('Reports to', localeCategory),\n            value: fillerString\n          },\n          {\n            id: 'pyTelephone',\n            name: localizedVal('Telephone', localeCategory),\n            value: fillerString\n          },\n          {\n            id: 'pyEmailAddress',\n            name: localizedVal('Email address', localeCategory),\n            value: fillerString\n          }\n        ];\n      }\n      // Whatever the fields are, update the component's popoverFields\n      setPopoverFields(fields);\n    });\n\n    setPopoverAnchorEl(event.currentTarget);\n  }\n\n  function getPopoverGrid() {\n    // return popoverFields.map((field) => {\n    //   return <div className={classes.popover}>{field.name}: {field.value}</div>\n    // })\n\n    if (popoverFields.length === 0) {\n      return;\n    }\n\n    // There are fields, so build the grid.\n    return (\n      <Grid container className={classes.popover} spacing={1}>\n        <Grid item xs={12}>\n          <Typography variant='h6'>{caseOpName}</Typography>\n        </Grid>\n        {popoverFields.map(field => {\n          return (\n            <React.Fragment key={field.id}>\n              <Grid container item xs={12} spacing={1}>\n                <Grid item xs={6}>\n                  <Typography variant='caption'>{field.name}</Typography>\n                </Grid>\n                <Grid item xs={6}>\n                  <Typography variant='subtitle2'>{field.value}</Typography>\n                </Grid>\n              </Grid>\n            </React.Fragment>\n          );\n        })}\n      </Grid>\n    );\n  }\n\n  // End of popover-related\n\n  return (\n    <>\n      <TextField\n        defaultValue={caseOpName}\n        label={caseOpLabel}\n        onClick={showOperatorDetails}\n        InputProps={{\n          readOnly: true,\n          disableUnderline: true,\n          inputProps: { style: { cursor: 'pointer' } }\n        }}\n      />\n      <br />\n      {Utils.generateDateTime(caseTime, 'DateTime-Since')}\n\n      <Popover\n        id={popoverId}\n        open={popoverOpen}\n        anchorEl={popoverAnchorEl}\n        onClose={handlePopoverClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'center' }}\n        PaperProps={{ style: { maxWidth: '45ch' } }}\n      >\n        {getPopoverGrid()}\n      </Popover>\n    </>\n  );\n}\n"]}

package/lib/components/designSystemExtension/Pulse/Pulse.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
-export default function Pulse(): JSX.Element;
+import { PropsWithChildren } from 'react';
+interface PulseProps {
+}
+export default function Pulse(props: PropsWithChildren<PulseProps>): JSX.Element;
+export {};
 //# sourceMappingURL=Pulse.d.ts.map

package/lib/components/designSystemExtension/Pulse/Pulse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pulse.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Pulse/Pulse.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,OAAO,UAAU,KAAK,gBAY5B"}
+{"version":3,"file":"Pulse.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Pulse/Pulse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,UAAU,UAAU;CAEnB;AAWD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAAC,eAajE"}

package/lib/components/designSystemExtension/Pulse/Pulse.js

@@ -1,24 +1,18 @@
-import React from "react";
-// import PropTypes from "prop-types";
-import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(1),
-        borderLeft: "6px solid",
+        borderLeft: '6px solid',
         borderLeftColor: theme.palette.primary.light
-    },
+    }
 }));
-export default function Pulse( /* props */) {
-    // const { children } = props;
+export default function Pulse(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children } = props;
     const classes = useStyles();
-    return (React.createElement(Card, { className: classes.root },
-        React.createElement(CardHeader, { title: React.createElement(Typography, { variant: "h6" }, "Pulse") }),
-        React.createElement(CardContent, null,
-            React.createElement(Typography, null, "Pulse"))));
+    return (_jsxs(Card, { className: classes.root, children: [_jsx(CardHeader, { title: _jsx(Typography, { variant: 'h6', children: "Pulse" }) }), _jsx(CardContent, { children: _jsx(Typography, { children: "Pulse" }) })] }));
 }
-// Pulse.propTypes = {
-//   children: PropTypes.arrayOf(PropTypes.node).isRequired
-// };
 //# sourceMappingURL=Pulse.js.map

package/lib/components/designSystemExtension/Pulse/Pulse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pulse.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Pulse/Pulse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,KAAK,EAAC,WAAW;IACvC,8BAA8B;IAC9B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACH,oBAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;QAC3B,oBAAC,UAAU,IAAC,KAAK,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,YAAmB,GAAI;QAClE,oBAAC,WAAW;YACV,oBAAC,UAAU,gBAAmB,CAClB,CACT,CACR,CAAC;AACN,CAAC;AAED,sBAAsB;AACtB,2DAA2D;AAC3D,KAAK","sourcesContent":["import React from \"react\";\n// import PropTypes from \"prop-types\";\nimport { Card, CardContent, CardHeader, Typography } from \"@material-ui/core\";\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    borderLeft: \"6px solid\",\n    borderLeftColor: theme.palette.primary.light\n  },\n}));\n\nexport default function Pulse(/* props */) {\n  // const { children } = props;\n  const classes = useStyles();\n\n  return (\n      <Card className={classes.root}>\n        <CardHeader title={<Typography variant=\"h6\">Pulse</Typography>} />\n        <CardContent>\n          <Typography>Pulse</Typography>\n        </CardContent>\n      </Card>\n    );\n}\n\n// Pulse.propTypes = {\n//   children: PropTypes.arrayOf(PropTypes.node).isRequired\n// };\n"]}
+{"version":3,"file":"Pulse.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Pulse/Pulse.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAoC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,aAC3B,KAAC,UAAU,IAAC,KAAK,EAAE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sBAAmB,GAAI,EAClE,KAAC,WAAW,cACV,KAAC,UAAU,wBAAmB,GAClB,IACT,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren } from 'react';\nimport { Card, CardContent, CardHeader, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\n// Pulse is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface PulseProps {\n  // If any, enter additional props that only exist on this component\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    borderLeft: '6px solid',\n    borderLeftColor: theme.palette.primary.light\n  }\n}));\n\nexport default function Pulse(props: PropsWithChildren<PulseProps>) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children } = props;\n  const classes = useStyles();\n\n  return (\n    <Card className={classes.root}>\n      <CardHeader title={<Typography variant='h6'>Pulse</Typography>} />\n      <CardContent>\n        <Typography>Pulse</Typography>\n      </CardContent>\n    </Card>\n  );\n}\n"]}

package/lib/components/designSystemExtension/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface RichTextEditorProps {
+    id?: string;
+    defaultValue: string;
+    label: string;
+    labelHidden: boolean;
+    info: string;
+    testId: string;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    readOnly: boolean;
+    error: boolean;
+    onBlur: React.EventHandler<any>;
+    onChange: React.EventHandler<any>;
+}
+declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<unknown>>;
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.d.ts.map

package/lib/components/designSystemExtension/RichTextEditor/RichTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAe1C,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;CACnC;AAED,QAAA,MAAM,cAAc,qFAwFlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/designSystemExtension/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+import { useAfterInitialEffect, useConsolidatedRef, useUID } from '../../../hooks';
+const useStyles = makeStyles(theme => ({
+    fieldLabel: {
+        position: 'relative',
+        transform: 'translate(0, 0px) scale(1)',
+        marginBottom: '5px',
+        color: theme.palette.text.secondary
+    }
+}));
+const RichTextEditor = forwardRef(function RichTextEditor(props, ref) {
+    const classes = useStyles();
+    const uid = useUID();
+    const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
+    const editorRef = useConsolidatedRef(ref);
+    let richTextComponent = null;
+    useAfterInitialEffect(() => {
+        editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+    }, [readOnly, disabled]);
+    const filePickerCallback = cb => {
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.addEventListener('load', () => {
+                /*
+                  Note: Now we need to register the blob in TinyMCEs image blob
+                  registry. In the next release this part hopefully won't be
+                  necessary, as we are looking to handle it internally.
+                */
+                const blobId = `blobid${new Date().getTime()}`;
+                const blobCache = editorRef.current.editorUpload.blobCache;
+                const base64 = reader.result.split(',')[1];
+                const blobInfo = blobCache.create(blobId, file, base64);
+                blobCache.add(blobInfo);
+                /* call the callback and populate the Title field with the file name */
+                cb(blobInfo.blobUri(), { title: file.name });
+            });
+            reader.readAsDataURL(file);
+        });
+        input.click();
+    };
+    if (readOnly) {
+        const value = defaultValue || '--';
+        // eslint-disable-next-line react/no-danger
+        richTextComponent = _jsx("div", { id: id, className: 'readonly-richtext-editor', dangerouslySetInnerHTML: { __html: value } }, id);
+    }
+    else {
+        richTextComponent = (_jsx(Editor, { tinymceScriptSrc: 'tinymce/tinymce.min.js', onInit: (_evt, editor) => {
+                editorRef.current = editor;
+            }, id: id, initialValue: defaultValue, disabled: disabled, init: {
+                placeholder,
+                menubar: false,
+                statusbar: false,
+                min_height: 130,
+                plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+                autoresize_bottom_margin: 0,
+                toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+                toolbar_location: 'bottom',
+                content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+                branding: false,
+                paste_data_images: true,
+                file_picker_types: 'image',
+                file_picker_callback: filePickerCallback
+            }, onBlur: onBlur, onEditorChange: onChange }));
+    }
+    return (_jsxs(FormControl, { "data-test-id": testId, error: error, required: required, children: [!labelHidden && (_jsx(InputLabel, { id: 'demo-simple-select-error-label', className: classes.fieldLabel, children: label })), richTextComponent, info && _jsx(FormHelperText, { children: info })] }));
+});
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

package/lib/components/designSystemExtension/RichTextEditor/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';\n\nimport { useAfterInitialEffect, useConsolidatedRef, useUID } from '../../../hooks';\n\nconst useStyles = makeStyles(theme => ({\n  fieldLabel: {\n    position: 'relative',\n    transform: 'translate(0, 0px) scale(1)',\n    marginBottom: '5px',\n    color: theme.palette.text.secondary\n  }\n}));\n\ninterface RichTextEditorProps {\n  id?: string;\n  defaultValue: string;\n  label: string;\n  labelHidden: boolean;\n  info: string;\n  testId: string;\n  placeholder: string;\n  disabled: boolean;\n  required: boolean;\n  readOnly: boolean;\n  error: boolean;\n  onBlur: React.EventHandler<any>;\n  onChange: React.EventHandler<any>;\n}\n\nconst RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {\n  const classes = useStyles();\n  const uid = useUID();\n  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;\n\n  const editorRef: any = useConsolidatedRef(ref);\n  let richTextComponent: any = null;\n\n  useAfterInitialEffect(() => {\n    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');\n  }, [readOnly, disabled]);\n\n  const filePickerCallback = cb => {\n    const input = document.createElement('input');\n    input.setAttribute('type', 'file');\n    input.setAttribute('accept', 'image/*');\n\n    input.addEventListener('change', (e: any) => {\n      const file = e.target.files[0];\n\n      const reader: any = new FileReader();\n      reader.addEventListener('load', () => {\n        /*\n          Note: Now we need to register the blob in TinyMCEs image blob\n          registry. In the next release this part hopefully won't be\n          necessary, as we are looking to handle it internally.\n        */\n        const blobId = `blobid${new Date().getTime()}`;\n        const blobCache = editorRef.current.editorUpload.blobCache;\n        const base64 = reader.result.split(',')[1];\n        const blobInfo = blobCache.create(blobId, file, base64);\n        blobCache.add(blobInfo);\n\n        /* call the callback and populate the Title field with the file name */\n        cb(blobInfo.blobUri(), { title: file.name });\n      });\n      reader.readAsDataURL(file);\n    });\n\n    input.click();\n  };\n\n  if (readOnly) {\n    const value = defaultValue || '--';\n    // eslint-disable-next-line react/no-danger\n    richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;\n  } else {\n    richTextComponent = (\n      <Editor\n        tinymceScriptSrc='tinymce/tinymce.min.js'\n        onInit={(_evt, editor) => {\n          editorRef.current = editor;\n        }}\n        id={id}\n        initialValue={defaultValue}\n        disabled={disabled}\n        init={{\n          placeholder,\n          menubar: false,\n          statusbar: false,\n          min_height: 130,\n          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],\n          autoresize_bottom_margin: 0,\n          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',\n          toolbar_location: 'bottom',\n          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',\n          branding: false,\n          paste_data_images: true,\n          file_picker_types: 'image',\n          file_picker_callback: filePickerCallback\n        }}\n        onBlur={onBlur}\n        onEditorChange={onChange}\n      />\n    );\n  }\n\n  return (\n    <FormControl data-test-id={testId} error={error} required={required}>\n      {!labelHidden && (\n        <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>\n          {label}\n        </InputLabel>\n      )}\n      {richTextComponent}\n      {info && <FormHelperText>{info}</FormHelperText>}\n    </FormControl>\n  );\n});\n\nexport default RichTextEditor;\n"]}

package/lib/components/designSystemExtension/RichTextEditor/index.d.ts

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

package/lib/components/designSystemExtension/RichTextEditor/index.d.ts.map

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

package/lib/components/designSystemExtension/RichTextEditor/index.js

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

package/lib/components/designSystemExtension/RichTextEditor/index.js.map

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

package/lib/components/designSystemExtension/WssQuickCreate/WssQuickCreate.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
 import './WssQuickCreate.css';
-export default function WssQuickCreate(props: any): JSX.Element;
+interface WssQuickCreateProps {
+    heading: string;
+    actions?: any[];
+}
+export default function WssQuickCreate(props: WssQuickCreateProps): JSX.Element;
+export {};
 //# sourceMappingURL=WssQuickCreate.d.ts.map

package/lib/components/designSystemExtension/WssQuickCreate/WssQuickCreate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WssQuickCreate.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx"],"names":[],"mappings":";AAEA,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,KAAA,eAuB3C"}
+{"version":3,"file":"WssQuickCreate.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,CAAC;AAI9B,UAAU,mBAAmB;IAE3B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAyBhE"}

package/lib/components/designSystemExtension/WssQuickCreate/WssQuickCreate.js

@@ -1,17 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@material-ui/core';
 import './WssQuickCreate.css';
 export default function WssQuickCreate(props) {
     const { heading, actions } = props;
-    return (React.createElement("div", null,
-        React.createElement("h1", { className: 'quick-link-heading' }, heading),
-        React.createElement("ul", { className: 'quick-link-ul-list' }, actions &&
-            actions.map(element => {
-                return (React.createElement("li", { className: 'quick-link-list', key: element.label },
-                    React.createElement(Button, { className: 'quick-link-button', onClick: element.onClick },
-                        React.createElement("span", { className: 'quick-link-button-span' },
-                            element.icon && React.createElement("img", { className: 'quick-link-icon', src: element.icon }),
-                            React.createElement("span", null, element.label)))));
-            }))));
+    return (_jsxs("div", { children: [_jsx("h1", { id: 'quick-links-heading', className: 'quick-link-heading', children: heading }), _jsx("ul", { id: 'quick-links', className: 'quick-link-ul-list', children: actions &&
+                    actions.map(element => {
+                        return (_jsx("li", { className: 'quick-link-list', children: _jsx(Button, { className: 'quick-link-button', onClick: element.onClick, children: _jsxs("span", { className: 'quick-link-button-span', children: [element.icon && _jsx("img", { className: 'quick-link-icon', src: element.icon }), _jsx("span", { children: element.label })] }) }) }, element.label));
+                    }) })] }));
 }
 //# sourceMappingURL=WssQuickCreate.js.map

package/lib/components/designSystemExtension/WssQuickCreate/WssQuickCreate.js.map

@@ -1 +1 @@
-{"version":3,"file":"WssQuickCreate.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK;IAC1C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL;QACE,4BAAI,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAM;QACjD,4BAAI,SAAS,EAAC,oBAAoB,IAC/B,OAAO;YACN,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBACpB,OAAO,CACP,4BAAI,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,OAAO,CAAC,KAAK;oBAChD,oBAAC,MAAM,IAAC,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,OAAO,CAAC,OAAO;wBAC5D,8BAAM,SAAS,EAAC,wBAAwB;4BACrC,OAAO,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,GAAG;4BACtE,kCAAO,OAAO,CAAC,KAAK,CAAQ,CACvB,CACA,CACN,CACJ,CAAC;YACJ,CAAC,CAAC,CACD,CACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@material-ui/core';\nimport './WssQuickCreate.css';\n\nexport default function WssQuickCreate(props) {\n  const { heading, actions } = props;\n\n  return (\n    <div>\n      <h1 className='quick-link-heading'>{heading}</h1>\n      <ul className='quick-link-ul-list'>\n        {actions &&\n          actions.map(element => {\n            return (\n            <li className='quick-link-list' key={element.label}>\n              <Button className='quick-link-button' onClick={element.onClick}>\n                <span className='quick-link-button-span'>\n                  {element.icon && <img className='quick-link-icon' src={element.icon}/>}\n                  <span>{element.label}</span>\n                </span>\n              </Button>\n            </li>\n            );\n          })}\n      </ul>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"WssQuickCreate.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAU9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,0BACE,aAAI,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,oBAAoB,YACxD,OAAO,GACL,EACL,aAAI,EAAE,EAAC,aAAa,EAAC,SAAS,EAAC,oBAAoB,YAChD,OAAO;oBACN,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;wBACpB,OAAO,CACL,aAAI,SAAS,EAAC,iBAAiB,YAC7B,KAAC,MAAM,IAAC,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,OAAO,CAAC,OAAO,YAC5D,gBAAM,SAAS,EAAC,wBAAwB,aACrC,OAAO,CAAC,IAAI,IAAI,cAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,GAAI,EACvE,yBAAO,OAAO,CAAC,KAAK,GAAQ,IACvB,GACA,IAN0B,OAAO,CAAC,KAAK,CAO7C,CACN,CAAC;oBACJ,CAAC,CAAC,GACD,IACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Button } from '@material-ui/core';\nimport './WssQuickCreate.css';\n\n// WssQuickCreate is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface WssQuickCreateProps {\n  // If any, enter additional props that only exist on this component\n  heading: string;\n  actions?: any[];\n}\n\nexport default function WssQuickCreate(props: WssQuickCreateProps) {\n  const { heading, actions } = props;\n\n  return (\n    <div>\n      <h1 id='quick-links-heading' className='quick-link-heading'>\n        {heading}\n      </h1>\n      <ul id='quick-links' className='quick-link-ul-list'>\n        {actions &&\n          actions.map(element => {\n            return (\n              <li className='quick-link-list' key={element.label}>\n                <Button className='quick-link-button' onClick={element.onClick}>\n                  <span className='quick-link-button-span'>\n                    {element.icon && <img className='quick-link-icon' src={element.icon} />}\n                    <span>{element.label}</span>\n                  </span>\n                </Button>\n              </li>\n            );\n          })}\n      </ul>\n    </div>\n  );\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/field/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":";AAsCA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,KAAA,eAkKzC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/field/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA8B5D,UAAU,iBAAkB,SAAQ,eAAe;IAEjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,GAAG,CAAC;IAChB,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAoK5D"}