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

package/dist/components/common/EmptyField.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { i18n } from '../../lib/i18n';
 import { gray6 } from '../../style/common';
 const EmptyField = props => {

package/dist/components/common/overflow-tooltip/BaseOverflowTooltip.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { cloneElement, memo, useRef } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { getTooltipMaxlineStyle, tooltipOverflowStyle } from './style';
 const BaseOverflowTooltip = props => {
     const { className, title, children, maxline, style } = props;
@@ -9,13 +9,14 @@ const BaseOverflowTooltip = props => {
         return null;
     }
     const childElement = _jsx("span", { children: children });
-    const content = cloneElement(childElement, {
-        ref: elRef,
-        className: cx(tooltipOverflowStyle, getTooltipMaxlineStyle(maxline), className),
-        style,
-        title: title || '',
-    });
-    return content;
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            return cloneElement(childElement, {
+                ref: elRef,
+                className: cx(css(tooltipOverflowStyle), css(getTooltipMaxlineStyle(maxline)), className),
+                style,
+                title: title || '',
+            });
+        } }));
 };
 BaseOverflowTooltip.defaultProps = {
     className: '',

package/dist/components/common/overflow-tooltip/SimpleOverflowToolTip.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { cx } from '@emotion/css';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import React, { cloneElement } from 'react';
+import { ClassNames } from '@emotion/react';
 import { simpleTooltipStyle } from './style';
 const SimpleOverflowToolTip = ({ title, children, className }) => {
     const contentRef = React.useRef();
-    const content = React.cloneElement(_jsx("span", { children: children }), {
-        ref: contentRef,
-        className: cx(simpleTooltipStyle, className),
-        title,
-    });
-    return content;
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            return cloneElement(_jsx("span", { children: children }), {
+                ref: contentRef,
+                className: cx(css(simpleTooltipStyle), className),
+                title: title || '',
+            });
+        } }));
 };
 export default React.memo(SimpleOverflowToolTip);

package/dist/components/common/overflow-tooltip/style/index.d.ts

@@ -1,3 +1,3 @@
-export declare const tooltipOverflowStyle: string;
-export declare const simpleTooltipStyle: string;
+export declare const tooltipOverflowStyle = "\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n  white-space: pre-line !important;\n  -webkit-box-orient: vertical;\n";
+export declare const simpleTooltipStyle = "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n";
 export declare const getTooltipMaxlineStyle: (n: number) => string;

package/dist/components/common/overflow-tooltip/style/index.js

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const tooltipOverflowStyle = css `
+export const tooltipOverflowStyle = `
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7,13 +6,13 @@ export const tooltipOverflowStyle = css `
   white-space: pre-line !important;
   -webkit-box-orient: vertical;
 `;
-export const simpleTooltipStyle = css `
+export const simpleTooltipStyle = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 export const getTooltipMaxlineStyle = (n) => {
-    return css `
+    return `
     -webkit-line-clamp: ${n};
   `;
 };

package/dist/components/common/style/global.d.ts

@@ -1 +1 @@
-export declare const fieldValueOverlayStyle: string;
+export declare const fieldValueOverlayStyle = "\n  width: 100%;\n";

package/dist/components/common/style/global.js

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
-export const fieldValueOverlayStyle = css `
+export const fieldValueOverlayStyle = `
   width: 100%;
 `;

package/dist/components/common/user-field/UserAvatar.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { getBackgroundColor, getNameBadge } from '../utils';
 import { avatarItemStyle, avatarStyle, defaultAvatarStyle } from './style';
 const UserAvatar = React.memo(({ user, className }) => {
     const avatarUrl = useMemo(() => { var _a; return (_a = user === null || user === void 0 ? void 0 : user.avatar) === null || _a === void 0 ? void 0 : _a.url; }, [user]);
     const displayName = useMemo(() => (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.username), [user]);
     const userBadge = useMemo(() => getNameBadge(displayName), [displayName]);
-    return (_jsx(_Fragment, { children: avatarUrl ? (_jsx("span", { className: cx('avatar-item', avatarItemStyle, avatarStyle, className), style: { backgroundImage: `url(${avatarUrl})` } })) : (_jsx("span", { className: cx('avatar-item', avatarItemStyle, defaultAvatarStyle, className), style: getBackgroundColor(userBadge), children: userBadge })) }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            return avatarUrl ? (_jsx("span", { className: cx('avatar-item', css(avatarItemStyle), css(avatarStyle), css(className)), style: { backgroundImage: `url(${avatarUrl})` } })) : (_jsx("span", { className: cx('avatar-item', css(avatarItemStyle), css(defaultAvatarStyle), css(className)), style: getBackgroundColor(userBadge), children: userBadge }));
+        } }));
 });
 UserAvatar.displayName = 'UserAvatar';
 export default UserAvatar;

package/dist/components/common/user-field/style/index.d.ts

@@ -1,3 +1,3 @@
-export declare const avatarItemStyle: string;
-export declare const avatarStyle: string;
-export declare const defaultAvatarStyle: string;
+export declare const avatarItemStyle = "\n  flex-shrink: 0;\n";
+export declare const avatarStyle = "\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin-right: 3px;\n  vertical-align: middle;\n  background: #fff center/contain no-repeat;\n  border-radius: 50%;\n";
+export declare const defaultAvatarStyle = "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-right: 6px;\n  font-size: 12px;\n  color: #fff;\n  background: #5243aa;\n  border-radius: 50%;\n";

package/dist/components/common/user-field/style/index.js

@@ -1,9 +1,8 @@
-import { css } from '@emotion/css';
 const avatarSize = '20px';
-export const avatarItemStyle = css `
+export const avatarItemStyle = `
   flex-shrink: 0;
 `;
-export const avatarStyle = css `
+export const avatarStyle = `
   display: inline-block;
   width: ${avatarSize};
   height: ${avatarSize};
@@ -12,7 +11,7 @@ export const avatarStyle = css `
   background: #fff center/contain no-repeat;
   border-radius: 50%;
 `;
-export const defaultAvatarStyle = css `
+export const defaultAvatarStyle = `
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/components/fields/actors/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 { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/assignee/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 { Fragment, memo } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import { getArrayValue } from '../../../lib/array';
 import { isUserDeleted, isUserDisabled, userDataFormat } from '../../../lib/useUser';
 import EmptyField from '../../common/EmptyField';
@@ -12,10 +12,10 @@ const AssigneeReadView = memo(({ value, readonly }) => {
     if (!(users === null || users === void 0 ? void 0 : users.length))
         return _jsx(EmptyField, { readonly: readonly, isUser: true });
     const title = users.map(user => user === null || user === void 0 ? void 0 : user.label).join(',');
-    return (_jsx("span", { className: cx(tooltipOverflowStyle, getTooltipMaxlineStyle(1)), title: title, children: users.reduce((prev, user, index) => {
-            const el = (_jsxs(Fragment, { children: [index ? ',' : '', _jsx("span", { className: cx({ [userDeletedStyle]: isUserDeleted(user) }, { [userDisabledStyle]: isUserDisabled(user) }), children: user === null || user === void 0 ? void 0 : user.label })] }, index));
-            return prev.concat(el);
-        }, []) }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => (_jsx("span", { className: cx(css(tooltipOverflowStyle), css(getTooltipMaxlineStyle(1))), title: title, children: users.reduce((prev, user, index) => {
+                const el = (_jsxs(Fragment, { children: [index ? ',' : '', _jsx("span", { className: cx({ [css(userDeletedStyle)]: isUserDeleted(user) }, { [css(userDisabledStyle)]: isUserDisabled(user) }), children: user === null || user === void 0 ? void 0 : user.label })] }, index));
+                return prev.concat(el);
+            }, []) })) }));
 });
 AssigneeReadView.displayName = 'AssigneeReadView';
 export default AssigneeReadView;

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

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { cx } from '@emotion/css';
+import { ClassNames } from '@emotion/react';
 import useI18n from '../../../lib/hooks/useI18n';
 import EmptyField from '../../common/EmptyField';
 import { getTooltipMaxlineStyle, tooltipOverflowStyle } from '../../common/overflow-tooltip/style';
@@ -12,7 +12,9 @@ const BindWorkspaceReadView = memo(props => {
     const { t } = useI18n();
     const { toWorkspacePage } = useToWorkspacePage();
     const [, name, key] = value || defaultValue;
-    return (_jsx(_Fragment, { children: name ? (_jsx("span", { className: cx(tooltipOverflowStyle, getTooltipMaxlineStyle(1), pointerStyle), title: t('pages.fields.default.toWorkspacePage'), onClick: () => toWorkspacePage(key), children: name })) : (_jsx(EmptyField, { readonly: true })) }));
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            return name ? (_jsx("span", { className: cx(css(tooltipOverflowStyle), css(getTooltipMaxlineStyle(1)), css(pointerStyle)), title: t('pages.fields.default.toWorkspacePage'), onClick: () => toWorkspacePage(key), children: name })) : (_jsx(EmptyField, { readonly: true }));
+        } }));
 });
 BindWorkspaceReadView.displayName = 'BindWorkspaceReadView';
 export default BindWorkspaceReadView;

package/dist/components/fields/bind-workspace/style/index.d.ts

@@ -1 +1 @@
-export declare const pointerStyle: string;
+export declare const pointerStyle = "\n  color: #0c62ff;\n  cursor: pointer;\n";

package/dist/components/fields/bind-workspace/style/index.js

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const pointerStyle = css `
+export const pointerStyle = `
   color: #0c62ff;
   cursor: pointer;
 `;

package/dist/components/fields/checkbox/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 { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/created-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/created-by/ReadView.d.ts

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

package/dist/components/fields/created-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 CreatedByReadView = 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 })] })) }));
 });
 CreatedByReadView.displayName = 'CreatedByReadView';
 export default CreatedByReadView;

package/dist/components/fields/data-quote/ReadView.js

@@ -1,5 +1,6 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 import { currentDeleteState, dataQuoteState } from '../../../lib/store/dataQuoteStore';
 import EmptyField from '../../common/EmptyField';
@@ -16,7 +17,7 @@ const DataQuoteReadView = ({ value, userData }) => {
         }
     }, [dataQuoteList, userData === null || userData === void 0 ? void 0 : userData.display, value, currentDeleteItem]);
     const cellDisplay = (dataList === null || dataList === void 0 ? void 0 : dataList.length) ? (dataList.map((item, index) => (_jsxs("span", { children: [item.label, " ", index === dataList.length - 1 ? '' : '、'] }, item.value)))) : (_jsx(EmptyField, { readonly: true }));
-    return (_jsx("div", { className: fieldValueOverlayStyle, children: _jsx(BaseOverflowTooltip, { maxline: 1, children: cellDisplay }) }));
+    return (_jsx("div", { css: css(fieldValueOverlayStyle), children: _jsx(BaseOverflowTooltip, { maxline: 1, children: cellDisplay }) }));
 };
 DataQuoteReadView.displayName = 'DataQuoteReadView';
 export default DataQuoteReadView;

package/dist/components/fields/date/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 { memo, useMemo } from 'react';
 import { getDateType, getFormat } from '../../../lib/date';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/dropdown/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 { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/file/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 { memo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/formula/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 { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/hyper-link/ReadView.js

@@ -1,5 +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 { css } from '@emotion/react';
 import { Popover } from 'antd';
 import EmptyField from '../../common/EmptyField';
 import { hyperLinkItemStyle, hyperLinkListStyle, hyperLinkTipItem } from './style';
@@ -9,8 +10,8 @@ const HyperLinkCell = memo(props => {
         return value === null || value === void 0 ? void 0 : value.filter(item => item === null || item === void 0 ? void 0 : item.value);
     }, [value]);
     const content = useMemo(() => {
-        return list === null || list === void 0 ? void 0 : list.map(item => (_jsx("a", { href: item.value, target: "_blank", rel: "noreferrer", className: hyperLinkTipItem, children: item.label }, item.id)));
+        return list === null || list === void 0 ? void 0 : list.map(item => (_jsx("a", { href: item.value, target: "_blank", rel: "noreferrer", css: css(hyperLinkTipItem), children: item.label }, item.id)));
     }, [list]);
-    return (list === null || list === void 0 ? void 0 : list.length) > 0 ? (_jsx(Popover, { content: content, destroyTooltipOnHide: true, children: _jsx("div", { className: hyperLinkListStyle, children: list.map((item, index) => (_jsxs("a", { href: item.value, target: "_blank", rel: "noreferrer", className: hyperLinkItemStyle, children: [item.label, index + 1 !== list.length && _jsx("span", { children: ",\u00A0" })] }, item.id))) }) })) : (_jsx(EmptyField, { readonly: true }));
+    return (list === null || list === void 0 ? void 0 : list.length) > 0 ? (_jsx(Popover, { content: content, destroyTooltipOnHide: true, children: _jsx("div", { css: css(hyperLinkListStyle), children: list.map((item, index) => (_jsxs("a", { href: item.value, target: "_blank", rel: "noreferrer", css: css(hyperLinkItemStyle), children: [item.label, index + 1 !== list.length && _jsx("span", { children: ",\u00A0" })] }, item.id))) }) })) : (_jsx(EmptyField, { readonly: true }));
 });
 export default HyperLinkCell;

package/dist/components/fields/hyper-link/style/index.d.ts

@@ -1,3 +1,3 @@
-export declare const hyperLinkListStyle: string;
-export declare const hyperLinkItemStyle: string;
-export declare const hyperLinkTipItem: string;
+export declare const hyperLinkListStyle = "\n  display: flex;\n  width: 100%;\n";
+export declare const hyperLinkItemStyle = "\n  \n  display: flex;\n  width: 100%;\n & {\n    overflow: hidden;\n    color: @blue-6;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    -webkit-line-clamp: 1;\n  }\n";
+export declare const hyperLinkTipItem = "\n  display: block;\n  color: #0c62ff;\n";

package/dist/components/fields/hyper-link/style/index.js

@@ -1,10 +1,9 @@
-import { css } from '@emotion/css';
 import { blue6 } from '../../../../style/common';
-export const hyperLinkListStyle = css `
+export const hyperLinkListStyle = `
   display: flex;
   width: 100%;
 `;
-export const hyperLinkItemStyle = css `
+export const hyperLinkItemStyle = `
   ${hyperLinkListStyle} & {
     overflow: hidden;
     color: @blue-6;
@@ -13,7 +12,7 @@ export const hyperLinkItemStyle = css `
     -webkit-line-clamp: 1;
   }
 `;
-export const hyperLinkTipItem = css `
+export const hyperLinkTipItem = `
   display: block;
   color: ${blue6};
 `;

package/dist/components/fields/item-group/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 ItemGroupReadView = ({ value }) => {
     return _jsx(_Fragment, { children: (value === null || value === void 0 ? void 0 : value.name) || _jsx(EmptyField, { readonly: true }) });

package/dist/components/fields/item-type/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 { memo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

package/dist/components/fields/key/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 { memo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';

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

@@ -1,10 +1,11 @@
-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 } from 'react';
+import { css } from '@emotion/react';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
 import { whiteSpacePreStyle } from './style';
 const LongTextReadView = memo(({ value, readonly }) => {
-    return (_jsx(_Fragment, { children: value ? (_jsx(BaseOverflowTooltip, { maxline: 1, children: _jsx("span", { className: whiteSpacePreStyle, dangerouslySetInnerHTML: { __html: value } }) })) : (_jsx(EmptyField, { readonly: readonly })) }));
+    return (_jsx(_Fragment, { children: value ? (_jsx(BaseOverflowTooltip, { maxline: 1, children: _jsx("span", { css: css(whiteSpacePreStyle), dangerouslySetInnerHTML: { __html: value } }) })) : (_jsx(EmptyField, { readonly: readonly })) }));
 });
 LongTextReadView.displayName = 'LongTextReadView';
 export default LongTextReadView;

package/dist/components/fields/long-text/style/index.d.ts

@@ -1 +1 @@
-export declare const whiteSpacePreStyle: string;
+export declare const whiteSpacePreStyle = "\n  padding-top: 5px;\n  padding-bottom: 5px;\n  word-break: break-all;\n  white-space: pre-wrap;\n";

package/dist/components/fields/long-text/style/index.js

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const whiteSpacePreStyle = css `
+export const whiteSpacePreStyle = `
   padding-top: 5px;
   padding-bottom: 5px;
   word-break: break-all;

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

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

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo, useCallback, useMemo } from 'react';
+import { css } from '@emotion/react';
 import { HollowCircleIcon } from '../../../icons';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
@@ -11,7 +12,7 @@ const PriorityReadView = memo(({ value, options, readonly }) => {
         });
     }, []);
     const showData = useMemo(() => { var _a; return (_a = filterData(options, value)) === null || _a === void 0 ? void 0 : _a[0]; }, [filterData, options, value]);
-    return (_jsx(_Fragment, { children: showData ? (_jsxs("div", { className: cellBoxStyle, children: [_jsx(HollowCircleIcon, { className: colorIconStyle, style: { color: showData.color } }), _jsx(BaseOverflowTooltip, { title: showData.name, children: showData.name })] })) : (_jsx("div", { className: emptyTextStyle, children: _jsx(EmptyField, { readonly: readonly }) })) }));
+    return (_jsx(_Fragment, { children: showData ? (_jsxs("div", { css: css(cellBoxStyle), children: [_jsx(HollowCircleIcon, { css: css(colorIconStyle), style: { color: showData.color } }), _jsx(BaseOverflowTooltip, { title: showData.name, children: showData.name })] })) : (_jsx("div", { css: css(emptyTextStyle), children: _jsx(EmptyField, { readonly: readonly }) })) }));
 });
 PriorityReadView.displayName = 'PriorityReadView';
 export default PriorityReadView;

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

@@ -1,3 +1,3 @@
-export declare const cellBoxStyle: string;
-export declare const emptyTextStyle: string;
-export declare const colorIconStyle: string;
+export declare const cellBoxStyle = "\n  display: flex;\n  align-items: center;\n  line-height: unset;\n\n  .ant-dropdown-menu-title-content {\n    display: flex;\n    align-items: center;\n    max-width: 150px;\n\n    .anticon {\n      flex-shrink: 0;\n    }\n\n    & > span {\n      white-space: pre-line;\n    }\n  }\n";
+export declare const emptyTextStyle = "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n";
+export declare const colorIconStyle = "\n  margin-right: 5px;\n  font-size: 12px;\n";

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

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-export const cellBoxStyle = css `
+export const cellBoxStyle = `
   display: flex;
   align-items: center;
   line-height: unset;
@@ -18,13 +17,13 @@ export const cellBoxStyle = css `
     }
   }
 `;
-export const emptyTextStyle = css `
+export const emptyTextStyle = `
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
 `;
-export const colorIconStyle = css `
+export const colorIconStyle = `
   margin-right: 5px;
   font-size: 12px;
 `;

package/dist/components/fields/radio/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/reporter/ReadView.d.ts

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

package/dist/components/fields/reporter/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 ReporterReadView = memo(({ value, readonly }) => {
         }
         return '';
     }, [value]);
-    const className = useMemo(() => {
-        return cx(usernameStyle, isUserDeleted(value) ? userDeletedStyle : '', isUserDisabled(value) ? userDisabledStyle : '');
-    }, [value]);
     if (!showValue) {
         return _jsx(EmptyField, { readonly: readonly });
     }
-    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 })] })) }));
 });
 ReporterReadView.displayName = 'ReporterReadView';
 export default ReporterReadView;

package/dist/components/fields/script/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 { memo, useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import { translateScript } from './BaseField';

package/dist/components/fields/sprint/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 { useMemo } from 'react';
 import EmptyField from '../../common/EmptyField';
 const SprintReadView = ({ value, readonly }) => {

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from 'react';
-import { cx } from '@emotion/css';
 import ReadView from './ReadView';
 import Transition from './Transition';
 const StatusCell = React.memo(props => {
-    const { overlayClsName, itemId, readonly, value, workspaceId, itemTypeId, onChange } = props;
+    const { overlayClsName = '', itemId, readonly, value, workspaceId, itemTypeId, onChange } = props;
     const [showData, setShowData] = useState(value);
     useEffect(() => {
         setShowData(value);
@@ -13,7 +12,7 @@ const StatusCell = React.memo(props => {
         setShowData({ objectId, name, type });
         onChange === null || onChange === void 0 ? void 0 : onChange({ objectId, name, type });
     }, [onChange]);
-    return (_jsx("div", { className: cx(overlayClsName, 'field-cell-layout', 'field-layout', { pointer: !readonly }), children: readonly ? (_jsx(ReadView, { value: showData, readonly: true })) : (_jsx(Transition, { itemId: itemId, ...showData, apply: "cell", workspace: workspaceId, itemType: itemTypeId, onTransitionSuccess: handleChange })) }));
+    return (_jsx("div", { className: `${overlayClsName} field-cell-layout field-layout ${!readonly ? 'pointer' : ''}`, children: readonly ? (_jsx(ReadView, { value: showData, readonly: true })) : (_jsx(Transition, { itemId: itemId, ...showData, apply: "cell", workspace: workspaceId, itemType: itemTypeId, onTransitionSuccess: handleChange })) }));
 });
 StatusCell.displayName = 'StatusCell';
 export default StatusCell;

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React, { useMemo } from 'react';
+import { css } from '@emotion/react';
 import { WorkFlowStatusColor } from '../../../lib/global';
 import EmptyField from '../../common/EmptyField';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
@@ -16,7 +17,7 @@ const StatusReadView = React.memo(({ value: showData, readonly }) => {
     if (!showValue) {
         return _jsx(EmptyField, { readonly: readonly });
     }
-    return (_jsx(BaseOverflowTooltip, { style: style, title: showValue, className: readViewWrapper, maxline: 1, children: showValue }));
+    return (_jsx(BaseOverflowTooltip, { style: style, title: showValue, css: css(readViewWrapper), maxline: 1, children: showValue }));
 });
 StatusReadView.displayName = 'StatusReadView';
 export default StatusReadView;