@corva/ui 0.65.0-1-test → 0.65.0-2

package/components/Drillstring/BHAComponentsTable/components/Suggestions/AutoCompleteDialog.js

@@ -1,260 +1 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { memo, useState } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { makeStyles, Dialog, DialogTitle, Tooltip, IconButton, DialogContent, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Radio, DialogActions, Button } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import { getUnitDisplay } from '../../../../../utils/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    dialogTitle: {
-      background: function background(_ref) {
-        var isMobile = _ref.isMobile;
-        return isMobile ? theme.palette.background.b5 : theme.palette.background.b9;
-      }
-    },
-    titleWrapper: {
-      flex: 1,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      fontSize: 20
-    },
-    title: {
-      fontWeight: 400
-    },
-    closeIconButton: {
-      fontSize: 20,
-      padding: 4,
-      '&:hover $closeIcon': {
-        color: theme.palette.action.active
-      }
-    },
-    closeIcon: {
-      color: theme.palette.primary.text6
-    },
-    dialogContent: {
-      display: 'flex',
-      overflow: 'hidden',
-      background: function background(_ref2) {
-        var isMobile = _ref2.isMobile;
-        return isMobile ? theme.palette.background.b5 : theme.palette.background.b9;
-      }
-    },
-    dialogActions: {
-      paddingTop: 8,
-      paddingBottom: 40,
-      background: function background(_ref3) {
-        var isMobile = _ref3.isMobile;
-        return isMobile ? theme.palette.background.b5 : theme.palette.background.b9;
-      }
-    },
-    tableContainer: {
-      flex: 1,
-      overflow: 'auto',
-      '&::-webkit-scrollbar-corner': {
-        background: 'rgba(0, 0, 0, 0)'
-      }
-    },
-    headerCell: {
-      padding: '8px 5px',
-      background: function background(_ref4) {
-        var isMobile = _ref4.isMobile;
-        return isMobile ? theme.palette.background.b5 : theme.palette.background.b9;
-      },
-      color: theme.palette.primary.text7,
-      fontWeight: 500,
-      fontSize: '12px',
-      lineHeight: '14px',
-      verticalAlign: 'middle',
-      borderTop: '1px solid #5c5c5c',
-      maxWidth: '100px'
-    },
-    cell: {
-      padding: '0 8px',
-      fontSize: '14px',
-      lineHeight: '20px',
-      background: function background(_ref5) {
-        var isMobile = _ref5.isMobile;
-        return isMobile ? theme.palette.background.b5 : theme.palette.background.b9;
-      }
-    },
-    actionHeadCell: {
-      zIndex: 12
-    },
-    actionCell: {
-      position: 'sticky',
-      left: 0,
-      zIndex: 2
-    },
-    shadow: {
-      position: 'sticky',
-      zIndex: 10,
-      height: 0,
-      border: 0,
-      padding: 0,
-      margin: 0,
-      '&::after': {
-        content: "' '",
-        pointerEvents: 'none',
-        position: 'absolute',
-        height: '16px',
-        left: 0,
-        right: 0
-      }
-    },
-    topShadow: {
-      top: '48px',
-      '&::after': {
-        background: function background(_ref6) {
-          var isMobile = _ref6.isMobile;
-          return isMobile ? "linear-gradient(0deg, rgba(65, 65, 65, 0) 0%, ".concat(theme.palette.background.b5, " 100%)") : "linear-gradient(0deg, rgba(65, 65, 65, 0) 0%, ".concat(theme.palette.background.b9, " 100%)");
-        }
-      }
-    },
-    bottomShadow: {
-      bottom: '16px',
-      '&::after': {
-        background: function background(_ref7) {
-          var isMobile = _ref7.isMobile;
-          return isMobile ? "linear-gradient(180deg, rgba(65, 65, 65, 0) 0%, ".concat(theme.palette.background.b5, " 100%)") : "linear-gradient(180deg, rgba(65, 65, 65, 0) 0%, ".concat(theme.palette.background.b9, " 100%)");
-        }
-      }
-    }
-  };
-});
-function AutoCompleteDialog(_ref8) {
-  var isMobile = _ref8.isMobile,
-    data = _ref8.data,
-    columns = _ref8.columns,
-    onClose = _ref8.onClose,
-    onSelect = _ref8.onSelect;
-  var classes = useStyles({
-    isMobile: isMobile
-  });
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedRowIndex = _useState2[0],
-    setSelectedRowIndex = _useState2[1];
-  var handleSelectRow = function handleSelectRow(rowIndex) {
-    setSelectedRowIndex(rowIndex);
-  };
-  var handleSave = function handleSave() {
-    onSelect(data[selectedRowIndex]);
-  };
-
-  /* eslint-disable react/no-array-index-key */
-  return /*#__PURE__*/jsxs(Dialog, {
-    open: true,
-    maxWidth: "lg",
-    onBackdropClick: onClose,
-    onEscapeKeyDown: onClose,
-    fullScreen: isMobile,
-    children: [/*#__PURE__*/jsx(DialogTitle, {
-      className: classes.dialogTitle,
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes.titleWrapper,
-        children: [/*#__PURE__*/jsx("span", {
-          className: classes.title,
-          children: "AutoComplete Items"
-        }), /*#__PURE__*/jsx(Tooltip, {
-          title: "Close",
-          children: /*#__PURE__*/jsx(IconButton, {
-            "data-not-migrated-muiiconbutton": true,
-            "aria-label": "close",
-            className: classes.closeIconButton,
-            onClick: onClose,
-            children: /*#__PURE__*/jsx(CloseIcon, {
-              className: classes.closeIcon
-            })
-          })
-        })]
-      })
-    }), /*#__PURE__*/jsx(DialogContent, {
-      className: classes.dialogContent,
-      children: /*#__PURE__*/jsx(TableContainer, {
-        className: classes.tableContainer,
-        children: /*#__PURE__*/jsxs(Table, {
-          stickyHeader: true,
-          size: "small",
-          "aria-label": "autocomplete items",
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                className: classNames(classes.headerCell, classes.actionHeadCell),
-                children: "Action"
-              }), columns.map(function (column, columnIndex) {
-                return /*#__PURE__*/jsxs(TableCell, {
-                  className: classes.headerCell,
-                  style: {
-                    minWidth: column.width
-                  },
-                  align: columnIndex === columns.length - 1 ? 'right' : 'left',
-                  children: [column.label, " ", column.unitType && "(".concat(getUnitDisplay(column.unitType), ")")]
-                }, column.key);
-              })]
-            })
-          }), /*#__PURE__*/jsxs(TableBody, {
-            children: [data.length > 0 && /*#__PURE__*/jsx(TableRow, {
-              children: /*#__PURE__*/jsx(TableCell, {
-                colSpan: "100%",
-                className: classNames(classes.shadow, classes.topShadow)
-              })
-            }), data.map(function (row, rowIndex) {
-              return /*#__PURE__*/jsxs(TableRow, {
-                children: [/*#__PURE__*/jsx(TableCell, {
-                  className: classNames(classes.cell, classes.actionCell),
-                  children: /*#__PURE__*/jsx(Radio, {
-                    color: "primary",
-                    checked: rowIndex === selectedRowIndex,
-                    onChange: function onChange() {
-                      return handleSelectRow(rowIndex);
-                    },
-                    value: rowIndex
-                  })
-                }), columns.map(function (column, columnIndex) {
-                  return /*#__PURE__*/jsx(TableCell, {
-                    className: classes.cell,
-                    align: columnIndex === columns.length - 1 ? 'right' : 'left',
-                    children: row[column.key]
-                  }, column.key);
-                })]
-              }, rowIndex);
-            }), data.length > 0 && /*#__PURE__*/jsx(TableRow, {
-              children: /*#__PURE__*/jsx(TableCell, {
-                colSpan: "100%",
-                className: classNames(classes.shadow, classes.bottomShadow)
-              })
-            })]
-          })]
-        })
-      })
-    }), /*#__PURE__*/jsxs(DialogActions, {
-      className: classes.dialogActions,
-      children: [/*#__PURE__*/jsx(Button, {
-        onClick: onClose,
-        color: "primary",
-        children: "Cancel"
-      }), /*#__PURE__*/jsx(Button, {
-        variant: "contained",
-        color: "primary",
-        disabled: selectedRowIndex < 0,
-        onClick: handleSave,
-        children: "Select"
-      })]
-    })]
-  });
-}
-AutoCompleteDialog.propTypes = {
-  isMobile: PropTypes.bool.isRequired,
-  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSelect: PropTypes.func.isRequired
-};
-var AutoCompleteDialog$1 = memo(AutoCompleteDialog);
-
-export { AutoCompleteDialog$1 as default };
-//# sourceMappingURL=AutoCompleteDialog.js.map
+import e from"@babel/runtime/helpers/slicedToArray";import{memo as t,useState as n}from"react";import o from"classnames";import a from"prop-types";import{makeStyles as i,Dialog as l,DialogTitle as r,Tooltip as c,IconButton as d,DialogContent as s,TableContainer as p,Table as u,TableHead as b,TableRow as g,TableCell as m,TableBody as h,Radio as f,DialogActions as k,Button as x}from"@material-ui/core";import y from"@material-ui/icons/Close";import{getUnitDisplay as C}from"../../../../../utils/index.js";import{jsxs as v,jsx as N}from"react/jsx-runtime";var S=i((function(e){return{dialogTitle:{background:function(t){return t.isMobile?e.palette.background.b5:e.palette.background.b9}},titleWrapper:{flex:1,display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:20},title:{fontWeight:400},closeIconButton:{fontSize:20,padding:4,"&:hover $closeIcon":{color:e.palette.action.active}},closeIcon:{color:e.palette.primary.text6},dialogContent:{display:"flex",overflow:"hidden",background:function(t){return t.isMobile?e.palette.background.b5:e.palette.background.b9}},dialogActions:{paddingTop:8,paddingBottom:40,background:function(t){return t.isMobile?e.palette.background.b5:e.palette.background.b9}},tableContainer:{flex:1,overflow:"auto","&::-webkit-scrollbar-corner":{background:"rgba(0, 0, 0, 0)"}},headerCell:{padding:"8px 5px",background:function(t){return t.isMobile?e.palette.background.b5:e.palette.background.b9},color:e.palette.primary.text7,fontWeight:500,fontSize:"12px",lineHeight:"14px",verticalAlign:"middle",borderTop:"1px solid #5c5c5c",maxWidth:"100px"},cell:{padding:"0 8px",fontSize:"14px",lineHeight:"20px",background:function(t){return t.isMobile?e.palette.background.b5:e.palette.background.b9}},actionHeadCell:{zIndex:12},actionCell:{position:"sticky",left:0,zIndex:2},shadow:{position:"sticky",zIndex:10,height:0,border:0,padding:0,margin:0,"&::after":{content:"' '",pointerEvents:"none",position:"absolute",height:"16px",left:0,right:0}},topShadow:{top:"48px","&::after":{background:function(t){var n=t.isMobile;return"linear-gradient(0deg, rgba(65, 65, 65, 0) 0%, ".concat(n?e.palette.background.b5:e.palette.background.b9," 100%)")}}},bottomShadow:{bottom:"16px","&::after":{background:function(t){var n=t.isMobile;return"linear-gradient(180deg, rgba(65, 65, 65, 0) 0%, ".concat(n?e.palette.background.b5:e.palette.background.b9," 100%)")}}}}}));function w(t){var a=t.isMobile,i=t.data,w=t.columns,I=t.onClose,M=t.onSelect,z=S({isMobile:a}),T=n(-1),W=e(T,2),A=W[0],q=W[1];return v(l,{open:!0,maxWidth:"lg",onBackdropClick:I,onEscapeKeyDown:I,fullScreen:a,children:[N(r,{className:z.dialogTitle,children:v("div",{className:z.titleWrapper,children:[N("span",{className:z.title,children:"AutoComplete Items"}),N(c,{title:"Close",children:N(d,{"data-not-migrated-muiiconbutton":!0,"aria-label":"close",className:z.closeIconButton,onClick:I,children:N(y,{className:z.closeIcon})})})]})}),N(s,{className:z.dialogContent,children:N(p,{className:z.tableContainer,children:v(u,{stickyHeader:!0,size:"small","aria-label":"autocomplete items",children:[N(b,{children:v(g,{children:[N(m,{className:o(z.headerCell,z.actionHeadCell),children:"Action"}),w.map((function(e,t){return v(m,{className:z.headerCell,style:{minWidth:e.width},align:t===w.length-1?"right":"left",children:[e.label," ",e.unitType&&"(".concat(C(e.unitType),")")]},e.key)}))]})}),v(h,{children:[i.length>0&&N(g,{children:N(m,{colSpan:"100%",className:o(z.shadow,z.topShadow)})}),i.map((function(e,t){return v(g,{children:[N(m,{className:o(z.cell,z.actionCell),children:N(f,{color:"primary",checked:t===A,onChange:function(){return function(e){q(e)}(t)},value:t})}),w.map((function(t,n){return N(m,{className:z.cell,align:n===w.length-1?"right":"left",children:e[t.key]},t.key)}))]},t)})),i.length>0&&N(g,{children:N(m,{colSpan:"100%",className:o(z.shadow,z.bottomShadow)})})]})]})})}),v(k,{className:z.dialogActions,children:[N(x,{onClick:I,color:"primary",children:"Cancel"}),N(x,{variant:"contained",color:"primary",disabled:A<0,onClick:function(){M(i[A])},children:"Select"})]})]})}w.propTypes={isMobile:a.bool.isRequired,data:a.arrayOf(a.shape({})).isRequired,columns:a.arrayOf(a.shape({})).isRequired,onClose:a.func.isRequired,onSelect:a.func.isRequired};var I=t(w);export{I as default};

package/components/Drillstring/BHAComponentsTable/components/Suggestions/Suggestions.js

@@ -1,274 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { makeStyles, Tooltip } from '@material-ui/core';
-import { isMobileDetected } from '../../../../../utils/mobileDetect.js';
-import { getUnitDisplay } from '../../../../../utils/index.js';
-import AutoCompleteDialog from './AutoCompleteDialog.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = makeStyles(function (theme) {
-  return {
-    suggestions: {
-      width: '100%',
-      marginBottom: '16px',
-      marginLeft: function marginLeft(_ref) {
-        var isMobile = _ref.isMobile;
-        return isMobile ? '8px' : 0;
-      }
-    },
-    tagsContainer: {
-      width: '100%',
-      position: 'relative'
-    },
-    tags: {
-      width: '100%',
-      overflowX: 'auto',
-      display: 'flex',
-      paddingBottom: function paddingBottom(_ref2) {
-        var isMobile = _ref2.isMobile;
-        return isMobile ? '8px' : '5px';
-      },
-      '&::-webkit-scrollbar': {
-        height: '6px'
-      },
-      '&::-webkit-scrollbar-thumb': {
-        backgroundColor: 'rgba(20, 20, 20, 0.8)',
-        borderRadius: '10px',
-        border: '1px solid rgba(28, 28, 28, 0.01)',
-        backgroundClip: 'padding-box',
-        boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25)'
-      },
-      '&::-webkit-scrollbar-track': {
-        backgroundColor: 'transparent'
-      }
-    },
-    tagWrapper: {
-      marginRight: '10px'
-    },
-    tag: {
-      maxWidth: '150px',
-      padding: '3.5px 10px 3.5px',
-      fontSize: '13px',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      color: theme.palette.primary.text6,
-      border: '1px solid #616161',
-      borderRadius: '40px',
-      cursor: 'pointer',
-      '&:hover': {
-        color: theme.palette.primary.main,
-        border: "1px solid ".concat(theme.palette.primary.main)
-      }
-    },
-    tooltip: {
-      background: 'rgba(59,59,59,0.9)',
-      borderRadius: '4px',
-      padding: '8px'
-    },
-    cta: {
-      marginTop: '2px',
-      color: theme.palette.primary.main,
-      fontSize: '14px',
-      fontWeight: 400,
-      letterSpacing: '0.15px',
-      lineHeight: '19px',
-      cursor: 'pointer',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    shadow: {
-      width: '24px',
-      height: '100%',
-      position: 'absolute',
-      zIndex: 2,
-      top: 0
-    },
-    leftShadow: {
-      left: 0,
-      background: "linear-gradient(-90deg, rgba(39, 39, 39, 0) 0%, ".concat(theme.palette.background.b5, " 100%)")
-    },
-    rightShadow: {
-      right: 0,
-      background: "linear-gradient(90deg, rgba(39, 39, 39, 0) 0%, ".concat(theme.palette.background.b5, " 100%)")
-    },
-    tooltipContainer: {
-      background: theme.palette.background.b8,
-      opacity: 0.9,
-      fontSize: '14px',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '4px'
-    },
-    tooltipLine: {
-      height: '20px',
-      display: 'flex',
-      alignItems: 'center'
-    },
-    tooltipUnit: {
-      fontSize: '12px',
-      color: theme.palette.primary.text6
-    }
-  };
-});
-var TagDescription = function TagDescription(_ref3) {
-  var descriptionKeys = _ref3.descriptionKeys,
-    columnMaps = _ref3.columnMaps,
-    dataItem = _ref3.dataItem;
-  var styles = useStyles();
-  return /*#__PURE__*/jsx("div", {
-    className: styles.tooltipContainer,
-    children: descriptionKeys.map(function (key) {
-      return /*#__PURE__*/jsxs("div", {
-        className: styles.tooltipLine,
-        children: [/*#__PURE__*/jsxs("span", {
-          children: [columnMaps[key].label, ":\xA0"]
-        }), /*#__PURE__*/jsx("span", {
-          children: dataItem[key] || '-'
-        }), columnMaps[key].unitType && /*#__PURE__*/jsxs("span", {
-          className: styles.tooltipUnit,
-          children: ["\xA0", getUnitDisplay(columnMaps[key].unitType)]
-        })]
-      }, key);
-    })
-  });
-};
-TagDescription.propTypes = {
-  descriptionKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  columnMaps: PropTypes.shape({}).isRequired,
-  dataItem: PropTypes.shape({}).isRequired
-};
-function Suggestions(_ref4) {
-  var data = _ref4.data,
-    allData = _ref4.allData,
-    columns = _ref4.columns,
-    displayKeys = _ref4.displayKeys,
-    descriptionKeys = _ref4.descriptionKeys,
-    onSelect = _ref4.onSelect,
-    isCasing = _ref4.isCasing;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSelectDialogOpen = _useState2[0],
-    setIsSelectDialogOpen = _useState2[1];
-  var classes = useStyles({
-    isMobile: isMobileDetected
-  });
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showLeftShadow = _useState4[0],
-    setShowLeftShadow = _useState4[1];
-  var containerRef = useRef();
-  var columnMaps = useMemo(function () {
-    return columns.reduce(function (result, column) {
-      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, column.key, column));
-    }, {});
-  }, [columns]);
-  var updateShadows = useCallback(function () {
-    if (containerRef.current) {
-      var scrollLeft = containerRef.current.scrollLeft;
-      setShowLeftShadow(!!scrollLeft);
-    }
-  }, []);
-  useEffect(function () {
-    var resizeObserver = new ResizeObserver(updateShadows);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  var handleOpenSelectDialog = function handleOpenSelectDialog() {
-    setIsSelectDialogOpen(true);
-  };
-  var handleCloseSelectDialog = function handleCloseSelectDialog() {
-    setIsSelectDialogOpen(false);
-  };
-  var handleSelect = function handleSelect(suggestion) {
-    setIsSelectDialogOpen(false);
-    onSelect(suggestion);
-  };
-  var renderTag = function renderTag(dataItem) {
-    if (isCasing) {
-      return displayKeys.map(function (key) {
-        return "".concat(dataItem[key], "\"");
-      }).join('/');
-    }
-    return displayKeys.map(function (key) {
-      return dataItem[key];
-    }).join(' ');
-  };
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.suggestions,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: classes.tagsContainer,
-      children: [/*#__PURE__*/jsx("div", {
-        className: classes.tags,
-        ref: containerRef,
-        onScroll: updateShadows,
-        children: data.map(function (dataItem, idx) {
-          return (
-            /*#__PURE__*/
-            // eslint-disable-next-line react/no-array-index-key
-            jsx("div", {
-              className: classes.tagWrapper,
-              children: /*#__PURE__*/jsx(Tooltip, {
-                classes: {
-                  tooltip: classes.tooltip
-                },
-                title: /*#__PURE__*/jsx(TagDescription, {
-                  descriptionKeys: descriptionKeys,
-                  columnMaps: columnMaps,
-                  dataItem: dataItem
-                }),
-                children: /*#__PURE__*/jsx("div", {
-                  className: classes.tag,
-                  onClick: function onClick() {
-                    return onSelect(dataItem);
-                  },
-                  children: renderTag(dataItem)
-                })
-              })
-            }, idx)
-          );
-        })
-      }), showLeftShadow && /*#__PURE__*/jsx("div", {
-        className: classNames(classes.shadow, classes.leftShadow)
-      }), /*#__PURE__*/jsx("div", {
-        className: classNames(classes.shadow, classes.rightShadow)
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: classes.cta,
-      onClick: handleOpenSelectDialog,
-      children: "Show all AutoComplete results"
-    }), isSelectDialogOpen && /*#__PURE__*/jsx(AutoCompleteDialog, {
-      data: allData,
-      columns: columns,
-      onClose: handleCloseSelectDialog,
-      onSelect: handleSelect,
-      isMobile: isMobileDetected
-    })]
-  });
-}
-Suggestions.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  allData: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  displayKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  descriptionKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onSelect: PropTypes.func.isRequired,
-  isCasing: PropTypes.bool
-};
-Suggestions.defaultProps = {
-  isCasing: false
-};
-var Suggestions$1 = memo(Suggestions);
-
-export { Suggestions$1 as default };
-//# sourceMappingURL=Suggestions.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{memo as t,useState as i,useRef as o,useMemo as n,useCallback as a,useEffect as s}from"react";import p from"classnames";import l from"prop-types";import{makeStyles as c,Tooltip as d}from"@material-ui/core";import{isMobileDetected as u}from"../../../../../utils/mobileDetect.js";import{getUnitDisplay as m}from"../../../../../utils/index.js";import f from"./AutoCompleteDialog.js";import{jsxs as g,jsx as b}from"react/jsx-runtime";function h(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,i)}return t}function x(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?h(Object(i),!0).forEach((function(t){e(r,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):h(Object(i)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(i,e))}))}return r}var y=c((function(e){return{suggestions:{width:"100%",marginBottom:"16px",marginLeft:function(e){return e.isMobile?"8px":0}},tagsContainer:{width:"100%",position:"relative"},tags:{width:"100%",overflowX:"auto",display:"flex",paddingBottom:function(e){return e.isMobile?"8px":"5px"},"&::-webkit-scrollbar":{height:"6px"},"&::-webkit-scrollbar-thumb":{backgroundColor:"rgba(20, 20, 20, 0.8)",borderRadius:"10px",border:"1px solid rgba(28, 28, 28, 0.01)",backgroundClip:"padding-box",boxShadow:"0px 2px 2px rgba(0, 0, 0, 0.25)"},"&::-webkit-scrollbar-track":{backgroundColor:"transparent"}},tagWrapper:{marginRight:"10px"},tag:{maxWidth:"150px",padding:"3.5px 10px 3.5px",fontSize:"13px",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:e.palette.primary.text6,border:"1px solid #616161",borderRadius:"40px",cursor:"pointer","&:hover":{color:e.palette.primary.main,border:"1px solid ".concat(e.palette.primary.main)}},tooltip:{background:"rgba(59,59,59,0.9)",borderRadius:"4px",padding:"8px"},cta:{marginTop:"2px",color:e.palette.primary.main,fontSize:"14px",fontWeight:400,letterSpacing:"0.15px",lineHeight:"19px",cursor:"pointer","&:hover":{textDecoration:"underline"}},shadow:{width:"24px",height:"100%",position:"absolute",zIndex:2,top:0},leftShadow:{left:0,background:"linear-gradient(-90deg, rgba(39, 39, 39, 0) 0%, ".concat(e.palette.background.b5," 100%)")},rightShadow:{right:0,background:"linear-gradient(90deg, rgba(39, 39, 39, 0) 0%, ".concat(e.palette.background.b5," 100%)")},tooltipContainer:{background:e.palette.background.b8,opacity:.9,fontSize:"14px",display:"flex",flexDirection:"column",gap:"4px"},tooltipLine:{height:"20px",display:"flex",alignItems:"center"},tooltipUnit:{fontSize:"12px",color:e.palette.primary.text6}}})),v=function(e){var r=e.descriptionKeys,t=e.columnMaps,i=e.dataItem,o=y();return b("div",{className:o.tooltipContainer,children:r.map((function(e){return g("div",{className:o.tooltipLine,children:[g("span",{children:[t[e].label,": "]}),b("span",{children:i[e]||"-"}),t[e].unitType&&g("span",{className:o.tooltipUnit,children:[" ",m(t[e].unitType)]})]},e)}))})};function w(t){var l=t.data,c=t.allData,m=t.columns,h=t.displayKeys,w=t.descriptionKeys,O=t.onSelect,k=t.isCasing,S=i(!1),j=r(S,2),C=j[0],R=j[1],N=y({isMobile:u}),D=i(!1),P=r(D,2),q=P[0],K=P[1],M=o(),z=n((function(){return m.reduce((function(r,t){return x(x({},r),{},e({},t.key,t))}),{})}),[m]),T=a((function(){if(M.current){var e=M.current.scrollLeft;K(!!e)}}),[]);s((function(){var e=new ResizeObserver(T);return M.current&&e.observe(M.current),function(){e.disconnect()}}),[]);var I=function(e){return k?h.map((function(r){return"".concat(e[r],'"')})).join("/"):h.map((function(r){return e[r]})).join(" ")};return g("div",{className:N.suggestions,children:[g("div",{className:N.tagsContainer,children:[b("div",{className:N.tags,ref:M,onScroll:T,children:l.map((function(e,r){return b("div",{className:N.tagWrapper,children:b(d,{classes:{tooltip:N.tooltip},title:b(v,{descriptionKeys:w,columnMaps:z,dataItem:e}),children:b("div",{className:N.tag,onClick:function(){return O(e)},children:I(e)})})},r)}))}),q&&b("div",{className:p(N.shadow,N.leftShadow)}),b("div",{className:p(N.shadow,N.rightShadow)})]}),b("div",{className:N.cta,onClick:function(){R(!0)},children:"Show all AutoComplete results"}),C&&b(f,{data:c,columns:m,onClose:function(){R(!1)},onSelect:function(e){R(!1),O(e)},isMobile:u})]})}v.propTypes={descriptionKeys:l.arrayOf(l.string).isRequired,columnMaps:l.shape({}).isRequired,dataItem:l.shape({}).isRequired},w.propTypes={data:l.arrayOf(l.shape({})).isRequired,allData:l.arrayOf(l.shape({})).isRequired,columns:l.arrayOf(l.shape({})).isRequired,displayKeys:l.arrayOf(l.string).isRequired,descriptionKeys:l.arrayOf(l.string).isRequired,onSelect:l.func.isRequired,isCasing:l.bool},w.defaultProps={isCasing:!1};var O=t(w);export{O as default};