@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -0,0 +1,135 @@
+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
+import { Tag, Select as AntdSelect } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const SelectWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledSelect = styled(AntdSelect) `
+  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+
+  .antsomi-select-arrow {
+    display: flex;
+    align-items: center;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.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;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
+    }
+  }
+
+  &.antsomi-select-single:not(.antsomi-select-customize-input) .antsomi-select-selector {
+    height: 30px;
+  }
+
+  .antsomi-select-selector {
+    justify-content: space-between;
+    min-height: 30px;
+    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};
+    transition: all 0.3s ease-in;
+
+    &:hover {
+      background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue0};
+    }
+
+    height: ${props => { var _a; return ((_a = props.className) === null || _a === void 0 ? void 0 : _a.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;
+    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;
+      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};
+    }
+
+    .antsomi-select-selection-overflow {
+      row-gap: 5px;
+    }
+  }
+
+  &.antsomi-select-disabled {
+    .antsomi-select-arrow {
+      color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorTextDisabled} !important;
+    }
+
+    .antsomi-tag {
+      opacity: 0.5 !important;
+    }
+  }
+  &.antsomi-select-status-error {
+    border-bottom: solid 1px #ff4d4f !important;
+
+    ::placeholder {
+      color: #ff4d4f !important;
+    }
+  }
+
+  &.left-12 .antsomi-select-selection-placeholder {
+    left: 12px;
+  }
+
+  .antsomi-select-clear {
+    background: transparent;
+  }
+`;
+export const StyledTag = styled(Tag) `
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  width: fit-content !important;
+  height: 24px !important;
+  margin-right: 5px !important;
+  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;
+  cursor: pointer !important;
+
+  .antsomi-tag-close-icon {
+    opacity: 0 !important;
+    position: absolute !important;
+    right: 2px !important;
+    transition: all 0.3s !important;
+  }
+
+  &:hover {
+    .antsomi-tag-close-icon {
+      opacity: 1 !important;
+    }
+  }
+`;
+export const CloseButton = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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};
+`;

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

@@ -1,23 +1,25 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
-import React, { useEffect, useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
 import { updateObjAccessInfo } from './actions';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
+import { formattedAccessInfo } from './utils';
 export const ShareAccess = (props) => {
-    const { accessInfo, userId, onChange, userPermission } = props;
+    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
     const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
         modalTransferOwnership: {
             open: false,
             userToOwnerShipId: -1,
         },
     });
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         if (!accessInfo)
             return;
-        dispatch(updateObjAccessInfo(accessInfo));
+        dispatch(updateObjAccessInfo(formattedAccessInfo(accessInfo)));
     }, [accessInfo]);
-    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { accessUserId: userId, accessUserPermission: userPermission }) },
+    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)))));
 };

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

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const GeneralAccess: () => React.JSX.Element | null;
+import { FC } from 'react';
+import { ShareAccessProps } from '../../types';
+type GeneralAccessProps = Pick<ShareAccessProps, 'generalAccessSettings'>;
+export declare const GeneralAccess: FC<GeneralAccessProps>;
+export {};

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

@@ -6,12 +6,13 @@ import { updateObjAccessInfo } from '../../actions';
 import { GENERAL_ACCESS, PUBLIC_ROLE, ROLE_ACCESS_LABEL } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { StyledGeneralAccessRoot } from './styled';
-export const GeneralAccess = () => {
+export const GeneralAccess = ({ generalAccessSettings }) => {
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     if (!accessInfo)
         return null;
     const { isPublic, publicRole } = accessInfo;
+    const isShowOnlyText = !!(generalAccessSettings === null || generalAccessSettings === void 0 ? void 0 : generalAccessSettings.publicOnlyWith);
     const handleChangeGeneralAccess = (value) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
@@ -32,12 +33,12 @@ export const GeneralAccess = () => {
         dispatch(updateObjAccessInfo(updated));
     };
     const renderDescription = () => {
-        let description = 'Only people with access can open this item.';
+        let description = 'Only people with access can open this item';
         if (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER) {
-            description = 'Anyone on the portal can view this item.';
+            description = 'Anyone on the portal can view this item';
         }
         if (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR) {
-            description = 'Anyone on the portal can edit this item.';
+            description = 'Anyone on the portal can edit this item';
         }
         return description;
     };
@@ -46,7 +47,7 @@ export const GeneralAccess = () => {
         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'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                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 ") }
@@ -58,7 +59,7 @@ export const GeneralAccess = () => {
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
                         allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
                 React.createElement("div", { className: "description" }, renderDescription())),
-            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
                         publicRole === PUBLIC_ROLE.ONLY_VIEWER
                             ? {
@@ -74,5 +75,5 @@ export const GeneralAccess = () => {
                 } },
                 React.createElement("div", { className: "public-role-dropdown-wrapper" },
                     React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
-                    allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" })))))));
+                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))))))));
 };

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

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

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

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

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

@@ -1,19 +1,17 @@
 import React from 'react';
-import { useShareAccess } from '../../hooks';
 import { GeneralAccess } from '../GeneralAccess';
 import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
 import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, allowChangeOnwership = true, allowAddUser = true } = props;
-    const { state } = useShareAccess();
-    const { allowEdit, allowView } = state;
-    if (!allowEdit && !allowView)
-        return null;
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, } = props;
+    // const { state } = useShareAccess();
+    // const { allowEdit, allowView } = state;
+    // if (!allowEdit && !allowView) return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
-        React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
-        React.createElement(GeneralAccess, null),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }),
+        React.createElement(PeopleAccess, { excludeUserAccess: excludeUserAccess }),
+        React.createElement(GeneralAccess, { generalAccessSettings: generalAccessSettings }),
         React.createElement(ModalTransferOwnership, null)));
 };

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

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

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

@@ -1,8 +1,8 @@
 import Icon from '@antscorp/icons';
 import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
-import { remove } from 'lodash';
-import React from 'react';
+import { remove, cloneDeep } from 'lodash';
+import React, { useMemo } from 'react';
 import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { getActionsByUser } from '../../utils';
@@ -14,9 +14,19 @@ const ROLE_BY_ACTIONS = {
     [PEOPLE_ACTION_KEYS.TO_VIEWER]: ROLE_MAPPING.VIEWER,
 };
 export const PeopleAccess = (props) => {
-    const { allowChangeOnwership } = props;
+    const { excludeUserAccess } = 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))
+            return [];
+        const listAccess = cloneDeep((accessInfo === null || accessInfo === void 0 ? void 0 : 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]);
     const handleClickAction = (actKey, updatedUserId) => {
         if (!accessInfo || !dispatch)
             return;
@@ -54,9 +64,10 @@ export const PeopleAccess = (props) => {
     };
     const renderActionItems = (actions) => {
         let hasDivider = false;
-        return actions.flatMap(act => {
+        return actions.flatMap((act, idx) => {
             const items = [];
-            const needDivider = PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key;
+            const needDivider = (PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key) &&
+                actions[idx - 1];
             if (needDivider && !hasDivider) {
                 items.push({ type: 'divider' });
                 items.push({ key: act.key, label: act.label });
@@ -71,22 +82,22 @@ export const PeopleAccess = (props) => {
         return null;
     return (React.createElement(StyledPeopleAccessRoot, null,
         React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
+        React.createElement(List, { dataSource: dataSourceSorted, renderItem: access => {
                 const actions = getActionsByUser({
                     userId: accessUserId,
                     updatedUserId: access.userId,
                     objectAccessInfo: accessInfo,
                     userPermission: accessUserPermission,
                 });
-                if (!allowChangeOnwership) {
-                    remove(actions, act => act.key === PEOPLE_ACTION_KEYS.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" }, access.fullName),
                         React.createElement("div", { className: "email" }, access.email)),
-                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, menu: {
+                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
                             items: renderActionItems(actions),
                             onClick: e => handleClickAction(e.key, access.userId),
                         } },

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

@@ -1,3 +1,5 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
   display: flex;
@@ -9,6 +11,7 @@ export const StyledPeopleAccessRoot = styled.div `
   }
 
   .antsomi-list {
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ShareAccessProps } from '../../types';
-type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
+type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo' | 'placeholder'>;
 export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element | null;
 export {};

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Avatar, Select } from 'antd';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { StyledSearchUserRoot, StyledSelectItem } from './styled';
@@ -17,13 +17,21 @@ import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
 export const SearchUser = (props) => {
-    const { getUserInfo } = props;
+    const { getUserInfo, placeholder } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     const [users, setUsers] = useState([]);
     const [isFetching, setIsFetching] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const debounceSearchTerm = useDebounce(searchTerm, 700);
+    const excludedUsers = useMemo(() => {
+        if (!Array.isArray(users) || !Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        return users.filter(user => {
+            const userIdx = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess.findIndex(item => +item.userId === +user.user_id);
+            return userIdx === -1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess, users]);
     useEffect(() => {
         if (!isEmail(debounceSearchTerm) || !getUserInfo)
             return;
@@ -49,7 +57,7 @@ export const SearchUser = (props) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
         setSearchTerm('');
-        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
+        const existed = accessInfo.listAccess.some(access => +access.userId === +user.user_id);
         if (existed)
             return;
         const updated = produce(accessInfo, draft => {
@@ -58,11 +66,12 @@ export const SearchUser = (props) => {
             draft.listAccess.push(newUser);
         });
         dispatch(updateObjAccessInfo(updated));
+        setUsers([]);
     };
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: "Add people and groups", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+        React.createElement(Select, { showSearch: true, placeholder: placeholder || 'Add people and groups', value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (excludedUsers || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),

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

@@ -3,16 +3,17 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ObjectAccessInfo | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
         } | undefined;
+        excludeUserAccess?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;
         };
     };
-    dispatch: import("react").Dispatch<import("../types").ShareAccessAction> | null;
+    dispatch: import("react").Dispatch<import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ShareAccessAction> | null;
 };

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

@@ -1,4 +1,5 @@
 import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
+import { PEOPLE_ACTION_KEYS } from './constants';
 export type UserInfo = {
     avatar: string;
     full_name: string;
@@ -8,6 +9,7 @@ export type UserInfo = {
     user_type: number;
     ctime: Date;
     utime: Date;
+    [key: string]: any;
 };
 export type UserAccessInfo = {
     userId: number;
@@ -26,6 +28,10 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type ExcludeUserAccess = Array<(typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS]>;
+export type GeneralAccessSettings = {
+    publicOnlyWith?: boolean;
+};
 export type ShareAccessProps = {
     userId?: number;
     userPermission?: {
@@ -34,8 +40,10 @@ export type ShareAccessProps = {
     };
     accessInfo?: ObjectAccessInfo;
     allowAddUser?: boolean;
-    allowChangeOnwership?: boolean;
+    placeholder?: string;
+    excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
+    generalAccessSettings?: GeneralAccessSettings;
     onChange?: (accessInfo: ObjectAccessInfo) => void;
 };
 export type ShareAccessState = {
@@ -45,6 +53,7 @@ export type ShareAccessState = {
         view: number;
         edit: number;
     };
+    excludeUserAccess?: ExcludeUserAccess;
     modalTransferOwnership: {
         open: boolean;
         userToOwnerShipId: number;

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

@@ -1,4 +1,4 @@
-import { ObjectAccessInfo } from './types';
+import { ObjectAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -36,3 +36,19 @@ export declare const getActionsByUser: (args: {
     readonly label: "Remove Access";
     readonly key: "remove_acess";
 })[];
+export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;
+export declare const formattedAccessInfo: (accessInfo: ObjectAccessInfo) => {
+    ownerId: number;
+    listAccess: {
+        userId: number;
+        fullName: string;
+        email: string;
+        avatar: string;
+        role: number;
+        allowView: number;
+        allowEdit: number;
+        allowComment: number;
+    }[];
+    isPublic: number;
+    publicRole: number | null;
+};

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

@@ -1,5 +1,6 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
+import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
         [`${MENU_PERMISSION.NONE}_false`]: false,
@@ -55,3 +56,15 @@ export const getActionsByUser = (args) => {
     }
     return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
 };
+export const initAccessInfoDefault = (userInfo) => ({
+    ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
+    listAccess: [
+        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
+    ],
+    publicRole: PUBLIC_ROLE.ONLY_VIEWER,
+    isPublic: 0,
+});
+export const formattedAccessInfo = (accessInfo) => {
+    var _a;
+    return (Object.assign(Object.assign({}, accessInfo), { ownerId: +((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.ownerId) || -1), listAccess: (_a = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) === null || _a === void 0 ? void 0 : _a.map(user => (Object.assign(Object.assign({}, user), { userId: +user.userId }))) }));
+};

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

@@ -1 +1,6 @@
-export { Tabs } from 'antd';
+/// <reference types="react" />
+export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;

package/es/components/molecules/Tabs/Tabs.js

@@ -1 +1,10 @@
-export { Tabs } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import styled from 'styled-components';
+export const Tabs = styled(AntdTabs) `
+  position: relative;
+  z-index: 1;
+
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+`;