@antscorp/antsomi-ui 1.3.5-common.2 → 1.3.5-common.4

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

@@ -0,0 +1,27 @@
+export const FIELD_DATA_TYPE = {
+    NUMBER: {
+        label: 'Number',
+        name: 'number',
+        value: 2,
+    },
+    STRING: {
+        label: 'String',
+        name: 'string',
+        value: 1,
+    },
+    TEXT: {
+        label: 'Text',
+        name: 'text',
+        value: 1,
+    },
+    DATE_TIME: {
+        label: 'Datetime',
+        name: 'datetime',
+        value: 5,
+    },
+    BOOLEAN: {
+        label: 'Boolean',
+        name: 'boolean',
+        value: 17,
+    },
+};

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

@@ -1 +1,3 @@
-export { SearchPopover, SearchPopoverProps } from './SearchPopover';
+export { PopoverAddField } from './components';
+export { SearchPopover } from './SearchPopover';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './types';

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

@@ -1 +1,2 @@
+export { PopoverAddField } from './components';
 export { SearchPopover } from './SearchPopover';

package/es/components/molecules/SearchPopover/styles.scss

@@ -17,10 +17,12 @@
           background: transparent;
           font-size: 20px;
           padding: 0;
+          min-width: 25px;
 
           > i {
             font-size: 24px;
             color: #595959;
+            cursor: pointer;
           }
         }
       }

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

@@ -0,0 +1,18 @@
+import { PopoverProps } from 'antd';
+import { InputProps } from '../../atoms/Input';
+import { PropsWithChildren } from 'react';
+export type SearchPopoverProps = PropsWithChildren<{
+    inputSearchProps?: InputProps;
+} & PopoverProps>;
+export type Field = {
+    key: string;
+    label: string;
+    dataType?: string | number;
+};
+export type PopoverAddFieldProps = SearchPopoverProps & Partial<{
+    fields: Field[];
+    selected: string[];
+    onCancel: () => void;
+    onApply: (selected: string[]) => void;
+    children: React.ReactNode;
+}>;

package/es/components/molecules/SearchPopover/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderIconField: (dataType?: string | number) => React.JSX.Element;

package/es/components/molecules/SearchPopover/utils.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon } from '../../atoms/Icon';
+import { FIELD_DATA_TYPE } from './constants';
+export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
+    switch (dataType) {
+        case FIELD_DATA_TYPE.STRING.name:
+        case FIELD_DATA_TYPE.STRING.value:
+        case FIELD_DATA_TYPE.TEXT.name:
+        case FIELD_DATA_TYPE.TEXT.value:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+        case FIELD_DATA_TYPE.BOOLEAN.name:
+        case FIELD_DATA_TYPE.BOOLEAN.value:
+            return React.createElement(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.NUMBER.name:
+        case FIELD_DATA_TYPE.NUMBER.value:
+            return React.createElement(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.DATE_TIME.name:
+        case FIELD_DATA_TYPE.DATE_TIME.value:
+            return React.createElement(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+        default:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+    }
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -22,7 +22,7 @@ const innerElementType = forwardRef((_a, ref) => {
     return React.createElement("div", Object.assign({ ref: ref, style: style }, rest));
 });
 export const MenuInline = (props) => {
-    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, className, } = props;
+    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
     const [openKeys, setOpenKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     useDeepCompareEffect(() => {
@@ -74,13 +74,21 @@ export const MenuInline = (props) => {
         if (hasChilren && !isOpen) {
             handleExpandItem(item);
         }
-        if (!hasChilren && !selectedKeys.has(key)) {
+        if (selectable && !hasChilren && !selectedKeys.has(key)) {
             setSelectedKeys(new Set([item.key]));
         }
         if (onClick) {
             onClick({ item, pathKey: flattenItems[idx].pathKey });
         }
-    }, [flattenItems, handleCollapseItem, handleExpandItem, onClick, openKeys, selectedKeys]);
+    }, [
+        selectable,
+        flattenItems,
+        handleCollapseItem,
+        handleExpandItem,
+        onClick,
+        openKeys,
+        selectedKeys,
+    ]);
     const renderItem = useCallback((args) => {
         const { index, style } = args;
         const item = flattenItems[index];

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

@@ -25,6 +25,7 @@ export type VirtualizedMenuProps = Partial<{
         pathKey: PathKey;
     }) => void;
     className: string;
+    selectable: boolean;
 }>;
 export type PathKey = (string | number)[];
 export type MenuInlineProps = Omit<VirtualizedMenuProps, 'mode'>;

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

@@ -48,7 +48,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover } from './SearchPopover';
+export { SearchPopover, PopoverAddField } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -71,4 +71,4 @@ export type { ImageResizeHandle } from './ImageEditor';
 export type { EditableNameHandle } from './EditableName';
 export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
 export type { VirtualizedMenuProps } from './VirtualizedMenu';
-export type { SearchPopoverProps } from './SearchPopover';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './SearchPopover';

package/es/components/molecules/index.js

@@ -48,7 +48,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover } from './SearchPopover';
+export { SearchPopover, PopoverAddField } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';

package/es/components/organism/LeftMenu/hooks/useLeftMenu.js

@@ -71,10 +71,10 @@ export const useLeftMenu = (props) => {
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {
             auth: {
-                token: env === 'development' ? '5474r2x214z284d4w2b4y494d43464k5a4v2j464m5a4' : auth === null || auth === void 0 ? void 0 : auth.token,
-                url: env === 'development' ? `${CDP_API.production}/hub` : `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
-                portalId: env === 'development' ? 561236459 : auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: env === 'development' ? '1600083836' : auth === null || auth === void 0 ? void 0 : auth.userId,
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
             },
             params: {
                 objectType,

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

@@ -5,8 +5,6 @@ import { Typography } from 'antd';
 import classNames from 'classnames';
 import { isNil, isString } from 'lodash';
 import { Link } from 'react-router-dom';
-// Assets
-import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
 // Constants
@@ -15,6 +13,7 @@ import { APP_KEYS } from './constants';
 import { CustomMenu, CommonMenu, HomeMenu } from './components';
 // Hooks
 import { useLeftMenu, useNavigatePath } from './hooks';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 export const LeftMenu = memo(props => {
     const { style, className, customization } = props;
     const { isExpandable = true, isCustomized = false, items = [], onMenuItemClick, } = customization || {};

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { MOBILE_VIEWPORT } from '@antscorp/antsomi-ui/es/components/atoms/MobileFrameV2/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
 export const BannerWrapper = styled.div `
   width: 100%;
@@ -19,9 +20,16 @@ export const BannerWrapper = styled.div `
   #banner-mobile {
     ${props => {
     const height = props.$height || 700;
-    const scale = (height - 10) / 722.41;
+    const smallScale = (height - 10) / (MOBILE_VIEWPORT.MD.height + 36);
+    const largeScale = (height - 10) / (MOBILE_VIEWPORT.LG.height + 36);
     return css `
-        transform: scale(${scale});
+        @media screen and (max-height: 1000px) {
+          transform: scale(${smallScale});
+        }
+
+        @media screen and (min-height: 1001px) {
+          transform: scale(${largeScale});
+        }
       `;
 }}
   }

package/es/constants/theme.js

@@ -177,9 +177,9 @@ THEME.components = {
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
         colorBorderSecondary: '#E5E5E5',
-        lineHeight: 1.17,
-        lineHeightLG: 1.17,
-        lineHeightSM: 1.17,
+        lineHeight: 1.143,
+        lineHeightLG: 1.143,
+        lineHeightSM: 1.143,
         itemHoverColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
     },
     Collapse: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-common.2",
+  "version": "1.3.5-common.4",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,6 +19,7 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
+    "publish": "npm run clean && npm run build:es",
     "build:es": "npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",