@antscorp/antsomi-ui 1.3.5-beta.161 → 1.3.5-beta.162

package/es/components/icons/ExpandMoreRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const ExpandMoreRight: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandMoreRight.js

@@ -0,0 +1,3 @@
+import React, { forwardRef } from 'react';
+export const ExpandMoreRight = forwardRef((props, ref) => (React.createElement("svg", Object.assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    React.createElement("path", { d: "M3.67969 5L0.492188 1.8125L1.89844 0.40625L6.49219 5L1.89844 9.59375L0.492188 8.1875L3.67969 5ZM8.69531 5L5.50781 1.8125L6.91406 0.40625L11.5078 5L6.91406 9.59375L5.50781 8.1875L8.69531 5Z", fill: "currentColor" }))));

package/es/components/icons/index.d.ts

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';

package/es/components/icons/index.js

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';

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

@@ -28,10 +28,10 @@ export declare const CUSTOM_TYPE: {
 };
 export declare const buildOptionAttrArchive: (list: any[], selected: any) => any[];
 export declare const checkStatusAttr: ({ listBO, itemTypeId, listAttribute, field, }: {
-    listBO?: any[] | undefined;
-    itemTypeId?: number | undefined;
-    listAttribute?: any[] | undefined;
-    field?: string | undefined;
+    listBO?: any[];
+    itemTypeId?: number;
+    listAttribute?: any[];
+    field?: string;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -9,7 +9,7 @@ export declare const ACTION_TYPES: {
     readonly apply: "apply";
     readonly resetValue: "reset_value";
 };
-export declare const changeRangeType: (rangeType: string, callback?: ((rangeInfo: RangeInfo) => void) | undefined) => {
+export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
     type: "change_range_type";
     payload: {
         rangeType: string;

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
-    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
+    state: import("../types").ReducerState;
+    action: import("../types").ActionType;
 };

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

@@ -29,7 +29,7 @@ export declare const getDefaultDate: () => {
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
-    limitNumOfDays?: number | undefined;
+    limitNumOfDays?: number;
 }) => RangeValue[];
 export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
     formatStart?: string;
@@ -44,7 +44,7 @@ export declare const combineCurrentValue: (state: ReducerState) => {
 };
 export declare const genTriggerOut: ({ mode, id, }: {
     mode: ReducerState['triggerOut']['mode'];
-    id?: number | undefined;
+    id?: number;
 }) => {
     mode: "auto" | "manual";
     id: number;

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

@@ -10,19 +10,55 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
 import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
 // Constants
-const DRAWER_WIDTH_DEFAULT = 'calc(100vw - 70px)';
+import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { ToggleDrawerSizeButton } from './components';
+import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
 export const DrawerDetail = props => {
-    const { width = DRAWER_WIDTH_DEFAULT, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
-    const { show: showMenu = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    // Props
+    const { width, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
+    const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { onClose = () => { } } = props;
     const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
-    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: fullScreen ? '100vw' : width, classNames: {
+    // Hooks
+    const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
+    // State
+    const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
+    // Effects
+    useEffect(() => {
+        toggleCollapseDrawer(!matchesSmallScreen);
+    }, [matchesSmallScreen, toggleCollapseDrawer]);
+    // Memo
+    const drawerWidth = useMemo(() => {
+        if (fullScreen)
+            return '100vw';
+        if (width)
+            return width;
+        /**
+         * Check if drawer is collapsed
+         * Case 1: Large screen (> 1440px)
+         * Case 2: Small screen (<= 1440px)
+         */
+        switch (collapseDrawer) {
+            case false: {
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MAX_WIDTH;
+                return DRAWER_LARGE_MAX_WIDTH;
+            }
+            case true:
+            default: {
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MIN_WIDTH;
+                return DRAWER_LARGE_MIN_WIDTH;
+            }
+        }
+    }, [collapseDrawer, fullScreen, matchesSmallScreen, width]);
+    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: drawerWidth, classNames: {
             body: 'drawer-detail-body',
         } }),
         showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
@@ -30,7 +66,8 @@ export const DrawerDetail = props => {
                 onClose(e);
             } }),
             React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeInLeft animate__fast" },
+        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
             React.createElement("div", null,
                 showClose && (React.createElement(CloseBtn, { onClick: onClose },
                     React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
@@ -39,6 +76,4 @@ export const DrawerDetail = props => {
             React.createElement(MenuFooter, null, footer))),
         React.createElement(Content, null, children)));
 };
-DrawerDetail.defaultProps = {
-    width: DRAWER_WIDTH_DEFAULT,
-};
+DrawerDetail.defaultProps = {};

package/es/components/molecules/DrawerDetail/components/ToggleDrawerSizeButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ToggleDrawerSizeButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    collapse?: boolean;
+}
+export declare const ToggleDrawerSizeButton: React.FC<ToggleDrawerSizeButtonProps>;
+export {};

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

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import React from 'react';
+import styled from 'styled-components';
+// Icons
+import { ExpandMoreRight } from '../../../icons';
+const { token } = THEME || {};
+/* Styled */
+const StyledToggleButton = styled.div `
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
+  color: ${token === null || token === void 0 ? void 0 : token.bw8};
+  top: 50%;
+  transform: translateY(-50%);
+  left: -5px;
+  cursor: pointer;
+
+  svg {
+    transition: all 300ms;
+    ${({ $collapse }) => $collapse && 'transform: rotate(180deg)'}
+  }
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const ToggleDrawerSizeButton = props => {
+    const { collapse } = props, restProps = __rest(props, ["collapse"]);
+    return (React.createElement(StyledToggleButton, Object.assign({ "$collapse": !!collapse }, restProps),
+        React.createElement(ExpandMoreRight, null)));
+};

package/es/components/molecules/DrawerDetail/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleDrawerSizeButton';

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

@@ -0,0 +1 @@
+export * from './ToggleDrawerSizeButton';

package/es/components/molecules/DrawerDetail/constants.d.ts

@@ -0,0 +1,7 @@
+declare const DRAWER_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_LARGE_MIN_WIDTH = "1370px";
+declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
+declare const BREAK_POINT = "1440px";
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };

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

@@ -0,0 +1,7 @@
+const DRAWER_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_LARGE_MIN_WIDTH = '1370px';
+const DRAWER_LARGE_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_SMALL_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
+const BREAK_POINT = '1440px';
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };

package/es/components/molecules/DrawerDetail/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
+export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("../Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Drawer
@@ -8,10 +8,13 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const { token } = THEME || {};
 export const StyledDrawer = styled(Drawer) `
   &.antsomi-drawer-content {
+    overflow: visible !important;
+
     .drawer-detail-body {
       display: flex;
       width: 100%;
       padding: 0px;
+      overflow: visible;
     }
 
     .close-btn {
@@ -42,7 +45,7 @@ export const Content = styled.div `
 export const LeftMenu = styled.div `
   width: 46px;
   height: 100%;
-  background-color: #eaf1fb;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
   padding: 8px 5px;
   box-sizing: border-box;
   display: flex;
@@ -69,7 +72,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: 10px;
+  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusLG}px;
   background-color: transparent;
   display: flex;
   align-items: center;
@@ -78,7 +81,7 @@ export const MenuItem = styled.div `
   transition: all 0.2s;
 
   * {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+    color: ${token === null || token === void 0 ? void 0 : token.bw8};
   }
 
   i {

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import type { DrawerProps, MenuProps as AntdProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
@@ -11,6 +11,7 @@ export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTM
 }
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;
+    showExpandButton?: boolean;
     showClose?: boolean;
     footer?: ReactNode;
     onClick?: (item: ItemType) => void;

package/es/components/molecules/PreviewModal/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

package/es/components/organism/AlgorithmsSetting/styled.d.ts

@@ -10,7 +10,7 @@ export declare const AlgorithmWrapper: import("styled-components").StyledCompone
     mode: ContentSourceModeView;
 }, never>;
 export declare const StyledSelect: import("styled-components").StyledComponent<{
-    (props: import("@antscorp/antsomi-ui/es/components/molecules/SelectV2").SelectProps): import("react").JSX.Element;
+    (props: import("../../molecules").SelectV2Props): import("react").JSX.Element;
     defaultProps: {
         suffixIcon: import("react").JSX.Element;
         filterOption: (input: any, option: any) => boolean;

package/es/components/organism/ContentSources/provider.d.ts

@@ -9,6 +9,6 @@ export interface ContentSourceProviderProps {
 export declare const ContentSourceProvider: ({ children }: ContentSourceProviderProps) => React.JSX.Element;
 export declare const useContentSourceState: () => ContentSourceState;
 export declare const useContentSourceDispatch: () => React.Dispatch<UpdateGroupAction>;
-export declare const useSelectServiceAuth: () => import("@antscorp/antsomi-ui/es/types").PayloadInfo;
+export declare const useSelectServiceAuth: () => import("../../..").PayloadInfo;
 export declare const useSelectContentSources: () => import("./types").TContentSourceSettings;
 export declare const useSelectModeView: () => import("./types").ContentSourceModeView;

package/es/components/organism/ContentSources/utils.d.ts

@@ -17,11 +17,11 @@ export declare const isCheckStatusAttr: (listBO: any, itemTypeId: any, listAttri
     isDisable: boolean;
 };
 export declare const checkStatusCollection: ({ listBO, itemTypeId, listCollection, field, checkDisable, }: {
-    listBO?: any[] | undefined;
-    itemTypeId?: number | null | undefined;
-    listCollection?: any[] | undefined;
-    field?: string | undefined;
-    checkDisable?: boolean | undefined;
+    listBO?: any[];
+    itemTypeId?: number | null;
+    listCollection?: any[];
+    field?: string;
+    checkDisable?: boolean;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/ColumnSuggestion/index.d.ts

@@ -11,5 +11,5 @@ export declare const WrapperContent: import("styled-components").StyledComponent
 export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const Span: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextField: import("styled-components").StyledComponent<React.FC<import("@antscorp/antsomi-ui/es/components/atoms/Text").TextProps>, any, {}, never>;
+export declare const TextField: import("styled-components").StyledComponent<React.FC<import("../../../../../../atoms/Text").TextProps>, any, {}, never>;
 export {};

package/es/components/organism/LeftMenu/components/ContentMenu/useContentMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useContentMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/organism/LeftMenu/components/DataMenu/useDataMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useDataMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.d.ts

@@ -1,4 +1,4 @@
 export declare const useHomeMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
     onCreateNewTab: () => void;
 };

package/es/components/organism/LeftMenu/components/InsightsMenu/useInsightsMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useInsightsMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/organism/LeftMenu/components/ProfilesMenu/useProfilesMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useProfilesMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/organism/LeftMenu/components/SettingsMenu/useSettingsMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useSettingsMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/organism/LeftMenu/components/TemplatesMenu/useTemplatesMenu.d.ts

@@ -1,3 +1,3 @@
 export declare const useTemplatesMenu: () => {
-    children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    children: import("../../types").TMenuItem[];
 };

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-export declare const TemplateListing: (props: import("@antscorp/antsomi-ui/es/components").TemplateListingProps<{}>) => JSX.Element;
+export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -60,7 +60,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     templateItems: (TTemplateItem | undefined)[];
     openCategoryKeys: string[];
     similarTemplates: (TTemplateItem | undefined)[];
-    templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
+    templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: TSelectTemplateAction | T | undefined;
     previewTemplateCategories: TCategoryItem[];
@@ -68,7 +68,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
     onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
     onChangeOpenCategoryKeys: (openKeys: string[]) => void;
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;

package/es/hooks/index.d.ts

@@ -8,3 +8,5 @@ export * from './useListingItemResize';
 export * from './useToggle';
 export * from './useIsFirstRender';
 export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/es/hooks/index.js

@@ -27,3 +27,5 @@ export * from './useListingItemResize';
 export * from './useToggle';
 export * from './useIsFirstRender';
 export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/es/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/es/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/es/hooks/useMediaQuery.d.ts

@@ -0,0 +1,6 @@
+type UseMediaQueryOptions = {
+    defaultValue?: boolean;
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};

package/es/hooks/useMediaQuery.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+const IS_SERVER = typeof window === 'undefined';
+export function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}

package/es/queries/BusinessObject/useGetListAttributeBO.d.ts

@@ -9,9 +9,7 @@ type GetListAttributeBOProps<T> = {
 export declare const useGetListAttributeBO: <T = Record<string, any>>(apiParams: APIParams, infos: PayloadInfo, props?: GetListAttributeBOProps<T>) => UseQueryResult<T, unknown>;
 export declare const getListAttributeBOQuery: ({ itemTypeIds, url, infos, }: {
     itemTypeIds: (number | null)[];
-} & {
-    url: string;
-} & Record<string, any> & {
+} & APIParams & {
     infos: PayloadInfo;
 }) => Promise<any>;
 export {};

package/es/utils/loadable.d.ts

@@ -3,5 +3,5 @@ interface Opts {
     fallback: React.ReactNode;
 }
 type Unpromisify<T> = T extends Promise<infer P> ? P : never;
-export declare const lazyLoad: <T extends Promise<any>, U extends React.ComponentType<any>>(importFunc: () => T, selectorFunc?: ((s: Unpromisify<T>) => U) | undefined, opts?: Opts) => (props: React.ComponentProps<U>) => JSX.Element;
+export declare const lazyLoad: <T extends Promise<any>, U extends React.ComponentType<any>>(importFunc: () => T, selectorFunc?: (s: Unpromisify<T>) => U, opts?: Opts) => (props: React.ComponentProps<U>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.161",
+  "version": "1.3.5-beta.162",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",