@cloudtower/eagle 0.0.0-no-uikit-1 → 0.0.0-theme-rc-1

package/dist/esm/core/Metric/index.js

@@ -28,7 +28,8 @@ const Metric = (props) => {
     showPointer = true,
     showLegend = true,
     showXaxis = false,
-    chartProps
+    chartProps,
+    "data-testid": dataTestId
   } = props;
   const [width, setWidth] = useState();
   const wrapperRef = useRef(null);
@@ -39,6 +40,7 @@ const Metric = (props) => {
   return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { i18n: parrotI18n }, /* @__PURE__ */ React__default.createElement(
     MetricWrapper,
     {
+      "data-testid": dataTestId,
       className: cs("metric-wrapper", !showXaxis && "hidden-xaxis"),
       ref: wrapperRef,
       style: { height: showLegend ? height + 30 : height }

package/dist/esm/core/Metric/styled.js

@@ -1,23 +1,23 @@
 import { styled } from '@linaria/react';
 
-const MetricLegendTabStyle = "E_mp64wfi";
-const LegendStyle = "E_l1oyigan";
-const LegendItemStyle = "E_l1noi4n1";
-const ColorBlockStyle = "E_cz19rz6";
-const ExtraResource = "E_e17r5r9c";
+const MetricLegendTabStyle = "E_0_0_0_theme_rc_1_mp64wfi";
+const LegendStyle = "E_0_0_0_theme_rc_1_l1oyigan";
+const LegendItemStyle = "E_0_0_0_theme_rc_1_l1noi4n1";
+const ColorBlockStyle = "E_0_0_0_theme_rc_1_cz19rz6";
+const ExtraResource = "E_0_0_0_theme_rc_1_e17r5r9c";
 const MetricWrapper = /*#__PURE__*/styled('div')({
   name: "MetricWrapper",
-  class: "E_m1y1hhnr",
+  class: "E_0_0_0_theme_rc_1_m1y1hhnr",
   propsAsIs: false
 });
 const TooltipWrapper = /*#__PURE__*/styled('div')({
   name: "TooltipWrapper",
-  class: "E_tnvijvs",
+  class: "E_0_0_0_theme_rc_1_tnvijvs",
   propsAsIs: false
 });
 const TooltipColumn = /*#__PURE__*/styled('div')({
   name: "TooltipColumn",
-  class: "E_t1ub2aex",
+  class: "E_0_0_0_theme_rc_1_t1ub2aex",
   propsAsIs: false
 });
 

package/dist/esm/core/ModalStack/index.js

@@ -1,5 +1,4 @@
-import { useKitSelector } from '../KitStoreProvider/index.js';
-import { closeModal } from '../../store/index.js';
+import { useKitSelector, useCloseModal, useResetModal } from '../KitStoreProvider/index.js';
 import React__default from 'react';
 
 var __defProp = Object.defineProperty;
@@ -25,6 +24,8 @@ const ModalStack = () => {
   const stack = useKitSelector(
     (state) => state.modal.stack
   );
+  const closeModal = useCloseModal();
+  const resetModal = useResetModal();
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, stack.map((modal) => /* @__PURE__ */ React__default.createElement(
     modal.component,
     __spreadProps(__spreadValues({}, modal.props), {
@@ -36,6 +37,11 @@ const ModalStack = () => {
         }
         closeModal(modal.id);
       },
+      closeAllModal: () => {
+        var _a, _b;
+        (_b = (_a = modal.props).closeAllModal) == null ? void 0 : _b.call(_a);
+        resetModal();
+      },
       key: modal.id
     })
   )));

package/dist/esm/core/Nav/index.js

@@ -0,0 +1,33 @@
+import cs from 'classnames';
+import React__default from 'react';
+import { Typo } from '../Typo/index.js';
+import { Header, NavCenterStyle } from './style.js';
+
+const MinWidth = "E_0_0_0_theme_rc_1_m196gn1d";
+const Nav = ({
+  left,
+  right,
+  center,
+  isScrolled,
+  navRef,
+  className,
+  "data-testid": dataTestId
+}) => {
+  return /* @__PURE__ */React__default.createElement(Header, {
+    "data-testid": dataTestId,
+    ref: navRef,
+    className: cs(MinWidth, className),
+    id: "global-header"
+  }, /* @__PURE__ */React__default.createElement("div", {
+    className: "left"
+  }, left), /* @__PURE__ */React__default.createElement("div", {
+    className: cs("center", NavCenterStyle, Typo.Heading.h3_bold_title, isScrolled && "is-scrolled")
+  }, center), /* @__PURE__ */React__default.createElement("div", {
+    className: cs("right", isScrolled && "is-scrolled")
+  }, /* @__PURE__ */React__default.createElement("span", {
+    className: "btn-group"
+  }, right)));
+};
+var Nav$1 = Nav;
+
+export { Nav$1 as default };

package/dist/esm/core/Nav/style.js

@@ -0,0 +1,10 @@
+import { styled } from '@linaria/react';
+
+const Header = /*#__PURE__*/styled('header')({
+  name: "Header",
+  class: "E_0_0_0_theme_rc_1_h12yihis",
+  propsAsIs: false
+});
+const NavCenterStyle = "E_0_0_0_theme_rc_1_ncaepor";
+
+export { Header, NavCenterStyle };

package/dist/esm/core/Overflow/index.js

@@ -2,8 +2,8 @@ import cs from 'classnames';
 import React__default, { useRef, useState, useCallback, useLayoutEffect } from 'react';
 import useElementResize from '../../hooks/useElementResize.js';
 
-const OverflowWrapper = "E_owd0kml";
-const HiddenStyle = "E_h1jsgezc";
+const OverflowWrapper = "E_0_0_0_theme_rc_1_owd0kml";
+const HiddenStyle = "E_0_0_0_theme_rc_1_h1jsgezc";
 const Overflow = props => {
   const {
     children,

package/dist/esm/core/Pagination/index.js

@@ -6,8 +6,8 @@ import { Dropdown, Menu } from 'antd';
 import cs from 'classnames';
 import React__default, { useRef, useEffect, useMemo } from 'react';
 
-const PaginationStyle = "E_phljevk";
-const DropdownOverlayStyle = "E_d12rtyeg";
+const PaginationStyle = "E_0_0_0_theme_rc_1_phljevk";
+const DropdownOverlayStyle = "E_0_0_0_theme_rc_1_d12rtyeg";
 const Pagination = props => {
   const {
     current,
@@ -17,7 +17,8 @@ const Pagination = props => {
     onSizeChange,
     showTotal = true,
     className,
-    selectorVisible = true
+    selectorVisible = true,
+    "data-testid": dataTestId
   } = props;
   const sizeRef = useRef(size);
   const {
@@ -61,11 +62,13 @@ const Pagination = props => {
           title: t("components.push_to")
         }, selectOptions.map(option => /* @__PURE__ */React__default.createElement(Menu.Item, {
           key: option.value,
+          "data-testid": dataTestId ? `${dataTestId}-page-${option.value}` : void 0,
           onClick: () => onChange(option.value)
         }, option.text))))
       }, /* @__PURE__ */React__default.createElement(Icon, {
         alt: "arrowChevronDownSmall16Secondary",
         className: "pagination-left dropdown-trigger",
+        "data-testid": dataTestId ? `${dataTestId}-dropdown` : void 0,
         src: ArrowChevronDownSmall16SecondaryIcon,
         hoverSrc: ArrowChevronDownSmall16BlueIcon,
         prefix: content
@@ -79,6 +82,7 @@ const Pagination = props => {
     return null;
   }
   return /* @__PURE__ */React__default.createElement("div", {
+    "data-testid": dataTestId,
     className: cs(PaginationStyle, "pagination-wrapper", className, selectorVisible && "has-selector")
   }, renderLeft(), /* @__PURE__ */React__default.createElement("span", {
     className: "pagination-right"
@@ -86,6 +90,7 @@ const Pagination = props => {
     className: "prev-btn",
     type: "quiet",
     size: "small",
+    "data-testid": dataTestId ? `${dataTestId}-prev` : void 0,
     prefixIcon: /* @__PURE__ */React__default.createElement(Icon, {
       alt: "arrowChevronLeftSmall16BoldBlue",
       src: ArrowChevronLeftSmall16BoldBlueIcon
@@ -99,6 +104,7 @@ const Pagination = props => {
     className: "next-btn",
     type: "quiet",
     size: "small",
+    "data-testid": dataTestId ? `${dataTestId}-next` : void 0,
     suffixIcon: /* @__PURE__ */React__default.createElement(Icon, {
       alt: "arrowChevronLeftSmall16BoldBlue",
       src: ArrowChevronLeftSmall16BoldBlueIcon

package/dist/esm/core/Percent/index.js

@@ -26,13 +26,14 @@ const Percent = ({
   saturated,
   valueClassName,
   unitClassName,
-  emptyProps
+  emptyProps,
+  "data-testid": dataTestId
 }) => {
   if (isEmpty(rawValue)) {
-    return /* @__PURE__ */ React__default.createElement(Empty, __spreadValues({}, emptyProps));
+    return /* @__PURE__ */ React__default.createElement(Empty, __spreadValues({ "data-testid": dataTestId }, emptyProps));
   }
   const { value, unit } = formatPercent(rawValue, decimals, saturated);
-  return /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement("span", { className: cx("value", valueClassName) }, value), /* @__PURE__ */ React__default.createElement("span", { className: cx("unit", unitClassName) }, unit));
+  return /* @__PURE__ */ React__default.createElement("span", { "data-testid": dataTestId }, /* @__PURE__ */ React__default.createElement("span", { className: cx("value", valueClassName) }, value), /* @__PURE__ */ React__default.createElement("span", { className: cx("unit", unitClassName) }, unit));
 };
 var Percent$1 = Percent;
 

package/dist/esm/core/Progress/components.js

@@ -1,4 +1,4 @@
-import { CheckmarkDoneSuccessCorrect16GreenIcon, XmarkFailed16RedIcon, NoticeTriangleFill16YellowIcon, LoadingBlue16Icon } from '@cloudtower/icons-react';
+import { CheckmarkDoneSuccessCorrect16GreenIcon, XmarkFailed16RedIcon, NoticeTriangleFill16YellowIcon, Loading16GradientBlueIcon } from '@cloudtower/icons-react';
 import { cx } from '@linaria/core';
 import { styled } from '@linaria/react';
 import Icon from '../Icon/index.js';
@@ -42,7 +42,7 @@ const _exp = /*#__PURE__*/() => ({
 }) => color || "";
 const IconFieldText = /*#__PURE__*/styled('div')({
   name: "IconFieldText",
-  class: "E_i14c7jc8",
+  class: "E_0_0_0_theme_rc_1_i14c7jc8",
   propsAsIs: false,
   vars: {
     "i14c7jc8-0": [_exp()]
@@ -53,13 +53,13 @@ const StatusIconMap = {
   failed: /* @__PURE__ */React__default.createElement(XmarkFailed16RedIcon, null),
   paused: /* @__PURE__ */React__default.createElement(NoticeTriangleFill16YellowIcon, null),
   active: /* @__PURE__ */React__default.createElement(Icon, {
-    src: LoadingBlue16Icon,
+    src: Loading16GradientBlueIcon,
     isRotate: true
   })
 };
 const IconFieldWrapper = /*#__PURE__*/styled('div')({
   name: "IconFieldWrapper",
-  class: "E_i1ibuolf",
+  class: "E_0_0_0_theme_rc_1_i1ibuolf",
   propsAsIs: false
 });
 const IconField = _a => {

package/dist/esm/core/Progress/index.js

@@ -39,7 +39,7 @@ var __objRest = (source, exclude) => {
 };
 const Row = /*#__PURE__*/styled('div')({
   name: "Row",
-  class: "E_r77hffu",
+  class: "E_0_0_0_theme_rc_1_r77hffu",
   propsAsIs: false
 });
 const _exp = /*#__PURE__*/() => ({
@@ -47,7 +47,7 @@ const _exp = /*#__PURE__*/() => ({
 }) => type === "rich" ? "6px" : "4px";
 const ProgressContainer = /*#__PURE__*/styled('div')({
   name: "ProgressContainer",
-  class: "E_p1cmxsf7",
+  class: "E_0_0_0_theme_rc_1_p1cmxsf7",
   propsAsIs: false,
   vars: {
     "p1cmxsf7-0": [_exp()]
@@ -80,9 +80,10 @@ const Progress = _a => {
       rightBottom,
       percent = 0,
       className,
-      indeterminate
+      indeterminate,
+      "data-testid": dataTestId
     } = _b,
-    props = __objRest(_b, ["type", "status", "size", "leftTop", "rightTop", "leftBottom", "rightBottom", "percent", "className", "indeterminate"]);
+    props = __objRest(_b, ["type", "status", "size", "leftTop", "rightTop", "leftBottom", "rightBottom", "percent", "className", "indeterminate", "data-testid"]);
   const finalStatus = getStatus(status, percent, indeterminate);
   const storkeWidth = size === "small" ? 4 : 8;
   const isBaseProgress = type === "base";
@@ -113,7 +114,8 @@ const Progress = _a => {
   }
   return /* @__PURE__ */React__default.createElement(ProgressContainer, {
     type,
-    className: cx(className, ProgressStyle)
+    className: cx(className, ProgressStyle),
+    "data-testid": dataTestId
   }, titleNode ? /* @__PURE__ */React__default.createElement(Row, null, titleNode, statusTextNode) : null, /* @__PURE__ */React__default.createElement(Progress$1, __spreadProps(__spreadValues({
     className: isBaseProgress ? BaseProgressStyle : "",
     strokeWidth: storkeWidth,

package/dist/esm/core/Progress/progress.style.js

@@ -1,6 +1,6 @@
-const DescriptionStyle = "E_d1u4ndxc";
-const FlexFullContentStyle = "E_f6xb0iv";
-const BaseProgressStyle = "E_b1dhu7ov";
-const ProgressStyle = "E_p1as1j2z";
+const DescriptionStyle = "E_0_0_0_theme_rc_1_d1u4ndxc";
+const FlexFullContentStyle = "E_0_0_0_theme_rc_1_f6xb0iv";
+const BaseProgressStyle = "E_0_0_0_theme_rc_1_b1dhu7ov";
+const ProgressStyle = "E_0_0_0_theme_rc_1_p1as1j2z";
 
 export { BaseProgressStyle, DescriptionStyle, FlexFullContentStyle, ProgressStyle };

package/dist/esm/core/Progress/progress.widgets.js

@@ -1,8 +1,8 @@
-import { DotIntervalSeparation16TertiaryIcon } from '@cloudtower/icons-react';
 import { styled } from '@linaria/react';
 import Link from '../Link/index.js';
 import { IconField, Info } from './components.js';
 import Tag from '../Tag/index.js';
+import { splitMap } from '../../utils/constants.js';
 import React__default from 'react';
 
 var __defProp = Object.defineProperty;
@@ -33,17 +33,14 @@ var __objRest = (source, exclude) => {
   }
   return target;
 };
-const splitMap = {
-  dot: /* @__PURE__ */React__default.createElement(DotIntervalSeparation16TertiaryIcon, null)
-};
-const titleAreaStyle = "E_t1gvlxt5";
-const _exp = /*#__PURE__*/() => props => props.gap;
+const titleAreaStyle = "E_0_0_0_theme_rc_1_t1gvlxt5";
+const _exp2 = /*#__PURE__*/() => props => props.gap;
 const AreaWrapper = /*#__PURE__*/styled('div')({
   name: "AreaWrapper",
-  class: "E_a1ji6r68",
+  class: "E_0_0_0_theme_rc_1_a1ji6r68",
   propsAsIs: false,
   vars: {
-    "a1ji6r68-0": [_exp(), "px"]
+    "a1ji6r68-0": [_exp2(), "px"]
   }
 });
 const Area = ({
@@ -122,6 +119,8 @@ function getComponent(type, props) {
       return /* @__PURE__ */React__default.createElement(Tag, __spreadProps(__spreadValues({}, restTagProps), {
         color: color || "blue"
       }));
+    default:
+      return /* @__PURE__ */React__default.createElement(React__default.Fragment, null);
   }
 }
 

package/dist/esm/core/Radio/index.js

@@ -2,7 +2,7 @@ import { cx } from '@linaria/core';
 import { Typo } from '../Typo/index.js';
 import { Radio as Radio$2, InputNumber, Input } from 'antd';
 import _ from 'lodash';
-import React__default, { useState } from 'react';
+import React__default, { useCallback, useState } from 'react';
 import { EMPTY_FUNCTION } from '../../utils/constants.js';
 
 var __defProp = Object.defineProperty;
@@ -30,9 +30,9 @@ var __objRest = (source, exclude) => {
   }
   return target;
 };
-const RadioStyle = "E_rapgekc";
-const RadioGroupStyle = "E_rp906go";
-const RadioButtonStyle = "E_rcc63c8";
+const RadioStyle = "E_0_0_0_theme_rc_1_rapgekc";
+const RadioGroupStyle = "E_0_0_0_theme_rc_1_rp906go";
+const RadioButtonStyle = "E_0_0_0_theme_rc_1_rcc63c8";
 const KitRadioGroupContext = React__default.createContext({});
 const Radio = _a => {
   var _b = _a,
@@ -40,37 +40,53 @@ const Radio = _a => {
       children,
       className,
       checked,
-      compact = false
+      compact = false,
+      "data-testid": dataTestId
     } = _b,
-    props = __objRest(_b, ["children", "className", "checked", "compact"]);
+    props = __objRest(_b, ["children", "className", "checked", "compact", "data-testid"]);
   const {
     description
   } = props;
   const context = React__default.useContext(KitRadioGroupContext);
+  const markerRef = useCallback(node => {
+    if (node && dataTestId) {
+      const label = node.closest("label.ant-radio-wrapper");
+      if (label) {
+        label.setAttribute("data-testid", dataTestId);
+      }
+    }
+  }, [dataTestId]);
   if (description) {
     children = /* @__PURE__ */React__default.createElement(React__default.Fragment, null, children, /* @__PURE__ */React__default.createElement("div", {
       className: cx("radio-description", Typo.Label.l4_regular)
     }, description));
   }
-  return /* @__PURE__ */React__default.createElement(React__default.Fragment, null, /* @__PURE__ */React__default.createElement(Radio$2, __spreadValues({
+  return /* @__PURE__ */React__default.createElement(Radio$2, __spreadValues({
     className: cx(className, RadioStyle, compact && "compact"),
     checked: checked || false,
     "data-test": context.name ? `${context.name}-${String(props.value)}` : String(props.value)
-  }, props), children ? children : null));
+  }, props), dataTestId && /* @__PURE__ */React__default.createElement("span", {
+    ref: markerRef,
+    style: {
+      display: "none"
+    }
+  }), children ? children : null);
 };
 const RadioGroup = _c => {
   var _d = _c,
     {
       children,
-      className
+      className,
+      "data-testid": dataTestId
     } = _d,
-    props = __objRest(_d, ["children", "className"]);
+    props = __objRest(_d, ["children", "className", "data-testid"]);
   return /* @__PURE__ */React__default.createElement(KitRadioGroupContext.Provider, {
     value: {
       disabled: props.disabled,
       name: props.name
     }
   }, /* @__PURE__ */React__default.createElement(Radio$2.Group, __spreadValues({
+    "data-testid": dataTestId,
     className: cx(className, RadioGroupStyle)
   }, props), children ? children : null));
 };
@@ -78,9 +94,10 @@ const RadioButton = _e => {
   var _f = _e,
     {
       children,
-      className
+      className,
+      "data-testid": dataTestId
     } = _f,
-    props = __objRest(_f, ["children", "className"]);
+    props = __objRest(_f, ["children", "className", "data-testid"]);
   const {
     type,
     placeholder = "Label",
@@ -93,12 +110,21 @@ const RadioButton = _e => {
   const [inputValue, setInputValue] = useState(initialValue);
   const radioButtonValue = type === "input" || type === "input-number" ? inputValue : props.value;
   const radioGroupContext = React__default.useContext(KitRadioGroupContext);
+  const markerRef = useCallback(node => {
+    if (node && dataTestId) {
+      const label = node.closest("label.ant-radio-button-wrapper");
+      if (label) {
+        label.setAttribute("data-testid", dataTestId);
+      }
+    }
+  }, [dataTestId]);
   const renderInput = () => {
     const inputDisabled = props.disabled || (radioGroupContext == null ? void 0 : radioGroupContext.disabled);
     if (type === "input-number") return /* @__PURE__ */React__default.createElement(InputNumber, {
       className: "ant-radio-button-input",
       placeholder,
       disabled: inputDisabled,
+      "data-testid": dataTestId ? `${dataTestId}-input-number` : void 0,
       value: !_.isNil(inputValue) ? Number(inputValue) : void 0,
       min,
       max,
@@ -113,6 +139,7 @@ const RadioButton = _e => {
       className: "ant-radio-button-input",
       placeholder,
       disabled: inputDisabled,
+      "data-testid": dataTestId ? `${dataTestId}-input` : void 0,
       value: inputValue,
       onChange: e => {
         setInputValue(e.target.value);
@@ -129,7 +156,12 @@ const RadioButton = _e => {
   return /* @__PURE__ */React__default.createElement(Radio$2.Button, __spreadValues({
     className: cx(className, RadioButtonStyle),
     value: radioButtonValue
-  }, props), renderChildren());
+  }, props), dataTestId && /* @__PURE__ */React__default.createElement("span", {
+    ref: markerRef,
+    style: {
+      display: "none"
+    }
+  }), renderChildren());
 };
 var Radio$1 = Radio;
 

package/dist/esm/core/SearchInput/SearchInput.hook.js

@@ -0,0 +1,117 @@
+import { Search24Icon, Search24BlueIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import Icon from '../Icon/index.js';
+import { Typo } from '../Typo/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import { debounce } from 'lodash';
+import React__default, { useState, useEffect, useRef, useMemo } from 'react';
+import OverflowTooltip from '../../coreX/OverflowTooltip/index.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const searchInputRecentSearchLocalStorageKey = "search-input-recent-search";
+const useRecentSearch = (recentSearchLocalStorageKey, maxRecentCount, setValue, onChange) => {
+  const { t } = useParrotTranslation();
+  const [recentSearchKeys, setRecentSearchKeys] = useState([]);
+  useEffect(() => {
+    if (!recentSearchLocalStorageKey)
+      return;
+    try {
+      const currRecentSearchKeys = JSON.parse(
+        localStorage.getItem(searchInputRecentSearchLocalStorageKey) || "{}"
+      )[recentSearchLocalStorageKey];
+      setRecentSearchKeys(currRecentSearchKeys || []);
+    } catch (error) {
+      setRecentSearchKeys([]);
+    }
+  }, [recentSearchLocalStorageKey]);
+  const setRecentSearchKeysDebounceRef = useRef();
+  useEffect(() => {
+    if (!recentSearchLocalStorageKey)
+      return;
+    const fn = debounce((val) => {
+      if (!val || !recentSearchLocalStorageKey)
+        return;
+      setRecentSearchKeys((preState) => {
+        const newState = [...preState].filter((item) => item !== val);
+        if (newState.length >= maxRecentCount)
+          newState.pop();
+        newState.unshift(val);
+        try {
+          const recentSearchMap = JSON.parse(
+            localStorage.getItem(searchInputRecentSearchLocalStorageKey) || "{}"
+          );
+          localStorage.setItem(
+            searchInputRecentSearchLocalStorageKey,
+            JSON.stringify(__spreadProps(__spreadValues({}, recentSearchMap), {
+              [recentSearchLocalStorageKey]: newState
+            }))
+          );
+        } catch (err) {
+          console.error(err);
+        }
+        return newState;
+      });
+    }, 400);
+    setRecentSearchKeysDebounceRef.current = fn;
+    return () => fn.cancel();
+  }, [maxRecentCount, recentSearchLocalStorageKey]);
+  const antd5DropdownMenu = useMemo(
+    () => ({
+      onClick: ({ key: val }) => {
+        var _a;
+        setValue(val);
+        onChange == null ? void 0 : onChange(val);
+        (_a = setRecentSearchKeysDebounceRef.current) == null ? void 0 : _a.call(setRecentSearchKeysDebounceRef, val);
+      },
+      items: [
+        {
+          key: "recent-search",
+          className: cx("recent-search-menu-item", Typo.Label.l4_regular),
+          disabled: true,
+          label: /* @__PURE__ */ React__default.createElement("span", null, t("components.recent_search"))
+        },
+        ...recentSearchKeys.map((k) => ({
+          key: k,
+          label: /* @__PURE__ */ React__default.createElement(
+            Icon,
+            {
+              src: Search24Icon,
+              hoverSrc: Search24BlueIcon,
+              iconHeight: 24,
+              iconWidth: 24
+            },
+            /* @__PURE__ */ React__default.createElement(OverflowTooltip, { content: k })
+          )
+        }))
+      ],
+      // 避免 Dropdown 点击时被 Input blur 关闭
+      onMouseDown: (e) => e.preventDefault()
+    }),
+    [onChange, recentSearchKeys, setRecentSearchKeysDebounceRef, setValue, t]
+  );
+  return {
+    recentSearchKeys,
+    setRecentSearchKeysDebounceRef,
+    antd5DropdownMenu
+  };
+};
+
+export { searchInputRecentSearchLocalStorageKey, useRecentSearch };