iglooform 2.5.0 → 2.5.3

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>

package/es/search-box/index.d.ts

@@ -0,0 +1,31 @@
+import { FC, IglooComponentProps } from '../types';
+import './style';
+import { ComponentProps } from '../utils/option-utils';
+declare const SearchBox: FC<import("../utils/option-utils").HOCProps & IglooComponentProps & {
+    className?: string | undefined;
+    onSearch?: any;
+    value?: any;
+    multiple?: boolean | undefined;
+    modalTitle?: string | undefined;
+    placeHolder?: string | undefined;
+    modalPlaceHolder?: string | undefined;
+    optionsUpdating?: boolean | undefined;
+    onChange?: any;
+    okButtonProps?: Partial<{
+        href: string;
+        target?: string | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+        htmlType?: "button" | "submit" | "reset" | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    } & Omit<import("react").ButtonHTMLAttributes<any>, "onClick" | "type">> | undefined;
+    cancelButtonProps?: Partial<{
+        href: string;
+        target?: string | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+        htmlType?: "button" | "submit" | "reset" | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    } & Omit<import("react").ButtonHTMLAttributes<any>, "onClick" | "type">> | undefined;
+} & ComponentProps>;
+export default SearchBox;

package/es/search-box/index.js

@@ -0,0 +1,266 @@
+import "antd/es/grid/style";
+import _Grid from "antd/es/grid";
+var _excluded = ["value", "className", "options", "onSearch", "multiple", "modalTitle", "placeHolder", "modalPlaceHolder", "clearWhenOptionsUpdated", "okButtonProps", "cancelButtonProps", "optionsUpdating"];
+
+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; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { SearchOutlined, LoadingOutlined, ArrowLeftOutlined } from 'iglooicon';
+import Modal from '@/modal';
+import Input from '@/input';
+import CheckBox from '@/checkbox';
+import Typography from '@/typography';
+import Button from '@/button';
+import { LocaleContext } from '../locale';
+import { useState, useContext, useEffect, useMemo } from 'react';
+import './style';
+import { optionsHOC } from '../utils/option-utils';
+
+var IglooSearchBox = function IglooSearchBox(_ref) {
+  var valueProp = _ref.value,
+      className = _ref.className,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      onSearch = _ref.onSearch,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      modalTitle = _ref.modalTitle,
+      placeHolder = _ref.placeHolder,
+      modalPlaceHolder = _ref.modalPlaceHolder,
+      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      okButtonProps = _ref.okButtonProps,
+      cancelButtonProps = _ref.cancelButtonProps,
+      searching = _ref.optionsUpdating,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(LocaleContext),
+      formatMessage = _useContext.formatMessage;
+
+  var modalTitleProps = modalTitle || formatMessage({
+    id: 'Search'
+  });
+  var useBreakpoint = _Grid.useBreakpoint;
+
+  var _useBreakpoint = useBreakpoint(),
+      md = _useBreakpoint.md;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalVisible = _useState2[0],
+      setModalVisible = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      modalInputValue = _useState6[0],
+      setModalInputValue = _useState6[1];
+
+  useEffect(function () {
+    var setFieldValue = rest.setFieldValue;
+
+    if (clearWhenOptionsUpdated) {
+      typeof setFieldValue === 'function' && setFieldValue();
+    } else {
+      var foundValue = options.find(function (option) {
+        return Array.isArray(valueProp) ? valueProp.includes(option.value) : option.value === valueProp;
+      });
+
+      if (!foundValue && valueProp !== undefined) {
+        typeof setFieldValue === 'function' && setFieldValue();
+      }
+    }
+  }, [options]);
+  useEffect(function () {
+    setSelected(Array.isArray(valueProp) ? valueProp : [valueProp]);
+  }, [valueProp]);
+
+  function beginSearch() {
+    onSearch && onSearch(modalInputValue);
+  }
+
+  function handleSelect(value) {
+    if (multiple) {
+      selected.includes(value) ? setSelected(selected.filter(function (o) {
+        return o !== value;
+      })) : setSelected([].concat(_toConsumableArray(selected), [value]));
+    } else {
+      setSelected([value]);
+    }
+  }
+
+  function selectAll() {
+    setSelected(options.map(function (o) {
+      return o.value;
+    }));
+  }
+
+  function cancelAll() {
+    setSelected([]);
+  }
+
+  var mobileModalTile = function mobileModalTile() {
+    return _jsxs("div", {
+      className: "igloo-search-box-modal-mobile-title",
+      onClick: function onClick() {
+        setModalVisible(false);
+        setModalInputValue('');
+        onSearch && onSearch('');
+      },
+      children: [_jsx(ArrowLeftOutlined, {}), _jsx(Typography, {
+        level: "h4",
+        children: modalTitleProps || formatMessage({
+          id: 'Search'
+        })
+      })]
+    });
+  };
+
+  var DisPlayOptions = function DisPlayOptions() {
+    return _jsx("div", {
+      className: "igloo-search-box-modal-options",
+      children: options === null || options === void 0 ? void 0 : options.map(function (o) {
+        return _jsxs("div", {
+          onClick: function onClick(e) {
+            return handleSelect(o.value);
+          },
+          className: classnames('igloo-search-box-modal-select-item', _defineProperty({}, 'igloo-search-box-active-select-item', selected.includes(o.value))),
+          children: [multiple && _jsx(CheckBox, {
+            className: 'igloo-search-box-modal-select-item-checkbox',
+            checked: selected.includes(o.value)
+          }), _jsx(Typography, {
+            level: 'body1',
+            children: o.label
+          })]
+        }, o.value);
+      })
+    });
+  }; // ...
+
+
+  var inputDisplayedValue = useMemo(function () {
+    return options.filter(function (o) {
+      return selected.includes(o.value);
+    }).map(function (o) {
+      return o.label;
+    }).join(',');
+  }, [options, selected]);
+
+  var modalDom = _jsxs(Modal, {
+    closable: md,
+    maskClosable: false,
+    visible: modalVisible,
+    title: md ? modalTitleProps : mobileModalTile(),
+    className: classnames(md ? 'igloo-search-box-modal-container' : 'igloo-search-box-modal-container-mobile', className),
+    onCancel: function onCancel() {
+      setModalVisible(false);
+      setModalInputValue('');
+      onSearch && onSearch('');
+    },
+    onOk: function onOk() {
+      onSearch && onSearch('');
+      setModalInputValue('');
+      setModalVisible(false);
+      typeof rest.onChange === 'function' && valueProp !== selected && rest.onChange(multiple ? selected : selected[0]);
+    },
+    okText: formatMessage({
+      id: 'Done'
+    }),
+    cancelButtonProps: cancelButtonProps,
+    okButtonProps: okButtonProps,
+    children: [_jsx(Input, {
+      className: "igloo-search-box-modal-input",
+      value: modalInputValue,
+      onChange: function onChange(e) {
+        return setModalInputValue(e.target.value);
+      },
+      placeholder: modalPlaceHolder,
+      suffix: _jsx(SearchOutlined, {
+        style: {
+          fontSize: 24
+        },
+        onClick: beginSearch
+      }),
+      onPressEnter: beginSearch
+    }), !!options.length && _jsx("div", {
+      style: {
+        marginBottom: 32
+      }
+    }), !!options.length && multiple && _jsxs("div", {
+      className: 'igloo-search-box-modal-multiple-top',
+      children: [_jsx(Button, {
+        type: "link",
+        onClick: selectAll,
+        children: formatMessage({
+          id: 'Select All'
+        })
+      }), _jsx(Button, {
+        type: "link",
+        onClick: cancelAll,
+        children: formatMessage({
+          id: 'Clear All'
+        })
+      })]
+    }), searching ? _jsxs("div", {
+      className: "igloo-search-box-searching",
+      children: [_jsx(LoadingOutlined, {}), ' ', _jsx(Typography, {
+        level: "body1",
+        children: formatMessage({
+          id: 'Searching...'
+        })
+      })]
+    }) : options.length ? _jsx(DisPlayOptions, {}) : null]
+  });
+
+  return _jsxs("div", {
+    children: [_jsx(Input, {
+      placeholder: placeHolder,
+      suffix: _jsx(SearchOutlined, {
+        style: {
+          fontSize: 24
+        }
+      }),
+      onClick: function onClick() {
+        return setModalVisible(true);
+      },
+      value: inputDisplayedValue
+    }), modalDom]
+  });
+};
+
+var SearchBox = optionsHOC(IglooSearchBox);
+
+SearchBox.formItemPropsHandler = function (config) {
+  return {};
+};
+
+export default SearchBox;

package/es/search-box/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/search-box/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/search-box/style/index.less

@@ -0,0 +1,162 @@
+.igloo-search-box-modal-container {
+  .ant-modal-body {
+    .igloo-search-box-modal-options {
+      max-height: calc(100vh - 340px - 172px);
+      overflow: scroll;
+    }
+
+    .ant-input-affix-wrapper-status-error {
+      border-color: #d9d9d9 !important;
+    }
+
+    .igloo-search-box-modal-multiple-top {
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .igloo-search-box-searching {
+      margin-top: 24px;
+      display: flex;
+      align-items: center;
+
+      @keyframes rotation {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      & > .igloo-icon {
+        font-size: 24px;
+        color: #5858ff;
+        margin-right: 8px;
+        animation: rotation 3s linear infinite;
+      }
+    }
+
+    .igloo-search-box-modal-select-item {
+      padding: 8px;
+      display: flex;
+      align-items: center;
+
+      .igloo-search-box-modal-select-item-checkbox {
+        margin-right: 10px;
+
+        .ant-checkbox-checked .ant-checkbox-inner {
+          background-color: #666666;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+        background: #f9f9f9;
+      }
+    }
+
+    .igloo-search-box-active-select-item {
+      background-color: #f6f6ff;
+    }
+  }
+}
+
+.igloo-search-box-modal-container-mobile {
+  top: 0px !important;
+  margin: 0px !important;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  height: 100vh !important;
+
+  .igloo-search-box-modal-mobile-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: white;
+
+    .igloo-icon {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+  }
+
+  .ant-modal-content {
+    position: relative;
+    height: 100%;
+
+    .ant-modal-body {
+      height: 100%;
+      max-height: calc(100vh - 140px - 60px);
+      padding: 24px 16px 0px 16px;
+
+      .igloo-search-box-modal-options {
+        max-height: calc(100vh - 140px - 60px - 150px);
+        overflow: scroll;
+      }
+
+      .ant-input-affix-wrapper-status-error {
+        border-color: #d9d9d9 !important;
+      }
+
+      .igloo-search-box-modal-multiple-top {
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .igloo-search-box-searching {
+        margin-top: 24px;
+        display: flex;
+        align-items: center;
+
+        @keyframes rotation {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        & > .igloo-icon {
+          font-size: 24px;
+          color: #5858ff;
+          margin-right: 8px;
+          animation: rotation 3s linear infinite;
+        }
+      }
+
+      .igloo-search-box-modal-select-item {
+        padding: 8px;
+        display: flex;
+        align-items: center;
+
+        .igloo-search-box-modal-select-item-checkbox {
+          margin-right: 10px;
+
+          .ant-checkbox-checked .ant-checkbox-inner {
+            background-color: #666666;
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+          background: #f9f9f9;
+        }
+      }
+
+      .igloo-search-box-active-select-item {
+        background-color: #f6f6ff;
+      }
+    }
+
+    .ant-modal-footer {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+    }
+  }
+}

package/es/select/attached-select.d.ts

@@ -1,21 +1,11 @@
 import { SelectProps, SelectValue } from 'antd/es/select';
 import { FC, IglooComponentProps } from '../types';
-import { FormInstance } from 'antd/es/form';
 import './style';
-import { NamePath } from 'antd/es/form/interface';
+import { ComponentProps } from '../utils/option-utils';
 export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
 declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
-    getOptions?: (form: FormInstance) => any[];
     multiple?: boolean;
-    clearWhenOptionsUpdated?: boolean;
-    optionGroups?: {
-        parentKey: string;
-        options: Props['options'];
-    }[];
-    datasourceKey?: string;
-    datasourceApi?: string;
-    dependField?: NamePath;
-};
+} & ComponentProps;
 declare type OptionType = typeof Option;
 declare type OptGroupType = typeof OptGroup;
 interface IglooSelectType extends FC<Props> {