@cloudtower/eagle 0.0.0-config-rc-9 → 0.0.0-data-testid

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

@@ -40,9 +40,10 @@ 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;
@@ -55,6 +56,7 @@ const Radio = _a => {
   return /* @__PURE__ */React__default.createElement(React__default.Fragment, null, /* @__PURE__ */React__default.createElement(Radio$2, __spreadValues({
     className: cx(className, RadioStyle, compact && "compact"),
     checked: checked || false,
+    "data-testid": dataTestId,
     "data-test": context.name ? `${context.name}-${String(props.value)}` : String(props.value)
   }, props), children ? children : null));
 };
@@ -62,15 +64,17 @@ 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 +82,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",
@@ -99,6 +104,7 @@ const RadioButton = _e => {
       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 +119,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);
@@ -128,7 +135,8 @@ const RadioButton = _e => {
   };
   return /* @__PURE__ */React__default.createElement(Radio$2.Button, __spreadValues({
     className: cx(className, RadioButtonStyle),
-    value: radioButtonValue
+    value: radioButtonValue,
+    "data-testid": dataTestId
   }, props), 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 };

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

@@ -0,0 +1,247 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { ArrowChevronUp16SecondaryIcon, ArrowChevronUp16BlueIcon, ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, XmarkCloseCircleFill16TertiaryIcon, XmarkCloseCircleFill16SecondaryIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import Icon from '../Icon/index.js';
+import Input from '../Input/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { Typo } from '../Typo/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import { debounce } from 'lodash';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { useRecentSearch } from './SearchInput.hook.js';
+import { CountTextStyles, IconContainerStyles, DisabledIconStyles, SearchInputStyles, SearchInputDropdownStyles } from './SearchInput.style.js';
+import { Antd5Dropdown } from '../Antd5Dropdown/Antd5Dropdown.js';
+
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const SearchInput = (props) => {
+  const _a = props, {
+    className,
+    debounceWait = 300,
+    total = 0,
+    onSearchNext,
+    onSearchPrev,
+    prefixHoverIcon,
+    nextHoverIcon,
+    clearHoverIcon,
+    prefixIcon,
+    nextIcon,
+    clearIcon,
+    width = 276,
+    searchIcon,
+    enableRecentSearch,
+    recentSearchLocalStorageKey,
+    maxRecentCount = 5,
+    current: externalCurrent,
+    onChange,
+    onFocus,
+    onBlur
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "debounceWait",
+    "total",
+    "onSearchNext",
+    "onSearchPrev",
+    "prefixHoverIcon",
+    "nextHoverIcon",
+    "clearHoverIcon",
+    "prefixIcon",
+    "nextIcon",
+    "clearIcon",
+    "width",
+    "searchIcon",
+    "enableRecentSearch",
+    "recentSearchLocalStorageKey",
+    "maxRecentCount",
+    "current",
+    "onChange",
+    "onFocus",
+    "onBlur"
+  ]);
+  const [internalCurrent, setInternalCurrent] = useState(0);
+  const [value, setValue] = useState(props.value || "");
+  const { t } = useParrotTranslation();
+  const isNoMatch = total === 0;
+  const [inputFocused, setInputFocused] = useState(false);
+  const {
+    recentSearchKeys,
+    setRecentSearchKeysDebounceRef,
+    antd5DropdownMenu
+  } = useRecentSearch(
+    recentSearchLocalStorageKey,
+    maxRecentCount,
+    setValue,
+    onChange
+  );
+  const debounceOnChangeRef = useRef();
+  useEffect(() => {
+    const fn = debounce((val) => {
+      var _a2;
+      onChange == null ? void 0 : onChange(val);
+      if (enableRecentSearch && val) {
+        (_a2 = setRecentSearchKeysDebounceRef.current) == null ? void 0 : _a2.call(setRecentSearchKeysDebounceRef, val);
+      }
+    }, debounceWait);
+    debounceOnChangeRef.current = fn;
+    return () => fn.cancel();
+  }, [
+    onChange,
+    enableRecentSearch,
+    debounceWait,
+    setRecentSearchKeysDebounceRef
+  ]);
+  const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
+  const setCurrent = useCallback(
+    (newCurrent) => {
+      if (externalCurrent === void 0) {
+        setInternalCurrent(newCurrent);
+      }
+    },
+    [externalCurrent]
+  );
+  const next = useCallback(() => {
+    if (total) {
+      const nextCurrent = current + 1 > total ? 1 : current + 1;
+      onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
+      setCurrent(nextCurrent);
+    }
+  }, [onSearchNext, current, total, value, setCurrent]);
+  const prev = useCallback(() => {
+    if (total) {
+      const prevCurrent = current - 1 < 1 ? total : current - 1;
+      onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
+      setCurrent(prevCurrent);
+    }
+  }, [onSearchPrev, current, total, value, setCurrent]);
+  const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof total === "number" ? /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      className: cx(
+        Typo.Label.l4_regular,
+        "counter-text",
+        CountTextStyles
+      )
+    },
+    current,
+    "/",
+    total
+  ) : null, /* @__PURE__ */ React__default.createElement("span", { className: IconContainerStyles }, isNoMatch ? /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      className: DisabledIconStyles,
+      src: ArrowChevronUp16SecondaryIcon,
+      style: { opacity: 0.5 }
+    }
+  ) : /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("components.prev") }, /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      src: prefixIcon != null ? prefixIcon : ArrowChevronUp16SecondaryIcon,
+      hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : ArrowChevronUp16BlueIcon,
+      onClick: prev
+    }
+  )), isNoMatch ? /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      className: DisabledIconStyles,
+      src: ArrowChevronDown16SecondaryIcon,
+      style: { opacity: 0.5 }
+    }
+  ) : /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("components.next") }, /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      src: nextIcon != null ? nextIcon : ArrowChevronDown16SecondaryIcon,
+      hoverSrc: nextHoverIcon != null ? nextHoverIcon : ArrowChevronDown16BlueIcon,
+      onClick: next
+    }
+  )), /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("components.clear") }, /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      src: clearIcon != null ? clearIcon : XmarkCloseCircleFill16TertiaryIcon,
+      hoverSrc: clearHoverIcon != null ? clearHoverIcon : XmarkCloseCircleFill16SecondaryIcon,
+      onClick: () => {
+        var _a2;
+        setValue("");
+        (_a2 = debounceOnChangeRef.current) == null ? void 0 : _a2.call(debounceOnChangeRef, "");
+      }
+    }
+  )))) : null;
+  useEffect(() => {
+    setValue(props.value || "");
+  }, [props.value]);
+  useEffect(() => {
+    if (externalCurrent === void 0) {
+      setCurrent(total ? 1 : 0);
+    }
+  }, [value, total, externalCurrent, setCurrent]);
+  const InputComponent = /* @__PURE__ */ React__default.createElement(
+    Input,
+    __spreadValues({
+      className: cx(SearchInputStyles, className),
+      style: { width },
+      prefix: searchIcon ? /* @__PURE__ */ React__default.createElement(Icon, { src: searchIcon }) : /* @__PURE__ */ React__default.createElement(SearchOutlined, null),
+      suffix,
+      onPressEnter: next,
+      value,
+      onChange: (e) => {
+        var _a2;
+        const newValue = e.target.value || "";
+        setValue(newValue);
+        (_a2 = debounceOnChangeRef.current) == null ? void 0 : _a2.call(debounceOnChangeRef, newValue);
+      },
+      onFocus: (e) => {
+        setInputFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      onBlur: (e) => {
+        setInputFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      }
+    }, restProps)
+  );
+  if (enableRecentSearch)
+    return /* @__PURE__ */ React__default.createElement(
+      Antd5Dropdown,
+      {
+        overlayClassName: cx(
+          "recent-search-dropdown",
+          SearchInputDropdownStyles
+        ),
+        overlayStyle: { width },
+        transitionName: "",
+        placement: "bottomLeft",
+        trigger: ["click"],
+        open: inputFocused && !value && !!recentSearchKeys.length,
+        menu: antd5DropdownMenu
+      },
+      InputComponent
+    );
+  return InputComponent;
+};
+
+export { SearchInput };

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

@@ -0,0 +1,7 @@
+const SearchInputStyles = "E_s1n7hav7";
+const CountTextStyles = "E_c1tgpyn0";
+const IconContainerStyles = "E_i1cmbu8m";
+const DisabledIconStyles = "E_dxmfsc9";
+const SearchInputDropdownStyles = "E_slbf45q";
+
+export { CountTextStyles, DisabledIconStyles, IconContainerStyles, SearchInputDropdownStyles, SearchInputStyles };

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

@@ -1,47 +1,156 @@
 import { SearchOutlined } from '@ant-design/icons';
+import { ArrowChevronUp16SecondaryIcon, ArrowChevronUp16BlueIcon, ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, XmarkCloseCircleFill16TertiaryIcon, XmarkCloseCircleFill16SecondaryIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import Icon from '../Icon/index.js';
 import Input from '../Input/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { Typo } from '../Typo/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
 import _ from 'lodash';
-import React__default from 'react';
+import React__default, { useState, useCallback, useEffect } from 'react';
 
 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 __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]);
-    }
+  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));
 var __objRest = (source, exclude) => {
   var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
+  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
+  }
   return target;
 };
-const SearchInput = (props) => {
-  const _a = props, { onChange, debounceWait = 300 } = _a, restProps = __objRest(_a, ["onChange", "debounceWait"]);
+const InputStyle = "E_i11gg7mj";
+const CountTextStyle = "E_cc368xp";
+const IconContainerStyle = "E_i11o6xqj";
+const DisabledIconStyle = "E_d19ruhdj";
+const SearchInput = props => {
+  const _a = props,
+    {
+      onChange,
+      debounceWait = 300,
+      total = 0,
+      onSearchNext,
+      onSearchPrev,
+      prefixHoverIcon,
+      nextHoverIcon,
+      clearHoverIcon,
+      prefixIcon,
+      nextIcon,
+      clearIcon,
+      width,
+      searchIcon,
+      current: externalCurrent
+    } = _a,
+    restProps = __objRest(_a, ["onChange", "debounceWait", "total", "onSearchNext", "onSearchPrev", "prefixHoverIcon", "nextHoverIcon", "clearHoverIcon", "prefixIcon", "nextIcon", "clearIcon", "width", "searchIcon", "current"]);
+  const [internalCurrent, setInternalCurrent] = useState(0);
+  const [value, setValue] = useState(props.value || "");
+  const {
+    t
+  } = useParrotTranslation();
   const onSearch = _.debounce(onChange, debounceWait);
-  return /* @__PURE__ */ React__default.createElement(
-    Input,
-    __spreadValues({
-      style: { width: 276 },
-      prefix: /* @__PURE__ */ React__default.createElement(SearchOutlined, null),
-      onChange: (e) => onSearch(e.target.value)
-    }, restProps)
-  );
+  const isNoMatch = total === 0;
+  const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
+  const setCurrent = useCallback(newCurrent => {
+    if (externalCurrent === void 0) {
+      setInternalCurrent(newCurrent);
+    }
+  }, [externalCurrent]);
+  const next = useCallback(() => {
+    if (total) {
+      const nextCurrent = current + 1 > total ? 1 : current + 1;
+      onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
+      setCurrent(nextCurrent);
+    }
+  }, [onSearchNext, current, total, value, setCurrent]);
+  const prev = useCallback(() => {
+    if (total) {
+      const prevCurrent = current - 1 < 1 ? total : current - 1;
+      onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
+      setCurrent(prevCurrent);
+    }
+  }, [onSearchPrev, current, total, value, setCurrent]);
+  const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */React__default.createElement(React__default.Fragment, null, typeof total === "number" ? /* @__PURE__ */React__default.createElement("span", {
+    className: cx(Typo.Label.l4_regular, "counter-text", CountTextStyle)
+  }, current, "/", total) : null, /* @__PURE__ */React__default.createElement("span", {
+    className: IconContainerStyle
+  }, isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
+    className: DisabledIconStyle,
+    src: ArrowChevronUp16SecondaryIcon,
+    style: {
+      opacity: 0.5
+    }
+  }) : /* @__PURE__ */React__default.createElement(Tooltip, {
+    title: t("components.prev")
+  }, /* @__PURE__ */React__default.createElement(Icon, {
+    src: prefixIcon != null ? prefixIcon : ArrowChevronUp16SecondaryIcon,
+    hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : ArrowChevronUp16BlueIcon,
+    onClick: prev
+  })), isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
+    className: DisabledIconStyle,
+    src: ArrowChevronDown16SecondaryIcon,
+    style: {
+      opacity: 0.5
+    }
+  }) : /* @__PURE__ */React__default.createElement(Tooltip, {
+    title: t("components.next")
+  }, /* @__PURE__ */React__default.createElement(Icon, {
+    src: nextIcon != null ? nextIcon : ArrowChevronDown16SecondaryIcon,
+    hoverSrc: nextHoverIcon != null ? nextHoverIcon : ArrowChevronDown16BlueIcon,
+    onClick: next
+  })), /* @__PURE__ */React__default.createElement(Tooltip, {
+    title: t("components.clear")
+  }, /* @__PURE__ */React__default.createElement(Icon, {
+    src: clearIcon != null ? clearIcon : XmarkCloseCircleFill16TertiaryIcon,
+    hoverSrc: clearHoverIcon != null ? clearHoverIcon : XmarkCloseCircleFill16SecondaryIcon,
+    onClick: () => {
+      onSearch("");
+      setValue("");
+    }
+  })))) : null;
+  useEffect(() => {
+    setValue(props.value || "");
+  }, [props.value]);
+  useEffect(() => {
+    if (externalCurrent === void 0) {
+      setCurrent(total ? 1 : 0);
+    }
+  }, [value, total, externalCurrent, setCurrent]);
+  return /* @__PURE__ */React__default.createElement(Input, __spreadProps(__spreadValues({
+    style: {
+      width: width != null ? width : 276
+    },
+    prefix: searchIcon ? /* @__PURE__ */React__default.createElement(Icon, {
+      src: searchIcon
+    }) : /* @__PURE__ */React__default.createElement(SearchOutlined, null),
+    suffix,
+    onChange: e => {
+      const newValue = e.target.value;
+      onSearch(newValue);
+      setValue(newValue);
+    },
+    onPressEnter: next,
+    value
+  }, restProps), {
+    className: cx(InputStyle, restProps.className)
+  }));
 };
 var SearchInput$1 = SearchInput;
 

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

@@ -1,9 +1,10 @@
 import { cx } from '@linaria/core';
 import Empty from '../Empty/index.js';
-import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import { ParrotTrans } from '../ParrotTrans/index.js';
 import isEmpty from '../../utils/isEmpty.js';
 import { formatSeconds } from '../../utils/tower.js';
 import React__default from 'react';
+import { UnitStyle } from '../Styled/index.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -27,14 +28,24 @@ const Second = ({
   valueClassName,
   unitClassName,
   abbreviate,
-  emptyProps
+  emptyProps,
+  "data-testid": dataTestId
 }) => {
-  const { t } = useParrotTranslation();
   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 } = formatSeconds(rawValue, decimals);
-  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) }, t(`common.${abbreviate ? `${unit}_abbreviation` : unit}`)));
+  return /* @__PURE__ */ React__default.createElement(
+    ParrotTrans,
+    {
+      parent: "span",
+      "data-testid": dataTestId,
+      i18nKey: `unit.${abbreviate ? `${unit}_abbreviation` : unit}`,
+      count: value
+    },
+    /* @__PURE__ */ React__default.createElement("span", { className: cx("value", valueClassName) }),
+    /* @__PURE__ */ React__default.createElement("span", { className: cx("unit", UnitStyle, unitClassName) })
+  );
 };
 var Second$1 = Second;