@helpdice/ui 2.5.8-beta.0 → 2.5.8

package/dist/search-bar/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var o = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -20,15 +21,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -3385,16 +3377,17 @@ var SearchIcon = function SearchIcon(_ref) {
   if (!showIcon) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(StyledSearchIcon, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSearchIcon, {
     className: "search-icon",
     width: 20,
     height: 20,
     focusable: "false",
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-  }));
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+    })
+  });
 };
 var StyledSearchIcon = dt.svg(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  margin: ", ";\n  fill: ", ";\n"])), function (props) {
   return props.theme.searchIconMargin;
@@ -3435,49 +3428,60 @@ function Results(_ref) {
     }
   };
   if (showNoResultsFlag) {
-    return /*#__PURE__*/React.createElement(ResultsWrapper, null, /*#__PURE__*/React.createElement("li", {
-      "data-test": "no-results-message"
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
-      showIcon: showIcon
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "ellipsis"
-    }, showNoResultsText)));
+    return /*#__PURE__*/jsxRuntime.jsx(ResultsWrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("li", {
+        "data-test": "no-results-message",
+        children: [/*#__PURE__*/jsxRuntime.jsx(SearchIcon, {
+          showIcon: showIcon
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "ellipsis",
+          children: showNoResultsText
+        })]
+      })
+    });
   }
   if ((results === null || results === void 0 ? void 0 : results.length) <= 0 && !showNoResultsFlag) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ResultsWrapper, null, results.slice(0, maxResults).map(function (result, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      className: highlightedItem === index ? 'selected' : '',
-      onMouseEnter: function onMouseEnter() {
-        return setHighlightedItem({
-          index: index
-        });
-      },
-      "data-test": "result",
-      key: "rsa-result-".concat(result.id),
-      onMouseDown: function onMouseDown(event) {
-        return handleMouseDown({
-          event: event,
-          result: result
-        });
-      },
-      onClick: function onClick() {
-        return handleClick(result);
-      }
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
-      showIcon: showIcon
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "ellipsis",
-      title: result[resultStringKeyName]
-    }, formatResultWithKey(result)));
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(ResultsWrapper, {
+    children: results.slice(0, maxResults).map(function (result, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs("li", {
+        className: highlightedItem === index ? 'selected' : '',
+        onMouseEnter: function onMouseEnter() {
+          return setHighlightedItem({
+            index: index
+          });
+        },
+        "data-test": "result",
+        onMouseDown: function onMouseDown(event) {
+          return handleMouseDown({
+            event: event,
+            result: result
+          });
+        },
+        onClick: function onClick() {
+          return handleClick(result);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(SearchIcon, {
+          showIcon: showIcon
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "ellipsis",
+          title: result[resultStringKeyName],
+          children: formatResultWithKey(result)
+        })]
+      }, "rsa-result-".concat(result.id));
+    })
+  });
 }
 var ResultsWrapper = function ResultsWrapper(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(StyledResults, null, /*#__PURE__*/React.createElement("div", {
-    className: "line"
-  }), /*#__PURE__*/React.createElement("ul", null, children));
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledResults, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "line"
+    }), /*#__PURE__*/jsxRuntime.jsx("ul", {
+      children: children
+    })]
+  });
 };
 var StyledResults = dt.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ", ";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ", ";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n\n  .ellipsis {\n    text-align: left;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .selected {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.lineColor;
@@ -3509,18 +3513,20 @@ var ClearIcon = function ClearIcon(_ref) {
   if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.length) <= 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(StyledClearIcon, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledClearIcon, {
     className: "clear-icon",
-    onClick: handleClearSearchString
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: 20,
-    height: 20,
-    focusable: "false",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  })));
+    onClick: handleClearSearchString,
+    children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: 20,
+      height: 20,
+      focusable: "false",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+      })
+    })
+  });
 };
 var StyledClearIcon = dt.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  margin: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (props) {
   return props.theme.clearIconMargin;
@@ -3556,33 +3562,35 @@ function SearchInput(_ref) {
   var maxLengthProperty = maxLength ? {
     maxLength: maxLength
   } : {};
-  return /*#__PURE__*/React.createElement(StyledSearchInput, null, /*#__PURE__*/React.createElement(SearchIcon, {
-    showIcon: showIcon
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    type: "text",
-    ref: ref,
-    spellCheck: false,
-    value: searchString,
-    onChange: setSearchString,
-    onFocus: handleOnFocus,
-    placeholder: placeholder,
-    autoFocus: autoFocus,
-    onBlur: function onBlur() {
-      return eraseResults();
-    },
-    onKeyDown: function onKeyDown(event) {
-      return setHighlightedItem({
-        event: event
-      });
-    },
-    "data-test": "search-input"
-  }, maxLengthProperty)), /*#__PURE__*/React.createElement(ClearIcon, {
-    showClear: showClear,
-    setSearchString: setSearchString,
-    searchString: searchString,
-    onClear: onClear,
-    setFocus: setFocus
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSearchInput, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(SearchIcon, {
+      showIcon: showIcon
+    }), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread2({
+      type: "text",
+      ref: ref,
+      spellCheck: false,
+      value: searchString,
+      onChange: setSearchString,
+      onFocus: handleOnFocus,
+      placeholder: placeholder,
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        return eraseResults();
+      },
+      onKeyDown: function onKeyDown(event) {
+        return setHighlightedItem({
+          event: event
+        });
+      },
+      "data-test": "search-input"
+    }, maxLengthProperty)), /*#__PURE__*/jsxRuntime.jsx(ClearIcon, {
+      showClear: showClear,
+      setSearchString: setSearchString,
+      searchString: searchString,
+      onClear: onClear,
+      setFocus: setFocus
+    })]
+  });
 }
 var StyledSearchInput = dt.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      ::-ms-input-placeholder {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.height;
@@ -3785,7 +3793,7 @@ function ReactSearchAutocomplete(_ref) {
       }
     }
   };
-  return /*#__PURE__*/o.createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["3512916558", [function (props) {
       return parseInt(props.theme.height) + 2 + 'px';
     }, function (props) {
@@ -3808,79 +3816,81 @@ function ReactSearchAutocomplete(_ref) {
       return props.theme.boxShadow;
     }, function (props) {
       return props.theme.boxShadow;
-    }]]]) + " " + "search-bar-wrapper"
-  }, /*#__PURE__*/o.createElement(SearchInput, {
-    searchString: searchString,
-    setSearchString: handleSetSearchString,
-    eraseResults: eraseResults,
-    autoFocus: autoFocus,
-    onFocus: handleOnFocus,
-    onClear: onClear,
-    placeholder: placeholder,
-    showIcon: showIcon,
-    showClear: showClear,
-    setHighlightedItem: handleSetHighlightedItem,
-    maxLength: maxLength
-  }), /*#__PURE__*/o.createElement(Results, {
-    results: results,
-    onClick: handleOnClick,
-    setSearchString: setSearchString,
-    showIcon: showIcon,
-    maxResults: maxResults,
-    resultStringKeyName: resultStringKeyName,
-    formatResult: formatResult,
-    highlightedItem: highlightedItem,
-    setHighlightedItem: handleSetHighlightedItem,
-    showNoResultsFlag: showNoResultsFlag,
-    showNoResultsText: showNoResultsText
-  }), /*#__PURE__*/o.createElement(_JSXStyle, {
-    id: "3512916558",
-    dynamic: [function (props) {
-      return parseInt(props.theme.height) + 2 + 'px';
-    }, function (props) {
-      return props.theme.border;
-    }, function (props) {
-      return props.theme.borderRadius;
-    }, function (props) {
-      return props.theme.backgroundColor;
-    }, function (props) {
-      return props.theme.color;
-    }, function (props) {
-      return props.theme.fontSize;
-    }, function (props) {
-      return props.theme.fontFamily;
-    }, function (props) {
-      return props.theme.zIndex;
-    }, function (props) {
-      return props.theme.boxShadow;
-    }, function (props) {
-      return props.theme.boxShadow;
-    }, function (props) {
-      return props.theme.boxShadow;
-    }]
-  }, ".__jsx-style-dynamic-selector{position:relative;height:".concat(function (props) {
-    return parseInt(props.theme.height) + 2 + 'px';
-  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;border:").concat(function (props) {
-    return props.theme.border;
-  }, ";border-radius:").concat(function (props) {
-    return props.theme.borderRadius;
-  }, ";background-color:").concat(function (props) {
-    return props.theme.backgroundColor;
-  }, ";color:").concat(function (props) {
-    return props.theme.color;
-  }, ";font-size:").concat(function (props) {
-    return props.theme.fontSize;
-  }, ";font-family:").concat(function (props) {
-    return props.theme.fontFamily;
-  }, ";z-index:").concat(function (props) {
-    return props.theme.zIndex;
-  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:").concat(function (props) {
-    return props.theme.boxShadow;
-  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:active{box-shadow:").concat(function (props) {
-    return props.theme.boxShadow;
-  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:focus-within{box-shadow:").concat(function (props) {
-    return props.theme.boxShadow;
-  }, ";}")));
+    }]]]) + " " + "search-bar-wrapper",
+    children: [/*#__PURE__*/jsxRuntime.jsx(SearchInput, {
+      searchString: searchString,
+      setSearchString: handleSetSearchString,
+      eraseResults: eraseResults,
+      autoFocus: autoFocus,
+      onFocus: handleOnFocus,
+      onClear: onClear,
+      placeholder: placeholder,
+      showIcon: showIcon,
+      showClear: showClear,
+      setHighlightedItem: handleSetHighlightedItem,
+      maxLength: maxLength
+    }), /*#__PURE__*/jsxRuntime.jsx(Results, {
+      results: results,
+      onClick: handleOnClick,
+      setSearchString: setSearchString,
+      showIcon: showIcon,
+      maxResults: maxResults,
+      resultStringKeyName: resultStringKeyName,
+      formatResult: formatResult,
+      highlightedItem: highlightedItem,
+      setHighlightedItem: handleSetHighlightedItem,
+      showNoResultsFlag: showNoResultsFlag,
+      showNoResultsText: showNoResultsText
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3512916558",
+      dynamic: [function (props) {
+        return parseInt(props.theme.height) + 2 + 'px';
+      }, function (props) {
+        return props.theme.border;
+      }, function (props) {
+        return props.theme.borderRadius;
+      }, function (props) {
+        return props.theme.backgroundColor;
+      }, function (props) {
+        return props.theme.color;
+      }, function (props) {
+        return props.theme.fontSize;
+      }, function (props) {
+        return props.theme.fontFamily;
+      }, function (props) {
+        return props.theme.zIndex;
+      }, function (props) {
+        return props.theme.boxShadow;
+      }, function (props) {
+        return props.theme.boxShadow;
+      }, function (props) {
+        return props.theme.boxShadow;
+      }],
+      children: ".__jsx-style-dynamic-selector{position:relative;height:".concat(function (props) {
+        return parseInt(props.theme.height) + 2 + 'px';
+      }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;border:").concat(function (props) {
+        return props.theme.border;
+      }, ";border-radius:").concat(function (props) {
+        return props.theme.borderRadius;
+      }, ";background-color:").concat(function (props) {
+        return props.theme.backgroundColor;
+      }, ";color:").concat(function (props) {
+        return props.theme.color;
+      }, ";font-size:").concat(function (props) {
+        return props.theme.fontSize;
+      }, ";font-family:").concat(function (props) {
+        return props.theme.fontFamily;
+      }, ";z-index:").concat(function (props) {
+        return props.theme.zIndex;
+      }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:").concat(function (props) {
+        return props.theme.boxShadow;
+      }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:active{box-shadow:").concat(function (props) {
+        return props.theme.boxShadow;
+      }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:focus-within{box-shadow:").concat(function (props) {
+        return props.theme.boxShadow;
+      }, ";}")
+    })]
+  });
 }
 
 exports.default = ReactSearchAutocomplete;