cozy-search 0.1.0

package/dist/components/ResultMenu/NotEnoughItem.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var NotEnoughItem = function NotEnoughItem() {
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('assistant.search.notEnough')
+  }));
+};
+
+var _default = NotEnoughItem;
+exports.default = _default;

package/dist/components/ResultMenu/ResultMenu.d.ts

@@ -0,0 +1,6 @@
+export default ResultMenu;
+declare function ResultMenu({ anchorRef, listRef, onClick }: {
+    anchorRef: any;
+    listRef: any;
+    onClick: any;
+}): JSX.Element;

package/dist/components/ResultMenu/ResultMenu.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
+
+var _Popper = _interopRequireDefault(require("cozy-ui/transpiled/react/Popper"));
+
+var _ResultMenuContent = _interopRequireDefault(require("./ResultMenuContent"));
+
+var styles = {
+  "resultMenu": "styles__resultMenu___o76q-",
+  "resultMenu-inner": "styles__resultMenu-inner___2Lf0d"
+};
+
+var ResultMenu = function ResultMenu(_ref) {
+  var anchorRef = _ref.anchorRef,
+      listRef = _ref.listRef,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    style: {
+      width: anchorRef.current.offsetWidth,
+      zIndex: 'var(--zIndex-popover)'
+    },
+    anchorEl: anchorRef.current,
+    open: Boolean(anchorRef.current),
+    placement: "bottom-start"
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    className: styles['resultMenu'],
+    square: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles['resultMenu-inner']
+  }, /*#__PURE__*/_react.default.createElement(_ResultMenuContent.default, {
+    ref: listRef,
+    onClick: onClick
+  }))));
+};
+
+var _default = ResultMenu;
+exports.default = _default;

package/dist/components/ResultMenu/ResultMenuContent.d.ts

@@ -0,0 +1,3 @@
+export default ResultMenuContent;
+declare const ResultMenuContent: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/components/ResultMenu/ResultMenuContent.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cozyDataproxyLib = require("cozy-dataproxy-lib");
+
+var _Circle = _interopRequireDefault(require("cozy-ui/transpiled/react/Circle"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Paperplane = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Paperplane"));
+
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _ListItemSkeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeletons/ListItemSkeleton"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _NoResultItem = _interopRequireDefault(require("./NoResultItem"));
+
+var _NotEnoughItem = _interopRequireDefault(require("./NotEnoughItem"));
+
+var _ResultMenuItem = _interopRequireDefault(require("./ResultMenuItem"));
+
+var _SearchProvider = require("../Search/SearchProvider");
+
+var _helpers = require("../helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SearchResult = function SearchResult() {
+  var _useSearch = (0, _SearchProvider.useSearch)(),
+      isLoading = _useSearch.isLoading,
+      results = _useSearch.results,
+      selectedIndex = _useSearch.selectedIndex,
+      searchValue = _useSearch.searchValue;
+
+  if (isLoading && !(results !== null && results !== void 0 && results.length)) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemSkeleton.default, {
+      hasSecondary: true
+    }), /*#__PURE__*/_react.default.createElement(_ListItemSkeleton.default, {
+      hasSecondary: true
+    }), /*#__PURE__*/_react.default.createElement(_ListItemSkeleton.default, {
+      hasSecondary: true
+    }));
+  }
+
+  if (!isLoading && !(results !== null && results !== void 0 && results.length) && !(0, _helpers.isAssistantEnabled)()) {
+    if (searchValue.length >= 3) {
+      return /*#__PURE__*/_react.default.createElement(_NoResultItem.default, null);
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_NotEnoughItem.default, null);
+    }
+  }
+
+  return results.map(function (result, idx) {
+    return /*#__PURE__*/_react.default.createElement(_ResultMenuItem.default, {
+      key: result.id || idx,
+      icon: result.icon,
+      slug: result.slug,
+      primaryText: result.primary,
+      secondaryText: result.secondary,
+      secondaryUrl: result.secondaryUrl,
+      query: searchValue,
+      highlightQuery: "true",
+      selected: (0, _helpers.isAssistantEnabled)() ? selectedIndex === idx + 1 : selectedIndex === idx,
+      onClick: result.onClick
+    });
+  });
+};
+
+var ResultMenuContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onClick = _ref.onClick;
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useSearch2 = (0, _SearchProvider.useSearch)(),
+      searchValue = _useSearch2.searchValue,
+      selectedIndex = _useSearch2.selectedIndex;
+
+  var _useDataProxy = (0, _cozyDataproxyLib.useDataProxy)(),
+      dataProxyServicesAvailable = _useDataProxy.dataProxyServicesAvailable;
+
+  return /*#__PURE__*/_react.default.createElement(_List.default, {
+    ref: ref
+  }, (0, _helpers.isAssistantEnabled)() && /*#__PURE__*/_react.default.createElement(_ResultMenuItem.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_Circle.default, {
+      size: "small"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _Paperplane.default,
+      size: isMobile ? 12 : undefined
+    })),
+    primaryText: searchValue,
+    query: searchValue,
+    secondaryText: t('assistant.search.result'),
+    selected: selectedIndex === 0,
+    onClick: onClick
+  }), dataProxyServicesAvailable && /*#__PURE__*/_react.default.createElement(SearchResult, null));
+});
+ResultMenuContent.displayName = 'ResultMenuContent';
+var _default = ResultMenuContent;
+exports.default = _default;

package/dist/components/ResultMenu/ResultMenuItem.d.ts

@@ -0,0 +1,12 @@
+export default ResultMenuItem;
+declare function ResultMenuItem({ icon, primaryText, secondaryText, secondaryUrl, slug, selected, onClick, query, highlightQuery }: {
+    icon: any;
+    primaryText: any;
+    secondaryText: any;
+    secondaryUrl: any;
+    slug: any;
+    selected: any;
+    onClick: any;
+    query: any;
+    highlightQuery?: boolean | undefined;
+}): JSX.Element;

package/dist/components/ResultMenu/ResultMenuItem.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AppIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/AppIcon"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _SuggestionItemTextHighlighted = _interopRequireDefault(require("./SuggestionItemTextHighlighted"));
+
+var _SuggestionItemTextSecondary = _interopRequireDefault(require("./SuggestionItemTextSecondary"));
+
+var ResultMenuItem = function ResultMenuItem(_ref) {
+  var icon = _ref.icon,
+      primaryText = _ref.primaryText,
+      secondaryText = _ref.secondaryText,
+      secondaryUrl = _ref.secondaryUrl,
+      slug = _ref.slug,
+      selected = _ref.selected,
+      onClick = _ref.onClick,
+      query = _ref.query,
+      _ref$highlightQuery = _ref.highlightQuery,
+      highlightQuery = _ref$highlightQuery === void 0 ? false : _ref$highlightQuery;
+  var iconComponent = icon.type === 'component' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: icon.component,
+    size: 32
+  }) : icon.type === 'app' ? /*#__PURE__*/_react.default.createElement(_AppIcon.default, {
+    app: icon.app
+  }) : icon;
+  var primary = highlightQuery ? /*#__PURE__*/_react.default.createElement(_SuggestionItemTextHighlighted.default, {
+    text: primaryText,
+    query: query
+  }) : primaryText;
+  var secondary = highlightQuery ? /*#__PURE__*/_react.default.createElement(_SuggestionItemTextSecondary.default, {
+    text: secondaryText,
+    query: query,
+    slug: slug,
+    url: secondaryUrl
+  }) : secondaryText;
+  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    size: "small",
+    selected: selected,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, iconComponent), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: primary,
+    secondary: secondary
+  }));
+};
+
+var _default = ResultMenuItem;
+exports.default = _default;

package/dist/components/ResultMenu/SuggestionItemTextHighlighted.d.ts

@@ -0,0 +1,5 @@
+export default SuggestionItemTextHighlighted;
+declare function SuggestionItemTextHighlighted({ text, query }: {
+    text: any;
+    query: any;
+}): any[] | null;

package/dist/components/ResultMenu/SuggestionItemTextHighlighted.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+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) { (0, _defineProperty2.default)(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 normalizeString = function normalizeString(str) {
+  return str.toString().toLowerCase().replace(/\//g, ' ').normalize('NFD').replace(/[\u0300-\u036f]/g, '').split(' ');
+};
+/**
+ * Add <b> on part that equlas query into each result
+ *
+ * @param {Array} searchResult - list of results
+ * @param {string} query - search input
+ * @returns list of results with the query highlighted
+ */
+
+
+var highlightQueryTerms = function highlightQueryTerms(searchResult, query) {
+  var normalizedQueryTerms = normalizeString(query);
+  var normalizedResultTerms = normalizeString(searchResult);
+  var matchedIntervals = [];
+  var spacerLength = 1;
+  var currentIndex = 0;
+  normalizedResultTerms.forEach(function (resultTerm) {
+    normalizedQueryTerms.forEach(function (queryTerm) {
+      var index = resultTerm.indexOf(queryTerm);
+
+      if (index >= 0) {
+        matchedIntervals.push({
+          from: currentIndex + index,
+          to: currentIndex + index + queryTerm.length
+        });
+      }
+    });
+    currentIndex += resultTerm.length + spacerLength;
+  }); // matchedIntervals can overlap, so we merge them.
+  // - sort the intervals by starting index
+  // - add the first interval to the stack
+  // - for every interval,
+  // - - add it to the stack if it doesn't overlap with the stack top
+  // - - or extend the stack top if the start overlaps and the new interval's top is bigger
+
+  var mergedIntervals = matchedIntervals.sort(function (intervalA, intervalB) {
+    return intervalA.from > intervalB.from;
+  }).reduce(function (computedIntervals, newInterval) {
+    if (computedIntervals.length === 0 || computedIntervals[computedIntervals.length - 1].to < newInterval.from) {
+      computedIntervals.push(newInterval);
+    } else if (computedIntervals[computedIntervals.length - 1].to < newInterval.to) {
+      computedIntervals[computedIntervals.length - 1].to = newInterval.to;
+    }
+
+    return computedIntervals;
+  }, []); // create an array containing the entire search result, with special characters, and the intervals surrounded y `<b>` tags
+
+  var slicedOriginalResult = mergedIntervals.length > 0 ? [/*#__PURE__*/_react.default.createElement("span", {
+    key: "0"
+  }, searchResult.slice(0, mergedIntervals[0].from))] : searchResult;
+
+  for (var i = 0, l = mergedIntervals.length; i < l; ++i) {
+    slicedOriginalResult.push( /*#__PURE__*/_react.default.createElement("span", {
+      className: "u-primaryColor"
+    }, searchResult.slice(mergedIntervals[i].from, mergedIntervals[i].to)));
+    if (i + 1 < l) slicedOriginalResult.push( /*#__PURE__*/_react.default.createElement("span", null, searchResult.slice(mergedIntervals[i].to, mergedIntervals[i + 1].from)));
+  }
+
+  if (mergedIntervals.length > 0) slicedOriginalResult.push( /*#__PURE__*/_react.default.createElement("span", null, searchResult.slice(mergedIntervals[mergedIntervals.length - 1].to, searchResult.length)));
+  return slicedOriginalResult;
+};
+
+var SuggestionItemTextHighlighted = function SuggestionItemTextHighlighted(_ref) {
+  var text = _ref.text,
+      query = _ref.query;
+  if (!text) return null;
+  var textHighlighted = highlightQueryTerms(text, query);
+
+  if (Array.isArray(textHighlighted)) {
+    return textHighlighted.map(function (item, idx) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        key: idx
+      });
+    });
+  }
+
+  return textHighlighted;
+};
+
+var _default = SuggestionItemTextHighlighted;
+exports.default = _default;

package/dist/components/ResultMenu/SuggestionItemTextSecondary.d.ts

@@ -0,0 +1,7 @@
+export default SuggestionItemTextSecondary;
+declare function SuggestionItemTextSecondary({ text, query, url, slug }: {
+    text: any;
+    query: any;
+    url: any;
+    slug: any;
+}): JSX.Element;

package/dist/components/ResultMenu/SuggestionItemTextSecondary.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AppLinker = _interopRequireDefault(require("cozy-ui/transpiled/react/AppLinker"));
+
+var _Link = _interopRequireDefault(require("cozy-ui/transpiled/react/Link"));
+
+var _Breakpoints = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/Breakpoints"));
+
+var _SuggestionItemTextHighlighted = _interopRequireDefault(require("./SuggestionItemTextHighlighted"));
+
+/**
+ * Code copied and adapted from cozy-drive
+ *
+ * See source: https://github.com/cozy/cozy-drive/blob/fbe2df67199683b23a40f476ccdacb00ee027459/src/modules/search/components/SuggestionItemTextSecondary.jsx
+ */
+var SuggestionItemTextSecondary = function SuggestionItemTextSecondary(_ref) {
+  var text = _ref.text,
+      query = _ref.query,
+      url = _ref.url,
+      slug = _ref.slug;
+
+  var _useBreakpoints = (0, _Breakpoints.default)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  if (isMobile || !url) {
+    return /*#__PURE__*/_react.default.createElement(_SuggestionItemTextHighlighted.default, {
+      text: text,
+      query: query
+    });
+  }
+
+  var app = {
+    slug: slug
+  };
+  return /*#__PURE__*/_react.default.createElement(_AppLinker.default, {
+    app: app,
+    href: url
+  }, function (_ref2) {
+    var href = _ref2.href,
+        _onClick = _ref2.onClick;
+    return /*#__PURE__*/_react.default.createElement(_Link.default, {
+      color: "textSecondary",
+      underline: "hover",
+      href: href,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+
+        if (typeof _onClick == 'function') {
+          _onClick(e);
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_SuggestionItemTextHighlighted.default, {
+      text: text,
+      query: query,
+      slug: slug
+    }));
+  });
+};
+
+var _default = SuggestionItemTextSecondary;
+exports.default = _default;

package/dist/components/ResultMenu/styles.styl

@@ -0,0 +1,8 @@
+.resultMenu
+  overflow hidden
+  max-height 16.5rem
+  border-radius 0 0 28px 28px
+
+  &-inner
+    max-height 16.5rem
+    overflow auto

package/dist/components/Search/EncryptedFolderIcon.d.ts

@@ -0,0 +1,2 @@
+export default EncryptedFolderIcon;
+declare function EncryptedFolderIcon(props: any): JSX.Element;

package/dist/components/Search/EncryptedFolderIcon.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var EncryptedFolderIcon = function EncryptedFolderIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: "0.34",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.9657 1C13.5206 1 14.2876 1.3125 14.6803 1.6995L16 3H30.0059C31.1072 3 32 3.89498 32 4.997V27.003C32 28.1059 31.1107 29 29.9983 29H2.00174C0.896211 29 0 28.1001 0 27.0088V1.99653C0 1.44616 0.448999 1 1.00472 1H12.9657Z",
+    fill: "#297EF2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 1C0.447715 1 0 1.44772 0 2V6C0 6.55228 0.447716 7 1 7H13.5858C13.851 7 14.1054 6.89464 14.2929 6.70711L15.7071 5.29289C15.8946 5.10536 16.149 5 16.4142 5H32C32 3.89543 31.1046 3 30 3H16.4142C16.149 3 15.8946 2.89464 15.7071 2.70711L14.2929 1.29289C14.1054 1.10536 13.851 1 13.5858 1H1ZM10 15.9954V24.0046C10 24.5543 10.4558 25 11.0025 25H20.9975C21.5512 25 22 24.5443 22 24.0046V15.9954C22 15.4457 21.5561 15 21 15H20V13C20 10.794 18.2053 9 16 9C13.794 9 12 10.794 12 13V15H11C10.4477 15 10 15.4557 10 15.9954ZM16 11C14.8968 11 14 12.1215 14 13.5V15H18V13.5C18 12.1215 17.1028 11 16 11ZM17.5 19C17.5 18.172 16.8265 17.5 16 17.5C15.172 17.5 14.5 18.172 14.5 19C14.5 19.552 14.803 20.032 15.25 20.29V22.75C15.25 23.1625 15.586 23.5 16 23.5C16.4125 23.5 16.75 23.1625 16.75 22.75V20.29C17.1955 20.032 17.5 19.552 17.5 19Z",
+    fill: "#297EF2"
+  }));
+};
+
+var _default = EncryptedFolderIcon;
+exports.default = _default;

package/dist/components/Search/SearchBar.d.ts

@@ -0,0 +1,4 @@
+export default SearchBar;
+declare function SearchBar({ componentsProps }: {
+    componentsProps: any;
+}): JSX.Element;

package/dist/components/Search/SearchBar.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _SearchBarDesktop = _interopRequireDefault(require("./SearchBarDesktop"));
+
+var _SearchBarMobile = _interopRequireDefault(require("./SearchBarMobile"));
+
+var _SearchProvider = require("./SearchProvider");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SearchBar = function SearchBar(_ref) {
+  var componentsProps = _ref.componentsProps;
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useSearch = (0, _SearchProvider.useSearch)(),
+      clearSearch = _useSearch.clearSearch,
+      setSelectedIndex = _useSearch.setSelectedIndex,
+      delayedSetSearchValue = _useSearch.delayedSetSearchValue;
+
+  var handleClear = function handleClear() {
+    setInputValue('');
+    clearSearch();
+  };
+
+  var handleChange = function handleChange(ev) {
+    setSelectedIndex(0);
+    delayedSetSearchValue(ev.target.value);
+    setInputValue(ev.target.value);
+  };
+
+  if (isMobile) {
+    return /*#__PURE__*/_react.default.createElement(_SearchBarMobile.default, {
+      value: inputValue,
+      onClear: handleClear,
+      onChange: handleChange
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_SearchBarDesktop.default, (0, _extends2.default)({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.SearchBarDesktop, {
+    value: inputValue,
+    onClear: handleClear,
+    onChange: handleChange
+  }));
+};
+
+var _default = SearchBar;
+exports.default = _default;

package/dist/components/Search/SearchBarDesktop.d.ts

@@ -0,0 +1,15 @@
+export default SearchBarDesktop;
+declare function SearchBarDesktop({ value, onClear, onChange, elevation, size, hasHalfBorderRadius }: {
+    value: any;
+    onClear: any;
+    onChange: any;
+    elevation: any;
+    size: any;
+    hasHalfBorderRadius: any;
+}): JSX.Element;
+declare namespace SearchBarDesktop {
+    namespace defaultProps {
+        let size: string;
+        let elevation: boolean;
+    }
+}