iglooform 2.5.2 → 2.5.3

package/es/checkbox/index.d.ts

@@ -1,21 +1,21 @@
 import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
 import { FC, IglooComponentProps } from '@/types';
+import { ComponentProps } from '../utils/option-utils';
+import { DefaultOptionType } from 'rc-select/lib/Select';
 import './style/index.less';
 interface Props extends IglooComponentProps, CheckboxProps {
 }
-interface Option {
-    label?: any;
-    value?: string;
-    disabled?: boolean;
+export interface Option extends DefaultOptionType {
     extraInfo?: {
         content: any;
         shownTrigger: 'unchecked' | 'checked' | 'all';
     };
 }
-export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'options'> {
-    options: Option[];
+export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'options'>, ComponentProps {
     className?: string;
+    radioType?: string;
+    options: Option[];
 }
 declare const IglooCheckbox: FC<Props>;
 export default IglooCheckbox;
-export declare const CheckboxGroup: FC<IProps>;
+export declare const CheckboxGroup: FC<import("../utils/option-utils").HOCProps & IProps>;

package/es/checkbox/index.js

@@ -4,9 +4,21 @@ import "antd/es/row/style";
 import _Row from "antd/es/row";
 import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
-var _excluded = ["className", "options", "value"],
+var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated"],
     _excluded2 = ["label", "value", "extraInfo"];
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -18,10 +30,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext } from 'react';
 import Typography from '../typography';
 import formMethods from '../utils/form-methods';
 import omit from 'omit.js';
 import classnames from 'classnames';
+import { compareOptions, optionsHOC } from '../utils/option-utils';
+import LocaleContext from '../locale/locale-context';
+import emptyIcon from '../radio/style/empty.svg';
 import './style/index.less';
 
 var IglooCheckbox = function IglooCheckbox(props) {
@@ -38,17 +54,55 @@ IglooCheckbox.formItemPropsHandler = function (config) {
 };
 
 export default IglooCheckbox;
-export var CheckboxGroup = function CheckboxGroup(_ref) {
+
+var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
   var className = _ref.className,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
       value = _ref.value,
+      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return _jsx(_Checkbox.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var originOptions = useRef(options);
+
+  var _useContext = useContext(LocaleContext),
+      formatMessage = _useContext.formatMessage;
+
+  useEffect(function () {
+    typeof rest.onChange === 'function' && value !== selected && rest.onChange(selected);
+  }, [selected]);
+  useEffect(function () {
+    setSelected(value);
+  }, [value]);
+  useEffect(function () {
+    var setFieldValue = rest.setFieldValue;
+
+    if (compareOptions(options, originOptions.current)) {
+      if (clearWhenOptionsUpdated) {
+        typeof setFieldValue === 'function' && setFieldValue();
+      } else {
+        var foundValue = options.find(function (option) {
+          return Array.isArray(value) ? value.includes(option.value) : option.value === value;
+        });
+
+        if (!foundValue && value !== undefined) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+
+      originOptions.current = options;
+    }
+  }, [options]);
+  return _jsxs(_Checkbox.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
     className: classnames('igloo-checkbox-group', className),
     value: value,
-    children: _jsx(_Row, {
+    children: [_jsx(_Row, {
       gutter: [8, 8],
       children: options.map(function (_ref2) {
         var label = _ref2.label,
@@ -72,10 +126,36 @@ export var CheckboxGroup = function CheckboxGroup(_ref) {
           })]
         }, key);
       })
-    })
+    }), !options.length && _jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        background: '#f9f9f9',
+        padding: 16,
+        alignItems: 'center'
+      },
+      children: [_jsx("img", {
+        src: emptyIcon,
+        style: {
+          width: 32,
+          height: 24
+        }
+      }), _jsx(Typography, {
+        level: "h5",
+        style: {
+          color: '#212121',
+          marginTop: 8
+        },
+        children: formatMessage({
+          id: 'There are no options available currently'
+        })
+      })]
+    })]
   }));
 };
 
+export var CheckboxGroup = optionsHOC(InnerCheckboxGroup);
+
 CheckboxGroup.formItemPropsHandler = function () {
   return {};
 };

package/es/form/elements.js

@@ -12,6 +12,7 @@ import Divider from './divider';
 import UploadPhoto from '../upload-photo';
 import RenderElement from './render';
 import Typography from '../typography';
+import SearchBox from '../search-box';
 var elementMap = {
   Input: Input,
   PhoneNumber: PhoneNumber,
@@ -42,7 +43,8 @@ var elementMap = {
   InputDate: InputDate,
   Confirmation: Confirmation,
   ExpiryDate: ExpiryDate,
-  Typography: Typography
+  Typography: Typography,
+  SearchBox: SearchBox
 };
 
 var Unknown = function Unknown() {

package/es/index.d.ts

@@ -35,6 +35,7 @@ export { default as MobileInsurerDetail } from './mobile-insurer-detail';
 export { default as Layout } from './layout';
 export { default as DetailPanel } from './detail-panel';
 export { default as message } from './global-message';
+export { default as SearchBox } from './search-box';
 export { default as FreeForm } from './free-form';
 export { default as FormItem } from './free-form/element';
 export { default as FormPages } from './free-form/pages';

package/es/index.js

@@ -35,6 +35,7 @@ export { default as MobileInsurerDetail } from './mobile-insurer-detail';
 export { default as Layout } from './layout';
 export { default as DetailPanel } from './detail-panel';
 export { default as message } from './global-message';
+export { default as SearchBox } from './search-box';
 export { default as FreeForm } from './free-form';
 export { default as FormItem } from './free-form/element';
 export { default as FormPages } from './free-form/pages';

package/es/locale/en-US/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "Data Processed",
   "Data Processing...": "Data Processing...",
   "Date": "Date",
+  "Done": "Done",
   "Drag and drop a file here": "Drag and drop a file here",
   "Edit": "Edit",
   "Error Report": "Error Report",
@@ -56,10 +57,13 @@
   "Result": "Result",
   "Result: Success {success_num}; Error {fail_num}": "Result: Success {success_num}; Error {fail_num}",
   "Rows per page": "Rows per page",
+  "Search": "Search",
+  "Searching...": "Searching...",
   "Select All": "Select All",
   "Send OTP": "Send OTP",
   "Submit": "Submit",
   "The file type is not supported.": "The file type is not supported.",
+  "There are no options available currently": "There are no options available currently",
   "This Month": "This Month",
   "Unselect All": "Unselect All",
   "Uploading": "Uploading",

package/es/locale/id-ID/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "Data Terproses",
   "Data Processing...": "Data Diproses",
   "Date": "Tanggal",
+  "Done": "Selesai",
   "Drag and drop a file here": "Geser dan Letakkan Dokumen disini",
   "Edit": "Ubah",
   "Error Report": "Laporan Kesalahan",
@@ -56,10 +57,13 @@
   "Result": "Hasil",
   "Result: Success {success_num}; Error {fail_num}": "Hasil: Sukses {success_num}; Kesalahan {fail_num}",
   "Rows per page": "Baris per halaman",
+  "Search": "Mencari",
+  "Searching...": "Mencari...",
   "Select All": "Pilih Semua",
   "Send OTP": "Kirim OTP",
   "Submit": "Ajukan",
   "The file type is not supported.": "Jenis file tidak didukung.",
+  "There are no options available currently": "Tidak ada opsi yang tersedia saat ini",
   "This Month": "Bulan ini",
   "Unselect All": "Batalkan semua",
   "Uploading": "Mengunggah",

package/es/locale/th-TH/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "ประมวลข้อมูลสำเร็จแล้ว",
   "Data Processing...": "กำลังประมวลผลข้อมูล...",
   "Date": "วันที่",
+  "Done": "เสร็จแล้ว",
   "Drag and drop a file here": "ลากและวางไฟล์มาที่นี่",
   "Edit": "แก้ไข",
   "Error Report": "รายงานข้อผิดพลาด",
@@ -56,10 +57,13 @@
   "Result": "ผลลัพธ์",
   "Result: Success {success_num}; Error {fail_num}": "ผลลัพธ์: สำเร็จ {success_num}; ข้อผิดพลาด {fail_num}",
   "Rows per page": "แถวต่อหน้า",
+  "Search": "ค้นหา",
+  "Searching...": "กำลังค้นหา...",
   "Select All": "เลือกทั้งหมด",
   "Send OTP": "ส่ง OTP",
   "Submit": "ส่ง/ยืนยัน",
   "The file type is not supported.": "ประเภทไฟล์ไม่รองรับ",
+  "There are no options available currently": "ไม่มีตัวเลือกในขณะนี้",
   "This Month": "เดือนนี้",
   "Unselect All": "ไม่เลือกทั้งหมด",
   "Uploading": "กำลังอัพโหลด",

package/es/locale/vi-VN/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "Dữ liệu đã xử lý",
   "Data Processing...": "Đang xử lý dữ liệu...",
   "Date": "Ngày",
+  "Done": "Xong",
   "Drag and drop a file here": "Thả tệp tin vào đây",
   "Edit": "Sửa",
   "Error Report": "Báo cáo lỗi",
@@ -56,10 +57,13 @@
   "Result": "Kết quả",
   "Result: Success {success_num}; Error {fail_num}": "Kết quả: sự thành công {success_num}; lỗi {fail_num}",
   "Rows per page": "Dòng trên trang",
+  "Search": "Tìm kiếm",
+  "Searching...": "Đang tìm kiếm...",
   "Select All": "Chọn tất cả",
   "Send OTP": "Gửi OTP",
   "Submit": "Gửi",
   "The file type is not supported.": "Loại tệp không được hỗ trợ.",
+  "There are no options available currently": "Hiện tại không có tùy chọn nào",
   "This Month": "Tháng này",
   "Unselect All": "Hủy chọn tất cả",
   "Uploading": "Đang tải lên",

package/es/locale/zh-CN/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "已导入",
   "Data Processing...": "导入中",
   "Date": "日期",
+  "Done": "完成",
   "Drag and drop a file here": "拖拽一个文件到这里",
   "Edit": "编辑",
   "Error Report": "错误报告",
@@ -56,10 +57,13 @@
   "Result": "结果",
   "Result: Success {success_num}; Error {fail_num}": "结果：成功 {success_num}; 失败 {fail_num}",
   "Rows per page": "每页条数",
+  "Search": "搜索",
+  "Searching...": "正在搜索...",
   "Select All": "全选",
   "Send OTP": "发送OTP",
   "Submit": "提交",
   "The file type is not supported.": "不支持上传该类型的文件。",
+  "There are no options available currently": "当前没有可用的选项",
   "This Month": "当月",
   "Unselect All": "反选",
   "Uploading": "上传中",

package/es/locale/zh-TW/messages.json

@@ -21,6 +21,7 @@
   "Data Processed": "數據已處理",
   "Data Processing...": "數據處理中。。。",
   "Date": "日期",
+  "Done": "完成",
   "Drag and drop a file here": "拖放文件至此",
   "Edit": "編輯",
   "Error Report": "錯誤報告",
@@ -38,6 +39,7 @@
   "OK": "好",
   "Once you’re happy with the above, and you’ve checked the declaration, please go ahead and submit your claim.": "一旦您對上述內容感到滿意，您已檢查聲明，請繼續並提交您的索賠。",
   "Optional": "可選項",
+  "Other Reason": "其他原因",
   "Please enter a valid date.": "請輸入有效的日期。",
   "Please enter a valid time.": "請輸入有效的時間。",
   "Please select": "請選擇",
@@ -55,10 +57,13 @@
   "Result": "結果",
   "Result: Success {success_num}; Error {fail_num}": "結果：成功{success_num};錯誤{fail_num}",
   "Rows per page": "每頁行數",
+  "Search": "檢索",
+  "Searching...": "正在檢索...",
   "Select All": "全選",
   "Send OTP": "發送OTP.",
   "Submit": "提交",
   "The file type is not supported.": "不支持文件類型。",
+  "There are no options available currently": "當前沒有可用的選項",
   "This Month": "本月",
   "Unselect All": "全部取消選擇",
   "Uploading": "上傳",

package/es/radio/index.d.ts

@@ -1,22 +1,22 @@
 import { RadioProps, RadioGroupProps } from 'antd/es/radio';
 import { FC, IglooComponentProps } from '../types';
 import './style/index.less';
-import { FormInstance } from 'antd/es/form';
+import { ComponentProps } from '../utils/option-utils';
+import { DefaultOptionType } from 'rc-select/lib/Select';
 declare type Props = RadioProps & IglooComponentProps;
 declare const IglooRadio: FC<Props>;
-export interface Option extends RadioProps {
+export interface Option extends DefaultOptionType {
     extraInfo?: {
         content: any;
         shownTrigger: 'unchecked' | 'checked' | 'all';
     };
-    label: any;
 }
-export interface IProps extends IglooComponentProps, Omit<RadioGroupProps, 'options'> {
+export interface IProps extends IglooComponentProps, Omit<RadioGroupProps, 'options'>, ComponentProps {
     className?: string;
     radioType?: string;
-    getOptions?: (form: FormInstance) => Option[];
     options: Option[];
 }
-export declare const RadioGroup: FC<IProps>;
+export declare const InnerRadioGroup: FC<IProps>;
+export declare const RadioGroup: FC<import("../utils/option-utils").HOCProps & IProps>;
 export default IglooRadio;
 export { default as RadioGroupWithOther } from './radio-group-with-other';

package/es/radio/index.js

@@ -4,9 +4,21 @@ import "antd/es/row/style";
 import _Row from "antd/es/row";
 import "antd/es/radio/style";
 import _Radio from "antd/es/radio";
-var _excluded = ["className", "options", "radioType", "getOptions", "value"],
+var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated"],
     _excluded2 = ["label", "value", "extraInfo"];
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -18,12 +30,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useState, useRef, useContext } from 'react';
 import omit from 'omit.js';
 import classnames from 'classnames';
 import formMethods from '../utils/form-methods';
 import './style/index.less';
 import Typography from '../typography';
+import LocaleContext from '../locale/locale-context';
+import emptyIcon from './style/empty.svg';
+import { compareOptions, optionsHOC } from '../utils/option-utils';
 
 var IglooRadio = function IglooRadio(props) {
   return _jsx(_Radio, _objectSpread({}, omit(props, formMethods)));
@@ -33,38 +48,55 @@ IglooRadio.formItemPropsHandler = function () {
   return {};
 };
 
-export var RadioGroup = function RadioGroup(_ref) {
+export var InnerRadioGroup = function InnerRadioGroup(_ref) {
   var className = _ref.className,
-      optionsProp = _ref.options,
+      options = _ref.options,
       _ref$radioType = _ref.radioType,
       radioType = _ref$radioType === void 0 ? 'normal' : _ref$radioType,
-      getOptionsProp = _ref.getOptions,
       value = _ref.value,
+      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var getOptions = function getOptions() {
-    var getFormInstance = rest.getFormInstance;
-    var form = typeof getFormInstance === 'function' && getFormInstance();
-    if (!form) return [];
-    var options = typeof getOptionsProp === 'function' && getOptionsProp(form);
-    return options || [];
-  };
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
 
-  var options = optionsProp || getOptions();
+  var originOptions = useRef(options);
+
+  var _useContext = useContext(LocaleContext),
+      formatMessage = _useContext.formatMessage;
+
+  useEffect(function () {
+    typeof rest.onChange === 'function' && value !== selected && rest.onChange(selected);
+  }, [selected]);
+  useEffect(function () {
+    setSelected(value);
+  }, [value]);
   useEffect(function () {
     var setFieldValue = rest.setFieldValue;
-    var foundValue = options.find(function (option) {
-      return option.value === value;
-    });
 
-    if (!foundValue) {
-      typeof setFieldValue === 'function' && setFieldValue(undefined);
+    if (compareOptions(options, originOptions.current)) {
+      if (clearWhenOptionsUpdated) {
+        typeof setFieldValue === 'function' && setFieldValue();
+      } else {
+        var foundValue = options.find(function (option) {
+          return Array.isArray(value) ? value.includes(option.value) : option.value === value;
+        });
+
+        if (!foundValue && value !== undefined) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+
+      originOptions.current = options;
     }
-  }, [value, options]);
-  return _jsx(_Radio.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
+  }, [options]);
+  return _jsxs(_Radio.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
     className: classnames('igloo-radio-group', className),
     value: value,
-    children: _jsx(_Row, {
+    children: [_jsx(_Row, {
       gutter: [8, 8],
       children: options.map(function (_ref2) {
         var label = _ref2.label,
@@ -108,9 +140,34 @@ export var RadioGroup = function RadioGroup(_ref) {
           }))
         }, key);
       })
-    })
+    }), !options.length && _jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        background: '#f9f9f9',
+        padding: 16,
+        alignItems: 'center'
+      },
+      children: [_jsx("img", {
+        src: emptyIcon,
+        style: {
+          width: 32,
+          height: 24
+        }
+      }), _jsx(Typography, {
+        level: "h5",
+        style: {
+          color: '#212121',
+          marginTop: 8
+        },
+        children: formatMessage({
+          id: 'There are no options available currently'
+        })
+      })]
+    })]
   }));
 };
+export var RadioGroup = optionsHOC(InnerRadioGroup);
 
 RadioGroup.formItemPropsHandler = function () {
   return {};

package/es/radio/radio-group-with-other.d.ts

@@ -1,6 +1,6 @@
 import { IProps as RadioGroupProps } from './index';
 import { FC } from '../types';
-declare const RadioGroupWithOther: FC<RadioGroupProps & {
+declare const RadioGroupWithOther: FC<import("../utils/option-utils").HOCProps & RadioGroupProps & {
     otherOptionLabel: string;
 }>;
 export default RadioGroupWithOther;

package/es/radio/radio-group-with-other.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "options", "otherOptionLabel"];
+var _excluded = ["value", "onChange", "options", "otherOptionLabel", "clearWhenOptionsUpdated"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -31,17 +31,21 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+import { useContext, useState, useEffect, useRef } from 'react';
 import { RadioGroup } from './index';
 import { TextArea } from '../input';
 import { LocaleContext } from '../locale';
+import { compareOptions, optionsHOC } from '../utils/option-utils';
 var otherKey = 'iglooRadioGroupOther';
 
-var RadioGroupWithOther = function RadioGroupWithOther(_ref) {
+var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
-      options = _ref.options,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       otherOptionLabel = _ref.otherOptionLabel,
+      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
@@ -49,6 +53,38 @@ var RadioGroupWithOther = function RadioGroupWithOther(_ref) {
       otherEnabled = _useState2[0],
       enableOther = _useState2[1];
 
+  var _useState3 = useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var originOptions = useRef(options);
+  useEffect(function () {
+    typeof onChange === 'function' && value !== selected && onChange(selected);
+  }, [selected]);
+  useEffect(function () {
+    setSelected(value);
+  }, [value]);
+  useEffect(function () {
+    var setFieldValue = rest.setFieldValue;
+
+    if (compareOptions(options, originOptions.current)) {
+      if (clearWhenOptionsUpdated) {
+        typeof setFieldValue === 'function' && setFieldValue();
+      } else {
+        var foundValue = options.find(function (option) {
+          return Array.isArray(value) ? value.includes(option.value) : option.value === value;
+        });
+
+        if (!foundValue && value !== undefined) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+
+      originOptions.current = options;
+    }
+  }, [options]);
+
   var handleChange = function handleChange(e) {
     onChange && onChange(e);
   };
@@ -82,4 +118,5 @@ var RadioGroupWithOther = function RadioGroupWithOther(_ref) {
   });
 };
 
+var RadioGroupWithOther = optionsHOC(InnerRadioGroupWithOther);
 export default RadioGroupWithOther;

package/es/radio/style/empty.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="25" viewBox="0 0 32 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M30.6663 18.3333V12.5846C30.6663 12.0654 30.5316 11.5551 30.2752 11.1035L25.4017 2.51891C24.8687 1.58006 23.8724 1 22.7928 1H8.99351C7.89503 1 6.88439 1.60036 6.35896 2.56503L1.69846 11.1215C1.45865 11.5618 1.33301 12.0551 1.33301 12.5565V18.3333"
+    stroke="#212121" stroke-width="2" />
+  <mask id="path-2-inside-1_8603_29999" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M9.22038 11.3468C9.22038 10.5263 8.5552 9.86108 7.73467 9.86108H3C1.34315 9.86108 0 11.2042 0 12.8611V22C0 23.6568 1.34315 25 3 25H29C30.6569 25 32 23.6568 32 22V12.8611C32 11.2042 30.6569 9.86108 29 9.86108H24.2654C23.4449 9.86108 22.7797 10.5263 22.7797 11.3468C22.7797 13.0036 21.4366 14.3468 19.7797 14.3468H12.2204C10.5635 14.3468 9.22038 13.0036 9.22038 11.3468Z" />
+  </mask>
+  <path
+    d="M3 11.8611H7.73467V7.86108H3V11.8611ZM2 22V12.8611H-2V22H2ZM29 23H3V27H29V23ZM30 12.8611V22H34V12.8611H30ZM24.2654 11.8611H29V7.86108H24.2654V11.8611ZM20.7797 11.3468C20.7797 11.8991 20.332 12.3468 19.7797 12.3468V16.3468C22.5411 16.3468 24.7797 14.1082 24.7797 11.3468H20.7797ZM19.7797 12.3468H12.2204V16.3468H19.7797V12.3468ZM12.2204 12.3468C11.6681 12.3468 11.2204 11.8991 11.2204 11.3468H7.22038C7.22038 14.1082 9.45895 16.3468 12.2204 16.3468V12.3468ZM24.2654 7.86108C22.3403 7.86108 20.7797 9.42169 20.7797 11.3468H24.7797C24.7797 11.6308 24.5494 11.8611 24.2654 11.8611V7.86108ZM34 12.8611C34 10.0997 31.7614 7.86108 29 7.86108V11.8611C29.5523 11.8611 30 12.3088 30 12.8611H34ZM29 27C31.7614 27 34 24.7614 34 22H30C30 22.5523 29.5523 23 29 23V27ZM-2 22C-2 24.7614 0.238576 27 3 27V23C2.44772 23 2 22.5523 2 22H-2ZM7.73467 11.8611C7.45064 11.8611 7.22038 11.6308 7.22038 11.3468H11.2204C11.2204 9.42168 9.65977 7.86108 7.73467 7.86108V11.8611ZM3 7.86108C0.238578 7.86108 -2 10.0997 -2 12.8611H2C2 12.3088 2.44771 11.8611 3 11.8611V7.86108Z"
+    fill="#212121" mask="url(#path-2-inside-1_8603_29999)" />
+</svg>