linear-react-components-ui 1.1.26-beta.17 → 1.1.26-beta.19

package/lib/menus/sidenav/index.js

@@ -1,152 +1,184 @@
-import { jsx as h, jsxs as oe } from "react/jsx-runtime";
-import { c as me } from "../../_virtual/compiler-runtime.js";
-import { useState as j, useRef as ue, useEffect as W } from "react";
-import se from "./NavMenuItem.js";
-import pe from "./NavSubMenuItem.js";
-import fe from "./NavMenuGroup.js";
-import de from "./ExpandMenu.js";
-import '../../assets/styles/sidenav.css';/* empty css                               */
-import { SideNavContext as he } from "./helpers.js";
-import Se from "../../icons/index.js";
-import { keyCodes as Ce } from "../../internals/constants.js";
-import xe from "./popup_menu_search/index.js";
-import re from "../../node_modules/uuid/dist/v1.js";
-const ze = (a) => {
-  const e = me.c(52), {
-    customClass: ie,
-    showExpandMenu: A,
-    expandMenuCustomClass: H,
-    expanded: X,
-    menuSize: Y,
-    onExpandMenuClick: C,
-    children: i,
-    enableMenuSearch: l,
-    menuSearchCustomComponent: x
-  } = a, S = X === void 0 ? !0 : X, r = Y === void 0 ? "medium" : Y, [o, Z] = j(S);
-  let v;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (v = [], e[0] = v) : v = e[0];
-  const [m, le] = j(v);
-  let y;
-  e[1] === Symbol.for("react.memo_cache_sentinel") ? (y = {}, e[1] = y) : y = e[1];
-  const [T, ce] = j(y), [c, ee] = j(!1), M = ue(null);
-  let b;
-  e[2] !== o || e[3] !== C ? (b = () => {
-    Z(!o), C && C(!o);
-  }, e[2] = o, e[3] = C, e[4] = b) : b = e[4];
-  const q = b;
-  let _;
-  e[5] !== T ? (_ = () => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandedMenu", {
+  enumerable: true,
+  get: function () {
+    return _ExpandMenu.default;
+  }
+});
+Object.defineProperty(exports, "NavMenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _NavMenuGroup.default;
+  }
+});
+Object.defineProperty(exports, "NavMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _NavMenuItem.default;
+  }
+});
+Object.defineProperty(exports, "NavSubMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _NavSubMenuItem.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
+var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
+var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
+var _ExpandMenu = _interopRequireDefault(require("./ExpandMenu"));
+require("../../assets/styles/sidenav.scss");
+var _helpers = require("./helpers");
+var _icons = _interopRequireDefault(require("../../icons"));
+var constants = _interopRequireWildcard(require("../../internals/constants"));
+var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const SideNav = props => {
+  const {
+    customClass,
+    showExpandMenu,
+    expandMenuCustomClass,
+    expanded = true,
+    menuSize = 'medium',
+    onExpandMenuClick,
+    children,
+    enableMenuSearch,
+    menuSearchCustomComponent
+  } = props;
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
+  const [menuItemsContent, setMenuItemsContent] = (0, _react.useState)([]);
+  const [sideNavDimensions, setSideNavDimensions] = (0, _react.useState)({});
+  const [openSearchMenuPopup, setOpenSearchMenuPopup] = (0, _react.useState)(false);
+  const sideNavRef = (0, _react.useRef)(null);
+  const onHeaderClick = () => {
+    setIsExpanded(!isExpanded);
+    if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
+  };
+  const getPopupMenuSearchStyle = () => {
     const {
-      left: n,
-      top: t,
-      width: s,
-      height: U
-    } = T;
-    return `left: ${n + s + 5}px; top: ${t + 1}px; height: ${U - 8}px;`;
-  }, e[5] = T, e[6] = _) : _ = e[6];
-  const B = _;
-  let E;
-  e[7] === Symbol.for("react.memo_cache_sentinel") ? (E = () => {
-    ee(!1);
-  }, e[7] = E) : E = e[7];
-  const ae = E;
-  let u, I;
-  if (e[8] === Symbol.for("react.memo_cache_sentinel")) {
-    const n = (t) => {
-      const {
-        type: s
-      } = t;
-      (s === se || s === pe) && !t.props.children && le((U) => [...U, {
-        id: t.props.id || `${t.props.title}-${re()}`,
-        content: t.props.title,
-        url: t.props.url
+      left,
+      top,
+      width,
+      height
+    } = sideNavDimensions;
+    const style = `left: ${left + width + 5}px; top: ${top + 1}px; height: ${height - 8}px;`;
+    return style;
+  };
+  const closeSearchMenuPopup = () => {
+    setOpenSearchMenuPopup(false);
+  };
+  const compareChild = child => {
+    const {
+      type
+    } = child;
+    if ((type === _NavMenuItem.default || type === _NavSubMenuItem.default) && !child.props.children) {
+      setMenuItemsContent(prevState => [...prevState, {
+        id: child.props.id || `${child.props.title}-${uuid.v1()}`,
+        content: child.props.title,
+        url: child.props.url
       }]);
+    }
+  };
+  const scanChildrenContent = childrenProps => {
+    if (Array.isArray(childrenProps)) {
+      childrenProps.forEach(child => {
+        if (child) {
+          compareChild(child);
+          if (child.props && child.props.children) scanChildrenContent(child.props.children);
+        }
+      });
+    } else if (childrenProps) {
+      compareChild(childrenProps);
+      if (childrenProps.props && childrenProps.props.children) scanChildrenContent(childrenProps.props.children);
+    }
+  };
+  const openSearchMenu = () => {
+    setOpenSearchMenuPopup(true);
+  };
+  const onKeyDown = e => {
+    if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
+      e.preventDefault();
+      openSearchMenu();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
     };
-    u = (t) => {
-      Array.isArray(t) ? t.forEach((s) => {
-        s && (n(s), s.props && s.props.children && u(s.props.children));
-      }) : t && (n(t), t.props && t.props.children && u(t.props.children));
-    }, I = () => {
-      ee(!0);
-    }, e[8] = u, e[9] = I;
-  } else
-    u = e[8], I = e[9];
-  const te = I;
-  let N;
-  e[10] === Symbol.for("react.memo_cache_sentinel") ? (N = (n) => {
-    [Ce.F].includes(n.keyCode) && n.ctrlKey && n.shiftKey && (n.preventDefault(), te());
-  }, e[10] = N) : N = e[10];
-  const ne = N;
-  let $, g;
-  e[11] === Symbol.for("react.memo_cache_sentinel") ? (g = () => (document.addEventListener("keydown", ne), () => {
-    document.removeEventListener("keydown", ne);
-  }), $ = [], e[11] = $, e[12] = g) : ($ = e[11], g = e[12]), W(g, $);
-  let k;
-  e[13] !== i || e[14] !== l ? (k = () => {
-    l && M && M.current && ce(M.current.getBoundingClientRect()), l && u(i);
-  }, e[13] = i, e[14] = l, e[15] = k) : k = e[15];
-  let w;
-  e[16] === Symbol.for("react.memo_cache_sentinel") ? (w = [], e[16] = w) : w = e[16], W(k, w);
-  let D, R;
-  e[17] !== S ? (D = () => {
-    Z(S);
-  }, R = [S], e[17] = S, e[18] = D, e[19] = R) : (D = e[18], R = e[19]), W(D, R);
-  let K;
-  e[20] !== m ? (K = () => m.filter(ve), e[20] = m, e[21] = K) : K = e[21];
-  const G = K;
-  let P;
-  e[22] !== B || e[23] !== m || e[24] !== x || e[25] !== r || e[26] !== c || e[27] !== a || e[28] !== G ? (P = () => {
-    const n = {
-      ...a,
-      style: B(),
-      handlerClose: ae,
-      menuItemsContent: m && G()
-    };
-    return /* @__PURE__ */ h(fe, { children: /* @__PURE__ */ oe(se, { childrenIsSubMenu: !1, customClass: "-customsidenavitem", tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)", tooltipPosition: "right", children: [
-      /* @__PURE__ */ h("div", { className: "searchmenubutton", role: "button", tabIndex: -1, onKeyDown: ye, onClick: () => {
-        te();
-      }, children: /* @__PURE__ */ h(Se, { name: "search", customClass: "searchmenuicon", size: r === "small" && 16 || r === "medium" && 22 || r === "large" && 32 || 16 }) }, "searchMenuIcon"),
-      c && (x ? x(n) : /* @__PURE__ */ h(xe, { ...n }))
-    ] }) }, `popup-menusearch-${re()}`);
-  }, e[22] = B, e[23] = m, e[24] = x, e[25] = r, e[26] = c, e[27] = a, e[28] = G, e[29] = P) : P = e[29];
-  const O = P;
-  let z;
-  e[30] !== i || e[31] !== l || e[32] !== O ? (z = () => {
-    if (!l)
-      return i;
-    const n = [...i];
-    return n.splice(1, 0, O()), n;
-  }, e[30] = i, e[31] = l, e[32] = O, e[33] = z) : z = e[33];
-  const V = z;
-  let F;
-  e[34] !== o || e[35] !== r || e[36] !== c ? (F = {
-    isExpanded: o,
-    menuSize: r,
-    openSearchMenuPopup: c
-  }, e[34] = o, e[35] = r, e[36] = c, e[37] = F) : F = e[37];
-  const J = F, Q = `sidenav-component ${o ? "-expanded" : ""} ${c ? "-blocked" : ""} ${ie}`;
-  let p;
-  e[38] !== H || e[39] !== o || e[40] !== q || e[41] !== A ? (p = A && /* @__PURE__ */ h(de, { expandMenuCustomClass: `${o && "closefromexpanded"} ${H}`, onExpandMenu: q, iconName: o ? "arrow_left" : "arrow_right" }), e[38] = H, e[39] = o, e[40] = q, e[41] = A, e[42] = p) : p = e[42];
-  let f;
-  e[43] !== V ? (f = V(), e[43] = V, e[44] = f) : f = e[44];
-  let d;
-  e[45] !== Q || e[46] !== p || e[47] !== f ? (d = /* @__PURE__ */ oe("div", { className: Q, ref: M, children: [
-    p,
-    f
-  ] }), e[45] = Q, e[46] = p, e[47] = f, e[48] = d) : d = e[48];
-  let L;
-  return e[49] !== J || e[50] !== d ? (L = /* @__PURE__ */ h(he.Provider, { value: J, children: d }), e[49] = J, e[50] = d, e[51] = L) : L = e[51], L;
-};
-function ve(a) {
-  return a.content !== "";
-}
-function ye() {
-}
-export {
-  de as ExpandedMenu,
-  fe as NavMenuGroup,
-  se as NavMenuItem,
-  pe as NavSubMenuItem,
-  ze as default
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (enableMenuSearch && sideNavRef && sideNavRef.current) {
+      setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
+    }
+    if (enableMenuSearch) scanChildrenContent(children);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setIsExpanded(expanded);
+  }, [expanded]);
+  const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
+  const getPopupMenuSearch = () => {
+    const searchProps = _objectSpread(_objectSpread({}, props), {}, {
+      style: getPopupMenuSearchStyle(),
+      handlerClose: closeSearchMenuPopup,
+      menuItemsContent: menuItemsContent && returnMenuItems()
+    });
+    return /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
+      key: `popup-menusearch-${uuid.v1()}`
+    }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
+      childrenIsSubMenu: false,
+      customClass: "-customsidenavitem",
+      tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
+      tooltipPosition: "right"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: "searchMenuIcon",
+      className: "searchmenubutton",
+      role: "button",
+      tabIndex: -1,
+      onKeyDown: () => {},
+      onClick: () => {
+        openSearchMenu();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "search",
+      customClass: "searchmenuicon",
+      size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32 || 16
+    })), openSearchMenuPopup && (menuSearchCustomComponent ? menuSearchCustomComponent(searchProps) : /*#__PURE__*/_react.default.createElement(_popup_menu_search.default, searchProps))));
+  };
+  const getSideNavContent = () => {
+    if (!enableMenuSearch) return children;
+    const items = [...children];
+    items.splice(1, 0, getPopupMenuSearch());
+    return items;
+  };
+  const contextValues = {
+    isExpanded,
+    menuSize,
+    openSearchMenuPopup
+  };
+  return /*#__PURE__*/_react.default.createElement(_helpers.SideNavContext.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `sidenav-component ${isExpanded ? '-expanded' : ''} ${openSearchMenuPopup ? '-blocked' : ''} ${customClass}`,
+    ref: sideNavRef
+  }, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
+    expandMenuCustomClass: `${isExpanded && 'closefromexpanded'} ${expandMenuCustomClass}`,
+    onExpandMenu: onHeaderClick,
+    iconName: isExpanded ? 'arrow_left' : 'arrow_right'
+  }), getSideNavContent()));
 };
-//# sourceMappingURL=index.js.map
+var _default = exports.default = SideNav;

package/lib/menus/sidenav/popup_menu_search/EmptyList.d.ts

@@ -1,3 +1,12 @@
-import { IEmptyListProps } from '../types';
-declare const EmptyList: ({ info, visible, }: IEmptyListProps) => import("react/jsx-runtime").JSX.Element;
-export default EmptyList;
+import { IEmptyListProps } from '../types.js';
+import 'react';
+import '../../../@types/PermissionAttr.js';
+import '../../../@types/Size.js';
+import '../../../@types/Icon.js';
+import '../../../icons/helper.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
+
+declare const EmptyList: ({ info, visible, }: IEmptyListProps) => JSX.Element;
+
+export { EmptyList as default };

package/lib/menus/sidenav/popup_menu_search/EmptyList.js

@@ -1,24 +1,26 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { c as m } from "../../../_virtual/compiler-runtime.js";
-import a from "../../../icons/index.js";
-const u = (c) => {
-  const e = m.c(4), {
-    info: s,
-    visible: n
-  } = c;
-  if (!(n === void 0 ? !0 : n)) {
-    let i;
-    return e[0] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ r("noscript", {}), e[0] = i) : i = e[0], i;
-  }
-  let t;
-  e[1] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ r(a, { name: "information", color: "#bdbdbd", size: 128 }), e[1] = t) : t = e[1];
-  let o;
-  return e[2] !== s ? (o = /* @__PURE__ */ l("div", { className: "nodata-container", children: [
-    t,
-    /* @__PURE__ */ r("p", { className: "subtext", children: s })
-  ] }), e[2] = s, e[3] = o) : o = e[3], o;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EmptyList = _ref => {
+  let {
+    info,
+    visible = true
+  } = _ref;
+  if (!visible) return /*#__PURE__*/_react.default.createElement("noscript", null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nodata-container"
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "information",
+    color: "#bdbdbd",
+    size: 128
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "subtext"
+  }, info));
 };
-export {
-  u as default
-};
-//# sourceMappingURL=EmptyList.js.map
+var _default = exports.default = EmptyList;

package/lib/menus/sidenav/popup_menu_search/index.d.ts

@@ -1,3 +1,12 @@
-import { IPopupMenuSearchProps } from '../types';
-declare const PopupMenuSearch: (props: IPopupMenuSearchProps) => import('react').ReactPortal;
-export default PopupMenuSearch;
+import React__default from 'react';
+import { IPopupMenuSearchProps } from '../types.js';
+import '../../../@types/PermissionAttr.js';
+import '../../../@types/Size.js';
+import '../../../@types/Icon.js';
+import '../../../icons/helper.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
+
+declare const PopupMenuSearch: (props: IPopupMenuSearchProps) => React__default.ReactPortal;
+
+export { PopupMenuSearch as default };

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -1,57 +1,116 @@
-import { jsxs as P, jsx as t } from "react/jsx-runtime";
-import { useState as d, useRef as f, useEffect as u, Fragment as w } from "react";
-import F from "react-dom";
-import O from "../../../inputs/search/index.js";
-import j from "../../../list/index.js";
-import k from "../../../icons/index.js";
-import M from "./EmptyList.js";
-import N from "../../../list/Item.js";
-const h = document.getElementsByTagName("body")[0], G = (g) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _search = _interopRequireDefault(require("../../../inputs/search"));
+var _list = _interopRequireWildcard(require("../../../list"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+var _EmptyList = _interopRequireDefault(require("./EmptyList"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const body = document.getElementsByTagName('body')[0];
+const PopupMenuSearch = props => {
   const {
-    style: c,
-    menuItemsContent: l,
-    handlerClose: a,
-    menuSearchEmptyMessage: y,
-    menuSearchPlaceholder: b
-  } = g, [I, C] = d(""), [n, S] = d(l), [E, i] = d(""), o = f(null), r = f(document.createElement("div"));
-  Object.assign(r.current, {
-    className: "searchmenu",
-    style: c
+    style,
+    menuItemsContent,
+    handlerClose,
+    menuSearchEmptyMessage,
+    menuSearchPlaceholder
+  } = props;
+  const [searchFieldContent, setSearchFieldContent] = (0, _react.useState)('');
+  const [searchResult, setSearchResult] = (0, _react.useState)(menuItemsContent);
+  const [defaultSelectedItemId, setDefaultSelectedItemId] = (0, _react.useState)('');
+  const searchFieldRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(document.createElement('div'));
+  Object.assign(popupRef.current, {
+    className: 'searchmenu',
+    style
   });
-  const m = (e) => {
-    e.key === "Escape" && (a(), e.stopPropagation());
+  const closeOnEsc = e => {
+    if (e.key === 'Escape') {
+      handlerClose();
+      e.stopPropagation();
+    }
   };
-  u(() => (h.appendChild(r.current), o && o.current && o.current.focus(), document.body.addEventListener("keydown", m), () => {
-    h.removeChild(r.current), document.body.removeEventListener("keydown", m);
-  }), []), u(() => {
-    Object.assign(r.current, {
-      style: c
+  (0, _react.useEffect)(() => {
+    body.appendChild(popupRef.current);
+    if (searchFieldRef && searchFieldRef.current) searchFieldRef.current.focus();
+    document.body.addEventListener('keydown', closeOnEsc);
+    return () => {
+      body.removeChild(popupRef.current);
+      document.body.removeEventListener('keydown', closeOnEsc);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    Object.assign(popupRef.current, {
+      style
     });
-  }, [c]), u(() => {
-    n && n.length > 0 && i(n[0].id);
+  }, [style]);
+  (0, _react.useEffect)(() => {
+    if (searchResult && searchResult.length > 0) setDefaultSelectedItemId(searchResult[0].id);
   }, []);
-  const p = (e) => {
-    const v = e.toLowerCase(), s = l && l.filter((L) => L.content.toLowerCase().includes(v));
-    s && s.length > 0 && i(s[0].id), C(e), S(s);
-  }, x = () => n && n.length > 0 ? /* @__PURE__ */ t(j, { condensed: !0, transparent: !0, selectable: !0, onSelectItem: a, selectedItemId: E, selectOnEnter: !0, style: {
-    margin: "25px 0px",
-    border: "none",
-    boxShadow: "none"
-  }, children: n.map((e) => /* @__PURE__ */ t(N, { itemId: e.id, url: e.url, text: e.content }, e.id)) }) : /* @__PURE__ */ t(M, { info: y }), R = () => /* @__PURE__ */ P(w, { children: [
-    /* @__PURE__ */ t("span", { onClick: a, className: "closebutton", onKeyPress: () => {
-    }, role: "button", tabIndex: 0, children: /* @__PURE__ */ t(k, { name: "close", size: 22 }) }),
-    /* @__PURE__ */ t(O, { rounded: !0, onChange: (e) => {
-      e && p(e.target.value);
-    }, inputRef: o, value: I, placeHolder: b, onReset: () => {
-      p("");
-    } }),
-    /* @__PURE__ */ t("div", { style: {
-      height: "90%"
-    }, children: x() })
-  ] });
-  return F.createPortal(R(), r.current);
-};
-export {
-  G as default
+  const search = value => {
+    const filter = value.toLowerCase();
+    const result = menuItemsContent && menuItemsContent.filter(item => item.content.toLowerCase().includes(filter));
+    if (result && result.length > 0) setDefaultSelectedItemId(result[0].id);
+    setSearchFieldContent(value);
+    setSearchResult(result);
+  };
+  const returnList = () => {
+    if (searchResult && searchResult.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_list.default, {
+        condensed: true,
+        transparent: true,
+        selectable: true,
+        onSelectItem: handlerClose,
+        selectedItemId: defaultSelectedItemId,
+        selectOnEnter: true,
+        style: {
+          margin: '25px 0px',
+          border: 'none',
+          boxShadow: 'none'
+        }
+      }, searchResult.map(item => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+        key: item.id,
+        itemId: item.id,
+        url: item.url,
+        text: item.content
+      })));
+    }
+    return /*#__PURE__*/_react.default.createElement(_EmptyList.default, {
+      info: menuSearchEmptyMessage
+    });
+  };
+  const getPopupContent = () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: handlerClose,
+    className: "closebutton",
+    onKeyPress: () => {},
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "close",
+    size: 22
+  })), /*#__PURE__*/_react.default.createElement(_search.default, {
+    rounded: true,
+    onChange: e => {
+      if (e) search(e.target.value);
+    },
+    inputRef: searchFieldRef,
+    value: searchFieldContent,
+    placeHolder: menuSearchPlaceholder,
+    onReset: () => {
+      search('');
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '90%'
+    }
+  }, returnList()));
+  return /*#__PURE__*/_reactDom.default.createPortal(getPopupContent(), popupRef.current);
 };
-//# sourceMappingURL=index.js.map
+var _default = exports.default = PopupMenuSearch;