linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/menus/sidenav/index.js

@@ -1,150 +1,183 @@
-import { j as i } from "../../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as ae } from "../../chunks/compiler-runtime.Cu50tn6L.js";
-import { useState as L, useRef as me, useEffect as W } from "react";
-import oe from "./NavMenuItem.js";
-import ue from "./NavSubMenuItem.js";
-import pe from "./NavMenuGroup.js";
-import fe from "./ExpandMenu.js";
-import { SideNavContext as de } from "./helpers.js";
-import he from "../../icons/index.js";
-import { keyCodes as xe } from "../../internals/constants.js";
-import Se from "./popup_menu_search/index.js";
-import { v as se } from "../../chunks/v1.Ds1rkxUj.js";
-import '../../assets/index27.css';const De = (m) => {
-  const e = ae.c(52), {
-    customClass: re,
-    showExpandMenu: A,
-    expandMenuCustomClass: H,
-    expanded: X,
-    menuSize: Y,
-    onExpandMenuClick: S,
-    children: l,
-    enableMenuSearch: c,
-    menuSearchCustomComponent: C
-  } = m, x = X === void 0 ? !0 : X, r = Y === void 0 ? "medium" : Y, [o, Z] = L(x);
-  let v;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (v = [], e[0] = v) : v = e[0];
-  const [u, ie] = L(v);
-  let y;
-  e[1] === Symbol.for("react.memo_cache_sentinel") ? (y = {}, e[1] = y) : y = e[1];
-  const [T, le] = L(y), [a, ee] = L(!1), M = me(null);
-  let b;
-  e[2] !== o || e[3] !== S ? (b = () => {
-    Z(!o), S && S(!o);
-  }, e[2] = o, e[3] = S, 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 ce = E;
-  let p, I;
-  if (e[8] === Symbol.for("react.memo_cache_sentinel")) {
-    const n = (t) => {
-      const {
-        type: s
-      } = t;
-      (s === oe || s === ue) && !t.props.children && ie((U) => [...U, {
-        id: t.props.id || `${t.props.title}-${se()}`,
-        content: t.props.title,
-        url: t.props.url
+      left,
+      top,
+      width,
+      height
+    } = sideNavDimensions;
+    const style = "left: ".concat(left + width + 5, "px; top: ").concat(top + 1, "px; height: ").concat(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 || "".concat(child.props.title, "-").concat(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);
     };
-    p = (t) => {
-      Array.isArray(t) ? t.forEach((s) => {
-        s && (n(s), s.props && s.props.children && p(s.props.children));
-      }) : t && (n(t), t.props && t.props.children && p(t.props.children));
-    }, I = () => {
-      ee(!0);
-    }, e[8] = p, e[9] = I;
-  } else
-    p = e[8], I = e[9];
-  const te = I;
-  let N;
-  e[10] === Symbol.for("react.memo_cache_sentinel") ? (N = (n) => {
-    [xe.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 j;
-  e[13] !== l || e[14] !== c ? (j = () => {
-    c && M && M.current && le(M.current.getBoundingClientRect()), c && p(l);
-  }, e[13] = l, e[14] = c, e[15] = j) : j = e[15];
-  let k;
-  e[16] === Symbol.for("react.memo_cache_sentinel") ? (k = [], e[16] = k) : k = e[16], W(j, k);
-  let w, R;
-  e[17] !== x ? (w = () => {
-    Z(x);
-  }, R = [x], e[17] = x, e[18] = w, e[19] = R) : (w = e[18], R = e[19]), W(w, R);
-  let D;
-  e[20] !== u ? (D = () => u.filter(Ce), e[20] = u, e[21] = D) : D = e[21];
-  const G = D;
-  let K;
-  e[22] !== B || e[23] !== u || e[24] !== C || e[25] !== r || e[26] !== a || e[27] !== m || e[28] !== G ? (K = () => {
-    const n = {
-      ...m,
-      style: B(),
-      handlerClose: ce,
-      menuItemsContent: u && G()
-    };
-    return /* @__PURE__ */ i.jsx(pe, { children: /* @__PURE__ */ i.jsxs(oe, { childrenIsSubMenu: !1, customClass: "-customsidenavitem", tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)", tooltipPosition: "right", children: [
-      /* @__PURE__ */ i.jsx("div", { className: "searchmenubutton", role: "button", tabIndex: -1, onKeyDown: ve, onClick: () => {
-        te();
-      }, children: /* @__PURE__ */ i.jsx(he, { name: "search", customClass: "searchmenuicon", size: r === "small" && 16 || r === "medium" && 22 || r === "large" && 32 || 16 }) }, "searchMenuIcon"),
-      a && (C ? C(n) : /* @__PURE__ */ i.jsx(Se, { ...n }))
-    ] }) }, `popup-menusearch-${se()}`);
-  }, e[22] = B, e[23] = u, e[24] = C, e[25] = r, e[26] = a, e[27] = m, e[28] = G, e[29] = K) : K = e[29];
-  const O = K;
-  let P;
-  e[30] !== l || e[31] !== c || e[32] !== O ? (P = () => {
-    if (!c)
-      return l;
-    const n = [...l];
-    return n.splice(1, 0, O()), n;
-  }, e[30] = l, e[31] = c, e[32] = O, e[33] = P) : P = e[33];
-  const V = P;
-  let z;
-  e[34] !== o || e[35] !== r || e[36] !== a ? (z = {
-    isExpanded: o,
-    menuSize: r,
-    openSearchMenuPopup: a
-  }, e[34] = o, e[35] = r, e[36] = a, e[37] = z) : z = e[37];
-  const J = z, Q = `sidenav-component ${o ? "-expanded" : ""} ${a ? "-blocked" : ""} ${re}`;
-  let f;
-  e[38] !== H || e[39] !== o || e[40] !== q || e[41] !== A ? (f = A && /* @__PURE__ */ i.jsx(fe, { 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] = f) : f = e[42];
-  let d;
-  e[43] !== V ? (d = V(), e[43] = V, e[44] = d) : d = e[44];
-  let h;
-  e[45] !== Q || e[46] !== f || e[47] !== d ? (h = /* @__PURE__ */ i.jsxs("div", { className: Q, ref: M, children: [
-    f,
-    d
-  ] }), e[45] = Q, e[46] = f, e[47] = d, e[48] = h) : h = e[48];
-  let F;
-  return e[49] !== J || e[50] !== h ? (F = /* @__PURE__ */ i.jsx(de.Provider, { value: J, children: h }), e[49] = J, e[50] = h, e[51] = F) : F = e[51], F;
-};
-function Ce(m) {
-  return m.content !== "";
-}
-function ve() {
-}
-export {
-  fe as ExpandedMenu,
-  pe as NavMenuGroup,
-  oe as NavMenuItem,
-  ue as NavSubMenuItem,
-  De 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-".concat(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 ".concat(isExpanded ? '-expanded' : '', " ").concat(openSearchMenuPopup ? '-blocked' : '', " ").concat(customClass),
+    ref: sideNavRef
+  }, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
+    expandMenuCustomClass: "".concat(isExpanded && 'closefromexpanded', " ").concat(expandMenuCustomClass),
+    onExpandMenu: onHeaderClick,
+    iconName: isExpanded ? 'arrow_left' : 'arrow_right'
+  }), getSideNavContent()));
 };
+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,23 +1,26 @@
-import { j as i } from "../../../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as l } from "../../../chunks/compiler-runtime.Cu50tn6L.js";
-import m from "../../../icons/index.js";
-const d = (c) => {
-  const e = l.c(4), {
-    info: r,
-    visible: n
-  } = c;
-  if (!(n === void 0 ? !0 : n)) {
-    let o;
-    return e[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ i.jsx("noscript", {}), e[0] = o) : o = e[0], o;
-  }
-  let t;
-  e[1] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ i.jsx(m, { name: "information", color: "#bdbdbd", size: 128 }), e[1] = t) : t = e[1];
-  let s;
-  return e[2] !== r ? (s = /* @__PURE__ */ i.jsxs("div", { className: "nodata-container", children: [
-    t,
-    /* @__PURE__ */ i.jsx("p", { className: "subtext", children: r })
-  ] }), e[2] = r, e[3] = s) : s = e[3], s;
-};
-export {
-  d as default
+"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));
 };
+var _default = exports.default = EmptyList;

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

@@ -1,4 +1,12 @@
-import { default as React } from 'react';
-import { IPopupMenuSearchProps } from '../types';
-declare const PopupMenuSearch: (props: IPopupMenuSearchProps) => 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,56 +1,115 @@
-import { j as t } from "../../../chunks/jsx-runtime.D1SHvdVE.js";
-import { useState as d, useRef as f, useEffect as u, Fragment as v } from "react";
-import P from "react-dom";
-import w from "../../../inputs/search/index.js";
-import F from "../../../list/index.js";
-import O from "../../../icons/index.js";
-import k from "./EmptyList.js";
-import { L as M } from "../../../chunks/tabs.BvKfeA6Y.js";
-const h = document.getElementsByTagName("body")[0], A = (x) => {
+"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const body = document.getElementsByTagName('body')[0];
+const PopupMenuSearch = props => {
   const {
-    style: c,
-    menuItemsContent: a,
-    handlerClose: l,
-    menuSearchEmptyMessage: g,
-    menuSearchPlaceholder: y
-  } = x, [b, j] = d(""), [n, I] = d(a), [C, 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" && (l(), 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 L = e.toLowerCase(), s = a && a.filter((R) => R.content.toLowerCase().includes(L));
-    s && s.length > 0 && i(s[0].id), j(e), I(s);
-  }, E = () => n && n.length > 0 ? /* @__PURE__ */ t.jsx(F, { condensed: !0, transparent: !0, selectable: !0, onSelectItem: l, selectedItemId: C, selectOnEnter: !0, style: {
-    margin: "25px 0px",
-    border: "none",
-    boxShadow: "none"
-  }, children: n.map((e) => /* @__PURE__ */ t.jsx(M, { itemId: e.id, url: e.url, text: e.content }, e.id)) }) : /* @__PURE__ */ t.jsx(k, { info: g }), S = () => /* @__PURE__ */ t.jsxs(v, { children: [
-    /* @__PURE__ */ t.jsx("span", { onClick: l, className: "closebutton", onKeyPress: () => {
-    }, role: "button", tabIndex: 0, children: /* @__PURE__ */ t.jsx(O, { name: "close", size: 22 }) }),
-    /* @__PURE__ */ t.jsx(w, { rounded: !0, onChange: (e) => {
-      e && p(e.target.value);
-    }, inputRef: o, value: b, placeHolder: y, onReset: () => {
-      p("");
-    } }),
-    /* @__PURE__ */ t.jsx("div", { style: {
-      height: "90%"
-    }, children: E() })
-  ] });
-  return P.createPortal(S(), r.current);
-};
-export {
-  A 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);
 };
+var _default = exports.default = PopupMenuSearch;