@antscorp/antsomi-ui 2.0.103 → 2.0.104

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

@@ -16,7 +16,8 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, classNames = {}, collapsed: propCollapsed, onToggleCollapse, closable = false, ...restProps } = props;
+    const { btnToogleSize, ...restClassNames } = classNames;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -47,25 +48,29 @@ export const DrawerDetail = props => {
     useEffect(() => {
         if (matchesSmallScreen) {
             toggleCollapseDrawer(false);
+            onToggleCollapse?.(false);
         }
         switch (defaultSize) {
             case 'max':
                 toggleCollapseDrawer(false);
+                onToggleCollapse?.(false);
                 break;
             case 'min':
             default:
                 toggleCollapseDrawer(true);
+                onToggleCollapse?.(true);
                 break;
         }
-    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer, onToggleCollapse]);
     // Get cache collapse from local storage
     useEffect(() => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
         const cachedCollapse = localStorageValues[name || ''];
         if (!isNil(cachedCollapse)) {
             toggleCollapseDrawer(cachedCollapse);
+            onToggleCollapse?.(cachedCollapse);
         }
-    }, [name, toggleCollapseDrawer]);
+    }, [name, toggleCollapseDrawer, onToggleCollapse]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -95,16 +100,22 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    const handleToggleDrawerSize = () => {
+    const handleToggleDrawerSize = useCallback((updatedCollapsed) => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
-        toggleCollapseDrawer(!collapseDrawer);
+        toggleCollapseDrawer(updatedCollapsed ?? !collapseDrawer);
+        onToggleCollapse?.(updatedCollapsed ?? !collapseDrawer);
         /**
          * Set local storage last collapsed
          */
         if (name) {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
-    };
+    }, [collapseDrawer, name, onToggleCollapse, toggleCollapseDrawer]);
+    useEffect(() => {
+        if (propCollapsed !== undefined) {
+            handleToggleDrawerSize(propCollapsed);
+        }
+    }, [propCollapsed, handleToggleDrawerSize]);
     return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,
@@ -117,6 +128,7 @@ export const DrawerDetail = props => {
             motionLeave: false,
         }, classNames: {
             body: 'drawer-detail-body',
+            ...restClassNames,
         }, contentWrapperStyle: {
             transition: 'none',
         }, maskStyle: {
@@ -124,7 +136,7 @@ export const DrawerDetail = props => {
         }, destroyOnClose: destroyOnClose, ...restProps, children: [showCloseIcon && (_jsx("div", { className: "close-btn", ...restOfCloseIcon, onClick: e => {
                     onCloseIconClick(e);
                     onClose(e);
-                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
+                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { className: btnToogleSize, style: {
                     ...(!showMenu && { background: '#ffffff' }),
                 }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { "data-test": "close-btn", ...restOfCloseIcon, 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/DrawerDetail/types.d.ts

@@ -11,6 +11,11 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
     headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
+    classNames?: DrawerProps['classNames'] & {
+        btnToogleSize?: string;
+    };
+    collapsed?: boolean;
+    onToggleCollapse?: (collapsed: boolean) => void;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;

package/es/components/molecules/EditingListV2/components/Loadable.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const Popover: import("react").LazyExoticComponent<(props: {
-    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
+    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
     options: import("../types").Option[];
     selected: string[];
     addButtonLabel: import("react").ReactNode;

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

@@ -5,10 +5,9 @@ import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/mode-css';
 import 'ace-builds/src-noconflict/theme-tomorrow';
 import 'ace-builds/src-noconflict/ext-language_tools';
-interface EditorScriptProps extends IAceEditorProps {
+export interface EditorScriptProps extends IAceEditorProps {
     label?: string | ReactNode;
     expandModalLabel?: string | ReactNode;
     hideExpand?: boolean | ReactNode;
 }
 export declare const EditorScript: React.FC<EditorScriptProps>;
-export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -36,7 +36,11 @@ export const EditorScript = props => {
                     showLineNumbers: true,
                     tabSize: 2,
                     ...setOptions,
-                }, ...restOf, style: { width: '100%', height: aceHeight } }));
+                }, ...restOf, style: {
+                    width: '100%',
+                    height: aceHeight,
+                    ...restOf.style,
+                }, onLoad: e => { } }));
         }
         catch (error) {
             handleError(error, {

package/es/components/molecules/FontSizeInput/index.scss

@@ -0,0 +1,15 @@
+.antsomi-font-size-input-popover {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-popover-inner-content {
+        overflow: auto;
+
+        > ul {
+          max-height: 240px;
+        }
+      }
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Tag } from '@antscorp/antsomi-ui/es/components/atoms/Tag';
+import { Tag } from '../../atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
 export const StyledTag = styled(Tag) `

package/es/components/molecules/SelectAccount/type.d.ts

@@ -11,7 +11,7 @@ type GroupAccountProps = {
     accountText?: string;
 };
 export type SelectAccountWithUsers = {
-    users?: Record<any, string>[];
+    users?: Record<string, any>[];
 };
 export type SelectAccountWithApi = {
     dataAccountsKey?: string;

package/es/components/molecules/TagifyInput/utils.style.js

@@ -189,6 +189,7 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
         }
       `}
   }
+
   &[${NO_VIEW_TAG}='true'] {
     ${({ $tagInvalidIcon }) => $tagInvalidIcon &&
     css `

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -66,7 +66,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     form: import("antd").FormInstance<FormValue>;
     errors: any[] | undefined;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<any>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/label-has-associated-control */
 // Libraries
 import axios from 'axios';
 import clsx from 'clsx';
@@ -402,7 +403,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                     return _jsx("textarea", { ...inputProps });
                 case 'date':
                     // {...inputProps} isShowLabel={false} error={errorMsg}
-                    return (_jsx(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: _jsx(Icon, { type: "icon-ants-angle-left", size: "11" }), nextIcon: _jsx(Icon, { type: "icon-ants-angle-right1", size: "11" }), allowClear: false, suffixIcon: _jsx(Icon, { type: "icon-ants-calendar-picker", size: "24", color: "rgba(0, 0, 0, 0.54)" }) }));
+                    return (_jsx(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: _jsx(Icon, { type: "icon-ants-angle-left", size: 11 }), nextIcon: _jsx(Icon, { type: "icon-ants-angle-right1", size: 11 }), allowClear: false, suffixIcon: _jsx(Icon, { type: "icon-ants-calendar-picker", size: 24, color: "rgba(0, 0, 0, 0.54)" }) }));
                 case 'radio':
                     // return <RadioButtonGroup {...inputProps} />;
                     return (_jsx(StyledRadioGroup, { value: +inputProps.value, onChange: inputProps.onChange, name: inputProps.fieldName, disabled: inputProps.disabled, children: inputProps.arrRadios.map(item => (_jsx(Radio, { value: item.value, children: item.label }, item.value))) }));

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.d.ts

@@ -8,4 +8,4 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 } & import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Select").SelectProps>, any, {}, never>;
-export declare const StyledSelectOption: import("styled-components").StyledComponent<import("antd").TypographyProps, any, {}, never>;
+export declare const StyledSelectOption: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -14,7 +14,7 @@ export const StyledSelect = styled(Select) `
     background: url('~Assets/images/langs/vietnam.png') no-repeat;
   }
 `;
-export const StyledSelectOption = styled(Typography) `
+export const StyledSelectOption = styled(Typography.Text) `
   display: flex !important;
   justify-content: flex-start;
   align-items: center;