@cloudbase/weda-ui 3.2.1 → 3.3.1

package/dist/src/web/components/navigationBar/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import classNames from '../../utils/classnames';
 import { ConfigProvider } from 'tea-component';
 import { usePlatform, isInIde } from '../../utils/platform';
@@ -8,6 +8,7 @@ import VerticalMenu from './verticalMenu';
 import HorizontalMenu from './horizontalMenu';
 import H5Menu from './h5Menu';
 import { expandMenu, findMenuItemByPath } from './common';
+import isObjectEqual from '../../utils/isObjectEqual';
 import destr from 'destr';
 /**
  * Web端
@@ -55,6 +56,7 @@ const defaultSelectedMenu = (menu) => {
 const defaultCallApi = { getAppCustomNav };
 export default function NavigationBar({ navigationbar, contentSlot, className, style, callApi = defaultCallApi, }) {
     const platform = usePlatform();
+    const [preNavigationbar, setPreNavigationbar] = useState(navigationbar);
     const [menuData, setMenuData] = useState([]);
     const [mobileMenuData, setMobileMenuData] = useState([]);
     // 是否启用多端
@@ -79,13 +81,14 @@ export default function NavigationBar({ navigationbar, contentSlot, className, s
         ...style,
     };
     // 更新导航菜单
-    const updateNavigationData = () => {
+    const updateNavigationData = useCallback(() => {
         callApi
             .getAppCustomNav()
             .then((res) => {
             var _a;
             const { Content } = res;
             const navigationData = destr(Content);
+            setPreNavigationbar(navigationData);
             if (navigationData === null || navigationData === void 0 ? void 0 : navigationData.navigationStyle) {
                 // 设置默认选中
                 let selectedKey = '';
@@ -111,22 +114,24 @@ export default function NavigationBar({ navigationbar, contentSlot, className, s
             }
         })
             .catch((error) => {
-            console.log(error);
+            console.error(error);
         });
-    };
+    }, [callApi]);
     /**
      * 每次渲染组件通过接口拉取数据
      */
     useEffect(() => {
+        // 仅执行一次
         updateNavigationData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (isInIde()) {
-            // setMenuData(navigationbar?.menuData);
-            // setNavigationStyle(navigationbar?.navigationStyle);
+        if (!isObjectEqual(navigationbar, preNavigationbar)) {
             updateNavigationData();
         }
-    }, [navigationbar]);
+        // 检查navigationbar更新之后，重新渲染
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [navigationbar, updateNavigationData]);
     // 初始化css变量
     useEffect(() => {
         if (navigationStyle.menuHoverColor) {

package/dist/src/web/components/richText/index.js

@@ -92,7 +92,7 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
     useEffect(() => {
         const state = createStateFromContent(initialValue, {});
         setEditorState(state);
-    }, []);
+    }, [initialValue]);
     const excludeControls = useMemo(() => {
         const result = [
             'media',
@@ -134,7 +134,6 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
         maxSize,
         cloudPath,
         latestEditorState,
-        insertMedias,
         setEditorState,
         isH5,
     ]);

package/dist/src/web/components/richTextView/index.js

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
 import destr from 'destr';
+const imgRegex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
 export default function RichTextView({ value = '', className, style, id, }) {
     const parseValue = destr(value);
     const cls = classNames({
@@ -12,25 +13,26 @@ export default function RichTextView({ value = '', className, style, id, }) {
         [className]: className,
     });
     const [displayValue, setDisplayValue] = useState('');
-    const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
     const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
-    let tempValue = parseValue
-        .toString()
-        .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
-    const getSrc = async (img) => {
-        const url = img.replace(regex, '$1');
-        if (img.includes('cloud://')) {
-            const newURL = await getTempFileURL(url);
-            if (newURL) {
-                tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
-                setDisplayValue(tempValue);
-            }
-        }
-    };
+    const valueWithErrorHandle = useMemo(() => {
+        return parseValue
+            .toString()
+            .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+    }, [iferror, parseValue]);
     useEffect(() => {
-        setDisplayValue(tempValue);
+        const getSrc = async (img) => {
+            const url = img.replace(imgRegex, '$1');
+            if (img.includes('cloud://')) {
+                const newURL = await getTempFileURL(url);
+                if (newURL) {
+                    const htmlWithTempUrl = valueWithErrorHandle.replace(new RegExp(url, 'g'), newURL);
+                    setDisplayValue(htmlWithTempUrl);
+                }
+            }
+        };
+        setDisplayValue(valueWithErrorHandle);
         try {
-            const imgs = parseValue.match(regex);
+            const imgs = parseValue.match(imgRegex);
             if (imgs && imgs.length > 0) {
                 imgs.forEach((img) => {
                     getSrc(img);
@@ -38,7 +40,7 @@ export default function RichTextView({ value = '', className, style, id, }) {
             }
         }
         catch (e) { }
-    }, [value]);
+    }, [parseValue, valueWithErrorHandle]);
     return (displayValue && (React.createElement("div", { className: cls, style: style, id: id },
         React.createElement("div", { dangerouslySetInnerHTML: { __html: displayValue } }))));
 }

package/dist/src/web/components/scrollView/index.d.ts

@@ -10,7 +10,7 @@ export interface PropsType extends CommonPropsType {
     lowerThreshold?: number;
     domRef?: any;
 }
-export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, domRef, events, }: {
+export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, events, }: {
     id: any;
     scrollX?: boolean;
     scrollY?: boolean;
@@ -22,6 +22,5 @@ export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scr
     children: any;
     upperThreshold?: number;
     lowerThreshold?: number;
-    domRef: any;
     events: any;
 }): JSX.Element;

package/dist/src/web/components/scrollView/index.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import classNames from '../../utils/classnames';
-export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, domRef, events, }) {
+export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, 
+// domRef,
+events, }) {
     const [toUpper, setToUpper] = React.useState(false);
     const [toLower, setToLower] = React.useState(false);
     const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
     const [scrollTopPos, setScrollTopPos] = React.useState(0);
-    const scrollViewRef = domRef || React.useRef(null);
+    const scrollViewRef = React.useRef(null);
     const handleOnScroll = function (e) {
         const detail = {
             scrollLeft: e.target.scrollLeft,
@@ -64,10 +66,10 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
     }, [scrollLeft]);
     React.useEffect(() => {
         toUpper && events.scrolltoupper();
-    }, [toUpper]);
+    }, [events, toUpper]);
     React.useEffect(() => {
         toLower && events.scrolltolower();
-    }, [toLower]);
+    }, [events, toLower]);
     React.useEffect(() => {
         if (scrollIntoView) {
             const children = scrollViewRef.current.children;
@@ -76,7 +78,7 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
             scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
             // console.log('children', children, item)
         }
-    }, [scrollIntoView]);
+    }, [scrollIntoView, scrollX, scrollY]);
     const webStyles = {
         position: 'relative',
         width: '100%',

package/dist/src/web/components/swiper/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
 import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
@@ -12,6 +12,15 @@ export default function Swiper({ children, className, style, autoplay = true, ci
     const [swipeStyle, setSwipeStyle] = useState(null);
     const [height, setHeight] = useState(0);
     const { change = () => { } } = events;
+    const setIndex = useCallback((index) => {
+        if (index >= itemCount) {
+            index = 0;
+        }
+        if (index < 0) {
+            index = itemCount - 1;
+        }
+        setCurrentIndex(index);
+    }, [itemCount]);
     useEffect(() => {
         if (autoplay) {
             // 自动切换
@@ -21,10 +30,60 @@ export default function Swiper({ children, className, style, autoplay = true, ci
             }, interval);
             return () => clearInterval(timer);
         }
-    }, [currentIndex, autoplay, itemCount]);
+    }, [currentIndex, autoplay, itemCount, interval, setIndex]);
     // 触发切换
     const pre = useRef({ index: currentIndex }).current;
     useEffect(() => {
+        // 设置容器样式、动画
+        // TODO fix settimeout mess
+        const updateSwipeStyle = (to, cur, length) => {
+            // 最后向前到最开始
+            if (to === 0 && cur === length - 1) {
+                circular &&
+                    setSwipeStyle({
+                        transform: `translate3d(0, 0, 0)`,
+                    });
+                // 不知道
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -100%, 0)`
+                            : `translate3d(-100%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            // 第一个后退到最后
+            if (to === length - 1 && cur === 0) {
+                circular &&
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+                            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            const style = {
+                transform: vertical
+                    ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                    : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+            };
+            if (to !== cur) {
+                style.transitionDuration = `${duration}ms`;
+            }
+            setSwipeStyle(style);
+        };
         updateSwipeStyle(currentIndex, pre.index, itemCount);
         change({
             current: currentIndex,
@@ -32,7 +91,7 @@ export default function Swiper({ children, className, style, autoplay = true, ci
         return () => {
             pre.index = currentIndex;
         };
-    }, [currentIndex, vertical]);
+    }, [change, circular, currentIndex, duration, itemCount, pre, vertical]);
     const outerWrapRef = useRef();
     useEventListener(outerWrapRef, 'load', (e) => {
         setHeight(e.target.clientHeight);
@@ -40,65 +99,6 @@ export default function Swiper({ children, className, style, autoplay = true, ci
     const itemsClone = React.Children.map(children, (x, i) => {
         return (React.createElement("div", { className: "g-swiper-item", "data-index": i }, x));
     });
-    const setIndex = (index) => {
-        if (index >= itemCount) {
-            index = 0;
-        }
-        if (index < 0) {
-            index = itemCount - 1;
-        }
-        setCurrentIndex(index);
-    };
-    // 设置容器样式、动画
-    // TODO fix settimeout mess
-    const updateSwipeStyle = (to, cur, length) => {
-        // 最后向前到最开始
-        if (to === 0 && cur === length - 1) {
-            circular &&
-                setSwipeStyle({
-                    transform: `translate3d(0, 0, 0)`,
-                });
-            // 不知道
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -100%, 0)`
-                        : `translate3d(-100%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        // 第一个后退到最后
-        if (to === length - 1 && cur === 0) {
-            circular &&
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 2) * 100}%, 0)`
-                        : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        const style = {
-            transform: vertical
-                ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-        };
-        if (to !== cur) {
-            style.transitionDuration = `${duration}ms`;
-        }
-        setSwipeStyle(style);
-    };
     return (React.createElement("div", { className: classNames('g-swiper weda-ui', className, {
             vertical: vertical,
         }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id },

package/dist/src/web/components/tabs/index.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
+import { CommonErrorBoundary } from '../common/error-boundary';
 // import { fallback } from '../../utils/loading-fallback';
 import TabsH5 from './tabs.h5';
 import TabsPc from './tabs.pc';
-export default function Tabs(props) {
+function TabsImpl(props) {
     const platform = usePlatform();
     if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
         return React.createElement(TabsPc, { ...props });
@@ -13,3 +14,7 @@ export default function Tabs(props) {
     }
     return platform === 'h5' ? React.createElement(TabsH5, { ...props }) : React.createElement(TabsPc, { ...props });
 }
+export default function Tabs(props) {
+    return (React.createElement(CommonErrorBoundary, null,
+        React.createElement(TabsImpl, { ...props })));
+}

package/dist/src/web/components/tabs/tabs.h5.js

@@ -5,7 +5,9 @@ import { useSyncValue } from '../../utils/useSyncValue';
 import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { emptyArray } from '../../utils/constant';
+import { useLoopRenderDetect } from '../common/use-loop-render-detect';
 export default function TabsH5({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    useLoopRenderDetect();
     const [currentIndex, setCurrentIndex] = useSyncValue(typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex);
     const stickyStyle = useMemo(() => {
         const length = tabs.length;

package/dist/src/web/components/text/index.js

@@ -2,15 +2,17 @@ import * as React from 'react';
 import classNames from '../../utils/classnames';
 import './index.css';
 export default function Text({ text, maxLines, space, userSelect, style, className, events, id, level, contenteditable, onInput, onBlur, }) {
-    const textStyle = {
-        WebkitLineClamp: maxLines,
-        whiteSpace: space ? 'pre-wrap' : 'pre-line',
-    };
-    if (!userSelect) {
-        textStyle.userSelect = 'none';
-    }
+    const inlineStyle = React.useMemo(() => {
+        const textStyle = {
+            WebkitLineClamp: maxLines,
+            whiteSpace: space ? 'pre-wrap' : 'pre-line',
+        };
+        if (!userSelect) {
+            textStyle.userSelect = 'none';
+        }
+        return { ...textStyle, ...style };
+    }, [maxLines, space, userSelect, style]);
     const levelName = level === '0' || !level ? '' : `level_${level}`;
-    const inlineStyle = React.useMemo(() => ({ ...textStyle, ...style }), [textStyle, style]);
     return (React.createElement("p", { 
         //@ts-expect-error contentEditable type def sucks
         contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, style: inlineStyle, className: classNames('weda-text', 'weda-ui', className, levelName), id: id, onClick: (e) => events.tap({}, { originEvent: e }) }, text));

package/dist/src/web/components/uploaderFileView/index.js

@@ -11,12 +11,12 @@ const CLASS_PREFIX = 'weda-uploader-file-view';
 export default function UploaderFileView({ value, className, single = true, // 展示为单行 a 标签
 showType, // 展示端为 pc 还是 h5 样式
 ...rest }) {
+    const platform = usePlatform();
     const fileIDList = filterStrList(value);
     if (single) {
         return React.createElement(FileView, { fileID: fileIDList[0] });
     }
     else {
-        const platform = usePlatform();
         const showTypeMix = showType ? (showType === 'h5' ? 'h5' : 'pc') : platform;
         const uploadFileProps = {
             ...rest,

package/dist/src/web/components/uploaderView/index.js

@@ -19,7 +19,7 @@ alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObj
     const [errorList, setErrorList] = React.useState([]);
     React.useEffect(() => {
         events.load && events.load({ success: successList, error: errorList });
-    }, [successList, errorList]);
+    }, [successList, errorList, events]);
     const boxStyle = {
         marginRight: gutter,
         marginBottom: gutter,

package/dist/src/web/components/wedaVideo/index.js

@@ -116,12 +116,24 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
                     !isCloudFileID(videoDataSource)) {
                     errorMsg = '请在预览区查看视频效果';
                 }
-                console.log('player error', errorMsg);
+                console.error('player error', errorMsg);
                 setVideoErrMsg(errorMsg);
                 setVideoModalStatus(true);
             });
         }
-    }, [videoRef]);
+    }, [
+        autoPlay,
+        controlBarStatus,
+        endTime,
+        loopPlay,
+        mutePlay,
+        posterImage,
+        realSrc,
+        startTime,
+        videoDataSource,
+        videoRef,
+        videoType,
+    ]);
     useEffect(() => {
         // 切换视频源
         if (playerRef.current && videoType) {
@@ -134,7 +146,7 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
             playerRef.current.src(srcOption);
             playerRef.current.load(realSrc);
         }
-    }, [realSrc]);
+    }, [realSrc, videoType]);
     return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
         React.createElement("div", { className: cls, id: id, style: style, "data-testid": "wedaVideo" },
             React.createElement("div", { "data-vjs-player": true },

package/dist/src/web/utils/console.d.ts

@@ -0,0 +1,3 @@
+declare type TConsoleLog = typeof console;
+export declare const debug: (label: string) => TConsoleLog;
+export {};

package/dist/src/web/utils/console.js

@@ -0,0 +1,26 @@
+import { noop } from './constant';
+export const debug = (label) => {
+    var _a;
+    const envLabel = (_a = (typeof window !== 'undefined' &&
+        window.localStorage.getItem('WEDA_COMP_DEBUG'))) !== null && _a !== void 0 ? _a : '';
+    const showLog = envLabel.startsWith(label) || envLabel == '*';
+    const globalVar = typeof globalThis !== 'undefined'
+        ? globalThis
+        : typeof self !== 'undefined'
+            ? self
+            : window;
+    // 防 drop console
+    const globalConsoleObj = globalVar['con' + 'sole'];
+    return new Proxy(globalConsoleObj, {
+        get(_console, k) {
+            if (showLog) {
+                return (...args) => {
+                    globalConsoleObj[k](label, ...args);
+                };
+            }
+            else {
+                return noop;
+            }
+        },
+    });
+};

package/dist/src/web/utils/platform.js

@@ -51,7 +51,7 @@ export function inH5IsMobile() {
         return is_mobile_ua;
     }
     catch (e) {
-        console.log('isMobile err', e);
+        console.error('isMobile checker err', e);
     }
 }
 /**

package/dist/src/web/utils/tcb.js

@@ -110,7 +110,7 @@ export const getDataSourceByName = async (dbName) => {
     // dbName 为空时
     if (!dbName)
         return;
-    const datasource = await window.app.cloud.getDataSourceProfile({
+    const datasource = await window.app.cloud.getDataSourceProfileAsync({
         Name: dbName,
         GetColumnAuth: true,
     });

package/dist/src/web/utils/useSyncValue.js

@@ -7,6 +7,7 @@ export function useSyncValue(defaultValue, comparotor = Object.is) {
         if (!comparotor(prevValue, defaultValue)) {
             setStateValue(defaultValue);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultValue]);
     const setter = useCallback((next) => {
         setStateValue(next);

package/dist/web/components/form/input/index.css

@@ -38,3 +38,19 @@
 .weda-input .weui-input {
   font-weight: inherit;
 }
+
+.weui-pc-input {
+  white-space: nowrap;
+}
+
+.weui-pc-input .pc-clear {
+  position: relative;
+  right: 1.78571rem;
+  top: 25%;
+  display: inline-block;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzg4OCIgZD0iTTggMWE3IDcgMCAxIDAgMCAxNEE3IDcgMCAwIDAgOCAxem0zLjUzNiA5LjEyMWwtMS40MTQgMS40MTRMOCA5LjQxNGwtMi4xMjEgMi4xMjEtMS40MTQtMS40MTRMNi41ODYgOCA0LjQ2NCA1Ljg3OWwxLjQxNC0xLjQxNEw4IDYuNTg2bDIuMTIxLTIuMTIxIDEuNDE0IDEuNDE0TDkuNDE0IDhsMi4xMjIgMi4xMjF6Ii8+PC9zdmc+) !important;
+}
+
+.weui-pc-input .pc-input {
+  padding-right: 2.14286rem;
+}

package/dist/web/components/form/userOrgSelect/userOrgSelect.css

@@ -245,6 +245,7 @@
 /** 用户 tab start */
 .dim-tree-select.dim-tree-select--user {
   padding: 0.21429rem 0 0.57143rem 0;
+  margin-top: 0;
 }
 .dim-tree-select.dim-tree-select--user
   .dim-tree-select-tabs
@@ -354,6 +355,9 @@
   background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjUgNUMxMS41IDYuOTMzIDkuOTMzIDguNSA4IDguNUM2LjA2NyA4LjUgNC41IDYuOTMzIDQuNSA1QzQuNSAzLjA2NyA2LjA2NyAxLjUgOCAxLjVDOS45MzMgMS41IDExLjUgMy4wNjcgMTEuNSA1Wk0xMC41IDVDMTAuNSAzLjYxOTI5IDkuMzgwNzEgMi41IDggMi41QzYuNjE5MjkgMi41IDUuNSAzLjYxOTI5IDUuNSA1QzUuNSA2LjM4MDcxIDYuNjE5MjkgNy41IDggNy41QzkuMzgwNzEgNy41IDEwLjUgNi4zODA3MSAxMC41IDVaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KPHBhdGggZD0iTTEzLjk2MzEgMTAuODUyOEMxNC4yOTcgMTEuMDEyMiAxNC41IDExLjM1NDcgMTQuNSAxMS43MjQ2VjE0QzE0LjUgMTQuMjc2MSAxNC4yNzYxIDE0LjUgMTQgMTQuNUgyQzEuNzIzODYgMTQuNSAxLjUgMTQuMjc2MSAxLjUgMTRWMTEuNzI0NkMxLjUgMTEuMzU0NyAxLjcwMzAyIDExLjAxMjIgMi4wMzY4NiAxMC44NTI4QzMuODQ5NCA5Ljk4NzA4IDUuODY2NTEgOS41IDggOS41QzEwLjEzMzUgOS41IDEyLjE1MDYgOS45ODcwOCAxMy45NjMxIDEwLjg1MjhaTTggMTAuNUM2LjAzMzQgMTAuNSA0LjE3NDM1IDEwLjk0NTcgMi41IDExLjczOThWMTMuNUgxMy41VjExLjczOThDMTEuODI1NyAxMC45NDU3IDkuOTY2NiAxMC41IDggMTAuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4K);
   background-repeat: no-repeat;
 }
+.role-tree-select.role-tree-select--depart .dropdown-cell {
+  word-break: break-all;
+}
 .role-tree-select.role-tree-select--depart
   .is-expanded.wedatea2td-dropdown-btn
   .wedatea2td-dropdown__header