@antscorp/antsomi-ui 2.0.115 → 2.0.117

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

@@ -4,131 +4,131 @@ import styled from 'styled-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 SelectWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
 `;
-export const StyledSelect = styled(AntdSelect) `
-  font-family: ${THEME.token?.fontFamily};
-
-  .antsomi-select-arrow {
-    display: flex;
-    align-items: center;
-    color: ${THEME.token?.colorTextBase} !important;
-  }
-
-  &.antsomi-select-open {
-    .antsomi-select-selector {
-      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;
-    }
-  }
-
-  &.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: ${THEME.token?.fontSize}px;
-    color: ${THEME.token?.colorTextBase};
-    transition: all 0.3s ease-in;
-
-    &:hover {
-      background: ${THEME.token?.blue0};
-    }
-
-    height: ${props => props.className?.includes('select-auto-height') && 'auto'};
-    border-radius: 0px !important;
-    border-style: none !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: ${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: ${THEME.token?.accent};
-      color: ${THEME.token?.accent5};
-      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
-    }
-
-    .antsomi-select-selection-overflow {
-      row-gap: 5px;
-    }
-  }
-
-  &.antsomi-select-disabled {
-    .antsomi-select-arrow {
-      color: ${THEME.token?.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 StyledSelect = styled(AntdSelect) `
+  font-family: ${THEME.token?.fontFamily};
+
+  .antsomi-select-arrow {
+    display: flex;
+    align-items: center;
+    color: ${THEME.token?.colorTextBase} !important;
+  }
+
+  &.antsomi-select-open {
+    .antsomi-select-selector {
+      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;
+    }
+  }
+
+  &.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: ${THEME.token?.fontSize}px;
+    color: ${THEME.token?.colorTextBase};
+    transition: all 0.3s ease-in;
+
+    &:hover {
+      background: ${THEME.token?.blue0};
+    }
+
+    height: ${props => props.className?.includes('select-auto-height') && 'auto'};
+    border-radius: 0px !important;
+    border-style: none !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: ${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: ${THEME.token?.accent};
+      color: ${THEME.token?.accent5};
+      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
+    }
+
+    .antsomi-select-selection-overflow {
+      row-gap: 5px;
+    }
+  }
+
+  &.antsomi-select-disabled {
+    .antsomi-select-arrow {
+      color: ${THEME.token?.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: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
-  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.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 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: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
+  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.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 => (p.borderColor ? p.borderColor : THEME.token?.blue2)};
-  background-color: ${THEME.token?.bw0};
+export const CloseButton = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 26px;
+  border: 2px solid ${p => (p.borderColor ? p.borderColor : THEME.token?.blue2)};
+  background-color: ${THEME.token?.bw0};
 `;

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

@@ -1,17 +1,17 @@
 // Libraries
 import styled, { css } from 'styled-components';
-export const StyledSettingWrapper = styled.div `
-  display: flex;
-
+export const StyledSettingWrapper = styled.div `
+  display: flex;
+
   ${props => props.$vertical
-    ? css `
-          flex-direction: column;
-          margin-top: 5px;
-          margin-bottom: 5px;
+    ? css `
+          flex-direction: column;
+          margin-top: 5px;
+          margin-bottom: 5px;
         `
-    : css `
-          align-items: center;
-          justify-content: space-between;
-          flex-wrap: wrap;
-        `}
+    : css `
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+        `}
 `;

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

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

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

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import { useReducer } from 'react';
+import { memo, useReducer } from 'react';
+import isEqual from 'react-fast-compare';
 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 { safeParseAccessInfo } from './utils';
-export const ShareAccess = (props) => {
-    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
+export const ShareAccess = memo((props) => {
+    const { accessInfo, excludeUserAccess, userId, onChange, userPermission, isLoading } = props;
     const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
         modalTransferOwnership: {
             open: false,
@@ -28,5 +29,6 @@ export const ShareAccess = (props) => {
             excludeUserAccess,
             accessUserId: userId,
             accessUserPermission: userPermission,
+            isLoading,
         }, children: _jsx(ShareAccessDispatchContext.Provider, { value: dispatch, children: _jsx(LayoutContent, { ...props }) }) }));
-};
+}, isEqual);

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

@@ -1,59 +1,59 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const StyledGeneralAccessRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    margin-bottom: 10px;
-  }
-
-  .setting {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: 1px solid #e6e6e6;
-    border-radius: ${THEME.token?.borderRadius}px;
-    padding: 15px;
-
-    /* .icon-angle {
-      font-size: 10px;
-      display: flex;
-      align-items: center;
-    } */
-
-    .accessable-icon {
-      font-size: 28px;
-      color: ${THEME.token?.colorPrimary};
-      display: flex;
-      align-items: center;
-    }
-
-    .general-info {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      margin-left: 15px;
-
-      .general-dropdown-wrapper {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        width: fit-content;
-
-        .accessable-title {
-          font-weight: bold;
-        }
-      }
-    }
-
-    .public-role-dropdown-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      cursor: pointer;
-    }
-  }
+export const StyledGeneralAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 10px;
+  }
+
+  .setting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid #e6e6e6;
+    border-radius: ${THEME.token?.borderRadius}px;
+    padding: 15px;
+
+    /* .icon-angle {
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+    } */
+
+    .accessable-icon {
+      font-size: 28px;
+      color: ${THEME.token?.colorPrimary};
+      display: flex;
+      align-items: center;
+    }
+
+    .general-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-left: 15px;
+
+      .general-dropdown-wrapper {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        width: fit-content;
+
+        .accessable-title {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .public-role-dropdown-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+    }
+  }
 `;

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 export const LayoutContent = (props) => {
     const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, } = props;
-    // const { state } = useShareAccess();
-    // const { allowEdit, allowView } = state;
-    // if (!allowEdit && !allowView) return null;
-    return (_jsxs(StyledLayoutContentRoot, { children: [allowAddUser && _jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
+    const { state } = useShareAccess();
+    const { isLoading } = state;
+    return (_jsx(Spin, { spinning: !!isLoading, children: _jsxs(StyledLayoutContentRoot, { children: [!isLoading && 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/LayoutContent/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-export const StyledLayoutContentRoot = styled.div `
-  font-size: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+export const StyledLayoutContentRoot = styled.div `
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 `;

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

@@ -1,18 +1,18 @@
 import { Modal } from 'antd';
 import styled from 'styled-components';
-export const StyledModal = styled(Modal) `
-  &.antsomi-modal {
-    .antsomi-modal-content {
-      .antsomi-modal-header,
-      .antsomi-modal-body {
-        padding: 12px 12px 0 12px;
-      }
-
-      .antsomi-modal-footer {
-        display: flex;
-        justify-content: flex-start;
-        padding: 10px 12px;
-      }
-    }
-  }
+export const StyledModal = styled(Modal) `
+  &.antsomi-modal {
+    .antsomi-modal-content {
+      .antsomi-modal-header,
+      .antsomi-modal-body {
+        padding: 12px 12px 0 12px;
+      }
+
+      .antsomi-modal-footer {
+        display: flex;
+        justify-content: flex-start;
+        padding: 10px 12px;
+      }
+    }
+  }
 `;

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

@@ -19,7 +19,7 @@ const ROLE_BY_ACTIONS = {
 export const PeopleAccess = (props) => {
     const { excludeUserAccess, hideTransferOwnership } = props;
     const { state, dispatch } = useShareAccess();
-    const { accessInfo, accessUserId, accessUserPermission } = state;
+    const { accessInfo, accessUserId, accessUserPermission, isLoading } = state;
     const dataSourceSorted = useMemo(() => {
         if (!Array.isArray(accessInfo?.listAccess))
             return [];
@@ -86,7 +86,7 @@ export const PeopleAccess = (props) => {
     };
     if (!accessInfo)
         return null;
-    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 => {
+    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: !!isLoading, indicator: _jsx(Spin, {}) }, renderItem: access => {
                     const actions = getActionsByUser({
                         userId: accessUserId,
                         updatedUserId: access.userId,

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

@@ -1,66 +1,66 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const StyledPeopleAccessRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    margin-bottom: 10px;
-  }
-
-  .antsomi-list {
-    border-radius: ${THEME.token?.borderRadius}px;
-    border: 1px solid #e6e6e6;
-
-    .antsomi-list-items {
-      /* padding: 0; */
-      padding: 15px;
-
-      .antsomi-list-item {
-        /* padding: 8px; */
-        padding: 0;
-        margin-bottom: 15px;
-        border: none;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .info {
-          flex: 1;
-          margin-left: 15px;
-
-          .name {
-            font-weight: bold;
-          }
-
-          .email {
-            color: ${THEME?.token?.bw8};
-          }
-        }
-
-        /* .antsomi-avatar {
-          align-self: flex-start;
-        } */
-
-        .role-actions {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-
-        /* .role-actions :not(i) {
-          align-self: flex-start !important;
-        } */
-      }
-    }
-
-    .antsomi-spin-nested-loading:not(:has(ul)) {
-      height: 125px;
-    }
-  }
+export const StyledPeopleAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 10px;
+  }
+
+  .antsomi-list {
+    border-radius: ${THEME.token?.borderRadius}px;
+    border: 1px solid #e6e6e6;
+
+    .antsomi-list-items {
+      /* padding: 0; */
+      padding: 15px;
+
+      .antsomi-list-item {
+        /* padding: 8px; */
+        padding: 0;
+        margin-bottom: 15px;
+        border: none;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .info {
+          flex: 1;
+          margin-left: 15px;
+
+          .name {
+            font-weight: bold;
+          }
+
+          .email {
+            color: ${THEME?.token?.bw8};
+          }
+        }
+
+        /* .antsomi-avatar {
+          align-self: flex-start;
+        } */
+
+        .role-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        /* .role-actions :not(i) {
+          align-self: flex-start !important;
+        } */
+      }
+    }
+
+    .antsomi-spin-nested-loading:not(:has(ul)) {
+      height: 125px;
+    }
+  }
 `;