@giteeteam/apps-team-components 1.0.1 → 1.0.2-alpha.1

package/dist/components/fields/status/Transition.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { CaretDownOutlined } from '@ant-design/icons';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { Button, Popover } from 'antd';
 import { WorkFlowStatusColor } from '../../../lib/global';
 import useAntdConfig from '../../../lib/hooks/useAntdConfig';
@@ -11,7 +11,6 @@ import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowToolt
 import { caretDownStyle, flowStateButtonStyle, flowStateInWorkflowStyle, flowStateStyle, noStateStyle, stateBtnStyle, statePopoverStyle, workflowContentStyle, } from './style';
 import TransitionPanel from './TransitionPanel';
 const Transition = props => {
-    var _a, _b, _c;
     const { itemId, itemType, workspace, objectId, onTransitionSuccess, name, type, readonly, apply } = props;
     const [popoverVisible, setPopoverVisible] = useState(false);
     const [flowing, setFlowing] = useState(false);
@@ -29,16 +28,19 @@ const Transition = props => {
             return { ...data, objectId, name, type };
         });
     }, [objectId, name, type]);
-    return (_jsx("div", { className: workflowContentStyle, children: _jsx(Popover, { overlayClassName: statePopoverStyle(antPrefix), destroyTooltipOnHide: true, open: popoverVisible, onOpenChange: visible => {
-                if (isProcessing.current || flowing) {
-                    return;
-                }
-                setPopoverVisible(visible);
-            }, getPopupContainer: () => document.body, trigger: "click", placement: "bottomLeft", content: _jsx(TransitionPanel, { itemId: itemId, itemType: itemType, workspace: workspace, objectId: showData.objectId, onTransitionSuccess: transitionSuccess, name: name, readonly: readonly, setPopoverVisible: setPopoverVisible, isProcessing: isProcessing, flowing: flowing, setFlowing: setFlowing }), children: _jsxs(Button, { type: "link", className: cx(flowStateStyle, flowStateInWorkflowStyle, flowStateButtonStyle, stateBtnStyle, {
-                    [noStateStyle]: !showData.name,
-                }), style: {
-                    backgroundColor: (_a = WorkFlowStatusColor[showData.type]) === null || _a === void 0 ? void 0 : _a.bgColor,
-                    color: (_b = WorkFlowStatusColor[showData.type]) === null || _b === void 0 ? void 0 : _b.color,
-                }, children: [_jsx(BaseOverflowTooltip, { title: showData.name, children: showData.name || (apply === 'cell' ? _jsx(EmptyField, { readonly: readonly }) : i18n.t('global.stateless')) }), apply !== 'cell' && (_jsx(CaretDownOutlined, { className: caretDownStyle, style: { color: (_c = WorkFlowStatusColor[showData.type]) === null || _c === void 0 ? void 0 : _c.color, marginLeft: 0 } }))] }) }) }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            var _a, _b, _c;
+            return (_jsx("div", { css: css(workflowContentStyle), children: _jsx(Popover, { overlayClassName: statePopoverStyle(antPrefix), destroyTooltipOnHide: true, open: popoverVisible, onOpenChange: visible => {
+                        if (isProcessing.current || flowing) {
+                            return;
+                        }
+                        setPopoverVisible(visible);
+                    }, getPopupContainer: () => document.body, trigger: "click", placement: "bottomLeft", content: _jsx(TransitionPanel, { itemId: itemId, itemType: itemType, workspace: workspace, objectId: showData.objectId, onTransitionSuccess: transitionSuccess, name: name, readonly: readonly, setPopoverVisible: setPopoverVisible, isProcessing: isProcessing, flowing: flowing, setFlowing: setFlowing }), children: _jsxs(Button, { type: "link", className: cx(css(flowStateStyle), css(flowStateInWorkflowStyle), css(flowStateButtonStyle), css(stateBtnStyle), {
+                            [css(noStateStyle)]: !showData.name,
+                        }), style: {
+                            backgroundColor: (_a = WorkFlowStatusColor[showData.type]) === null || _a === void 0 ? void 0 : _a.bgColor,
+                            color: (_b = WorkFlowStatusColor[showData.type]) === null || _b === void 0 ? void 0 : _b.color,
+                        }, children: [_jsx(BaseOverflowTooltip, { title: showData.name, children: showData.name || (apply === 'cell' ? _jsx(EmptyField, { readonly: readonly }) : i18n.t('global.stateless')) }), apply !== 'cell' && (_jsx(CaretDownOutlined, { css: css(caretDownStyle), style: { color: (_c = WorkFlowStatusColor[showData.type]) === null || _c === void 0 ? void 0 : _c.color, marginLeft: 0 } }))] }) }) }));
+        } }));
 };
 export default memo(Transition);

package/dist/components/fields/status/TransitionButton.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames, css } from '@emotion/react';
 import { Tooltip } from 'antd';
 import { WorkFlowStatusColor } from '../../../lib/global';
 import { i18n } from '../../../lib/i18n';
@@ -104,19 +104,21 @@ const FlowButton = ({ loading, screenId, text, item, userId, roleIds, groupIds,
         if (!tip)
             return '';
         const contents = tip.split('--');
-        return (_jsx("div", { children: contents.map((text, index) => (_jsx("p", { className: tipLineStyle, children: text }, String(index)))) }));
+        return (_jsx("div", { children: contents.map((text, index) => (_jsx("p", { css: css(tipLineStyle), children: text }, String(index)))) }));
     }, [tip, readonly]);
     const OverflowText = ({ text, target }) => {
         var _a, _b;
-        return (_jsxs(_Fragment, { children: [_jsx(BaseOverflowTooltip, { className: tooltipStyle, title: text, children: text }), _jsx("span", { className: iconStyle, children: " \u2192 " }), _jsx("div", { className: stateBoxStyle, children: _jsx(BaseOverflowTooltip, { className: flowStateStyle, style: {
+        return (_jsxs(_Fragment, { children: [_jsx(BaseOverflowTooltip, { css: css(tooltipStyle), title: text, children: text }), _jsx("span", { css: css(iconStyle), children: " \u2192 " }), _jsx("div", { css: css(stateBoxStyle), children: _jsx(BaseOverflowTooltip, { css: css(flowStateStyle), style: {
                             backgroundColor: (_a = WorkFlowStatusColor[target.type]) === null || _a === void 0 ? void 0 : _a.bgColor,
                             color: (_b = WorkFlowStatusColor[target.type]) === null || _b === void 0 ? void 0 : _b.color,
                         }, title: target.name, children: target.name }) })] }));
     };
-    return isCheck && !readonly ? (_jsx("div", { className: cx(flowBtnStyle, loading ? notAllowedStyle : pointerStyle), onClick: () => {
-            if (!loading) {
-                handleTransition(text, screenId, scriptValidator);
-            }
-        }, children: _jsx(OverflowText, { text: text, target: target }) })) : (_jsx(Tooltip, { title: tipContent, placement: "right", children: _jsx("div", { className: cx(flowBtnStyle, notAllowedStyle), children: _jsx(OverflowText, { text: text, target: target }) }) }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            return isCheck && !readonly ? (_jsx("div", { className: cx(css(flowBtnStyle), loading ? css(notAllowedStyle) : css(pointerStyle)), onClick: () => {
+                    if (!loading) {
+                        handleTransition(text, screenId, scriptValidator);
+                    }
+                }, children: _jsx(OverflowText, { text: text, target: target }) })) : (_jsx(Tooltip, { title: tipContent, placement: "right", children: _jsx("div", { className: cx(css(flowBtnStyle), css(notAllowedStyle)), children: _jsx(OverflowText, { text: text, target: target }) }) }));
+        } }));
 };
 export default memo(FlowButton);

package/dist/components/fields/status/TransitionPanel.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { proximaSdk, useListener } from '@giteeteam/proxima-sdk-js';
 import { message, Spin } from 'antd';
 import debug from 'debug';
@@ -217,12 +217,12 @@ const TransitionPanel = ({ itemId, itemType, workspace, objectId, onTransitionSu
         refreshFlag.current++;
         refresh();
     });
-    return (_jsxs(_Fragment, { children: [fetching ? (_jsx(Spin, { className: spinStyle })) : tasks.length ? (_jsx("div", { className: cx(flowNextStyle, `flow-next-global`), children: _jsx("div", { children: tasks.map(task => {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                        return (_jsx(TransitionButton, { itemId: itemId, loading: flowing, text: task.name, item: itemData, workspace: workspace, userId: currentUser.id, groupIds: groupIds, roleIds: roleIds, workspaceRoleIds: workspaceRoleIds, currentTaskId: task.id, authUsers: (_b = (_a = task.parameters) === null || _a === void 0 ? void 0 : _a.permissionType) === null || _b === void 0 ? void 0 : _b.users, authRoles: (_d = (_c = task.parameters) === null || _c === void 0 ? void 0 : _c.permissionType) === null || _d === void 0 ? void 0 : _d.roles, authGroups: (_f = (_e = task.parameters) === null || _e === void 0 ? void 0 : _e.permissionType) === null || _f === void 0 ? void 0 : _f.groups, authUserFields: (_h = (_g = task.parameters) === null || _g === void 0 ? void 0 : _g.permissionType) === null || _h === void 0 ? void 0 : _h.customFields, authWorkSpaceRoles: (_k = (_j = task.parameters) === null || _j === void 0 ? void 0 : _j.permissionType) === null || _k === void 0 ? void 0 : _k.workspaceRoles, creatorAuth: (_m = (_l = task.parameters) === null || _l === void 0 ? void 0 : _l.permissionType) === null || _m === void 0 ? void 0 : _m.creatorAuth, scriptValidator: (_o = task.parameters) === null || _o === void 0 ? void 0 : _o.scriptValidator, conditions: (_p = task.parameters) === null || _p === void 0 ? void 0 : _p.fieldType, screenId: (_r = (_q = task.parameters) === null || _q === void 0 ? void 0 : _q.screen) === null || _r === void 0 ? void 0 : _r.key, target: task.target, approval: approval, checkIn: checkIn, handleTransition: handleTransition, hiddenPopover: () => setPopoverVisible(false), readonly: readonly }, task.id));
-                    }) }) })) : (_jsx("span", { onClick: () => {
-                    setPopoverVisible(false);
-                }, className: noPermissionStyle, children: i18n.t('pages.fields.view.noWorkflowOrAuth') })), _jsx(View, { workflowData: workflowData, hiddenPopover: () => setPopoverVisible(false), name: name, objectId: objectId })] }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => (_jsxs(_Fragment, { children: [fetching ? (_jsx(Spin, { css: css(spinStyle) })) : tasks.length ? (_jsx("div", { className: cx(css(flowNextStyle), `flow-next-global`), children: _jsx("div", { children: tasks.map(task => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                            return (_jsx(TransitionButton, { itemId: itemId, loading: flowing, text: task.name, item: itemData, workspace: workspace, userId: currentUser.id, groupIds: groupIds, roleIds: roleIds, workspaceRoleIds: workspaceRoleIds, currentTaskId: task.id, authUsers: (_b = (_a = task.parameters) === null || _a === void 0 ? void 0 : _a.permissionType) === null || _b === void 0 ? void 0 : _b.users, authRoles: (_d = (_c = task.parameters) === null || _c === void 0 ? void 0 : _c.permissionType) === null || _d === void 0 ? void 0 : _d.roles, authGroups: (_f = (_e = task.parameters) === null || _e === void 0 ? void 0 : _e.permissionType) === null || _f === void 0 ? void 0 : _f.groups, authUserFields: (_h = (_g = task.parameters) === null || _g === void 0 ? void 0 : _g.permissionType) === null || _h === void 0 ? void 0 : _h.customFields, authWorkSpaceRoles: (_k = (_j = task.parameters) === null || _j === void 0 ? void 0 : _j.permissionType) === null || _k === void 0 ? void 0 : _k.workspaceRoles, creatorAuth: (_m = (_l = task.parameters) === null || _l === void 0 ? void 0 : _l.permissionType) === null || _m === void 0 ? void 0 : _m.creatorAuth, scriptValidator: (_o = task.parameters) === null || _o === void 0 ? void 0 : _o.scriptValidator, conditions: (_p = task.parameters) === null || _p === void 0 ? void 0 : _p.fieldType, screenId: (_r = (_q = task.parameters) === null || _q === void 0 ? void 0 : _q.screen) === null || _r === void 0 ? void 0 : _r.key, target: task.target, approval: approval, checkIn: checkIn, handleTransition: handleTransition, hiddenPopover: () => setPopoverVisible(false), readonly: readonly }, task.id));
+                        }) }) })) : (_jsx("span", { onClick: () => {
+                        setPopoverVisible(false);
+                    }, css: css(noPermissionStyle), children: i18n.t('pages.fields.view.noWorkflowOrAuth') })), _jsx(View, { workflowData: workflowData, hiddenPopover: () => setPopoverVisible(false), name: name, objectId: objectId })] })) }));
 };
 function getWorkflowConfig(workflow, statusId) {
     var _a, _b, _c, _d, _e;

package/dist/components/fields/status/View.js

@@ -1,20 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect } from 'react';
-import { cx } from '@emotion/css';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { css, Global } from '@emotion/react';
 import { proximaSdk } from '@giteeteam/proxima-sdk-js';
 import { WorkflowIcon } from '../../../icons';
 import { i18n } from '../../../lib/i18n';
-import { injectStatusViewGlobalStyle } from './style';
+import { statusViewGlobalStyle } from './style';
 const View = ({ name, objectId, hiddenPopover, workflowData }) => {
     const viewClickHandle = useCallback(e => {
         e.stopPropagation();
     }, []);
-    useEffect(() => {
-        injectStatusViewGlobalStyle();
-    }, []);
-    return (_jsx("div", { className: cx('field-layout', 'status-view'), onClick: viewClickHandle, children: _jsxs("span", { onClick: () => {
-                hiddenPopover === null || hiddenPopover === void 0 ? void 0 : hiddenPopover();
-                proximaSdk.execute('openItemWorkflowViewerModal', { name, objectId, workflowData });
-            }, children: [_jsx(WorkflowIcon, { className: 'status-view-watch' }), i18n.t('pages.fields.view.viewWorkflow')] }) }));
+    return (_jsxs("div", { className: 'field-layout status-view', onClick: viewClickHandle, children: [_jsx(Global, { styles: css(statusViewGlobalStyle) }), _jsxs("span", { onClick: () => {
+                    hiddenPopover === null || hiddenPopover === void 0 ? void 0 : hiddenPopover();
+                    proximaSdk.execute('openItemWorkflowViewerModal', { name, objectId, workflowData });
+                }, children: [_jsx(WorkflowIcon, { className: 'status-view-watch' }), i18n.t('pages.fields.view.viewWorkflow')] })] }));
 };
 export default memo(View);

package/dist/components/fields/status/style/index.d.ts

@@ -1,20 +1,20 @@
-export declare const readViewWrapper: string;
-export declare const workflowContentStyle: string;
+export declare const readViewWrapper = "\n  display: -webkit-box;\n  align-items: center;\n  justify-content: center;\n  min-width: 62px;\n  height: 22px;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 22px;\n  text-align: center;\n  border-radius: 4px;\n";
+export declare const workflowContentStyle = "\n  max-width: 200px;\n  text-align: left;\n";
 export declare const statePopoverStyle: (antPrefix: string) => string;
-export declare const flowNextStyle: string;
-export declare const flowStateStyle: string;
-export declare const flowStateInWorkflowStyle: string;
-export declare const flowStateButtonStyle: string;
-export declare const stateBtnStyle: string;
-export declare const noStateStyle: string;
-export declare const caretDownStyle: string;
-export declare const injectStatusViewGlobalStyle: () => void;
-export declare const tipLineStyle: string;
-export declare const tooltipStyle: string;
-export declare const iconStyle: string;
-export declare const stateBoxStyle: string;
-export declare const flowBtnStyle: string;
-export declare const notAllowedStyle: string;
-export declare const pointerStyle: string;
-export declare const spinStyle: string;
-export declare const noPermissionStyle: string;
+export declare const flowNextStyle = "\n  max-height: 260px;\n  padding-top: 10px;\n  overflow: auto;\n";
+export declare const flowStateStyle = "\n  min-width: 62px;\n  height: 24px;\n  padding: 0 18px 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 24px;\n  color: #fff;\n  text-align: center;\n  background: #cdcdcd;\n  border-radius: 4px;\n  box-shadow: none !important;\n\n  span {\n    text-decoration: none !important;\n  }\n";
+export declare const flowStateInWorkflowStyle = "\n  :not(.add-weights) {\n    min-width: 62px;\n    height: 22px;\n    padding: 0 8px;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 22px;\n    color: #fff;\n    text-align: center;\n    background: #cdcdcd;\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n";
+export declare const flowStateButtonStyle = "\n  &:not(.add-weights) > span {\n    display: -webkit-box;\n  }\n";
+export declare const stateBtnStyle = "\n  height: 22px;\n  line-height: 22px;\n";
+export declare const noStateStyle = "\n  color: #909aaa;\n  background: #F1F2F4;\n";
+export declare const caretDownStyle = "\n  padding-left: 2px;\n  margin-left: 0;\n  line-height: 10px;\n";
+export declare const statusViewGlobalStyle = "\n.field-layout.status-view {\n  position: relative;\n  padding: 10px;\n  margin-top: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  border-top: 1px solid #ddd;\n}\n\n.field-layout.status-view .status-view-watch {\n  width: 12px;\n  height: 12px;\n  margin-right: 5px;\n  font-size: 12px;\n  vertical-align: middle;\n}\n";
+export declare const tipLineStyle = "\n  margin-bottom: 0;\n";
+export declare const tooltipStyle = "\n  width: 80px;\n";
+export declare const iconStyle = "\n  padding: 0 6px;\n  color: #848C9F;\n";
+export declare const stateBoxStyle = "\n  display: flex;\n  width: 80px;\n\n  span {\n    padding-right: 8px;\n  }\n";
+export declare const flowBtnStyle = "\n  display: flex;\n  padding: 5px 10px;\n  margin: 0;\n\n  &:hover {\n    background-color: var(--select-item-selected-bg, #e6f3ff);\n  }\n";
+export declare const notAllowedStyle = "\n  cursor: not-allowed;\n  opacity: 0.3;\n";
+export declare const pointerStyle = "\n  cursor: pointer;\n";
+export declare const spinStyle = "\n  width: 150px;\n  height: 50px;\n";
+export declare const noPermissionStyle = "\n  display: block;\n  width: 120px;\n  padding: 20px 10px 10px;\n  font-size: 12px;\n  color: #2e405e;\n";

package/dist/components/fields/status/style/index.js

@@ -1,6 +1,5 @@
-import { css, injectGlobal } from '@emotion/css';
 import { fieldLabelColor, gray7, statusCellMinWidth, themeBgColorBase } from '../../../../style/common';
-export const readViewWrapper = css `
+export const readViewWrapper = `
   display: -webkit-box;
   align-items: center;
   justify-content: center;
@@ -13,11 +12,11 @@ export const readViewWrapper = css `
   text-align: center;
   border-radius: 4px;
 `;
-export const workflowContentStyle = css `
+export const workflowContentStyle = `
   max-width: 200px;
   text-align: left;
 `;
-export const statePopoverStyle = (antPrefix) => css `
+export const statePopoverStyle = (antPrefix) => `
   z-index: 1000 !important;
 
   div.${antPrefix}-popover-inner-content, div.${antPrefix}-popover-inner {
@@ -30,12 +29,12 @@ export const statePopoverStyle = (antPrefix) => css `
     border-width: 0;
   }
 `;
-export const flowNextStyle = css `
+export const flowNextStyle = `
   max-height: 260px;
   padding-top: 10px;
   overflow: auto;
 `;
-export const flowStateStyle = css `
+export const flowStateStyle = `
   min-width: ${statusCellMinWidth};
   height: 24px;
   padding: 0 18px 0 8px;
@@ -52,7 +51,7 @@ export const flowStateStyle = css `
     text-decoration: none !important;
   }
 `;
-export const flowStateInWorkflowStyle = css `
+export const flowStateInWorkflowStyle = `
   :not(.add-weights) {
     min-width: ${statusCellMinWidth};
     height: 22px;
@@ -70,55 +69,53 @@ export const flowStateInWorkflowStyle = css `
     justify-content: center;
   }
 `;
-export const flowStateButtonStyle = css `
+export const flowStateButtonStyle = `
   &:not(.add-weights) > span {
     display: -webkit-box;
   }
 `;
-export const stateBtnStyle = css `
+export const stateBtnStyle = `
   height: 22px;
   line-height: 22px;
 `;
-export const noStateStyle = css `
+export const noStateStyle = `
   color: ${fieldLabelColor};
   background: ${themeBgColorBase};
 `;
-export const caretDownStyle = css `
+export const caretDownStyle = `
   padding-left: 2px;
   margin-left: 0;
   line-height: 10px;
 `;
-export const injectStatusViewGlobalStyle = () => {
-    injectGlobal `
-    .field-layout.status-view {
-      position: relative;
-      padding: 10px;
-      margin-top: 10px;
-      font-size: 12px;
-      cursor: pointer;
-      border-top: 1px solid #ddd;
-    }
+export const statusViewGlobalStyle = `
+.field-layout.status-view {
+  position: relative;
+  padding: 10px;
+  margin-top: 10px;
+  font-size: 12px;
+  cursor: pointer;
+  border-top: 1px solid #ddd;
+}
 
-    .field-layout.status-view .status-view-watch {
-      width: 12px;
-      height: 12px;
-      margin-right: 5px;
-      font-size: 12px;
-      vertical-align: middle;
-    }
-  `;
-};
-export const tipLineStyle = css `
+.field-layout.status-view .status-view-watch {
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  font-size: 12px;
+  vertical-align: middle;
+}
+`;
+export const tipLineStyle = `
   margin-bottom: 0;
 `;
-export const tooltipStyle = css `
+export const tooltipStyle = `
   width: 80px;
 `;
-export const iconStyle = css `
+export const iconStyle = `
   padding: 0 6px;
   color: ${gray7};
 `;
-export const stateBoxStyle = css `
+export const stateBoxStyle = `
   display: flex;
   width: 80px;
 
@@ -126,7 +123,7 @@ export const stateBoxStyle = css `
     padding-right: 8px;
   }
 `;
-export const flowBtnStyle = css `
+export const flowBtnStyle = `
   display: flex;
   padding: 5px 10px;
   margin: 0;
@@ -135,18 +132,18 @@ export const flowBtnStyle = css `
     background-color: var(--select-item-selected-bg, #e6f3ff);
   }
 `;
-export const notAllowedStyle = css `
+export const notAllowedStyle = `
   cursor: not-allowed;
   opacity: 0.3;
 `;
-export const pointerStyle = css `
+export const pointerStyle = `
   cursor: pointer;
 `;
-export const spinStyle = css `
+export const spinStyle = `
   width: 150px;
   height: 50px;
 `;
-export const noPermissionStyle = css `
+export const noPermissionStyle = `
   display: block;
   width: 120px;
   padding: 20px 10px 10px;

package/dist/components/fields/story-point/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import EmptyField from '../../common/EmptyField';
 const StoryPointReadView = ({ value, readonly }) => {
     if (!value) {

package/dist/components/fields/tag/ReadView.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { css } from '@emotion/react';
 import { Tag as AntdTag } from 'antd';
 import { isObject } from 'lodash-es';
 import EmptyField from '../../common/EmptyField';
@@ -13,7 +14,7 @@ const TagReadView = memo(({ value }) => {
             })
             : [];
     }, [value]);
-    const content = useMemo(() => tags.length ? (tags.map(item => (_jsx(AntdTag, { className: baseTagStyle, children: _jsx(BaseOverflowTooltip, { title: item, children: item }) }, item)))) : (_jsx(EmptyField, { readonly: true })), [tags]);
+    const content = useMemo(() => tags.length ? (tags.map(item => (_jsx(AntdTag, { css: css(baseTagStyle), children: _jsx(BaseOverflowTooltip, { title: item, children: item }) }, item)))) : (_jsx(EmptyField, { readonly: true })), [tags]);
     return _jsx(_Fragment, { children: content });
 });
 TagReadView.displayName = 'TagReadView';

package/dist/components/fields/tag/style/index.d.ts

@@ -1 +1 @@
-export declare const baseTagStyle: string;
+export declare const baseTagStyle = "\n  max-width: 6em;\n  height: 22px;\n  white-space: normal;\n  vertical-align: middle;\n";

package/dist/components/fields/tag/style/index.js

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const baseTagStyle = css `
+export const baseTagStyle = `
   max-width: 6em;
   height: 22px;
   white-space: normal;

package/dist/components/fields/team/ReadView.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
+import { css } from '@emotion/react';
 import useCurrentWorkspace from '../../../lib/hooks/useCurrentWorkspace';
 import { i18n } from '../../../lib/i18n';
 import EmptyField from '../../common/EmptyField';
@@ -11,7 +12,7 @@ const TeamReadView = memo(({ value, readonly }) => {
     const deleted = value === null || value === void 0 ? void 0 : value.every(team => team.deleted);
     const forbidden = value === null || value === void 0 ? void 0 : value.every(team => !team.enable);
     const { workspaceKey } = useCurrentWorkspace();
-    return (value === null || value === void 0 ? void 0 : value.length) ? (hasName ? (_jsx(BaseOverflowTooltip, { className: forbidden ? forbiddenStyle : undefined, children: (_a = value === null || value === void 0 ? void 0 : value.map(team => (team.enable ? team.name : `${team.name}(${i18n.t('global.columns.forbiddenActive')})`))) === null || _a === void 0 ? void 0 : _a.join(',') })) : deleted ? (_jsx(BaseOverflowTooltip, { className: deletedStyle, children: i18n.t('global.haveDelete') })) : null) : (_jsx(EmptyField, { readonly: readonly || !workspaceKey }));
+    return (value === null || value === void 0 ? void 0 : value.length) ? (hasName ? (_jsx(BaseOverflowTooltip, { css: forbidden ? css(forbiddenStyle) : undefined, children: (_a = value === null || value === void 0 ? void 0 : value.map(team => (team.enable ? team.name : `${team.name}(${i18n.t('global.columns.forbiddenActive')})`))) === null || _a === void 0 ? void 0 : _a.join(',') })) : deleted ? (_jsx(BaseOverflowTooltip, { css: css(deletedStyle), children: i18n.t('global.haveDelete') })) : null) : (_jsx(EmptyField, { readonly: readonly || !workspaceKey }));
 });
 TeamReadView.displayName = 'TeamReadView';
 export default TeamReadView;

package/dist/components/fields/team/style/index.d.ts

@@ -1,2 +1,2 @@
-export declare const forbiddenStyle: string;
-export declare const deletedStyle: string;
+export declare const forbiddenStyle = "\n  text-decoration: line-through;\n";
+export declare const deletedStyle = "\n  text-decoration: line-through;\n";

package/dist/components/fields/team/style/index.js

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const forbiddenStyle = css `
+export const forbiddenStyle = `
   text-decoration: line-through;
 `;
 export const deletedStyle = forbiddenStyle;

package/dist/components/fields/text/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';

package/dist/components/fields/tree/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useMemo, useState } from 'react';
 import { cloneDeep } from 'lodash-es';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/updated-at/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import useDateTimeFormatType from '../../../lib/hooks/useDateTimeFormatType';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/updated-by/ReadView.d.ts

@@ -2,5 +2,5 @@
 import { User as UserTyped } from '../../../lib/types/models';
 declare const UpdatedByReadView: import("react").MemoExoticComponent<({ value }: {
     value: UserTyped;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element>;
 export default UpdatedByReadView;

package/dist/components/fields/updated-by/ReadView.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { generateUserDisplayName, isUserDeleted, isUserDisabled } from '../../../lib/useUser';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
@@ -13,13 +13,10 @@ const UpdatedByReadView = memo(({ value }) => {
         }
         return '';
     }, [value]);
-    const className = useMemo(() => {
-        return cx(usernameStyle, isUserDeleted(value) ? userDeletedStyle : '', isUserDisabled(value) ? userDisabledStyle : '');
-    }, [value]);
     if (!showValue) {
         return _jsx(EmptyField, { readonly: true });
     }
-    return (_jsxs(BaseOverflowTooltip, { title: showValue, maxline: 1, children: [_jsx(UserAvatar, { user: value }), _jsx("span", { className: className, children: showValue })] }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => (_jsxs(BaseOverflowTooltip, { title: showValue, maxline: 1, children: [_jsx(UserAvatar, { user: value }), _jsx("span", { className: cx(css(usernameStyle), isUserDeleted(value) ? css(userDeletedStyle) : '', isUserDisabled(value) ? css(userDisabledStyle) : ''), children: showValue })] })) }));
 });
 UpdatedByReadView.displayName = 'UpdatedByReadView';
 export default UpdatedByReadView;

package/dist/components/fields/user/ReadView.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { generateUserDisplayName, isUserDeleted, isUserDisabled, userDataFormat } from '../../../lib/useUser';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
@@ -10,7 +10,7 @@ const UserReadView = memo(({ value, readonly }) => {
     const displayValues = useMemo(() => {
         return ((value === null || value === void 0 ? void 0 : value.map((val, i) => {
             const item = userDataFormat(val);
-            return (_jsxs("span", { children: [i ? ',' : '', _jsx("span", { className: cx({ [userDeletedStyle]: isUserDeleted(item) }, { [userDisabledStyle]: isUserDisabled(item) }), children: generateUserDisplayName(item) })] }, i));
+            return (_jsxs("span", { children: [i ? ',' : '', _jsx(ClassNames, { children: ({ cx, css }) => (_jsx("span", { className: cx({ [css(userDeletedStyle)]: isUserDeleted(item) }, { [css(userDisabledStyle)]: isUserDisabled(item) }), children: generateUserDisplayName(item) })) })] }, i));
         })) || EMPTY_ARRAY);
     }, [value]);
     if (!displayValues.length) {

package/dist/components/fields/user/style/index.d.ts

@@ -1,3 +1,3 @@
-export declare const userDisabledStyle: string;
-export declare const userDeletedStyle: string;
-export declare const usernameStyle: string;
+export declare const userDisabledStyle = "\n  color: #C1C5CF;\n";
+export declare const userDeletedStyle = "\n  text-decoration: line-through;\n";
+export declare const usernameStyle = "\n  font-size: 14px;\n  line-height: 20px;\n  color: #213053;\n";

package/dist/components/fields/user/style/index.js

@@ -1,12 +1,11 @@
-import { css } from '@emotion/css';
 import { gray6, gray9 } from '../../../../style/common';
-export const userDisabledStyle = css `
+export const userDisabledStyle = `
   color: ${gray6};
 `;
-export const userDeletedStyle = css `
+export const userDeletedStyle = `
   text-decoration: line-through;
 `;
-export const usernameStyle = css `
+export const usernameStyle = `
   font-size: 14px;
   line-height: 20px;
   color: ${gray9};

package/dist/components/fields/user-group/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { isNil, isObject } from 'lodash-es';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/version/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import useCurrentWorkspace from '../../../lib/hooks/useCurrentWorkspace';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/workspace/ReadView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';

package/dist/components/table-components/EditTableCell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { omit } from 'lodash-es';
 const EditTableCell = ({ overlayClsName, itemTypeId, workspaceId, readonly, id, objectId, property, text, Component, handleChange, }) => {

package/dist/components/table-components/index.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { cx } from '@emotion/css';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { css, Global } from '@emotion/react';
 import { isEmpty } from 'lodash-es';
 import EmptyField from '../common/EmptyField';
 import EditTableCell from './EditTableCell';
-import { injectFieldCellGlobalStyle } from './style';
+import { fieldCellGlobalStyle } from './style';
 const reduceObjArr = ({ arr, keys }) => {
     return arr.reduce((accumulatorStr, nextObj) => {
         const nextValue = keys.length > 1 ? `${nextObj[keys[0]]}(${nextObj[keys[1]]})` : nextObj[keys[0]];
@@ -37,10 +37,10 @@ const transferItem = item => {
 };
 const EMPTY_ARRAY = [];
 const defaultValue = {};
-export const TableCell = ({ className, cellData, column, rowData, readComponents = defaultValue, editComponents = defaultValue, handleChange, }) => {
+const BaseTableCell = ({ className, cellData, column, rowData, readComponents = defaultValue, editComponents = defaultValue, handleChange, }) => {
     var _a, _b, _c;
     const [cellEntered, setCellEntered] = useState(false);
-    const cls = cx('field-cell-layout', 'field-layout', className);
+    const cls = `field-cell-layout field-layout ${className}`;
     const timeoutCurrent = useRef();
     const ReadComponent = readComponents[column.cellType] || readComponents[column.componentType];
     const EditComponent = readComponents[column.cellType] || readComponents[column.componentType];
@@ -52,9 +52,6 @@ export const TableCell = ({ className, cellData, column, rowData, readComponents
             }, 50);
         }
     }, [editComponents]);
-    useEffect(() => {
-        injectFieldCellGlobalStyle();
-    }, []);
     if (cellEntered && EditComponent) {
         const { property, data, objectId } = column;
         return (_jsx("div", { className: cls, children: _jsx(EditTableCell, { Component: EditComponent, workspaceId: (_a = rowData.workspace) === null || _a === void 0 ? void 0 : _a.objectId, itemTypeId: (_b = rowData.itemType) === null || _b === void 0 ? void 0 : _b.objectId, property: property, data: data, id: rowData.objectId, readonly: rowData.readonly, objectId: objectId, text: cellData, handleChange: handleChange }) }));
@@ -65,3 +62,6 @@ export const TableCell = ({ className, cellData, column, rowData, readComponents
     const text = transferItem(cellData !== null && cellData !== void 0 ? cellData : rowData[column.dataIndex]);
     return _jsx("div", { className: cls, children: text });
 };
+export const TableCell = props => {
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(fieldCellGlobalStyle) }), _jsx(BaseTableCell, { ...props })] }));
+};

package/dist/components/table-components/style/index.d.ts

@@ -1 +1 @@
-export declare const injectFieldCellGlobalStyle: () => void;
+export declare const fieldCellGlobalStyle = "\n.field-cell-layout {\n  align-items: center;\n  width: 100%;\n}\n";