@antscorp/antsomi-ui 1.3.5-beta.697 → 1.3.5-beta.699

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -22,6 +22,19 @@ export interface AdvancedPickerProps {
     showTime?: boolean;
     timezone?: string;
     isViewMode?: boolean;
+    /**
+     *
+     * @example const disabledTime = () => ({
+        disabledHours: () => range(0, 24).splice(4, 20),
+        disabledMinutes: () => range(30, 60),
+        disabledSeconds: () => [55, 56],
+      });
+     */
+    disabledTime?: () => {
+        disabledHours: () => number[];
+        disabledMinutes: () => number[];
+        disabledSeconds: () => number[];
+    };
     /**
      * Only show fixed calendar (hide dynamic and )
      */

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -30,7 +30,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -397,7 +397,7 @@ export const AdvancedPicker = props => {
                 // style={{
                 //   width: 120,
                 // }}
-                disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+                disabledDate: disableDate, disabledTime: disabledTime, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
                     '--error': errorMessage,
                     'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MatchesAnyProps, MatchesAnySelectProps } from './types';
-export declare function MatchesAny<TItem = Record<string, any>>(props: MatchesAnyProps<TItem>): React.JSX.Element;
-export declare function MatchesAnySelect<TItem = Record<string, any>>(props: MatchesAnySelectProps<TItem>): React.JSX.Element;
+export declare function MatchesAny<TItem = any>(props: MatchesAnyProps<TItem>): React.JSX.Element;
+export declare function MatchesAnySelect<TItem = any>(props: MatchesAnySelectProps<TItem>): React.JSX.Element;

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -13,26 +13,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import { ConfigProvider } from 'antd';
-import { uniqBy } from 'lodash';
+import clsx from 'clsx';
+import { isEmpty, uniqBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import deepmerge from 'deepmerge';
 // Components
+import { Button, Flex, Icon, Input, Popover, Spin, Tooltip, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-import { Button, Flex, Icon, Input, Popover, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ExtendValuePopup } from './components/ExtendValuePopup';
 // Styled
-import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton, GroupSelectButton, ExtraValueLabel, } from './styled';
+import { ActionButton, ExtraValueLabel, GroupSelectButton, MatchesAnyWrapper, StyledTree, TextButton, } from './styled';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Constants
-import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { MATCHES_ANY_THEME } from './constants';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
-import { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
+import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+import { getSelectedTreeData } from './utils';
+// Icons
 import { DataIcon, WarningIcon } from '../../icons';
-import clsx from 'clsx';
 const initialState = {
     isOpenPopover: false,
 };
@@ -40,17 +43,16 @@ const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
     isShowLoadMoreEl: false,
-    selectedExpandedKeys: [],
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, onSelectedTreeDataChange = () => { }, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onSelectedTreeDataChange", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems, isShowLoadMoreEl, selectedExpandedKeys } = state;
+    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
     const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
@@ -76,6 +78,13 @@ export function MatchesAny(props) {
             setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
         }, 500);
     }, []);
+    useDeepCompareEffect(() => {
+        const selectedTreeData = getSelectedTreeData(items || [], selectedItems || [], selectedTreeDataProp || []);
+        if (!isEmpty(selectedTreeData)) {
+            onSelectedTreeDataChange(selectedTreeData);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items, selectedItems]);
     // Handlers
     /**
      * Adds an item and, if applicable, its leaf descendants to the list of selected items.
@@ -88,16 +97,15 @@ export function MatchesAny(props) {
      *                              This item can have children.
      */
     const onSelectItem = (item) => {
+        let newSelectedItems = [...(selectedItems || [])];
         if (item.children) {
             const flattenChild = flatTree(item.children, 'children');
-            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [
-                    ...(prev.selectedItems || []),
-                    ...flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.filter(item => !item.children),
-                ], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), item.key] })));
-            return;
+            newSelectedItems = newSelectedItems.concat(flattenChild.filter(item => !item.children));
+        }
+        else {
+            newSelectedItems = newSelectedItems.concat(item);
         }
-        const parentExpandedKeys = recursiveFindParents(items || [], item, 'key', 'children').map(item => item.key);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), ...parentExpandedKeys] })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems })));
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -122,13 +130,15 @@ export function MatchesAny(props) {
     const onSelectAll = () => {
         const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
             !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key'), selectedExpandedKeys: flatTree(items, 'children')
-                .filter(item => !!item.children)
-                .map(item => item.key) })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
     };
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
     };
+    const onClickApply = () => {
+        const selectedTreeData = getSelectedTreeData(items || [], selectedItems || [], selectedTreeDataProp || []);
+        onApply(selectedItems || [], selectedTreeData);
+    };
     const renderItemError = (item) => {
         if (customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error) {
             return customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error(item);
@@ -204,12 +214,13 @@ export function MatchesAny(props) {
             treeData = treeData.filter(item => { var _a; return (_a = groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.includes(item.key); });
         }
         return { treeData, matchedParents };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
+    // const selectedTreeData = useDeepCompareMemo(() => [], [items, selectedItems]);
     const selectedTreeData = useDeepCompareMemo(() => {
         var _a;
         const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
         const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
-        const lazyLoadSelectedItems = (notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
         const serializeTreeData = (list) => {
             var _a;
             return ((_a = list
@@ -229,8 +240,14 @@ export function MatchesAny(props) {
                 children: serializeTreeData(item.children),
             })), (!!item.error && { className: 'error-node' }))))) || [];
         };
-        return serializeTreeData(items || []).concat(((_a = [...lazyLoadSelectedItems, ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
-    }, [items, selectedItems]);
+        const mergeItems = deepmerge(selectedTreeDataProp || [], items || [], {
+            arrayMerge(target, source) {
+                return uniqBy([...target, ...source], 'key');
+            },
+        });
+        return serializeTreeData(mergeItems).concat(((_a = [...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items, selectedItems, selectedTreeDataProp]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
         const flattenTreeData = flatTree(treeData, 'children');
@@ -268,7 +285,9 @@ export function MatchesAny(props) {
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
                 React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
-                    React.createElement(StyledTree, { key: searchValue, defaultExpandAll: true, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                    React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
+                            ? matchedParents.map(item => item.key)
+                            : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                                 transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                                 transition: 'transform 0.3s ease',
                             }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), height: 396 }),
@@ -278,14 +297,10 @@ export function MatchesAny(props) {
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
-        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, Object.assign({ selectable: false, treeData: selectedTreeData, height: 420, defaultExpandAll: true }, ((selectedExpandedKeys === null || selectedExpandedKeys === void 0 ? void 0 : selectedExpandedKeys.length) && {
-            expandedKeys: selectedExpandedKeys,
-        }), { switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { defaultExpandedKeys: selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.map(item => item.key), selectable: false, treeData: selectedTreeData, height: 420, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                     transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                     transition: 'transform 0.3s ease',
-                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), onExpand: expandedKeys => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { selectedExpandedKeys: expandedKeys })));
-            } }))))));
+                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
@@ -308,14 +323,14 @@ export function MatchesAny(props) {
                 renderSelectedList()),
             React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
                 React.createElement(Flex, { align: "center", gap: 10 },
-                    React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { type: "primary", onClick: onClickApply }, t(translations.apply.title).toString()),
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue },
                     React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
 }
 export function MatchesAnySelect(props) {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "onChangeSearch", "onChange", "onLoadMore"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onSelectedTreeDataChange, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onChangeSearch", "onChange", "onSelectedTreeDataChange", "onLoadMore"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -324,11 +339,11 @@ export function MatchesAnySelect(props) {
         ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
         : undefined;
     // Handlers
-    const onApplyMatchesAny = (selectedItems) => {
-        onChange(selectedItems);
+    const onApplyMatchesAny = (selectedItems, selectedTreeData) => {
+        onChange(selectedItems, selectedTreeData);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore, onSelectedTreeDataChange: onSelectedTreeDataChange }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,
@@ -336,6 +351,9 @@ export function MatchesAnySelect(props) {
         }, overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))), zIndex: 1400 }, popoverProps),
-        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
+                maxHeight: 300,
+                overflow: 'auto',
+            } },
             React.createElement(Select, Object.assign({ title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }), loading: loading }, restProps)))));
 }

package/es/components/molecules/MatchAnySelect/constants.js

@@ -6,26 +6,6 @@ export const SAMPLE_DATA = [
     {
         key: '12179',
         title: 'Untitled Project#2024-06-27 09:40:18',
-        children: [
-            {
-                key: '3j2i',
-                title: 'dsjfioasdjf',
-                children: [
-                    {
-                        key: '3j2323i323',
-                        title: 'fewfwe',
-                    },
-                    {
-                        key: '3j2323i',
-                        title: 'me owi',
-                    },
-                ],
-            },
-            {
-                key: '3j2i-1',
-                title: 'dsjfioasdjf',
-            },
-        ],
     },
     {
         key: '11923',

package/es/components/molecules/MatchAnySelect/mock.d.ts

@@ -0,0 +1,21 @@
+export declare const countryItems: {
+    name: string;
+    countryId: number;
+    countryName: string;
+    provinces: {
+        provinceId: number;
+        provinceName: string;
+    }[];
+    value: string;
+    label: string;
+    title: string;
+    key: string;
+    id: number;
+    children: {
+        provinceId: number;
+        provinceName: string;
+        key: string;
+        title: string;
+        value: string;
+    }[];
+}[];