@cloudtower/eagle 0.22.38 → 0.23.0

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import { Alert as Alert$1, Badge as Badge$1, Button as Button$1, Tooltip as Tool
 export { Col, Row } from 'antd';
 import React, { useState, useMemo, useRef, useCallback, useEffect, Fragment, useLayoutEffect, createContext, memo, useImperativeHandle, useContext } from 'react';
 import cs from 'classnames';
-import _, { sortBy, uniqBy } from 'lodash';
+import _, { uniqBy, groupBy, sortBy, toPairs } from 'lodash';
 import { parrotI18n } from '@cloudtower/parrot';
 export * from '@cloudtower/parrot';
 import { cx } from '@linaria/core';
@@ -13,7 +13,7 @@ import { isElement } from 'react-is';
 import { CloseCircleFilled, CheckOutlined, SearchOutlined, PlusOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import { combineReducers, createStore } from 'redux';
 import { createDispatchHook, createSelectorHook, Provider } from 'react-redux';
-import { HandlePoint816SecondaryIcon, HandlePoint816BlueIcon, XmarkRemove16SecondaryIcon, XmarkRemove16RegularRedIcon } from '@cloudtower/icons-react';
+import { XmarkRemove16SecondaryIcon, XmarkRemove16RegularRedIcon, HandlePoint816SecondaryIcon, HandlePoint816BlueIcon, CheckmarkDoneSuccessCorrect16BlueIcon } from '@cloudtower/icons-react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import TimeZones from 'timezones.json';
 import { withTranslation } from 'react-i18next';
@@ -3636,6 +3636,15 @@ const AffixColumnHeaderCell = ({ data, column, onChange, onBlur }) => {
   ) : void 0);
 };
 
+const CheckboxColumnHeaderCell = ({ onChange }) => {
+  const _onChange = useCallback(
+    (e) => {
+      onChange(e.target.checked, true);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(Checkbox$1, { onChange: _onChange });
+};
 const CheckboxColumnBodyCell = ({ data, column, index, onChange }) => {
   const value = data[index][column.key] === void 0 ? column.defaultValue : data[index][column.key];
   const _onChange = useCallback(
@@ -3773,11 +3782,7 @@ const TextColumnHeaderCell = ({
     column.subTitle
   );
 };
-const TextColumnBodyCell = ({
-  data,
-  column,
-  index
-}) => {
+const TextColumnBodyCell = ({ data, column, index }) => {
   const text = column.displayText || data[index][column.key];
   const CellDescription = useMemo(() => {
     var _a, _b;
@@ -3806,7 +3811,7 @@ const ColumnHeaderImpls = {
   input: InputColumnHeaderCell,
   password: InputColumnHeaderCell,
   affix: AffixColumnHeaderCell,
-  checkbox: TextColumnHeaderCell
+  checkbox: CheckboxColumnHeaderCell
 };
 const ColumnBodyImpls = {
   text: TextColumnBodyCell,
@@ -3826,10 +3831,17 @@ const FormItem = props => {
   return /* @__PURE__ */React.createElement(Form.Item, {
     className: FormItemStyle,
     validateStatus,
-    help: validateStatus ? message : ""
+    help: validateStatus && message ? message : void 0
   }, children);
 };
 
+var ValidateTriggerType = /* @__PURE__ */ ((ValidateTriggerType2) => {
+  ValidateTriggerType2[ValidateTriggerType2["Normal"] = 0] = "Normal";
+  ValidateTriggerType2[ValidateTriggerType2["Aggressive"] = 1] = "Aggressive";
+  ValidateTriggerType2[ValidateTriggerType2["Lazy"] = 2] = "Lazy";
+  return ValidateTriggerType2;
+})(ValidateTriggerType || {});
+
 var __defProp$5 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -3852,40 +3864,77 @@ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const TableFormBodyCell = (props) => {
   const {
     column,
-    disabled,
     index: rowIndex,
     data,
-    onChange,
     latestData,
+    validateTriggerType,
     isRowError,
-    onBlur
+    getRowValidateResult,
+    disabled,
+    onChange,
+    onBlur,
+    validateAll
   } = props;
+  const [validateResult, setValidateResult] = useState();
+  const isTouched = useRef(false);
   const width = typeof column.width === "number" ? column.width + "px" : column.width;
-  const _onChange = useCallback(
-    (value, data2) => {
-      const newData = data2.map(
-        (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
-      );
-      onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+  const triggerValidate = useCallback(
+    (currentValue) => {
+      var _a;
+      const value = currentValue || data[rowIndex][column.key];
+      const rowData = __spreadProps$5(__spreadValues$5({}, data[rowIndex]), { [column.key]: value });
+      const rowValidateRes = getRowValidateResult(rowData);
+      if (rowValidateRes) {
+        return;
+      }
+      const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
+        value,
+        rowIndex,
+        rowData: data[rowIndex]
+      });
+      const isError = result ? typeof result === "string" : false;
+      setValidateResult({ msg: result || "", isError });
     },
-    [rowIndex, onChange, column]
+    [data, column, rowIndex, getRowValidateResult]
   );
+  useEffect(() => {
+    if (validateAll) {
+      isTouched.current = true;
+      triggerValidate();
+    }
+  }, [validateAll, triggerValidate]);
+  const _onChange = (value, data2) => {
+    const newData = data2.map(
+      (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
+    );
+    onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+    if (validateTriggerType === ValidateTriggerType.Normal && isTouched.current || validateTriggerType === ValidateTriggerType.Aggressive) {
+      triggerValidate(value);
+    }
+  };
   const _onBlur = useCallback(() => {
+    isTouched.current = true;
+    triggerValidate();
     onBlur == null ? void 0 : onBlur(data, rowIndex, column.key);
-  }, [rowIndex, column, onBlur, data]);
+  }, [rowIndex, column, onBlur, data, triggerValidate]);
   const renderDefaultComponent = () => {
     if (!column.type)
       return null;
     const CellComponent = ColumnBodyImpls[column.type];
     return /* @__PURE__ */ React.createElement(
       CellComponent,
-      __spreadProps$5(__spreadValues$5({}, props), {
-        customData: column.customData,
+      {
+        disabled,
+        data,
+        index: rowIndex,
+        latestData,
+        column,
+        visible: props.visible,
         onChange: (val) => {
           _onChange(val, data);
         },
         onBlur: _onBlur
-      })
+      }
     );
   };
   const Cell = column.render ? column.render({
@@ -3910,24 +3959,6 @@ const TableFormBodyCell = (props) => {
     })) || null;
     return typeof Result === "string" ? /* @__PURE__ */ React.createElement("p", { className: cx(Typo.Label.l4_regular, "cell-description") }, Result) : Result;
   }, [rowIndex, data, latestData, column]);
-  const validateResult = useMemo(() => {
-    var _a;
-    if (isRowError) {
-      return {
-        msg: "",
-        isError: true
-      };
-    }
-    const value = data[rowIndex][column.key];
-    const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
-      value,
-      rowIndex,
-      rowData: data[rowIndex]
-    });
-    if (typeof result === "string" && result) {
-      return { msg: result, isError: true };
-    }
-  }, [data, column, rowIndex, isRowError]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -3941,8 +3972,8 @@ const TableFormBodyCell = (props) => {
     /* @__PURE__ */ React.createElement(
       FormItem,
       {
-        validateStatus: (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
-        message: (validateResult == null ? void 0 : validateResult.isError) && validateResult.msg ? validateResult.msg : void 0
+        validateStatus: isRowError || (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
+        message: isRowError ? "" : validateResult == null ? void 0 : validateResult.msg
       },
       Cell
     ),
@@ -3976,24 +4007,35 @@ const TableFormRow = (props) => {
     latestData,
     disabled,
     passwordVisible,
-    deletable,
+    deleteConfig,
     draggable,
     rowIndex,
     provided,
     snapshot,
+    validateTriggerType = ValidateTriggerType.Normal,
     updateData,
     onBodyBlur,
     renderRowDescription,
-    rowValidator
+    rowValidator,
+    validateAll
   } = props;
   const rowData = data[rowIndex];
-  const deleteRow = (index, data2) => {
-    const newData = [...data2];
-    newData.splice(index, 1);
-    updateData(newData);
-  };
-  const getRowActions = (index, rowDeletable) => {
-    const isRowDeleteDisabled = rowDeletable === false;
+  const [rowError, setRowError] = useState();
+  const deleteRow = useCallback(
+    (index, data2) => {
+      const newData = [...data2];
+      newData.splice(index, 1);
+      updateData(newData);
+    },
+    [updateData]
+  );
+  const RowActions = useMemo(() => {
+    var _a;
+    const isRowDeleteDisabled = (_a = deleteConfig == null ? void 0 : deleteConfig.specifyRowDeleteDisabled) == null ? void 0 : _a.call(
+      deleteConfig,
+      rowIndex,
+      data
+    );
     const DeleteIcon = /* @__PURE__ */ React.createElement(
       Icon,
       {
@@ -4003,20 +4045,21 @@ const TableFormRow = (props) => {
         onClick: () => {
           if (isRowDeleteDisabled)
             return;
-          deleteRow(index, data);
+          deleteRow(rowIndex, data);
         }
       }
     );
     const FinalRenderIcon = isRowDeleteDisabled ? DeleteIcon : /* @__PURE__ */ React.createElement(Tooltip, { title: parrotI18n.t("components.remove") }, DeleteIcon);
-    return deletable ? [FinalRenderIcon] : void 0;
-  };
-  const RowValidateResult = useMemo(() => {
-    const result = rowValidator == null ? void 0 : rowValidator(rowIndex, data[rowIndex]);
-    if (typeof result === "string" && result) {
-      return /* @__PURE__ */ React.createElement("p", { className: cx(Typo.Label.l4_regular, "row-error-message") }, result);
-    }
-    return null;
-  }, [rowValidator, rowIndex, data]);
+    return (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [FinalRenderIcon] : void 0;
+  }, [rowIndex, deleteConfig, data, deleteRow]);
+  const getRowValidateResult = useCallback(
+    (rowData2) => {
+      const result = rowValidator == null ? void 0 : rowValidator(rowIndex, rowData2);
+      setRowError(result);
+      return result;
+    },
+    [rowValidator, rowIndex]
+  );
   const Cells = columns.map((col) => {
     return /* @__PURE__ */ React.createElement(
       TableFormBodyCell,
@@ -4030,7 +4073,10 @@ const TableFormRow = (props) => {
         onChange: updateData,
         onBlur: onBodyBlur,
         visible: passwordVisible,
-        isRowError: !!RowValidateResult
+        validateTriggerType,
+        isRowError: !!rowError,
+        getRowValidateResult,
+        validateAll
       }
     );
   });
@@ -4060,11 +4106,11 @@ const TableFormRow = (props) => {
         "eagle-table-form-row",
         (snapshot == null ? void 0 : snapshot.isDragging) && "isDragging"
       ),
-      actions: getRowActions(rowIndex, rowData.deletable)
+      actions: RowActions
     },
     DraggableHandle,
     Cells,
-    RowValidateResult,
+    rowError ? /* @__PURE__ */ React.createElement("p", { className: cx(Typo.Label.l4_regular, "row-error-message") }, rowError) : null,
     RowDescription
   );
 };
@@ -4132,7 +4178,7 @@ const BatchInputListHeaderCell = (props) => {
   const [errMsg, setErrMsg] = useState();
   const width = Number.isNaN(Number(column.width)) ? column.width : column.width + "px";
   const headerOnChange = useCallback(
-    (value) => {
+    (value, shouldUpdateData = false) => {
       var _a;
       const err = (_a = column.validator) == null ? void 0 : _a.call(column, { value, isHeader: true });
       setErrMsg(err || void 0);
@@ -4142,7 +4188,7 @@ const BatchInputListHeaderCell = (props) => {
           [column.key]: shouldAutoIncrease && typeof value === "string" ? increaseLastNumber(value, rowIndex) : value
         });
       });
-      onChange == null ? void 0 : onChange(newData, column.key);
+      onChange == null ? void 0 : onChange(newData, column.key, shouldUpdateData);
     },
     [onChange, data, column]
   );
@@ -4178,14 +4224,14 @@ const BatchInputListHeaderCell = (props) => {
         visibility: column.hidden ? "hidden" : "visible"
       }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("p", { className: cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
+    disableBatchFilling ? null : /* @__PURE__ */ React.createElement(
       FormItem,
       {
         validateStatus: typeof errMsg === "string" && errMsg ? "error" : "",
         message: errMsg || void 0
       },
-      /* @__PURE__ */ React.createElement("p", { className: cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
-      disableBatchFilling ? null : renderCell()
+      renderCell()
     )
   );
 };
@@ -4212,16 +4258,18 @@ var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const DEFAULT_ROW_COUNT = 3;
 const TableForm = React.forwardRef(
   ({
-    defaultData,
+    defaultData = [],
     columns,
     disabled,
     rowAddConfig,
-    deletable,
+    deleteConfig,
     size = "default",
     className,
     draggable,
     disableBatchFilling = false,
     rowSplitType = "border",
+    validateTriggerType,
+    maxHeight,
     renderRowDescription,
     rowValidator,
     onHeaderChange,
@@ -4229,12 +4277,10 @@ const TableForm = React.forwardRef(
     onBodyChange,
     onBodyBlur
   }, ref) => {
-    const treatedDefaultData = useMemo(() => {
-      return defaultData || [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns));
-    }, [defaultData, columns]);
-    const [data, setData] = useState(treatedDefaultData);
+    const [data, setData] = useState(defaultData);
     const [passwordVisible, setPasswordVisible] = useState(false);
-    const [latestData, setLatestData] = useState(treatedDefaultData);
+    const [latestData, setLatestData] = useState(defaultData);
+    const [validateAll, setValidateAll] = useState(false);
     const updateData = useCallback(
       (value, rowIndex, columnKey) => {
         setLatestData(value);
@@ -4243,12 +4289,23 @@ const TableForm = React.forwardRef(
       },
       [onBodyChange]
     );
+    useLayoutEffect(() => {
+      if (defaultData.length === 0) {
+        updateData(
+          [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns))
+        );
+      }
+    }, []);
     const handleBatchChange = useCallback(
-      (newData, columnKey) => {
+      (newData, columnKey, shouldUpdateData) => {
         setLatestData(newData);
         onHeaderChange == null ? void 0 : onHeaderChange(newData, columnKey);
+        if (shouldUpdateData) {
+          setData(newData);
+          onBodyChange == null ? void 0 : onBodyChange(newData, void 0, columnKey);
+        }
       },
-      [onHeaderChange]
+      [onHeaderChange, onBodyChange]
     );
     const handleBatchBlur = useCallback(
       (key, error) => {
@@ -4273,6 +4330,9 @@ const TableForm = React.forwardRef(
       () => ({
         setData: (data2) => {
           updateData(data2);
+        },
+        validateWholeFields() {
+          setValidateAll(true);
         }
       }),
       [updateData]
@@ -4293,31 +4353,46 @@ const TableForm = React.forwardRef(
         }
       );
     });
-    return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(TableFormWrapper, { className: `table-form row-split-by-${rowSplitType}` }, /* @__PURE__ */ React.createElement(List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
-      List.Item,
+    const tableFormWrapperStyle = useMemo(
+      () => maxHeight ? {
+        maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight
+      } : void 0,
+      []
+    );
+    return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
+      TableFormWrapper,
       {
-        className: "eagle-table-form-header",
-        actions: deletable ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+        className: `table-form row-split-by-${rowSplitType}`,
+        style: tableFormWrapperStyle
       },
-      draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
-      headerCells
-    ), /* @__PURE__ */ React.createElement(
-      TableFormBodyRows,
-      {
-        data,
-        latestData,
-        columns,
-        passwordVisible,
-        deletable,
-        disabled,
-        draggable,
-        rowSplitType,
-        onBodyBlur,
-        updateData,
-        renderRowDescription,
-        rowValidator
-      }
-    ))), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
+        List.Item,
+        {
+          className: "eagle-table-form-header",
+          actions: (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+        },
+        draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
+        headerCells
+      ), /* @__PURE__ */ React.createElement(
+        TableFormBodyRows,
+        {
+          data,
+          latestData,
+          columns,
+          passwordVisible,
+          deleteConfig,
+          disabled,
+          draggable,
+          rowSplitType,
+          validateTriggerType,
+          onBodyBlur,
+          updateData,
+          renderRowDescription,
+          rowValidator,
+          validateAll
+        }
+      ))
+    ), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
       AddRowButton,
       {
         config: rowAddConfig,
@@ -4329,7 +4404,7 @@ const TableForm = React.forwardRef(
   }
 );
 
-const flatTimeZones = sortBy(uniqBy(TimeZones.reduce((sum, zone) => {
+const allTimeZones = uniqBy(TimeZones.reduce((sum, zone) => {
   const utcZones = zone.utc.map(utc => {
     return {
       abbr: zone.abbr,
@@ -4339,31 +4414,51 @@ const flatTimeZones = sortBy(uniqBy(TimeZones.reduce((sum, zone) => {
     };
   });
   return sum.concat(utcZones);
-}, []), "value"), "offset");
+}, []), "value");
+const timeZoneGroups = (() => {
+  const groupedTimeZones = groupBy(allTimeZones, tz => tz.value.split("/")[0]);
+  delete groupedTimeZones["CST6CDT"];
+  delete groupedTimeZones["MST7MDT"];
+  delete groupedTimeZones["PST8PDT"];
+  delete groupedTimeZones["Etc"];
+  return sortBy(toPairs(groupedTimeZones).map(([key, tzs]) => {
+    return [key, sortBy(tzs, "value")];
+  }), "0");
+})();
 const SelectStyle = "s1fc623g";
-const OptionWrapperStyle = cx("oa3mx0o", Typo.Label.l3_regular);
-const OptionFirstLineStyle = cx("onr9gzt", Typo.Label.l3_regular);
-const OptionSecondLineStyle = cx("oiy0apc", Typo.Label.l4_regular);
+const DropdownStyle = "da3mx0o";
+const OptionWrapperStyle = cx("onr9gzt", Typo.Label.l3_regular);
+const OptionFirstLineStyle = cx("oiy0apc", Typo.Label.l3_regular);
+const OptionSecondLineStyle = cx("of4y382", Typo.Label.l4_regular);
+const TagStyle = "t19903l9";
 const BrowserTimeValue = "browser_time_zone";
+const DefaultTimeValue = "default_time_zone";
 const browserTzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
-const browserTz = flatTimeZones.find(tz => tz.value === browserTzName) || flatTimeZones[0];
+const browserTz = allTimeZones.find(tz => tz.value === browserTzName) || allTimeZones[0];
 const TimeZoneSelect = props => {
   const {
     value,
     onChange,
     disabled,
     defaultUseBrowserTime,
-    className
+    className,
+    placeholder,
+    defaultOptionValue
   } = props;
   const [innerValue, setInnerValue] = useState(value);
+  const defaultTz = useMemo(() => {
+    return allTimeZones.find(tz => tz.value === defaultOptionValue);
+  }, [defaultOptionValue]);
   const _onChange = useCallback(val => {
     setInnerValue(val);
     if (val === BrowserTimeValue) {
       onChange(browserTzName);
+    } else if (val === DefaultTimeValue && defaultTz) {
+      onChange(defaultTz == null ? void 0 : defaultTz.value);
     } else {
       onChange(val);
     }
-  }, [onChange]);
+  }, [defaultTz, onChange]);
   useEffect(() => {
     if (defaultUseBrowserTime && !value) {
       setInnerValue(BrowserTimeValue);
@@ -4372,12 +4467,28 @@ const TimeZoneSelect = props => {
   }, []);
   useEffect(() => {
     if (innerValue === BrowserTimeValue && value === browserTzName) return;
+    if (innerValue === DefaultTimeValue && value === (defaultTz == null ? void 0 : defaultTz.value)) return;
     if (innerValue === value) return;
     setInnerValue(value);
-  }, [innerValue, value]);
+  }, [defaultTz == null ? void 0 : defaultTz.value, innerValue, value]);
+  const timeZoneOptionGroups = timeZoneGroups.map(([key, timezones]) => {
+    return /* @__PURE__ */React.createElement(Select$1.OptGroup, {
+      label: key.toUpperCase()
+    }, timezones.map(zone => {
+      return /* @__PURE__ */React.createElement(Select$1.Option, {
+        label: zone.value,
+        value: zone.value,
+        className: OptionWrapperStyle
+      }, /* @__PURE__ */React.createElement(TimeZoneOption, {
+        key: zone.value,
+        timeZone: zone
+      }));
+    }));
+  });
   return /* @__PURE__ */React.createElement(Select, {
     className: cx(SelectStyle, className),
-    placeholder: /* @__PURE__ */React.createElement("span", null, parrotI18n.t("components.time_zone_select_placeholder")),
+    dropdownClassName: DropdownStyle,
+    placeholder: /* @__PURE__ */React.createElement("span", null, placeholder || parrotI18n.t("components.time_zone_select_placeholder")),
     value: innerValue,
     onChange: _onChange,
     showSearch: true,
@@ -4387,53 +4498,64 @@ const TimeZoneSelect = props => {
     },
     optionLabelProp: "label",
     input: {}
-  }, /* @__PURE__ */React.createElement(Select$1.Option, {
+  }, defaultTz ? /* @__PURE__ */React.createElement(Select$1.Option, {
+    value: DefaultTimeValue,
+    label: `${parrotI18n.t("components.default_time_zone")} (${getUTCOffsetText(defaultTz.offset)})`,
+    className: OptionWrapperStyle
+  }, /* @__PURE__ */React.createElement(TimeZoneOption, {
+    key: DefaultTimeValue,
+    customLabel: parrotI18n.t("components.default_time_zone"),
+    timeZone: defaultTz
+  })) : void 0, /* @__PURE__ */React.createElement(Select$1.Option, {
     value: BrowserTimeValue,
-    label: parrotI18n.t("components.browser_time_zone"),
+    label: `${parrotI18n.t("components.browser_time_zone")} (${getUTCOffsetText(browserTz.offset)})`,
     className: OptionWrapperStyle
   }, /* @__PURE__ */React.createElement(TimeZoneOption, {
     key: BrowserTimeValue,
-    isBrowser: true,
+    customLabel: parrotI18n.t("components.browser_time_zone"),
     timeZone: browserTz
   })), /* @__PURE__ */React.createElement(Select$1.Option, {
     value: "UTC",
     className: OptionWrapperStyle
   }, /* @__PURE__ */React.createElement(TimeZoneOption, {
     key: "utc",
+    customLabel: parrotI18n.t("components.coorddinated_universal_time"),
     timeZone: {
       value: "UTC",
       text: "UTC",
       offset: 0,
-      abbr: "UTC"
+      abbr: "GMT"
     }
-  })), flatTimeZones.map(zone => {
-    return /* @__PURE__ */React.createElement(Select$1.Option, {
-      label: zone.value,
-      value: zone.value,
-      className: OptionWrapperStyle
-    }, /* @__PURE__ */React.createElement(TimeZoneOption, {
-      key: zone.value,
-      timeZone: zone
-    }));
-  }));
+  })), timeZoneOptionGroups);
 };
+function getUTCOffsetText(offset) {
+  if (offset === 0) {
+    return "UTC";
+  } else if (offset < 0) {
+    return `UTC${offset}:00`;
+  } else {
+    return `UTC+${offset}:00`;
+  }
+}
 const TimeZoneOption = ({
   timeZone,
-  isBrowser
+  customLabel
 }) => {
-  let tagText = "";
-  if (timeZone.offset === 0) {
-    tagText = "UTC";
-  } else if (timeZone.offset < 0) {
-    tagText = `UTC${timeZone.offset}:00`;
-  } else {
-    tagText = `UTC+${timeZone.offset}:00`;
-  }
+  let tagText = getUTCOffsetText(timeZone.offset);
   return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
     className: OptionFirstLineStyle
-  }, /* @__PURE__ */React.createElement("span", null, isBrowser ? parrotI18n.t("components.browser_time_zone") : timeZone.value), /* @__PURE__ */React.createElement(Tag, null, tagText)), /* @__PURE__ */React.createElement("div", {
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "timezone-title"
+  }, customLabel || timeZone.value), /* @__PURE__ */React.createElement(Tag, {
+    className: cx("timezone-tag", TagStyle)
+  }, tagText)), /* @__PURE__ */React.createElement("div", {
     className: OptionSecondLineStyle
-  }, /* @__PURE__ */React.createElement("span", null, timeZone.text, ", ", timeZone.abbr)));
+  }, /* @__PURE__ */React.createElement("span", null, timeZone.text, ", ", timeZone.abbr), /* @__PURE__ */React.createElement(Icon, {
+    className: "selected-icon",
+    src: CheckmarkDoneSuccessCorrect16BlueIcon,
+    iconHeight: 16,
+    iconWidth: 16
+  })));
 };
 
 function getAntdKit() {
@@ -4674,4 +4796,4 @@ const useUIKit = () => {
   return useContext(kitContext);
 };
 
-export { Architecture, Button, ButtonStyle, EntityAsyncStatus, FailedLoad, Icon, InputTagItem, KitStoreProvider, ModalActions, ModalStack, TaskStatus, Typo, UIKitProvider, UIKitStore, UserSource, antdKit, closeModal, createBatchMessageMethods, kitContext, popModal, pushModal, tableStyleCover, tickFormatter, useElementsSize, useKitDispatch, useKitSelector, useUIKit };
+export { Architecture, Button, ButtonStyle, EntityAsyncStatus, FailedLoad, Icon, InputTagItem, KitStoreProvider, ModalActions, ModalStack, TaskStatus, Typo, UIKitProvider, UIKitStore, UserSource, ValidateTriggerType, antdKit, closeModal, createBatchMessageMethods, kitContext, popModal, pushModal, tableStyleCover, tickFormatter, useElementsSize, useKitDispatch, useKitSelector, useUIKit };