@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/organism/LeftMenu/styled.js

@@ -7,229 +7,231 @@ import { ICON_SIZE } from './constants';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 const { bw8, bw3, borderRadiusXL, blue1_2, blue7 } = globalToken || {};
-export const IconWrapper = styled.div `
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  i {
-    font-size: ${ICON_SIZE}px;
-    color: ${bw8};
-  }
+export const IconWrapper = styled.div `
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: ${ICON_SIZE}px;
+    color: ${bw8};
+  }
 `;
-export const PopoverWrapper = styled.div `
+export const PopoverWrapper = styled.div `
   ${({ show }) => show
-    ? `
-      opacity: 1;
-      visibility: visible;
+    ? `
+      opacity: 1;
+      visibility: visible;
       `
-    : `
-      opacity: 0;
-      visibility: hidden;
-    `}
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  position: absolute;
-  background-color: white;
-  left: 65px;
-  border-radius: ${borderRadiusXL}px;
-  bottom: 15px;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
-  transition:
-    visibility 0s,
-    opacity 0.2s ease-out;
-  z-index: 10;
-  padding: 10px;
-  box-sizing: border-box;
+    : `
+      opacity: 0;
+      visibility: hidden;
+    `}
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  position: absolute;
+  background-color: white;
+  left: 65px;
+  border-radius: ${borderRadiusXL}px;
+  bottom: 15px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-out;
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
 `;
-export const FeatureMenuWrapper = styled(Flex) `
-  flex: 1 1 0%;
-  overflow: hidden;
+export const FeatureMenuWrapper = styled(Flex) `
+  flex: 1 1 0%;
+  overflow: hidden;
 `;
-export const ExpandWrapper = styled.div `
-  height: 35px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid ${bw3};
-  padding: 0 10px;
+export const ExpandWrapper = styled.div `
+  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid ${bw3};
+  padding: 0 10px;
 `;
-export const LeftMenuNavWrapper = styled.div `
-  height: 100vh;
-  display: flex;
-  transition: all 0.2s ease-out;
-
-  ${p => !p.$show && 'display: none;'}
-
-  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
+export const LeftMenuNavWrapper = styled.div `
+  height: 100vh;
+  display: flex;
+  transition: all 0.2s ease-out;
+
+  ${p => !p.$show && 'display: none;'}
+
+  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
 `;
-export const NavLogoWrapper = styled(Flex) `
-  height: ${HEADER_HEIGHT}px;
-  flex-shrink: 0;
-
-  .image-wrapper {
-    height: 30px;
-    width: 30px;
-
-    img {
-      height: 100%;
-      width: 100%;
-    }
-  }
+export const NavLogoWrapper = styled(Flex) `
+  height: ${HEADER_HEIGHT}px;
+  flex-shrink: 0;
+
+  .image-wrapper {
+    height: 30px;
+    width: 30px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
 `;
-export const LeftMenuNav = styled.nav `
-  position: relative;
-  width: 70px;
-  height: 100%;
-  background-color: ${blue1_2};
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border-right: 1px solid ${bw3};
-
-  ${ExpandWrapper} {
-    flex-shrink: 0;
-  }
+export const LeftMenuNav = styled.nav `
+  position: relative;
+  width: 70px;
+  height: 100%;
+  background-color: ${blue1_2};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid ${bw3};
+
+  ${ExpandWrapper} {
+    flex-shrink: 0;
+  }
 `;
-export const FeatureMenu = styled.ul `
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow-x: hidden;
-
-  &.antsomi-scroll-box {
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  .menu-content {
-    flex-shrink: 0;
-
-    &.scroll-content {
-      margin-right: 0px !important;
-    }
-  }
-
-  .nav-blank {
-    flex: 1 1 0%;
-  }
+export const FeatureMenu = styled.ul `
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  &.antsomi-scroll-box {
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  .menu-content {
+    flex-shrink: 0;
+
+    &.scroll-content {
+      margin-right: 0px !important;
+    }
+  }
+
+  .nav-blank {
+    flex: 1 1 0%;
+  }
 `;
-export const FeatureMenuItem = styled.div `
-  width: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-
-  .menu-link {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  li {
-    width: 100%;
-    cursor: pointer;
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: ${borderRadiusXL}px;
-    padding: 5px 0;
-    position: relative;
-
-    &::before {
-      display: none !important;
-    }
-
-    span {
-      font-size: 11px !important;
-      font-weight: 500;
-      color: inherit;
-    }
-
-    .menu-item__icon {
-      color: ${globalToken?.bw8};
-      margin-bottom: 3px;
-    }
-
-    &.isHover,
-    &.isActive {
-      ${IconWrapper},
-      span {
-        color: ${blue7};
-
-        i {
-          color: inherit !important;
-        }
-      }
-
-      .menu-item__icon {
-        color: ${blue7};
-      }
-    }
-
-    &.isActive {
-      background-color: #d3e3fd !important;
-    }
-
-    &.isHover {
-      background-color: #ffffffcc;
-
-      .popup-triangle {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    .popup-triangle {
-      opacity: 0;
-      visibility: hidden;
-      right: -6px;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 1px 9px 10px 10px;
-      border-color: transparent transparent white transparent;
-      transform: rotate(270deg);
-      z-index: 100;
-    }
-  }
+export const FeatureMenuItem = styled.div `
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${borderRadiusXL}px;
+    padding: 5px 0;
+    position: relative;
+
+    &::before {
+      display: none !important;
+    }
+
+    span {
+      font-size: 11px !important;
+      font-weight: 500;
+      color: inherit;
+      width: 100%;
+      text-align: center;
+    }
+
+    .menu-item__icon {
+      color: ${globalToken?.bw8};
+      margin-bottom: 3px;
+    }
+
+    &.isHover,
+    &.isActive {
+      ${IconWrapper},
+      span {
+        color: ${blue7};
+
+        i {
+          color: inherit !important;
+        }
+      }
+
+      .menu-item__icon {
+        color: ${blue7};
+      }
+    }
+
+    &.isActive {
+      background-color: #d3e3fd !important;
+    }
+
+    &.isHover {
+      background-color: #ffffffcc;
+
+      .popup-triangle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .popup-triangle {
+      opacity: 0;
+      visibility: hidden;
+      right: -6px;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 1px 9px 10px 10px;
+      border-color: transparent transparent white transparent;
+      transform: rotate(270deg);
+      z-index: 100;
+    }
+  }
 `;
-export const ChildMenuWrapper = styled.div `
-  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
-  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
-  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
-  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
-  transition:
-    width 0.2s,
-    padding 0.2s ease;
-  padding-left: 0px;
-  box-sizing: border-box;
-  z-index: 1;
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
+export const ChildMenuWrapper = styled.div `
+  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
+  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
+  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
+  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
+  transition:
+    width 0.2s,
+    padding 0.2s ease;
+  padding-left: 0px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
 `;

package/es/components/organism/LeftMenu/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
@@ -37,6 +38,12 @@ export interface LeftMenuProps {
     style?: React.CSSProperties;
     className?: string;
     showLogo?: boolean;
+    /**
+     * Custom content rendered at the bottom of the primary menu rail.
+     * When provided, it replaces the default Settings item and Expand button.
+     * Pass `null` to hide the default footer without rendering a replacement.
+     */
+    footer?: ReactNode;
     customization?: {
         type?: TLeftMenuType;
         showButtonExpand?: boolean;

package/es/components/organism/LeftMenu/utils/index.js

@@ -84,7 +84,7 @@ export const recursivePermissionMenu = (menuItems, menuPermissions) => {
         ...item,
         ...(isArray(item.children)
             ? {
-                children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), menuPermissions),
+                children: recursivePermissionMenu(sortBy(item.children || [], [item => Number(item.level_position)]), menuPermissions),
             }
             : {}),
     }))

package/es/components/organism/Login/Login.js

@@ -17,6 +17,7 @@ import { LoginSelectPortal, LoginWithGG, SignIn, VerifyAccount, SetupGGAuthentic
 import { useContainerDimensions } from './hooks';
 // Utils
 import { checkURL, navigateTo } from './utils';
+import { createCrossSubdomainCookieOptions } from '@antscorp/antsomi-ui/es/utils/crossSubdomainCookieOptions';
 import { LOGIN_METHODS, STEPS } from './constants';
 import { LoginBannerZone, LoginMain, WrapperLogin } from './styled';
 export const Login = props => {
@@ -208,7 +209,10 @@ export const Login = props => {
                             if (menus && menus.length) {
                                 handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                                 if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                                    onLoginSuccess(dataLogin);
+                                    onLoginSuccess({
+                                        ...dataLogin,
+                                        networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                    });
                                     setLoadingSkip(false);
                                 }
                                 else if (isCallbackUrl && callbackUrl) {
@@ -242,7 +246,10 @@ export const Login = props => {
                                         handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                                         setLoadingSkip(false);
                                         if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                                            onLoginSuccess(dataLogin);
+                                            onLoginSuccess({
+                                                ...dataLogin,
+                                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                            });
                                         }
                                         else if (isCallbackUrl && callbackUrl) {
                                             navigateTo(callbackUrl);
@@ -263,7 +270,10 @@ export const Login = props => {
                         setLoadingSkip(false);
                         handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                         if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                            onLoginSuccess(dataLogin);
+                            onLoginSuccess({
+                                ...dataLogin,
+                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                            });
                         }
                         else if (isCallbackUrl && callbackUrl) {
                             navigateTo(callbackUrl);
@@ -430,7 +440,6 @@ export const Login = props => {
         if (postParam.error && postParam.error !== '') {
         }
         else {
-            const arrTmp = window.location.hostname.split('.');
             if (postParam.action === 'ogs-authenticate') {
                 const loginData = { ...postParam, type: 'all_account' };
                 if (loginData.hasOwnProperty('full_name')) {
@@ -454,38 +463,12 @@ export const Login = props => {
                         ? u_ogs
                         : `${u_ogs}_${selectedNetworkRef.current?.networkId}`;
                     const maxAge = 30 * 24 * 3600;
-                    if (window.location.protocol !== 'https:') {
-                        if (arrTmp.length < 4) {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-2).join('.'),
-                                path: '/; samesite=None',
-                                maxAge,
-                            });
-                        }
-                        else {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-3).join('.'),
-                                path: '/; samesite=None',
-                                maxAge,
-                            });
-                        }
-                    }
-                    else {
-                        if (arrTmp.length < 4) {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-2).join('.'),
-                                path: '/; samesite=None; secure',
-                                maxAge,
-                            });
-                        }
-                        else {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-3).join('.'),
-                                path: '/; samesite=None; secure',
-                                maxAge,
-                            });
-                        }
-                    }
+                    const cookieOptions = createCrossSubdomainCookieOptions({
+                        hostname: window.location.hostname,
+                        protocol: window.location.protocol,
+                        maxAge,
+                    });
+                    setCookie(cookieKey, JSON.stringify(loginData), cookieOptions);
                 }
             }
             if (doPostEvent) {

package/es/components/organism/Login/components/ChooseMethod/styled.js

@@ -1,24 +1,24 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
 `;
-export const SubTitle = styled.span `
-  color: #005eb8;
-  font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
-  font-weight: 500;
+export const SubTitle = styled.span `
+  color: #005eb8;
+  font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
+  font-weight: 500;
 `;
-export const BlockMethod = styled(Flex) `
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
-  border-radius: 10px;
-
-  opacity: ${props => (props.disable ? '0.5' : '1')};
-
-  &:hover {
-    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
-  }
+export const BlockMethod = styled(Flex) `
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  border-radius: 10px;
+
+  opacity: ${props => (props.disable ? '0.5' : '1')};
+
+  &:hover {
+    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  }
 `;

package/es/components/organism/Login/components/ForgotPassword/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const TextButton = styled.div `
-  text-align: center;
-  color: #005eb8;
-  font-weight: 700;
-
-  :hover {
-    cursor: pointer;
-  }
+export const TextButton = styled.div `
+  text-align: center;
+  color: #005eb8;
+  font-weight: 700;
+
+  :hover {
+    cursor: pointer;
+  }
 `;