@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/table/EnhancedTableToolbar.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = EnhancedTableToolbar;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _ = require(".");
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-function EnhancedTableToolbar(props) {
+import React, { useMemo } from 'react';
+import { Link, Toolbar, Typography, useTheme } from '@mui/material';
+import { isTopBarButton } from '.';
+import Button from '../Button/Button';
+import Tooltip from '../Tooltip/Tooltip';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function EnhancedTableToolbar(props) {
   const {
     isAllSelected,
     numSelected,
@@ -19,12 +12,12 @@ function EnhancedTableToolbar(props) {
     topBarButtons,
     topBarSelectionConfig
   } = props;
-  const theme = (0, _material.useTheme)();
+  const theme = useTheme();
   const selectLinkStyles = {
     color: theme.palette.TwClrTxtBrand,
     cursor: 'pointer'
   };
-  const topBarSelection = (0, _react.useMemo)(() => {
+  const topBarSelection = useMemo(() => {
     if (!renderNumSelectedText) {
       return null;
     }
@@ -38,39 +31,44 @@ function EnhancedTableToolbar(props) {
       renderSelectNoneText,
       renderEnhancedNumSelectedText
     } = topBarSelectionConfig;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected), ' ', !isAllSelected && handleSelectAll && renderSelectAllText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      onClick: handleSelectAll,
-      sx: selectLinkStyles
-    }, renderSelectAllText()), isAllSelected && handleSelectNone && renderSelectNoneText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      onClick: handleSelectNone,
-      sx: selectLinkStyles
-    }, renderSelectNoneText()));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected), ' ', !isAllSelected && handleSelectAll && renderSelectAllText && /*#__PURE__*/_jsx(Link, {
+        onClick: handleSelectAll,
+        sx: selectLinkStyles,
+        children: renderSelectAllText()
+      }), isAllSelected && handleSelectNone && renderSelectNoneText && /*#__PURE__*/_jsx(Link, {
+        onClick: handleSelectNone,
+        sx: selectLinkStyles,
+        children: renderSelectNoneText()
+      })]
+    });
   }, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
-  return renderNumSelectedText && numSelected > 0 ? /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
+  return renderNumSelectedText && numSelected > 0 ? /*#__PURE__*/_jsxs(Toolbar, {
     sx: {
       background: theme.palette.TwClrBgSecondary,
       borderRadius: theme.spacing(0.5)
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    color: "inherit",
-    variant: "subtitle1",
-    component: "div",
-    sx: {
-      flex: '1 1 auto'
-    }
-  }, topBarSelection), topBarButtons === null || topBarButtons === void 0 ? void 0 : topBarButtons.map((tbButton, index) => (0, _.isTopBarButton)(tbButton) ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: tbButton.tooltipTitle,
-    key: index
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    key: tbButton.buttonText,
-    label: tbButton.buttonText,
-    priority: "secondary",
-    type: tbButton.buttonType,
-    onClick: tbButton.onButtonClick,
-    icon: tbButton.icon,
-    disabled: tbButton.disabled,
-    sx: {
-      marginLeft: theme.spacing(1)
-    }
-  })) : tbButton)) : null;
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      color: "inherit",
+      variant: "subtitle1",
+      component: "div",
+      sx: {
+        flex: '1 1 auto'
+      },
+      children: topBarSelection
+    }), topBarButtons?.map((tbButton, index) => isTopBarButton(tbButton) ? /*#__PURE__*/_jsx(Tooltip, {
+      title: tbButton.tooltipTitle,
+      children: /*#__PURE__*/_jsx(Button, {
+        label: tbButton.buttonText,
+        priority: "secondary",
+        type: tbButton.buttonType,
+        onClick: tbButton.onButtonClick,
+        icon: tbButton.icon,
+        disabled: tbButton.disabled,
+        sx: {
+          marginLeft: theme.spacing(1)
+        }
+      }, tbButton.buttonText)
+    }, index) : tbButton)]
+  }) : null;
 }

package/components/table/EnhancedTableToolbarV2.js

@@ -1,24 +1,15 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _EnhancedTableToolbar = _interopRequireDefault(require("./EnhancedTableToolbar"));
-const EnhancedTableToolbarV2 = _ref => {
-  let {
-    selectedRowsCount,
-    pagesCount,
-    renderNumSelectedText,
-    rowsCount,
-    topBarButtons,
-    topBarSelectionConfig
-  } = _ref;
-  const _topBarSelectionConfig = (0, _react.useMemo)(() => {
+import React, { useMemo } from 'react';
+import EnhancedTableToolbar from './EnhancedTableToolbar';
+import { jsx as _jsx } from "react/jsx-runtime";
+const EnhancedTableToolbarV2 = ({
+  selectedRowsCount,
+  pagesCount,
+  renderNumSelectedText,
+  rowsCount,
+  topBarButtons,
+  topBarSelectionConfig
+}) => {
+  const _topBarSelectionConfig = useMemo(() => {
     if (!topBarSelectionConfig) {
       return topBarSelectionConfig;
     }
@@ -26,13 +17,14 @@ const EnhancedTableToolbarV2 = _ref => {
       renderEnhancedNumSelectedText,
       renderSelectAllText
     } = topBarSelectionConfig;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, topBarSelectionConfig), {}, {
+    return {
+      ...topBarSelectionConfig,
       renderEnhancedNumSelectedText: () => renderEnhancedNumSelectedText && renderEnhancedNumSelectedText(selectedRowsCount || 0, pagesCount) || '',
       renderSelectAllText: () => renderSelectAllText && renderSelectAllText(rowsCount) || ''
-    });
+    };
   }, [topBarSelectionConfig, selectedRowsCount, rowsCount, pagesCount]);
   if (topBarSelectionConfig) {
-    return /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
+    return /*#__PURE__*/_jsx(EnhancedTableToolbar, {
       numSelected: selectedRowsCount,
       topBarButtons: topBarButtons,
       topBarSelectionConfig: _topBarSelectionConfig,
@@ -40,10 +32,10 @@ const EnhancedTableToolbarV2 = _ref => {
       renderNumSelectedText: renderNumSelectedText
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
+  return /*#__PURE__*/_jsx(EnhancedTableToolbar, {
     numSelected: selectedRowsCount,
     renderNumSelectedText: renderNumSelectedText,
     topBarButtons: topBarButtons
   });
 };
-var _default = exports.default = EnhancedTableToolbarV2;
+export default EnhancedTableToolbarV2;

package/components/table/TableCellRenderer.js

@@ -1,29 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CellBooleanRenderer = CellBooleanRenderer;
-exports.CellDateRenderer = CellDateRenderer;
-exports.CellEditRenderer = CellEditRenderer;
-exports.CellNotesRenderer = CellNotesRenderer;
-exports.CellTextRenderer = CellTextRenderer;
-exports.cellDateFormatter = void 0;
-exports.default = CellRenderer;
-var _react = _interopRequireDefault(require("react"));
-var _iconsMaterial = require("@mui/icons-material");
-var _material = require("@mui/material");
-var _utils = require("../../utils");
+import React from 'react';
+import { Edit, Notes } from '@mui/icons-material';
+import { Box, Link, TableCell, Typography, useTheme } from '@mui/material';
+import { getDateDisplayValue, preventDefaultEvent } from '../../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultStyles = theme => ({
   '&.MuiTableCell-root': {
     paddingTop: '0px',
     paddingBottom: '0px',
-    borderBottom: "1px solid ".concat(theme.palette.TwClrBgSecondary),
+    borderBottom: `1px solid ${theme.palette.TwClrBgSecondary}`,
     fontVariantNumeric: 'tabular-nums'
   }
 });
-function CellRenderer(props) {
+export default function CellRenderer(props) {
   const {
     column,
     value,
@@ -38,9 +26,9 @@ function CellRenderer(props) {
     title,
     component
   } = props;
-  const id = "row".concat(index, "-").concat(column.key);
+  const id = `row${index}-${column.key}`;
   if (column.type === 'date' && typeof value === 'string' && value) {
-    return /*#__PURE__*/_react.default.createElement(CellDateRenderer, {
+    return /*#__PURE__*/_jsx(CellDateRenderer, {
       id: id,
       value: value,
       className: className,
@@ -50,7 +38,7 @@ function CellRenderer(props) {
       title: title
     });
   } else if (column.type === 'notes' && value && typeof value === 'string') {
-    return /*#__PURE__*/_react.default.createElement(CellNotesRenderer, {
+    return /*#__PURE__*/_jsx(CellNotesRenderer, {
       id: id,
       value: value,
       className: className,
@@ -60,7 +48,7 @@ function CellRenderer(props) {
       title: title
     });
   } else if (column.type === 'boolean') {
-    return /*#__PURE__*/_react.default.createElement(CellBooleanRenderer, {
+    return /*#__PURE__*/_jsx(CellBooleanRenderer, {
       id: id,
       value: value,
       className: className,
@@ -72,7 +60,7 @@ function CellRenderer(props) {
       title: title
     });
   } else if (column.type === 'edit') {
-    return /*#__PURE__*/_react.default.createElement(CellEditRenderer, {
+    return /*#__PURE__*/_jsx(CellEditRenderer, {
       id: id,
       onRowClick: onRowClick,
       className: className,
@@ -83,7 +71,7 @@ function CellRenderer(props) {
       title: title
     });
   }
-  return /*#__PURE__*/_react.default.createElement(CellTextRenderer, {
+  return /*#__PURE__*/_jsx(CellTextRenderer, {
     id: id,
     value: value,
     className: className,
@@ -94,151 +82,157 @@ function CellRenderer(props) {
     component: component
   });
 }
-const cellDateFormatter = value => {
+export const cellDateFormatter = value => {
   if (value) {
-    return (0, _utils.getDateDisplayValue)(value);
+    return getDateDisplayValue(value);
   }
 };
-exports.cellDateFormatter = cellDateFormatter;
-function CellDateRenderer(_ref) {
-  let {
-    id,
-    value,
-    className,
-    alignment,
-    style,
-    sx,
-    title
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+export function CellDateRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(TableCell, {
     id: id,
     align: alignment || 'left',
     className: className,
     sx: [defaultStyles(theme), {
       whiteSpace: 'nowrap'
     }, style, ...(Array.isArray(sx) ? sx : [sx])],
-    title: title
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p",
-    variant: "body1",
-    fontSize: "16px"
-  }, cellDateFormatter(value)));
+    title: title,
+    children: /*#__PURE__*/_jsx(Typography, {
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: cellDateFormatter(value)
+    })
+  });
 }
-function CellTextRenderer(_ref2) {
-  let {
-    id,
-    value,
-    className,
-    alignment,
-    style,
-    sx,
-    title,
-    component
-  } = _ref2;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+export function CellTextRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title,
+  component
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(TableCell, {
     id: id,
     align: alignment || 'left',
     title: title ? title : typeof value === 'string' ? value : '',
     className: className,
-    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: component || 'p',
-    variant: "body1",
-    noWrap: true,
-    fontSize: "16px",
-    sx: {
-      maxWidth: 400
-    }
-  }, value));
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    children: /*#__PURE__*/_jsx(Typography, {
+      component: component || 'p',
+      variant: "body1",
+      noWrap: true,
+      fontSize: "16px",
+      sx: {
+        maxWidth: 400
+      },
+      children: value
+    })
+  });
 }
-function CellBooleanRenderer(_ref3) {
-  let {
-    id,
-    value,
-    className,
-    booleanFalseText,
-    booleanTrueText,
-    alignment,
-    style,
-    sx,
-    title
-  } = _ref3;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+export function CellBooleanRenderer({
+  id,
+  value,
+  className,
+  booleanFalseText,
+  booleanTrueText,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(TableCell, {
     id: id,
     align: alignment || 'left',
     className: className,
     sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
-    title: title
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p",
-    variant: "body1",
-    fontSize: "16px"
-  }, (value === null || value === void 0 ? void 0 : value.toString()) === 'true' ? booleanTrueText : booleanFalseText));
+    title: title,
+    children: /*#__PURE__*/_jsx(Typography, {
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: value?.toString() === 'true' ? booleanTrueText : booleanFalseText
+    })
+  });
 }
-function CellNotesRenderer(_ref4) {
-  let {
-    id,
-    value,
-    className,
-    alignment,
-    style,
-    sx,
-    title
-  } = _ref4;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+export function CellNotesRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(TableCell, {
     id: id,
     align: alignment || 'left',
     className: className,
     sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
-    title: title
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    id: id,
-    component: "p",
-    variant: "body1",
-    fontSize: "16px"
-  }, value && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_iconsMaterial.Notes, null) : ''));
+    title: title,
+    children: /*#__PURE__*/_jsx(Typography, {
+      id: id,
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: value && value.length > 0 ? /*#__PURE__*/_jsx(Notes, {}) : ''
+    })
+  });
 }
-function CellEditRenderer(_ref5) {
-  let {
-    id,
-    onRowClick,
-    className,
-    editText,
-    alignment,
-    style,
-    sx,
-    title
-  } = _ref5;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+export function CellEditRenderer({
+  id,
+  onRowClick,
+  className,
+  editText,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(TableCell, {
     id: id,
     align: alignment || 'left',
     className: className,
     sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
-    title: title
-  }, /*#__PURE__*/_react.default.createElement(_material.Link, {
-    id: "".concat(id, "-button"),
-    href: "#",
-    onClick: event => {
-      (0, _utils.preventDefaultEvent)(event);
-      if (onRowClick) {
-        onRowClick();
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    display: "flex"
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p",
-    variant: "body1",
-    fontSize: "16px"
-  }, editText), /*#__PURE__*/_react.default.createElement(_iconsMaterial.Edit, {
-    fontSize: "small",
-    sx: {
-      marginLeft: theme.spacing(1)
-    }
-  }))));
+    title: title,
+    children: /*#__PURE__*/_jsx(Link, {
+      id: `${id}-button`,
+      href: "#",
+      onClick: event => {
+        preventDefaultEvent(event);
+        if (onRowClick) {
+          onRowClick();
+        }
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "p",
+          variant: "body1",
+          fontSize: "16px",
+          children: editText
+        }), /*#__PURE__*/_jsx(Edit, {
+          fontSize: "small",
+          sx: {
+            marginLeft: theme.spacing(1)
+          }
+        })]
+      })
+    })
+  });
 }

package/components/table/TableHeader.js

@@ -1,19 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = EnhancedTableHead;
-var _react = _interopRequireDefault(require("react"));
-var _sortable = require("@dnd-kit/sortable");
-var _material = require("@mui/material");
-var _text = require("../../utils/text");
-var _Checkbox = require("../Checkbox");
-var _TableHeaderItem = _interopRequireDefault(require("./TableHeaderItem"));
-var _density = require("./density");
-function EnhancedTableHead(props) {
-  const theme = (0, _material.useTheme)();
+import React from 'react';
+import { SortableContext } from '@dnd-kit/sortable';
+import { Checkbox, TableCell, TableHead, TableRow, useTheme } from '@mui/material';
+import { titleCase } from '../../utils/text';
+import { CheckboxStyle } from '../Checkbox';
+import TableHeaderItem from './TableHeaderItem';
+import { getTableRowHeight } from './density';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function EnhancedTableHead(props) {
+  const theme = useTheme();
   const {
     order,
     orderBy,
@@ -25,12 +19,12 @@ function EnhancedTableHead(props) {
   } = props;
   const headerCellStyles = {
     '&.MuiTableCell-root': {
-      borderBottom: "2px solid ".concat(theme.palette.TwClrBrdrSecondary)
+      borderBottom: `2px solid ${theme.palette.TwClrBrdrSecondary}`
     },
     paddingTop: '0px',
     paddingBottom: '0px'
   };
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     setHeadCells(columnsToHeadCells(props.columns));
   }, [props.columns]);
   function columnsToHeadCells(columns) {
@@ -38,38 +32,42 @@ function EnhancedTableHead(props) {
       id: c.key,
       disablePadding: false,
       className: c.className,
-      label: typeof c.name === 'string' && c.name.length > 0 ? (0, _text.titleCase)(c.name) : c.name,
+      label: typeof c.name === 'string' && c.name.length > 0 ? titleCase(c.name) : c.name,
       tooltipTitle: c.tooltipTitle,
       alignment: c.alignment,
       sx: [headerCellStyles, ...(Array.isArray(c.sx) ? c.sx : [c.sx])]
     }));
   }
-  const [headCells, setHeadCells] = _react.default.useState(columnsToHeadCells(props.columns));
-  return /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    id: "table-header",
-    sx: {
-      height: (0, _density.getTableRowHeight)(density)
-    }
-  }, numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    padding: "checkbox",
-    sx: headerCellStyles
-  }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
-    disableRipple: true,
-    sx: (0, _Checkbox.CheckboxStyle)(theme),
-    color: "primary",
-    indeterminate: numSelected > 0 && numSelected < rowCount,
-    checked: rowCount > 0 && numSelected === rowCount,
-    onChange: onSelectAllClick
-  })), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-    items: headCells
-  }, headCells.map((headCell, i) => {
-    return /*#__PURE__*/_react.default.createElement(_TableHeaderItem.default, {
-      headCell: headCell,
-      order: order,
-      orderBy: orderBy,
-      onRequestSort: onRequestSort,
-      i: i,
-      key: i
-    });
-  }))));
+  const [headCells, setHeadCells] = React.useState(columnsToHeadCells(props.columns));
+  return /*#__PURE__*/_jsx(TableHead, {
+    children: /*#__PURE__*/_jsxs(TableRow, {
+      id: "table-header",
+      sx: {
+        height: getTableRowHeight(density)
+      },
+      children: [numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/_jsx(TableCell, {
+        padding: "checkbox",
+        sx: headerCellStyles,
+        children: /*#__PURE__*/_jsx(Checkbox, {
+          disableRipple: true,
+          sx: CheckboxStyle(theme),
+          color: "primary",
+          indeterminate: numSelected > 0 && numSelected < rowCount,
+          checked: rowCount > 0 && numSelected === rowCount,
+          onChange: onSelectAllClick
+        })
+      }), /*#__PURE__*/_jsx(SortableContext, {
+        items: headCells,
+        children: headCells.map((headCell, i) => {
+          return /*#__PURE__*/_jsx(TableHeaderItem, {
+            headCell: headCell,
+            order: order,
+            orderBy: orderBy,
+            onRequestSort: onRequestSort,
+            i: i
+          }, i);
+        })
+      })]
+    })
+  });
 }