@blocklet/ui-react 2.12.13 → 2.12.14

package/lib/@types/index.d.ts

@@ -47,7 +47,8 @@ export declare enum DurationEnum {
     OneHour = "1_hour",
     FourHours = "4_hours",
     Today = "today",
-    ThisWeek = "this_week"
+    ThisWeek = "this_week",
+    Custom = "custom"
 }
 export declare enum StatusEnum {
     Meeting = "meeting",

package/lib/@types/index.js

@@ -4,6 +4,7 @@ export var DurationEnum = /* @__PURE__ */ ((DurationEnum2) => {
   DurationEnum2["FourHours"] = "4_hours";
   DurationEnum2["Today"] = "today";
   DurationEnum2["ThisWeek"] = "this_week";
+  DurationEnum2["Custom"] = "custom";
   return DurationEnum2;
 })(DurationEnum || {});
 export var StatusEnum = /* @__PURE__ */ ((StatusEnum2) => {

package/lib/UserCenter/components/editable-field.d.ts

@@ -17,6 +17,7 @@ interface EditableFieldProps {
     style?: React.CSSProperties;
     verified?: boolean;
     errorMsg?: string;
+    canEdit?: boolean;
 }
-declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, }: EditableFieldProps): JSX.Element | null;
+declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, }: EditableFieldProps): JSX.Element | null;
 export default EditableField;

package/lib/UserCenter/components/editable-field.js

@@ -42,7 +42,8 @@ function EditableField({
   tooltip,
   inline = true,
   style = {},
-  verified = false
+  verified = false,
+  canEdit = true
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -116,6 +117,9 @@ function EditableField({
       )
     ] });
   }, [value, handleChange, component, placeholder, rows, children]);
+  if (!canEdit && editable) {
+    return null;
+  }
   if (!editable) {
     return value ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsxs(
       Typography,

package/lib/UserCenter/components/status-dialog/date-picker.d.ts

@@ -0,0 +1,10 @@
+interface DateTimeInputProps {
+    value: Date;
+    onChange: (value: Date) => void;
+    error?: boolean;
+    helperText?: string;
+    label?: string;
+    timezone?: string;
+}
+export default function DateTimeInput({ value, onChange, error, helperText, label, timezone }: DateTimeInputProps): JSX.Element;
+export {};

package/lib/UserCenter/components/status-dialog/date-picker.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { TextField, FormControl, FormHelperText } from "@mui/material";
+import dayjs from "dayjs";
+import { useCreation } from "ahooks";
+export default function DateTimeInput({ value, onChange, error, helperText, label, timezone }) {
+  const inputRef = useRef(null);
+  const minDateTime = dayjs().format("YYYY-MM-DDTHH:mm");
+  const formatValue = useCreation(() => {
+    let date = dayjs();
+    if (value) {
+      date = timezone ? dayjs(value).tz(timezone) : dayjs(value);
+    }
+    return date.format("YYYY-MM-DD HH:mm");
+  }, [value, timezone]);
+  const handleChange = (e) => {
+    onChange(new Date(e.target.value));
+  };
+  const handleClick = () => {
+    inputRef.current?.showPicker();
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, error, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        inputRef,
+        type: "datetime-local",
+        value: formatValue,
+        onChange: handleChange,
+        inputProps: {
+          min: minDateTime,
+          style: { cursor: "pointer" }
+        },
+        label,
+        error,
+        onClick: handleClick,
+        InputLabelProps: {
+          shrink: true
+        },
+        sx: {
+          "& .MuiInputBase-root": {
+            cursor: "pointer"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            cursor: "pointer"
+          }
+        }
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
+  ] });
+}

package/lib/UserCenter/components/status-dialog/index.d.ts

@@ -0,0 +1,12 @@
+import { UserMetadata } from '../../../@types';
+import { StatusItem } from '../status-selector/menu-item';
+interface StatusDialogProps {
+    open: boolean;
+    onClose: () => void;
+    data: Array<StatusItem>;
+    selected: UserMetadata['status'];
+    onSelect: (v: UserMetadata['status']) => void;
+    timezone?: string;
+}
+export default function StatusDialog({ open, onClose, data, selected, onSelect, timezone }: StatusDialogProps): import("react").JSX.Element;
+export {};

package/lib/UserCenter/components/status-dialog/index.js

@@ -0,0 +1,238 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, createElement, Suspense, useMemo } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  ListItemIcon,
+  Box,
+  Typography,
+  IconButton
+} from "@mui/material";
+import dayjs from "dayjs";
+import CloseIcon from "@mui/icons-material/Close";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn } from "ahooks";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { DurationEnum } from "../../../@types/index.js";
+import { translations } from "../../libs/locales.js";
+import DateTimeInput from "./date-picker.js";
+import { defaultButtonStyle, primaryButtonStyle } from "../user-info/utils.js";
+const selectStyle = {
+  padding: "8px 16px",
+  borderRadius: "8px",
+  "&:hover": {
+    "fieldset.MuiOutlinedInput-notchedOutline": {
+      borderColor: colors.dividerColor
+    }
+  },
+  "fieldset.MuiOutlinedInput-notchedOutline": {
+    borderColor: colors.dividerColor,
+    borderRadius: "8px"
+  },
+  ".MuiSelect-select": {
+    padding: "0 !important",
+    display: "flex",
+    alignItems: "center"
+  }
+};
+export default function StatusDialog({ open, onClose, data, selected, onSelect, timezone }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, "en", _data);
+  });
+  const [status, setStatus] = useState(selected?.value || "");
+  const [duration, setDuration] = useState(selected?.duration || "");
+  const [customDate, setCustomDate] = useState(selected?.dateRange?.[1] || "");
+  const [changed, setChanged] = useState(false);
+  useEffect(() => {
+    setStatus(selected?.value || "");
+    setDuration(selected?.duration || "");
+    setCustomDate(selected?.dateRange?.[1] || "");
+  }, [selected]);
+  const isValid = useMemo(() => {
+    return status && duration;
+  }, [status, duration]);
+  const selectedStatus = data.find((item) => item.id === status);
+  const handleQuickSettingClick = (item) => {
+    onSelect({
+      value: item.id,
+      ...item.duration ? { duration: item.duration } : {}
+    });
+    onClose();
+  };
+  const handleSubmit = (clean = false) => {
+    if (clean) {
+      onSelect(void 0);
+    } else {
+      const current = dayjs();
+      onSelect({
+        value: status,
+        ...duration ? { duration } : {},
+        ...duration === DurationEnum.Custom && customDate ? { dateRange: [current.toDate(), dayjs(customDate).toDate()] } : {}
+      });
+    }
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      maxWidth: "xs",
+      fullWidth: true,
+      PaperProps: {
+        sx: {
+          borderRadius: "8px"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { sx: { borderBottom: `1px solid ${colors.dividerColor}` }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "close",
+              onClick: onClose,
+              sx: {
+                position: "absolute",
+                right: 8,
+                top: 8,
+                color: (theme) => theme.palette.grey[500]
+              },
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, sx: { mt: 2 }, children: [
+            /* @__PURE__ */ jsx(InputLabel, { size: "small", sx: { fontSize: "14px" }, children: t("profile.setStatus") }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: status,
+                label: t("profile.setStatus"),
+                onChange: (e) => {
+                  setStatus(e.target.value);
+                  setChanged(true);
+                },
+                variant: "outlined",
+                IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+                sx: selectStyle,
+                children: data.map((item) => /* @__PURE__ */ jsx(MenuItem, { value: item.id, children: /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+                  item.icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: createElement(item.icon, {
+                    style: { fontSize: "16px", width: "16px", height: "16px" }
+                  }) }),
+                  item.name
+                ] }) }, item.id))
+              }
+            )
+          ] }),
+          !status ? /* @__PURE__ */ jsxs(Box, { sx: { mt: "24px" }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("profile.quickSettings") }),
+            data.map((item) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                onClick: () => handleQuickSettingClick(item),
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  p: "4px",
+                  cursor: "pointer",
+                  borderRadius: "8px",
+                  "&:hover": {
+                    bgcolor: "action.hover"
+                  }
+                },
+                children: /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+                  item.icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: createElement(item.icon, {
+                    style: { fontSize: "16px", width: "16px", height: "16px" }
+                  }) }),
+                  item.name,
+                  item.durationName && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                    "- ",
+                    item.durationName
+                  ] })
+                ] })
+              },
+              item.id
+            ))
+          ] }) : /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, sx: { mt: "24px" }, children: [
+            /* @__PURE__ */ jsx(InputLabel, { size: "small", sx: { fontSize: "14px" }, children: t("profile.removeStatusAfter") }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: duration,
+                label: t("profile.removeStatusAfter"),
+                onChange: (e) => {
+                  const { value } = e.target;
+                  setDuration(value);
+                  if (value === DurationEnum.Custom) {
+                    setCustomDate(dayjs().toDate());
+                  }
+                  setChanged(true);
+                },
+                variant: "outlined",
+                IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+                sx: selectStyle,
+                children: selectedStatus?.children?.map((item) => /* @__PURE__ */ jsx(MenuItem, { value: item.id, children: item.name }, item.id))
+              }
+            )
+          ] }),
+          duration === DurationEnum.Custom && /* @__PURE__ */ jsx(Box, { sx: { mt: "24px" }, children: /* @__PURE__ */ jsx(
+            DateTimeInput,
+            {
+              value: customDate,
+              onChange: (e) => {
+                setCustomDate(e);
+                setChanged(true);
+              },
+              label: t("profile.selectEndTime"),
+              timezone,
+              error: duration === DurationEnum.Custom && !customDate,
+              helperText: duration === DurationEnum.Custom && !customDate ? t("profile.pleaseSelectTime") : void 0
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(DialogActions, { sx: { p: "16px 24px", borderTop: `1px solid ${colors.dividerColor}` }, children: selected?.value && !changed ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            sx: { ...defaultButtonStyle, minWidth: "54px" },
+            size: "small",
+            variant: "outlined",
+            onClick: () => handleSubmit(true),
+            children: t("profile.cleanStatus")
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", variant: "outlined", sx: { ...defaultButtonStyle, minWidth: "54px" }, onClick: onClose, children: t("common.cancel") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              sx: {
+                ...primaryButtonStyle,
+                minWidth: "54px",
+                "&.Mui-disabled": {
+                  backgroundColor: "rgba(0, 0, 0, 0.12)"
+                }
+              },
+              disabled: !isValid,
+              onClick: () => handleSubmit(false),
+              size: "small",
+              variant: "outlined",
+              children: t("common.confirm")
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}

package/lib/UserCenter/components/status-selector/menu-item.d.ts

@@ -15,6 +15,8 @@ export interface StatusItem {
     id: string;
     name: string;
     icon?: React.FC<SvgIconProps>;
+    duration?: string;
+    durationName?: string;
     children?: Array<StatusItem>;
 }
 export interface BaseStatusProps {

package/lib/UserCenter/components/user-center.js

@@ -52,6 +52,11 @@ const ContentWrapper = styled(Box)(({ theme }) => ({
   flex: "revert",
   [theme.breakpoints.up("md")]: {
     flex: 1
+  },
+  "@media (min-width: 850px) and (max-width: 1050px)": {
+    "& .user-center-tabs": {
+      maxWidth: "500px"
+    }
   }
 }));
 export default function UserCenter({
@@ -193,8 +198,8 @@ export default function UserCenter({
         label: x.title || x.label,
         url: x.link || x.url,
         protected: privacyState?.data?.[value] ?? false,
-        isPrivate: x.isPrivate || x._rawLink === "/payment-kit/customer"
-        // FIXME: HACK: 隐藏 payment-kit/customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
+        isPrivate: x.isPrivate || x.private || x._rawLink.includes("/customer")
+        // FIXME: HACK: 隐藏 /customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
         // icon: x.icon,
       };
     }).filter((x) => isMyself || !x.isPrivate);
@@ -382,7 +387,7 @@ export default function UserCenter({
       ] });
     }
     return /* @__PURE__ */ jsxs(ContentWrapper, { display: "flex", flexDirection: isMobile ? "column" : "row", children: [
-      /* @__PURE__ */ jsxs(Box, { flex: "1", order: isMobile ? 2 : "unset", children: [
+      /* @__PURE__ */ jsxs(Box, { flex: "1", className: "user-center-tabs", order: isMobile ? 2 : "unset", children: [
         userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
           Box,
           {

package/lib/UserCenter/components/user-info/clock.js

@@ -5,10 +5,11 @@ import utc from "dayjs/plugin/utc";
 import timezonePlugin from "dayjs/plugin/timezone";
 import { formatToDatetime } from "@arcblock/ux/lib/Util";
 import { useCreation } from "ahooks";
+import { currentTimezone } from "./utils.js";
 dayjs.extend(utc);
 dayjs.extend(timezonePlugin);
-export default function Clock({ timezone = "utc", locale = "zh" }) {
-  const [time, setTime] = useState(dayjs().tz(timezone));
+export default function Clock({ timezone = currentTimezone, locale = "zh" }) {
+  const [time, setTime] = useState(dayjs().tz(timezone || currentTimezone));
   useEffect(() => {
     const timerId = setInterval(() => {
       setTime(dayjs().tz(timezone));

package/lib/UserCenter/components/user-info/metadata.js

@@ -1,8 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import Box from "@mui/material/Box";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
 import Backdrop from "@mui/material/Backdrop";
@@ -10,47 +8,23 @@ import styled from "@emotion/styled";
 import { joinURL } from "ufo";
 import Button from "@arcblock/ux/lib/Button";
 import cloneDeep from "lodash/cloneDeep";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import isEmail from "validator/lib/isEmail";
 import isMobilePhone from "validator/lib/isMobilePhone";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
 import { useBrowser } from "@arcblock/react-hooks";
 import { translations } from "../../libs/locales.js";
 import EditableField from "../editable-field.js";
 import { LinkPreviewInput } from "./link-preview-input.js";
-import { getTimezones } from "./utils.js";
+import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from "./utils.js";
 import Clock from "./clock.js";
-const timezones = getTimezones();
+import { TimezoneSelect } from "./timezone-select.js";
 const LocationIcon = lazy(() => import("@arcblock/icons/lib/Location"));
 const TimezoneIcon = lazy(() => import("@arcblock/icons/lib/Timezone"));
 const EmailIcon = lazy(() => import("@arcblock/icons/lib/Email"));
 const PhoneIcon = lazy(() => import("@arcblock/icons/lib/Phone"));
-const defaultButtonStyle = {
-  color: colors.foregroundsFgBase,
-  borderColor: colors.strokeBorderBase,
-  backgroundColor: colors.buttonsButtonNeutral,
-  "&:hover": {
-    borderColor: colors.strokeBorderBase,
-    backgroundColor: colors.buttonsButtonNeutralHover
-  },
-  py: 0.5,
-  borderRadius: 2
-};
-const primaryButtonStyle = {
-  color: colors.buttonsButtonNeutral,
-  borderColor: colors.foregroundsFgInteractive,
-  backgroundColor: colors.foregroundsFgInteractive,
-  "&:hover": {
-    borderColor: colors.foregroundsFgInteractive,
-    backgroundColor: colors.foregroundsFgInteractive
-  },
-  py: 0.5,
-  borderRadius: 2
-};
 const iconSize = {
   width: 20,
   height: 20
@@ -172,6 +146,9 @@ export default function UserMetadataComponent({
       if (k === "bio") {
         metadata[k] = metadata[k]?.slice(0, bioMaxLength);
       }
+      if (k === "timezone") {
+        metadata[k] = value || currentTimezone;
+      }
     });
     onSave(metadata);
     setEditable(false);
@@ -189,6 +166,7 @@ export default function UserMetadataComponent({
           component: "textarea",
           inline: false,
           rows: 3,
+          label: t("profile.bio"),
           maxLength: bioMaxLength,
           style: {
             ...editing ? { marginBottom: 8 } : {}
@@ -225,7 +203,7 @@ export default function UserMetadataComponent({
       /* @__PURE__ */ jsx(
         EditableField,
         {
-          value: metadata.timezone ?? "",
+          value: metadata.timezone || currentTimezone,
           onChange: (value) => onChange(value, "timezone"),
           editable: editing,
           placeholder: "timezone",
@@ -236,38 +214,11 @@ export default function UserMetadataComponent({
             /* @__PURE__ */ jsx(Clock, { timezone: metadata.timezone, locale })
           ] }),
           children: /* @__PURE__ */ jsx(
-            Select,
+            TimezoneSelect,
             {
-              className: `timezone-select ${editing ? "" : "disabled"}`,
-              value: metadata.timezone,
-              onChange: (e) => onChange(e.target.value, "timezone"),
-              disabled: !editing,
-              displayEmpty: true,
-              variant: "outlined",
-              placeholder: "Timezone",
-              IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
-              MenuProps: {
-                PaperProps: {
-                  style: {
-                    maxHeight: "400px"
-                  }
-                },
-                style: {
-                  zIndex: mode === "drawer" ? 9999 : 1300
-                }
-              },
-              sx: {
-                width: "100%",
-                "&:hover": {
-                  "fieldset.MuiOutlinedInput-notchedOutline": {
-                    borderColor: colors.dividerColor
-                  }
-                },
-                fieldset: {
-                  borderColor: colors.dividerColor
-                }
-              },
-              children: timezones.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz.value, children: tz.label }, tz.value))
+              value: metadata.timezone || currentTimezone,
+              onChange: (value) => onChange(value, "timezone"),
+              disabled: !editing
             }
           )
         }
@@ -276,7 +227,8 @@ export default function UserMetadataComponent({
         EditableField,
         {
           value: metadata.email ?? user?.email ?? "",
-          editable: editing && !emailVerified,
+          editable: editing,
+          canEdit: !emailVerified,
           verified: emailVerified,
           placeholder: "Email",
           icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
@@ -296,7 +248,8 @@ export default function UserMetadataComponent({
         EditableField,
         {
           value: metadata.phone ?? user?.phone ?? "",
-          editable: editing && !phoneVerified,
+          editable: editing,
+          canEdit: !phoneVerified,
           verified: phoneVerified,
           placeholder: "Phone",
           icon: /* @__PURE__ */ jsx(PhoneIcon, { ...iconSize }),

package/lib/UserCenter/components/user-info/timezone-select.d.ts

@@ -0,0 +1,8 @@
+interface TimezoneSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    mode?: 'drawer' | 'self';
+}
+export declare function TimezoneSelect({ value, onChange, disabled, mode }: TimezoneSelectProps): import("react").JSX.Element;
+export {};

package/lib/UserCenter/components/user-info/timezone-select.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import ListSubheader from "@mui/material/ListSubheader";
+import TextField from "@mui/material/TextField";
+import debounce from "lodash/debounce";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
+import { getTimezones } from "./utils.js";
+const timezones = getTimezones();
+export function TimezoneSelect({ value, onChange, disabled = false, mode = "self" }) {
+  const [timezoneData, setTimezoneData] = useState(timezones);
+  const [searchText, setSearchText] = useState("");
+  const timezoneDebounce = useMemo(
+    () => debounce((v) => {
+      return v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones;
+    }, 300),
+    []
+  );
+  useEffect(() => {
+    const data = timezoneDebounce(searchText);
+    setTimezoneData(data ?? timezones);
+  }, [searchText, timezoneDebounce]);
+  useEffect(() => {
+    return () => {
+      timezoneDebounce.cancel();
+    };
+  }, [timezoneDebounce]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      className: `timezone-select ${disabled ? "disabled" : ""}`,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      displayEmpty: true,
+      variant: "outlined",
+      placeholder: "Timezone",
+      IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+      MenuProps: {
+        PaperProps: {
+          style: {
+            maxHeight: "400px"
+          }
+        },
+        style: {
+          zIndex: mode === "drawer" ? 9999 : 1300
+        }
+      },
+      sx: {
+        width: "100%",
+        "&:hover": {
+          "fieldset.MuiOutlinedInput-notchedOutline": {
+            borderColor: colors.dividerColor
+          }
+        },
+        "fieldset.MuiOutlinedInput-notchedOutline": {
+          borderColor: colors.dividerColor
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(ListSubheader, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            autoFocus: true,
+            value: searchText,
+            placeholder: "Timezone",
+            variant: "outlined",
+            size: "small",
+            fullWidth: true,
+            onChange: (event) => setSearchText(event.target.value),
+            onKeyDown: (e) => {
+              if (e.key !== "Escape") {
+                e.stopPropagation();
+              }
+            },
+            sx: {
+              marginTop: "8px",
+              "& .MuiOutlinedInput-root": {
+                "& fieldset": {
+                  borderColor: colors.dividerColor,
+                  borderWidth: "1px"
+                },
+                "&:hover fieldset": {
+                  borderColor: colors.dividerColor
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: colors.dividerColor
+                }
+              }
+            }
+          }
+        ) }),
+        timezoneData.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz.value, children: tz.label }, tz.value))
+      ]
+    }
+  );
+}