@antscorp/antsomi-ui 2.0.15 → 2.0.17

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -126,5 +126,5 @@ export const DrawerDetail = props => {
                     onClose(e);
                 }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
                     ...(!showMenu && { background: '#ffffff' }),
-                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
+                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
 };

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -344,7 +344,7 @@ export function MatchesAny(props) {
     return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: t(translations.apply.title).toString() }), _jsx(Button, { onClick: () => onCancel(), children: t(translations.cancel.title).toString() })] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
 }
 export function MatchesAnySelect(props) {
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -372,12 +372,12 @@ export function MatchesAnySelect(props) {
             },
         }, overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
-        }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), zIndex: 1400, ...popoverProps, children: _jsx(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems?.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
+        }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), zIndex: 1400, ...popoverProps, children: _jsxs(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems?.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
                 maxHeight: 300,
                 overflow: 'auto',
-            }, children: _jsx(Select, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: {
-                    ...dropdownStyle,
-                    display: 'none',
-                    padding: 0,
-                }, loading: loading, ...restProps }) }) }));
+            }, children: [_jsx(Select, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: {
+                        ...dropdownStyle,
+                        display: 'none',
+                        padding: 0,
+                    }, loading: loading, status: props.status || (error ? 'error' : undefined), ...restProps }), !!error && _jsx(Text, { className: 'ant-form-item-explain-error', type: 'danger', children: error })] }) }));
 }

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

@@ -106,6 +106,7 @@ export const MatchesAnyWrapper = styled(props => _jsx(Flex, { ...props })) `
             gap: 10px;
             width: 100%;
             height: 100%;
+            user-select: text;
             overflow: auto;
 
             > .left-content {

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

@@ -52,6 +52,8 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
     selectedListEmptyProps?: EmptyDataProps;
     /** Search value */
     searchValue?: string;
+    /** Error message */
+    error?: string;
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem<TItem>[], selectedTreeData?: MatchesAnyItem<TItem>[]) => void;
     /** Callback function that is called when the search value changes */

package/es/components/molecules/Tree/Tree.js

@@ -3,16 +3,13 @@ import { Tree as AntdTree } from 'antd';
 // styled
 import { StyledTree, StyledTreeDirectory } from './styled';
 // icon
-import { ExpandMoreIcon } from '../../icons';
+import { DraftDocumentIcon, ExpandMoreIcon, FolderCreateNewFolderIcon } from '../../icons';
 const StandardTree = props => {
     const { switcherIcon = _jsx(ExpandMoreIcon, { size: 20 }), ...restProps } = props;
     return _jsx(StyledTree, { switcherIcon: switcherIcon, ...restProps });
     // return <StyledTree switcherIcon={(props) => <ExpandMoreIcon size={20} />} {...restProps} />;
 };
 export const Tree = AntdTree;
-const DirectoryTree = props => {
-    const { switcherIcon = _jsx(ExpandMoreIcon, { size: 20 }), ...restProps } = props;
-    return _jsx(StyledTreeDirectory, { switcherIcon: switcherIcon, ...restProps });
-};
+const DirectoryTree = props => (_jsx(StyledTreeDirectory, { switcherIcon: ({ expanded }) => (_jsx(ExpandMoreIcon, { size: 20, style: !expanded ? { transform: 'rotate(-90deg)' } : undefined })), icon: ({ isLeaf }) => (isLeaf ? _jsx(DraftDocumentIcon, {}) : _jsx(FolderCreateNewFolderIcon, {})), ...props }));
 Tree.DirectoryTree = DirectoryTree;
 Tree.Standard = StandardTree;

package/es/components/organism/AccountProfile/components/AccountSetting/AccountSetting.js

@@ -37,7 +37,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
     const [logo, setLogo] = useState({ url: '' });
     const [logoManual, setLogoManual] = useState({ url: '' });
     const [openChangeEmail, setOpenChangeEmail] = useState(null);
-    const [apiEndpoint] = useState(`${iamDomain}/api/account/index/${accountId}?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`);
+    const [apiEndpoint] = useState(`${iamDomain}api/account/index/${accountId}?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`);
     const saveRef = useRef(false);
     const tempAccountRef = useRef({});
     const readyCheckRef = useRef(false);

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import axios from 'axios';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
+import { useInView } from 'react-intersection-observer';
 // Icons
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
@@ -31,7 +32,14 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 // };
 const InputSearch = props => {
     const { value, onChange, className, onClickRemove } = props;
-    return (_jsxs(InputSearchStyled, { className: className || '', children: [_jsx("input", { className: "input-search-account", placeholder: "Search...", value: value, onChange: e => onChange(e.target.value) }), value ? (_jsx(CloseIcon, { className: "remove-icon", onClick: onClickRemove })) : (_jsx(SearchIcon, { className: "search-icon" }))] }));
+    const inputRef = useRef(null);
+    const { ref: wrapperRef, inView: componentInView } = useInView();
+    useEffect(() => {
+        if (componentInView) {
+            inputRef.current?.focus();
+        }
+    }, [componentInView]);
+    return (_jsxs(InputSearchStyled, { className: className || '', ref: wrapperRef, children: [_jsx("input", { className: "input-search-account", placeholder: "Search...", value: value, onChange: e => onChange(e.target.value), ref: inputRef }), value ? (_jsx(CloseIcon, { className: "remove-icon", onClick: onClickRemove })) : (_jsx(SearchIcon, { className: "search-icon" }))] }));
 };
 export const AccountSharing = props => {
     const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, usePrivilege = true, } = props;
@@ -511,5 +519,5 @@ export const AccountSharing = props => {
                     backgroundColor: THEME.token?.blue1_2,
                     padding: '20px 15px',
                     width: '400px',
-                }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: iamDomain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
+                }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: domain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
 };

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

@@ -106,8 +106,8 @@ export const PackageSharingStyled = styled.div `
 
   background-color: ${THEME.token?.blue1_2};
 
-  min-width: 400px;
-  max-width: 400px;
+  /* min-width: 400px;
+  max-width: 400px; */
 
   .info-account {
     display: flex;

package/es/components/organism/Help/Help.js

@@ -30,7 +30,7 @@ import { expendDefault, formatParams, postCustomEvent } from './utils';
 const antIcon = _jsx(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
 const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoading, { className: "loader-container", height: height, width: width, children: _jsx(Spin, { indicator: antIcon }) }));
 const Help = props => {
-    const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
+    const { configs, triggerType, buttonProps, boundsDraggable, isShowResizeHover, children } = props;
     const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, avatar, } = configs;
     // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
@@ -886,7 +886,7 @@ const Help = props => {
                     onClick: info => handleClick(info),
                 }, 
                 // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
-                trigger: triggerType, placement: "bottomRight", children: children || (_jsx(IconButtonStyled, { children: _jsx(Icon, { type: "icon-ants-help" }) })) }), isShowPopup &&
+                trigger: triggerType, placement: "bottomRight", children: children || (_jsx(IconButtonStyled, { ...buttonProps, children: _jsx(Icon, { type: "icon-ants-help" }) })) }), isShowPopup &&
                 createPortal(_jsx(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                         display: 'flex',
                         flexDirection: 'column',

package/es/components/organism/Help/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { TabPaneProps } from 'antd';
+import { ButtonProps } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 type TriggerTypeDropdown = Array<'hover' | 'contextMenu' | 'click'>;
 type ConfigProps = {
     domain: string;
@@ -30,6 +31,7 @@ export interface AllAppOptionsProps {
     raw?: any;
 }
 export interface IHelpProps {
+    buttonProps?: ButtonProps;
     configs: ConfigProps;
     boundsDraggable?: string;
     isShowResizeHover?: boolean;