@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/molecules/SelectV2/index.js

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 // Atoms
 import { RequiredLabel, Spin, Text, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
@@ -21,7 +11,7 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const SelectV2 = (props) => {
-    const { label, children, errorMsg, labelClassname, showCount, maxLength, description, errorArchive, required, focused, containerStyle, labelStyle, isReverseMask } = props, restOf = __rest(props, ["label", "children", "errorMsg", "labelClassname", "showCount", "maxLength", "description", "errorArchive", "required", "focused", "containerStyle", "labelStyle", "isReverseMask"]);
+    const { label, children, errorMsg, labelClassname, showCount, maxLength, description, errorArchive, required, focused, containerStyle, labelStyle, isReverseMask, ...restOf } = props;
     // I18n
     const { t } = i18nInstance;
     const [isFocused, setFocused] = useState(false);
@@ -39,62 +29,49 @@ export const SelectV2 = (props) => {
         }
     }, [focused]);
     const renderRequiredLabel = (label) => {
-        var _a, _b;
         if (required) {
-            return (React.createElement(RequiredLabel, { style: Object.assign({ marginBottom: 5 }, (labelStyle || {})), color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon, isReverseMask: isReverseMask }, label));
+            return (_jsx(RequiredLabel, { style: { marginBottom: 5, ...(labelStyle || {}) }, color: THEME.token?.colorIcon, isReverseMask: isReverseMask, children: label }));
         }
-        return (React.createElement(Text, { style: Object.assign({ marginBottom: 5 }, (labelStyle || {})), color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon }, label));
+        return (_jsx(Text, { style: { marginBottom: 5, ...(labelStyle || {}) }, color: THEME.token?.colorIcon, children: label }));
     };
-    return (React.createElement(SelectWrapper, { style: containerStyle || {} },
-        label && renderRequiredLabel(label),
-        restOf.loading && (React.createElement("div", { style: {
-                position: 'absolute',
-                inset: '0px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: 'white',
-                opacity: '0.9',
-                zIndex: 20,
-            } },
-            React.createElement(Spin, { spinning: true, indicatorSize: 22 }))),
-        React.createElement("div", { style: { width: '100%' } },
-            React.createElement(StyledSelect, Object.assign({}, restOf, { style: Object.assign({ width: '100%' }, (restOf.style || {})), onBlur: e => {
-                    if (!isFocused) {
-                        setFocused(true);
-                    }
-                    props.onBlur && props.onBlur(e);
-                } }), children),
-            (!!showCount || !!description) && (React.createElement("div", { style: {
+    return (_jsxs(SelectWrapper, { style: containerStyle || {}, children: [label && renderRequiredLabel(label), restOf.loading && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: '0px',
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginTop: 6,
-                } },
-                React.createElement(Text, null, description),
-                showCount && (React.createElement(Text, null, `${Array.isArray(restOf.value) ? restOf.value.length : 1}/${maxLength || '1'}`)))),
-            (restOf.status === 'error' && errorMsg) || errorArchive || requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorArchive || errorMsg || requiredMsg)) : null)));
+                    justifyContent: 'center',
+                    background: 'white',
+                    opacity: '0.9',
+                    zIndex: 20,
+                }, children: _jsx(Spin, { spinning: true, indicatorSize: 22 }) })), _jsxs("div", { style: { width: '100%' }, children: [_jsx(StyledSelect, { ...restOf, style: { width: '100%', ...(restOf.style || {}) }, onBlur: e => {
+                            if (!isFocused) {
+                                setFocused(true);
+                            }
+                            props.onBlur && props.onBlur(e);
+                        }, children: children }), (!!showCount || !!description) && (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginTop: 6,
+                        }, children: [_jsx(Text, { children: description }), showCount && (_jsx(Text, { children: `${Array.isArray(restOf.value) ? restOf.value.length : 1}/${maxLength || '1'}` }))] })), (restOf.status === 'error' && errorMsg) || errorArchive || requiredMsg ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorArchive || errorMsg || requiredMsg })) : null] })] }));
 };
 // Custom tag render
 export const tagRender = (props) => {
-    var _a;
     const { label, style, closable, onClose } = props;
     const onPreventMouseDown = (event) => {
         event.preventDefault();
         event.stopPropagation();
     };
-    return (React.createElement(StyledTag, { style: style, onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: React.createElement(CloseButton, { borderColor: style === null || style === void 0 ? void 0 : style.background },
-            React.createElement(Icon, { type: "icon-ants-remove", color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary, size: 10 })) }, label));
+    return (_jsx(StyledTag, { style: style, onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: _jsx(CloseButton, { borderColor: style?.background, children: _jsx(Icon, { type: "icon-ants-remove", color: THEME.token?.colorPrimary, size: 10 }) }), children: label }));
 };
 SelectV2.defaultProps = {
-    suffixIcon: React.createElement(Icon, { type: "icon-ants-expand-more" }),
+    suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more" }),
     filterOption: (input, option) => {
-        var _a;
-        const value = ((_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+        const value = option?.label?.toString() || '';
         return value.toLowerCase().trim().indexOf(input.toLowerCase().trim()) >= 0;
     },
     tagRender: (props) => tagRender(props),
     containerStyle: {},
     labelStyle: {},
-    clearIcon: React.createElement(Icon, { type: "icon-ants-remove-circle", size: 16 }),
+    clearIcon: _jsx(Icon, { type: "icon-ants-remove-circle", size: 16 }),
 };

package/es/components/molecules/SelectV2/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
 // Libraries
 import styled from 'styled-components';
 // Antd components
@@ -11,18 +10,18 @@ export const SelectWrapper = styled.div `
   flex-direction: column;
 `;
 export const StyledSelect = styled(AntdSelect) `
-  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+  font-family: ${THEME.token?.fontFamily};
 
   .antsomi-select-arrow {
     display: flex;
     align-items: center;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase} !important;
+    color: ${THEME.token?.colorTextBase} !important;
   }
 
   &.antsomi-select-open {
     .antsomi-select-selector {
-      background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
-      --tw-shadow: 0 1px 0 0 ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary} !important;
+      background-color: ${THEME.token?.blue0};
+      --tw-shadow: 0 1px 0 0 ${THEME.token?.colorPrimary} !important;
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
         var(--tw-shadow) !important;
     }
@@ -38,33 +37,33 @@ export const StyledSelect = styled(AntdSelect) `
     padding-left: 5px;
     padding-right: 5px;
     font-weight: 400;
-    font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px;
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorTextBase};
+    font-size: ${THEME.token?.fontSize}px;
+    color: ${THEME.token?.colorTextBase};
     transition: all 0.3s ease-in;
 
     &:hover {
-      background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue0};
+      background: ${THEME.token?.blue0};
     }
 
-    height: ${props => { var _a; return ((_a = props.className) === null || _a === void 0 ? void 0 : _a.includes('select-auto-height')) && 'auto'; }};
+    height: ${props => props.className?.includes('select-auto-height') && 'auto'};
     border-radius: 0px !important;
     border-style: none !important;
-    --tw-shadow: 0 1px 0 0 ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1} !important;
+    --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow) !important;
 
     &:active,
     &:focus {
-      background: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0};
-      --tw-shadow: 0 1px 0 0 ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.colorPrimary} !important;
+      background: ${THEME.token?.blue0};
+      --tw-shadow: 0 1px 0 0 ${THEME.token?.colorPrimary} !important;
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
         var(--tw-shadow) !important;
     }
 
     &:disabled {
-      background: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent};
-      color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5};
-      box-shadow: 0 1px 0 0 ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.accent1};
+      background: ${THEME.token?.accent};
+      color: ${THEME.token?.accent5};
+      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
     }
 
     .antsomi-select-selection-overflow {
@@ -74,7 +73,7 @@ export const StyledSelect = styled(AntdSelect) `
 
   &.antsomi-select-disabled {
     .antsomi-select-arrow {
-      color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorTextDisabled} !important;
+      color: ${THEME.token?.colorTextDisabled} !important;
     }
 
     .antsomi-tag {
@@ -107,7 +106,7 @@ export const StyledTag = styled(Tag) `
   padding: 5px 10px !important;
   border-radius: 15px !important;
   border: none !important;
-  background-color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue2} !important;
+  background-color: ${THEME.token?.blue2} !important;
   cursor: pointer !important;
 
   .antsomi-tag-close-icon {
@@ -130,6 +129,6 @@ export const CloseButton = styled.div `
   width: 20px;
   height: 20px;
   border-radius: 26px;
-  border: 2px solid ${p => { var _a; return (p.borderColor ? p.borderColor : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue2); }};
-  background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw0};
+  border: 2px solid ${p => (p.borderColor ? p.borderColor : THEME.token?.blue2)};
+  background-color: ${THEME.token?.bw0};
 `;

package/es/components/molecules/SettingWrapper/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import classNames from 'classnames';
 // Atoms
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -7,14 +8,6 @@ import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { StyledSettingWrapper } from './styled';
 export const SettingWrapper = memo(props => {
     // Props
-    const { label, className, labelClassName, containerStyle, labelStyle, labelColor, vertical, children, } = props;
-    return (React.createElement(StyledSettingWrapper, { className: className, vertical: vertical, style: containerStyle },
-        label && (React.createElement(Text, { className: classNames(labelClassName), color: labelColor, style: labelStyle, title: label }, label)),
-        React.createElement("div", { style: { flexShrink: 0 } }, children)));
+    const { label, className = '', labelClassName = '', containerStyle, labelStyle, labelColor = '#666666', vertical, children, } = props;
+    return (_jsxs(StyledSettingWrapper, { className: className, "$vertical": vertical, style: containerStyle, children: [label && (_jsx(Text, { className: classNames(labelClassName), color: labelColor, style: labelStyle, title: label, children: label })), _jsx("div", { style: { flexShrink: 0 }, children: children })] }));
 });
-SettingWrapper.defaultProps = {
-    label: '',
-    className: '',
-    labelColor: '#666666',
-    labelClassName: '',
-};

package/es/components/molecules/SettingWrapper/styled.d.ts

@@ -1,5 +1,3 @@
-interface StyledSettingWrapperProps {
-    vertical?: boolean;
-}
-export declare const StyledSettingWrapper: import("styled-components").StyledComponent<"div", any, StyledSettingWrapperProps, never>;
-export {};
+export declare const StyledSettingWrapper: import("styled-components").StyledComponent<"div", any, {
+    $vertical?: boolean | undefined;
+}, never>;

package/es/components/molecules/SettingWrapper/styled.js

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 export const StyledSettingWrapper = styled.div `
   display: flex;
 
-  ${props => props.vertical
+  ${props => props.$vertical
     ? css `
           flex-direction: column;
           margin-top: 5px;

package/es/components/molecules/SettingWrapperPopover/index.d.ts

@@ -7,10 +7,4 @@ export type SettingWrapperPopoverProps = {
     popoverProps?: Omit<PopoverProps, 'content'>;
     iconPopover?: React.ReactNode;
 };
-/**
- * Renders a popover wrapper for a setting.
- *
- * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
- * @returns {React.ReactElement} The rendered popover wrapper.
- */
 export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;

package/es/components/molecules/SettingWrapperPopover/index.js

@@ -1,17 +1,12 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SettingWrapper } from '../SettingWrapper';
-import { Button, Icon, Popover } from '../../atoms';
-/**
- * Renders a popover wrapper for a setting.
- *
- * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
- * @returns {React.ReactElement} The rendered popover wrapper.
- */
-export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
-    var _a, _b;
-    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
-        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
-};
-SettingWrapperPopover.defaultProps = {
-    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
-};
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
+export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover = _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-edit-2" }), type: "text" }), }) => (_jsx(SettingWrapper, { label: label, labelStyle: { fontWeight: 'bold', ...(wrapperProps?.labelStyle ?? {}) }, ...(wrapperProps ?? {}), children: _jsx(Popover, { content: children, trigger: ['click'], overlayInnerStyle: {
+            padding: '12px 16px',
+            minWidth: 288,
+            maxHeight: '90vh',
+            overflow: 'auto',
+            ...(popoverProps?.overlayInnerStyle ?? {}),
+        }, ...(popoverProps ?? {}), children: iconPopover }) }));

package/es/components/molecules/ShareAccess/ShareAccess.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ShareAccessProps } from './types';
-export declare const ShareAccess: (props: ShareAccessProps) => React.JSX.Element;
+export declare const ShareAccess: (props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/ShareAccess/ShareAccess.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import React, { useReducer } from 'react';
+import { useReducer } from 'react';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
@@ -22,7 +23,10 @@ export const ShareAccess = (props) => {
             triggerOut: false,
         }));
     }, [accessInfo]);
-    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { excludeUserAccess, accessUserId: userId, accessUserPermission: userPermission }) },
-        React.createElement(ShareAccessDispatchContext.Provider, { value: dispatch },
-            React.createElement(LayoutContent, Object.assign({}, props)))));
+    return (_jsx(ShareAccessStateContext.Provider, { value: {
+            ...state,
+            excludeUserAccess,
+            accessUserId: userId,
+            accessUserPermission: userPermission,
+        }, children: _jsx(ShareAccessDispatchContext.Provider, { value: dispatch, children: _jsx(LayoutContent, { ...props }) }) }));
 };

package/es/components/molecules/ShareAccess/components/GeneralAccess/GeneralAccess.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@antscorp/icons';
 import { Dropdown } from 'antd';
 import produce from 'immer';
-import React from 'react';
 import { updateObjAccessInfo } from '../../actions';
 import { GENERAL_ACCESS, PUBLIC_ROLE, ROLE_ACCESS_LABEL } from '../../constants';
 import { useShareAccess } from '../../hooks';
@@ -12,7 +12,7 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
     if (!accessInfo)
         return null;
     const { isPublic, publicRole } = accessInfo;
-    const isShowOnlyText = !!(generalAccessSettings === null || generalAccessSettings === void 0 ? void 0 : generalAccessSettings.publicOnlyWith);
+    const isShowOnlyText = !!generalAccessSettings?.publicOnlyWith;
     const handleChangeGeneralAccess = (value) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
@@ -42,38 +42,25 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
         }
         return description;
     };
-    return (React.createElement(StyledGeneralAccessRoot, null,
-        React.createElement("div", { className: "title" }, "General access"),
-        React.createElement("div", { className: "setting" },
-            React.createElement(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }),
-            React.createElement("div", { className: "general-info" },
-                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], overlayStyle: { zIndex: 3002 }, destroyPopupOnHide: true, disabled: !allowEdit, menu: {
-                        items: [
-                            isPublic
-                                ? { key: GENERAL_ACCESS.RESTRICTED, label: React.createElement("div", null, "Restricted ") }
-                                : { key: GENERAL_ACCESS.PUBLIC, label: React.createElement("div", null, "Public") },
-                        ],
-                        onClick: v => handleChangeGeneralAccess(+v.key),
-                    } },
-                    React.createElement("div", { className: "general-dropdown-wrapper" },
-                        React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
-                        allowEdit && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } })))),
-                React.createElement("div", { className: "description" }, renderDescription())),
-            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
-                    items: [
-                        publicRole === PUBLIC_ROLE.ONLY_VIEWER
-                            ? {
-                                key: PUBLIC_ROLE.ONLY_EDITOR,
-                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_EDITOR],
-                            }
-                            : {
-                                key: PUBLIC_ROLE.ONLY_VIEWER,
-                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_VIEWER],
-                            },
-                    ],
-                    onClick: v => handleChangePublicRole(+v.key),
-                } },
-                React.createElement("div", { className: "public-role-dropdown-wrapper" },
-                    React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
-                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } }))))))));
+    return (_jsxs(StyledGeneralAccessRoot, { children: [_jsx("div", { className: "title", children: "General access" }), _jsxs("div", { className: "setting", children: [_jsx(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }), _jsxs("div", { className: "general-info", children: [_jsx(Dropdown, { placement: "bottomLeft", trigger: ['click'], overlayStyle: { zIndex: 3002 }, destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                                    items: [
+                                        isPublic
+                                            ? { key: GENERAL_ACCESS.RESTRICTED, label: _jsx("div", { children: "Restricted " }) }
+                                            : { key: GENERAL_ACCESS.PUBLIC, label: _jsx("div", { children: "Public" }) },
+                                    ],
+                                    onClick: v => handleChangeGeneralAccess(+v.key),
+                                }, children: _jsxs("div", { className: "general-dropdown-wrapper", children: [_jsx("div", { className: "accessable-title", children: isPublic ? 'Public' : 'Restricted' }), allowEdit && (_jsx(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } }))] }) }), _jsx("div", { className: "description", children: renderDescription() })] }), !!isPublic && publicRole && (_jsx(Dropdown, { placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
+                            items: [
+                                publicRole === PUBLIC_ROLE.ONLY_VIEWER
+                                    ? {
+                                        key: PUBLIC_ROLE.ONLY_EDITOR,
+                                        label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_EDITOR],
+                                    }
+                                    : {
+                                        key: PUBLIC_ROLE.ONLY_VIEWER,
+                                        label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_VIEWER],
+                                    },
+                            ],
+                            onClick: v => handleChangePublicRole(+v.key),
+                        }, children: _jsxs("div", { className: "public-role-dropdown-wrapper", children: [_jsx("div", { className: "for-title", children: ROLE_ACCESS_LABEL[publicRole] }), allowEdit && !isShowOnlyText && (_jsx(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } }))] }) }))] })] }));
 };

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -1,4 +1,3 @@
-var _a, _b;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledGeneralAccessRoot = styled.div `
@@ -14,7 +13,7 @@ export const StyledGeneralAccessRoot = styled.div `
     align-items: center;
     justify-content: space-between;
     border: 1px solid #e6e6e6;
-    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
+    border-radius: ${THEME.token?.borderRadius}px;
     padding: 15px;
 
     /* .icon-angle {
@@ -25,7 +24,7 @@ export const StyledGeneralAccessRoot = styled.div `
 
     .accessable-icon {
       font-size: 28px;
-      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+      color: ${THEME.token?.colorPrimary};
       display: flex;
       align-items: center;
     }

package/es/components/molecules/ShareAccess/components/LayoutContent/LayoutContent.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ShareAccessProps } from '../../types';
-export declare const LayoutContent: (props: ShareAccessProps) => React.JSX.Element;
+export declare const LayoutContent: (props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/ShareAccess/components/LayoutContent/LayoutContent.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GeneralAccess } from '../GeneralAccess';
 import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
 import { PeopleAccess } from '../PeopleAccess';
@@ -9,9 +9,5 @@ export const LayoutContent = (props) => {
     // const { state } = useShareAccess();
     // const { allowEdit, allowView } = state;
     // if (!allowEdit && !allowView) return null;
-    return (React.createElement(StyledLayoutContentRoot, null,
-        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }),
-        React.createElement(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }),
-        React.createElement(GeneralAccess, { generalAccessSettings: generalAccessSettings }),
-        React.createElement(ModalTransferOwnership, null)));
+    return (_jsxs(StyledLayoutContentRoot, { children: [allowAddUser && _jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
 };

package/es/components/molecules/ShareAccess/components/ModalTransferOwnerShip/ModalTransferOwnerShip.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const ModalTransferOwnership: () => React.JSX.Element;
+export declare const ModalTransferOwnership: () => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/ShareAccess/components/ModalTransferOwnerShip/ModalTransferOwnerShip.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from 'antd';
 import produce from 'immer';
-import React from 'react';
 import { updateModalTransferOwnership, updateObjAccessInfo } from '../../actions';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { useShareAccess } from '../../hooks';
@@ -28,8 +28,14 @@ export const ModalTransferOwnership = () => {
             if (ownerIndex === -1 || userUpdatedIndex === -1) {
                 needUpdate = false;
             }
-            draft.listAccess[ownerIndex] = Object.assign(Object.assign({}, listAccess[ownerIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.EDITOR]);
-            draft.listAccess[userUpdatedIndex] = Object.assign(Object.assign({}, listAccess[userUpdatedIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.OWNER]);
+            draft.listAccess[ownerIndex] = {
+                ...listAccess[ownerIndex],
+                ...ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.EDITOR],
+            };
+            draft.listAccess[userUpdatedIndex] = {
+                ...listAccess[userUpdatedIndex],
+                ...ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.OWNER],
+            };
             draft.ownerId = userToOwnerShipId;
         });
         if (needUpdate) {
@@ -37,7 +43,5 @@ export const ModalTransferOwnership = () => {
         }
         handleClose();
     };
-    return (React.createElement(StyledModal, { closable: false, open: modalTransferOwnership.open, title: "Make this account the owner?", footer: React.createElement(React.Fragment, null,
-            React.createElement(Button, { type: "primary", onClick: handleTransfer }, "Select"),
-            React.createElement(Button, { onClick: handleClose }, "Cancel")) }, "The new owner could remove you. You also might lose the ability to change share settings. Some people will lose access to this item unless this item is shared direcly with them."));
+    return (_jsx(StyledModal, { closable: false, open: modalTransferOwnership.open, title: "Make this account the owner?", footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "primary", onClick: handleTransfer, children: "Select" }), _jsx(Button, { onClick: handleClose, children: "Cancel" })] }), children: "The new owner could remove you. You also might lose the ability to change share settings. Some people will lose access to this item unless this item is shared direcly with them." }));
 };

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import { ShareAccessProps } from '../../types';
 type PeopleAccessProps = Pick<ShareAccessProps, 'excludeUserAccess' | 'hideTransferOwnership'>;
-export declare const PeopleAccess: (props: PeopleAccessProps) => React.JSX.Element | null;
+export declare const PeopleAccess: (props: PeopleAccessProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@antscorp/icons';
 import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
 import { remove, cloneDeep } from 'lodash';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { getActionsByUser } from '../../utils';
@@ -20,15 +21,15 @@ export const PeopleAccess = (props) => {
     const { state, dispatch } = useShareAccess();
     const { accessInfo, accessUserId, accessUserPermission } = state;
     const dataSourceSorted = useMemo(() => {
-        if (!Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+        if (!Array.isArray(accessInfo?.listAccess))
             return [];
-        const listAccess = cloneDeep((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) || []);
+        const listAccess = cloneDeep(accessInfo?.listAccess || []);
         return listAccess.sort((a, b) => {
             if (+a.role === +b.role)
                 return 0;
             return +a.role === 1 ? -1 : 1;
         });
-    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess]);
+    }, [accessInfo?.listAccess]);
     const handleClickAction = (actKey, updatedUserId) => {
         if (!accessInfo || !dispatch)
             return;
@@ -47,12 +48,15 @@ export const PeopleAccess = (props) => {
                 }
                 case PEOPLE_ACTION_KEYS.TO_EDITOR:
                 case PEOPLE_ACTION_KEYS.TO_VIEWER: {
-                    draft.listAccess[updatedUserIndex] = Object.assign(Object.assign({}, accessInfo.listAccess[updatedUserIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_BY_ACTIONS[actKey]]);
+                    draft.listAccess[updatedUserIndex] = {
+                        ...accessInfo.listAccess[updatedUserIndex],
+                        ...ACCESS_PROPERTIES_BY_ROLE[ROLE_BY_ACTIONS[actKey]],
+                    };
                     needDispatchUpdate = true;
                     break;
                 }
                 case PEOPLE_ACTION_KEYS.REMOVE_ACCESS: {
-                    draft === null || draft === void 0 ? void 0 : draft.listAccess.splice(updatedUserIndex, 1);
+                    draft?.listAccess.splice(updatedUserIndex, 1);
                     needDispatchUpdate = true;
                     break;
                 }
@@ -82,33 +86,20 @@ export const PeopleAccess = (props) => {
     };
     if (!accessInfo)
         return null;
-    return (React.createElement(StyledPeopleAccessRoot, null,
-        React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: React.createElement(Spin, null) }, renderItem: access => {
-                var _a;
-                const actions = getActionsByUser({
-                    userId: accessUserId,
-                    updatedUserId: access.userId,
-                    objectAccessInfo: accessInfo,
-                    userPermission: accessUserPermission,
-                    omit: hideTransferOwnership ? ['to_owner'] : [],
-                });
-                if (excludeUserAccess) {
-                    remove(actions, act => excludeUserAccess.includes(act.key));
-                }
-                return (React.createElement(List.Item, null,
-                    React.createElement(Avatar, { src: access.avatar }),
-                    React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" },
-                            REGEX_REMOVE_NAME.test(access.email || '') && (React.createElement("span", { style: { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.red6 } }, "[Deleted account]\u00A0")),
-                            access.fullName || (access === null || access === void 0 ? void 0 : access.name)),
-                        React.createElement("div", { className: "email" }, (_a = access.email) === null || _a === void 0 ? void 0 : _a.replace(REGEX_REMOVE_NAME, ''))),
-                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
-                            items: renderActionItems(actions),
-                            onClick: e => handleClickAction(e.key, access.userId),
-                        } },
-                        React.createElement("div", { className: "role-actions" },
-                            React.createElement("div", { className: "role" }, ROLE_ACCESS_LABEL[access.role] || ''),
-                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20 } }))))));
-            } })));
+    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: _jsx(Spin, {}) }, renderItem: access => {
+                    const actions = getActionsByUser({
+                        userId: accessUserId,
+                        updatedUserId: access.userId,
+                        objectAccessInfo: accessInfo,
+                        userPermission: accessUserPermission,
+                        omit: hideTransferOwnership ? ['to_owner'] : [],
+                    });
+                    if (excludeUserAccess) {
+                        remove(actions, act => excludeUserAccess.includes(act.key));
+                    }
+                    return (_jsxs(List.Item, { children: [_jsx(Avatar, { src: access.avatar }), _jsxs("div", { className: "info", children: [_jsxs("div", { className: "name", children: [REGEX_REMOVE_NAME.test(access.email || '') && (_jsx("span", { style: { color: globalToken?.red6 }, children: "[Deleted account]\u00A0" })), access.fullName || access?.name] }), _jsx("div", { className: "email", children: access.email?.replace(REGEX_REMOVE_NAME, '') })] }), _jsx(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
+                                    items: renderActionItems(actions),
+                                    onClick: e => handleClickAction(e.key, access.userId),
+                                }, children: _jsxs("div", { className: "role-actions", children: [_jsx("div", { className: "role", children: ROLE_ACCESS_LABEL[access.role] || '' }), !!actions.length && (_jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20 } }))] }) })] }));
+                } })] }));
 };