@antscorp/antsomi-ui 1.3.5-beta.574 → 1.3.5-beta.576

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

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

package/es/components/icons/AddRadiusIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AddRadiusIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3H8ZM13.2 10.8H16.8C17.1183 10.8 17.4235 10.9264 17.6486 11.1515C17.8736 11.3765 18 11.6817 18 12C18 12.3183 17.8736 12.6235 17.6486 12.8485C17.4235 13.0736 17.1183 13.2 16.8 13.2H13.2V16.8C13.2 17.1183 13.0736 17.4235 12.8486 17.6485C12.6235 17.8736 12.3183 18 12 18C11.6817 18 11.3765 17.8736 11.1514 17.6485C10.9264 17.4235 10.8 17.1183 10.8 16.8V13.2H7.2C6.88174 13.2 6.57646 13.0736 6.35142 12.8485C6.12637 12.6235 6 12.3183 6 12C6 11.6817 6.12637 11.3765 6.35142 11.1515C6.57646 10.9264 6.88174 10.8 7.2 10.8H10.8V7.2C10.8 6.88174 10.9264 6.57653 11.1514 6.35149C11.3765 6.12645 11.6817 6 12 6C12.3183 6 12.6235 6.12645 12.8486 6.35149C13.0736 6.57653 13.2 6.88174 13.2 7.2V10.8Z", fill: "currentColor" })));
+});

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

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

package/es/components/icons/PivotTableChartIcon.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const PivotTableChartIcon = forwardRef((props, ref) => {
+    // search tag: group by, pivot table
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", viewBox: "0 0 24 24", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("g", null,
+            React.createElement("path", { d: "M0,0h24v24H0V0z", fill: "none" })),
+        React.createElement("g", null,
+            React.createElement("path", { d: "M21,5c0-1.1-0.9-2-2-2h-9v5h11V5z M3,19c0,1.1,0.9,2,2,2h3V10H3V19z M3,5v3h5V3H5C3.9,3,3,3.9,3,5z M18,8.99L14,13 l1.41,1.41l1.59-1.6V15c0,1.1-0.9,2-2,2h-2.17l1.59-1.59L13,14l-4,4l4,4l1.41-1.41L12.83,19H15c2.21,0,4-1.79,4-4v-2.18l1.59,1.6 L22,13L18,8.99z" }))));
+});

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

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

package/es/components/icons/SubtractRadiusIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const SubtractRadiusIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3H8ZM17 11H7V13H17V11Z", fill: "currentColor" })));
+});

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

@@ -2,6 +2,7 @@ export { AccountCircleIcon } from './AccountCircleIcon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
+export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
@@ -32,13 +33,13 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -100,9 +101,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
+export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
-export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -145,8 +146,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
+export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -156,6 +157,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -206,6 +208,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
+export { SubtractRadiusIcon } from './SubtractRadiusIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';
 export { SystemRunningIcon } from './SystemRunningIcon';
@@ -231,7 +234,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -2,6 +2,7 @@ export { AccountCircleIcon } from './AccountCircleIcon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
+export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
@@ -32,13 +33,13 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -100,9 +101,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
+export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
-export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -145,8 +146,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
+export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -156,6 +157,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -206,6 +208,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
+export { SubtractRadiusIcon } from './SubtractRadiusIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';
 export { SystemRunningIcon } from './SystemRunningIcon';
@@ -231,7 +234,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

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

@@ -9,6 +9,7 @@ interface Breadcrumb {
     useExternalLink?: boolean;
 }
 export interface HeaderV2Props {
+    show?: boolean;
     className?: string;
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -32,7 +32,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -108,7 +108,7 @@ export const HeaderV2 = memo(props => {
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
-    return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
+    return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
             showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),

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

@@ -1,2 +1,4 @@
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {
+    $show: boolean;
+}, never>;

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

@@ -21,6 +21,8 @@ export const HeaderV2Styled = styled.div `
   padding: 10px 20px;
   box-sizing: border-box;
 
+  ${props => !props.$show && 'display: none;'}
+
   .left-side,
   .right-side {
     display: flex;

package/es/components/organism/DataTable/components/Toolbar/GroupByPopover.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+import { PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
+interface GroupByPopoverProps extends PopoverProps {
+    selectedKey?: string;
+    options?: ItemType[];
+    onChange?: (key: string) => void;
+}
+export declare const GroupByPopover: React.FC<GroupByPopoverProps>;
+export {};

package/es/components/organism/DataTable/components/Toolbar/GroupByPopover.js

@@ -0,0 +1,29 @@
+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 React, { useState } from 'react';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
+const initialState = {
+    isOpenPopover: false,
+};
+export const GroupByPopover = props => {
+    const { options, selectedKey, onChange = () => { } } = props, restProps = __rest(props, ["options", "selectedKey", "onChange"]);
+    const [state, setState] = useState(initialState);
+    const { isOpenPopover } = state;
+    const popoverContent = (React.createElement(Menu, { selectedKeys: [selectedKey || ''], items: options, onSelect: info => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+            onChange(info.key);
+        } }));
+    return (React.createElement(Popover, Object.assign({}, restProps, { open: isOpenPopover, content: popoverContent, trigger: ['click'], arrow: false, overlayInnerStyle: { padding: 0, width: 200 }, placement: "bottomRight", onOpenChange: open => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: open }))) })));
+};

package/es/components/organism/DataTable/components/Toolbar/ToolbarActionButtons.js

@@ -28,6 +28,7 @@ import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { renderActionButtons } from '@antscorp/antsomi-ui/es/utils';
 import { flatFilterMetrics } from '../../utils';
 import { GridViewIcon, TableIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { GroupByPopover } from './GroupByPopover';
 export const ToolbarActionButtons = memo(() => {
     // Store
     const actionButtons = useDataTableContext(useShallow(store => store.toolbar.actionButtons));
@@ -87,6 +88,10 @@ export const ToolbarActionButtons = memo(() => {
                     label: mode === 'TABLE' ? 'Grid view' : 'Table',
                 })));
             }
+            case 'GROUP_BY': {
+                const { selectedKey, options, onChange } = action;
+                return (React.createElement(GroupByPopover, { selectedKey: selectedKey, options: options, onChange: onChange }, actionButton()));
+            }
             default:
                 return actionButton();
         }

package/es/components/organism/DataTable/components/Toolbar/index.js

@@ -7,11 +7,12 @@ import { Filter } from '../Filter';
 import { ToolbarActionButtons } from './ToolbarActionButtons';
 import { Divider, Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { FilterActionButton } from '../Filter/FilterActionButton';
+import { RowSelectedControl } from './RowSelectedControl';
 // Hooks
 import { useDataTableContext } from '../../contexts/DataTableContext';
 import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
+// Constants
 import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
-import { RowSelectedControl } from './RowSelectedControl';
 export const Toolbar = memo(() => {
     // Store
     const toolbarProps = useDataTableContext(store => store.toolbar);
@@ -23,7 +24,7 @@ export const Toolbar = memo(() => {
         isFilterActive: false,
     }), [`.${EXCEPTION_OFF_FILTER_CLASS}`]);
     // Variables
-    const { addButton, collapse } = toolbarProps;
+    const { addButton, collapse, rightContent } = toolbarProps;
     const { collapsed, onCollapse } = collapse || {};
     // Handlers
     const renderAddButton = () => {
@@ -52,6 +53,7 @@ export const Toolbar = memo(() => {
             !isFilterActive && renderAddButton(),
             React.createElement(Filter, null)),
         !isFilterActive ? (React.createElement(Flex, { align: "center" },
+            rightContent,
             React.createElement(ToolbarActionButtons, null),
             !!collapse && (React.createElement(Flex, { align: "center" },
                 React.createElement(Divider, { dashed: true, type: "vertical", style: {

package/es/components/organism/DataTable/constants/common.d.ts

@@ -5,7 +5,7 @@ declare const MIN_COLUMN_WIDTH = 55;
 declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
 declare const DEFAULT_TOGGLE_WIDTH = 55;
 declare const DEFAULT_COLUMN_WIDTHS: number[];
-declare const DEFAULT_CELL_EMPTY = "--";
+declare const DEFAULT_CELL_EMPTY = "";
 declare const SORT_MAP: {
     ascend: string;
     descend: string;

package/es/components/organism/DataTable/constants/common.js

@@ -6,7 +6,7 @@ const DEFAULT_FIRST_COLUMN_WIDTH = 200;
 const DEFAULT_ROW_SELECTION_WIDTH = 47;
 const DEFAULT_TOGGLE_WIDTH = 55;
 const DEFAULT_COLUMN_WIDTHS = [DEFAULT_FIRST_COLUMN_WIDTH].concat(Array.from({ length: 20 }, () => DEFAULT_COLUMN_WIDTH));
-const DEFAULT_CELL_EMPTY = '--';
+const DEFAULT_CELL_EMPTY = '';
 const SORT_MAP = {
     ascend: 'asc',
     descend: 'desc',

package/es/components/organism/DataTable/constants/toolbar.d.ts

@@ -10,6 +10,7 @@ export declare const TOOLBAR_ACTION_KEYS: {
     readonly NODE_VIEW: "NODE_VIEW";
     readonly GRID_VIEW: "GRID_VIEW";
     readonly MORE: "MORE";
+    readonly GROUP_BY: "GROUP_BY";
 };
 export declare const TOOLBAR_ACTION_OPTIONS: TActionOptions;
 export declare const GRID_VIEW_KEYS: {

package/es/components/organism/DataTable/constants/toolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Icons
-import { SearchIcon, TableIcon, ViewColumnIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { PivotTableChartIcon, SearchIcon, TableIcon, ViewColumnIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 // Types
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const TOOLBAR_ACTION_KEYS = {
@@ -15,8 +15,9 @@ export const TOOLBAR_ACTION_KEYS = {
     NODE_VIEW: 'NODE_VIEW',
     GRID_VIEW: 'GRID_VIEW',
     MORE: 'MORE',
+    GROUP_BY: 'GROUP_BY',
 };
-const { SEARCH, COLUMN, EXPLORE, EXPORT, CALENDAR, TABLE, COMPARE, GRID_VIEW } = TOOLBAR_ACTION_KEYS;
+const { SEARCH, COLUMN, EXPLORE, EXPORT, CALENDAR, TABLE, COMPARE, GRID_VIEW, GROUP_BY } = TOOLBAR_ACTION_KEYS;
 export const TOOLBAR_ACTION_OPTIONS = {
     [SEARCH]: {
         key: SEARCH,
@@ -58,6 +59,11 @@ export const TOOLBAR_ACTION_OPTIONS = {
         label: 'Grid View',
         icon: React.createElement(TableIcon, null),
     },
+    [GROUP_BY]: {
+        key: GROUP_BY,
+        label: 'Group By',
+        icon: React.createElement(PivotTableChartIcon, null),
+    },
 };
 export const GRID_VIEW_KEYS = {
     TABLE: 'TABLE',

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -72,6 +72,10 @@ type TGridViewProps<TTableType> = {
         };
     };
 };
+type TGroupByProps<TTableType> = {
+    columnKeys?: (keyof TTableType)[];
+    defaultSelectedKey?: keyof TTableType;
+};
 export type TFormatFilterValue = Partial<Record<TOperatorKey, (value: any) => unknown>>;
 export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     name?: string;
@@ -111,6 +115,7 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         formatFilterValue?: TFormatFilterValue;
     };
     gridView?: TGridViewProps<TTableType>;
+    groupBy?: TGroupByProps<TTableType>;
 }
 export interface DataTableLocalStorage<TTableType = any> {
     filter?: {
@@ -120,5 +125,8 @@ export interface DataTableLocalStorage<TTableType = any> {
     table?: TableProps<TTableType>;
     pagination?: PaginationProps;
     sorter?: SorterResult<TTableType>;
+    groupBy?: {
+        selectedKey?: string;
+    };
 }
 export {};

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 import { UseDataTableListingProps } from './types';
-import { FilterItem, FilterProps, TColumnActionButton, TGridViewActionButton, TSearchActionButton, TableProps, TGridViewKeys } from '../../types';
+import { FilterItem, FilterProps, TColumnActionButton, TGridViewActionButton, TSearchActionButton, TableProps, TGridViewKeys, TGroupByActionButton } from '../../types';
 import { PaginationProps } from '../../components';
 import { SorterResult } from 'antd/es/table/interface';
 interface TUseDataTableListing<TTableType = any> {
@@ -11,6 +11,7 @@ interface TUseDataTableListing<TTableType = any> {
     table: TableProps<TTableType>;
     search: TSearchActionButton;
     gridView: TGridViewActionButton;
+    groupBy: TGroupByActionButton;
     /**
      * This selectedRowKeys is deprecated. Use selectedRow.keys instead.
      * @deprecated
@@ -41,6 +42,10 @@ type TState<TTableType = any> = {
     selectedFilterId?: string | number;
     pagination: PaginationProps;
     table: TableProps<TTableType>;
+    groupBy: {
+        selectedKey?: string;
+        expandedKeys?: Record<any, boolean>;
+    };
     selectedRowKeys: React.Key[];
     selectedRow: {
         keys: React.Key[];

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -19,9 +19,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { flatMap, isEmpty, pick, xor } from 'lodash';
+import { flatMap, isEmpty, pick, xor, groupBy as lodashGroupBy } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -35,10 +35,11 @@ import { DEFAULT_CELL_EMPTY, DEFAULT_PAGE_SIZE, DEFAULT_TOGGLE_WIDTH, SORT_MAP,
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetInfiniteMatchesAnyList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
 // Utils
-import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
+import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, reorder, } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
-import { ExpandLessIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { AddRadiusIcon, ExpandLessIcon, SubtractRadiusIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+import { GroupByExpandButton } from '../../styled';
 const { Text } = Typography;
 const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
 const initialState = {
@@ -63,11 +64,14 @@ const initialState = {
     selectedFilterItem: undefined,
     expandedRowKeys: [],
     modeView: 'TABLE',
+    groupBy: {
+        selectedKey: undefined,
+    },
 };
 export function useDataTableListing(props) {
     var _a, _b, _c;
     // Props
-    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, gridView: gridViewProps, queryOptions, } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, gridView: gridViewProps, groupBy: groupByProps, queryOptions, } = props || {};
     // Hooks
     const queryClient = useQueryClient();
     const { appConfig } = useAppConfigContext();
@@ -80,10 +84,11 @@ export function useDataTableListing(props) {
     const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
     const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
     const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
-    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, modeView, } = state;
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, groupBy, modeView, } = state;
     const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
     const { sortDirectionKey = 'az', mainColumnKey, expandColumnKey, expandable } = tableProps || {};
     const { itemProps: gridViewItemProps } = gridViewProps || {};
+    const { columnKeys: groupByColumnKeys, defaultSelectedKey: groupByDefaultSelectedKey } = groupByProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
@@ -317,6 +322,12 @@ export function useDataTableListing(props) {
         }
         return children;
     }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
+    const handleUpdateGroupBy = useCallback((groupBy) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), groupBy) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { groupBy: Object.assign(Object.assign({}, localStorageValues.groupBy), groupBy) })));
+    }, [localStorageKey]);
     const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
@@ -358,11 +369,73 @@ export function useDataTableListing(props) {
                     return renderColumnWithExpandIcon(RenderComponent, headerCol, record);
                 } });
         })) || []);
+        // Handle Group by
+        if (groupBy.selectedKey) {
+            data.unshift({
+                key: 'groupBy',
+                fixed: 'left',
+                align: 'center',
+                dataIndex: 'groupBy',
+                title: '',
+                width: 50,
+                render(value, record) {
+                    var _a, _b;
+                    const { groupTotal = 0 } = record || {};
+                    const groupKey = record === null || record === void 0 ? void 0 : record[groupBy.selectedKey || ''];
+                    const isExpanded = typeof ((_a = groupBy.expandedKeys) === null || _a === void 0 ? void 0 : _a[groupKey]) === 'boolean'
+                        ? (_b = groupBy.expandedKeys) === null || _b === void 0 ? void 0 : _b[groupKey]
+                        : true;
+                    return (groupKey &&
+                        groupTotal > 1 && (React.createElement(GroupByExpandButton, { onClick: () => handleUpdateGroupBy({
+                            expandedKeys: Object.assign(Object.assign({}, groupBy.expandedKeys), { [groupKey]: !isExpanded }),
+                        }) }, isExpanded ? (React.createElement(SubtractRadiusIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })) : (React.createElement(AddRadiusIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })))));
+                },
+            });
+            const groupByColumnIndex = data.findIndex(col => col.key === groupBy.selectedKey);
+            // Reorder group by column next to expand icon
+            if (groupByColumnIndex !== -1) {
+                data[groupByColumnIndex].fixed = 'left';
+                data = reorder(data, groupByColumnIndex, 1);
+            }
+        }
+        return data;
+    }, [
+        tableProps,
+        tableHeader,
+        groupBy.selectedKey,
+        groupBy.expandedKeys,
+        sorter === null || sorter === void 0 ? void 0 : sorter.columnKey,
+        sorter === null || sorter === void 0 ? void 0 : sorter.order,
+        renderColumnWithExpandIcon,
+        handleUpdateGroupBy,
+    ]);
+    const tableData = useDeepCompareMemo(() => {
+        let data = ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
+            (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
+            [];
+        // Handle group by
+        if (groupBy.selectedKey) {
+            const groupByData = lodashGroupBy(data, groupBy.selectedKey) || [];
+            data =
+                Object.entries(groupByData)
+                    .map(([groupByKey, rows]) => Array.isArray(rows) &&
+                    rows
+                        .filter((_, index) => {
+                        var _a, _b;
+                        // First row always show
+                        if (!index) {
+                            return true;
+                        }
+                        const isExpanded = typeof ((_a = groupBy.expandedKeys) === null || _a === void 0 ? void 0 : _a[groupByKey]) === 'boolean'
+                            ? (_b = groupBy.expandedKeys) === null || _b === void 0 ? void 0 : _b[groupByKey]
+                            : true;
+                        return isExpanded;
+                    })
+                        .map((row, index) => (Object.assign(Object.assign(Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }), (index !== 0 && { [groupBy.selectedKey || '']: '' })), { groupTotal: rows.length }))))
+                    .flat() || [];
+        }
         return data;
-    }, [tableProps, tableHeader, sorter === null || sorter === void 0 ? void 0 : sorter.columnKey, sorter === null || sorter === void 0 ? void 0 : sorter.order, renderColumnWithExpandIcon]);
-    const tableData = useDeepCompareMemo(() => ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
-        (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
-        [], [tableBody]);
+    }, [groupBy.expandedKeys, groupBy.selectedKey, tableBody, tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey]);
     const searchList = useDeepCompareMemo(() => {
         const { itemMapKeys, icon, link } = searchProps || {};
         return ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody.map(searchItem => (Object.assign(Object.assign({}, Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: searchItem[value] })), {})), { icon: typeof icon === 'function' ? icon(searchItem) : icon, link: typeof link === 'function' ? link(searchItem) : link })))) || []);
@@ -386,12 +459,22 @@ export function useDataTableListing(props) {
         }
         return [];
     }, [gridViewProps, tableData]);
+    const groupByOptions = useDeepCompareMemo(() => ((groupByColumnKeys === null || groupByColumnKeys === void 0 ? void 0 : groupByColumnKeys.map(key => {
+        const column = tableColumns.find(column => column.key === key);
+        if (column) {
+            return {
+                key,
+                label: column.title,
+            };
+        }
+        return null;
+    }).filter(Boolean)) || []), [groupByColumnKeys, tableColumns]);
     // Effects
     /**
      * Update values from local storage to state
      */
     useDeepCompareEffect(() => {
-        const { filter, pagination, table, sorter } = localStorageValues || {};
+        const { filter, pagination, table, sorter, groupBy } = localStorageValues || {};
         if (!isEmpty(filter)) {
             const { filters, selectedFilterId } = filter || {};
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
@@ -406,7 +489,19 @@ export function useDataTableListing(props) {
         if (!isEmpty(sorter)) {
             setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
         }
+        if (!isEmpty(groupBy)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { groupBy })));
+        }
     }, [localStorageValues]);
+    /**
+     * Set default groupBy column
+     */
+    useEffect(() => {
+        const { groupBy } = localStorageValues || {};
+        if (groupByDefaultSelectedKey && !(groupBy === null || groupBy === void 0 ? void 0 : groupBy.selectedKey)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), { selectedKey: groupByDefaultSelectedKey }) })));
+        }
+    }, [localStorageValues, groupByDefaultSelectedKey]);
     // /** Update filters from external filters */
     // useDeepCompareEffect(() => {
     //   if (externalFilters) {
@@ -664,6 +759,16 @@ export function useDataTableListing(props) {
                 },
             },
         },
+        /** Group by */
+        groupBy: {
+            options: groupByOptions || [],
+            selectedKey: groupBy.selectedKey,
+            onChange(selectedKey) {
+                handleUpdateGroupBy({
+                    selectedKey,
+                });
+            },
+        },
         /* Selected row */
         selectedRowKeys,
         selectedRow,

package/es/components/organism/DataTable/styled/index.d.ts

@@ -9,3 +9,4 @@ export declare const ActionButton: import("styled-components").StyledComponent<i
 export declare const FilterMetricLabel: 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 DataTableContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GroupByExpandButton: 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>;

package/es/components/organism/DataTable/styled/index.js

@@ -90,3 +90,9 @@ export const FilterButton = styled.div `
   justify-content: center;
   flex-shrink: 0;
 `;
+/* Group by */
+export const GroupByExpandButton = styled(Flex) `
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;

package/es/components/organism/DataTable/types/toolbar.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DropdownProps } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
 import { GRID_VIEW_KEYS, TOOLBAR_ACTION_KEYS } from '../constants';
 import { AddButtonProps } from '../components/AddButton';
 import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
@@ -63,7 +64,12 @@ export type TGridViewActionButton = TActionButton & {
     /** The callback function to change the mode of the grid view. */
     onChangeMode?: (mode: TGridViewKeys) => void;
 };
-export type TToolbarActionButton<TActionKey extends string[] = [], ActionKey extends TActionToolbarButtonKey<TActionKey> = TActionToolbarButtonKey<TActionKey>> = ActionKey extends 'SEARCH' ? TSearchActionButton : ActionKey extends 'COLUMN' ? TColumnActionButton : ActionKey extends 'GRID_VIEW' ? TGridViewActionButton : TActionButton;
+export type TGroupByActionButton = TActionButton & {
+    selectedKey?: string;
+    options: ItemType[];
+    onChange: (key: string) => void;
+};
+export type TToolbarActionButton<TActionKey extends string[] = [], ActionKey extends TActionToolbarButtonKey<TActionKey> = TActionToolbarButtonKey<TActionKey>> = ActionKey extends 'SEARCH' ? TSearchActionButton : ActionKey extends 'COLUMN' ? TColumnActionButton : ActionKey extends 'GRID_VIEW' ? TGridViewActionButton : ActionKey extends 'GROUP_BY' ? TGroupByActionButton : TActionButton;
 export type TCollapse = {
     collapsed?: boolean;
     onCollapse?: (collapsed: boolean) => void;
@@ -76,4 +82,6 @@ export interface ToolbarProps<TActionKey extends string[] = []> {
     };
     selectedRowButtons?: Record<string, TSelectedRowButton>;
     collapse?: TCollapse;
+    /** The right content of the toolbar. */
+    rightContent?: ReactNode;
 }

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

@@ -16,7 +16,7 @@ import { useLeftMenu } from './hooks';
 import { useLeftMenuContext } from './contexts';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 export const LeftMenuComponent = memo(props => {
-    const { style, className, customization, showLogo = true } = props;
+    const { show = true, style, className, customization, showLogo = true } = props;
     const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
@@ -95,7 +95,7 @@ export const LeftMenuComponent = memo(props => {
         }
         return null;
     };
-    return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu && isExpandable, className: className },
+    return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu && isExpandable, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
             React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
                 showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },

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

@@ -8,6 +8,7 @@ export declare const FeatureMenuWrapper: import("styled-components").StyledCompo
 export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {
     $isExpandMenu?: boolean | undefined;
+    $show?: boolean | undefined;
 }, never>;
 export declare const NavLogoWrapper: 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 LeftMenuNav: import("styled-components").StyledComponent<"nav", any, {}, never>;

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

@@ -44,7 +44,9 @@ export const PopoverWrapper = styled.div `
   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;
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-out;
   z-index: 10;
   padding: 10px;
   box-sizing: border-box;
@@ -67,6 +69,8 @@ export const LeftMenuNavWrapper = styled.div `
   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) `
@@ -206,7 +210,9 @@ export const ChildMenuWrapper = styled.div `
   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;
+  transition:
+    width 0.2s,
+    padding 0.2s ease;
   padding-left: 0px;
   box-sizing: border-box;
   z-index: 1;

package/es/components/template/Layout/Layout.d.ts

@@ -5,6 +5,7 @@ import '@antscorp/processing-notification/dist/index.css';
 import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
 import { ContentWrapperProps, WorkspaceProps } from './types';
 export interface LayoutProps {
+    onlyContent?: boolean;
     headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
         helpConfig: Partial<HeaderV2Props['helpConfig']>;
     }>;

package/es/components/template/Layout/Layout.js

@@ -63,6 +63,7 @@ export const Layout = memo(props => {
     const header = useLayoutStore(store => store.state.header);
     const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
     const workspace = useLayoutStore(store => store.state.workspace);
+    const onlyContent = useLayoutStore(store => store.state.onlyContent);
     const [, , removeCookie] = useCookies();
     const params = useParams();
     const location = useLocation();
@@ -88,6 +89,8 @@ export const Layout = memo(props => {
         attributeOldValue: true,
         characterDataOldValue: true,
     });
+    // Memo
+    const showOnlyContent = useDeepCompareMemo(() => { var _a; return (_a = props.onlyContent) !== null && _a !== void 0 ? _a : onlyContent; }, [onlyContent, props.onlyContent]);
     const permissionDomain = useDeepCompareMemo(() => {
         var _a;
         /**
@@ -193,6 +196,12 @@ export const Layout = memo(props => {
             setLoadingLayout(false);
         }
     }, [mergeLeftMenuProps.customization]);
+    /** Timeout for set layout loading off in case left menu no callback onActiveMenuCodeChange */
+    useDeepCompareEffect(() => {
+        setTimeout(() => {
+            setLoadingLayout(false);
+        }, 5000);
+    }, []);
     // Handle access denied
     const onClickSwitchAccount = useCallback(() => {
         // Remove cookie when switch account
@@ -276,12 +285,12 @@ export const Layout = memo(props => {
                         ? header === null || header === void 0 ? void 0 : header.pageTitle
                         : ''
                     : activePageTitle))),
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
-            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
+            React.createElement(LeftMenu, Object.assign({ show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
                     // If user has access denied, disable expandable
-                    isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),
-            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
+                    isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange })),
+            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent, "$showOnlyContent": showOnlyContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps), isLoadingLayout ? (React.createElement(LayoutLoading, { spinning: true })) : (React.createElement(React.Fragment, null,
                 React.createElement(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef }, showNotification && (React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig, { callback: handleCallbackNotify })))),
                 React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))))));

package/es/components/template/Layout/stores/index.d.ts

@@ -15,6 +15,8 @@ export interface LayoutStoreState {
     leftMenu: LeftMenuStore;
     workspace: WorkspaceProps;
     contentWrapper: ContentWrapperProps;
+    /** Just show only content */
+    onlyContent?: boolean;
 }
 interface LayoutStore {
     state: LayoutStoreState;

package/es/components/template/Layout/stores/index.js

@@ -6,6 +6,7 @@ const initialState = {
     leftMenu: {},
     workspace: {},
     contentWrapper: {},
+    onlyContent: false,
 };
 export const useLayoutStore = create(set => ({
     state: initialState,

package/es/components/template/Layout/styled.d.ts

@@ -5,6 +5,7 @@ export declare const LayoutWrapper: import("styled-components").StyledComponent<
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
     $noPadding?: boolean | undefined;
     $noSpaceTopContent?: boolean | undefined;
+    $showOnlyContent?: boolean | undefined;
 }, never>;
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/Layout/styled.js

@@ -1,6 +1,6 @@
 var _a, _b;
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
 import { Flex, Spin } from '../../atoms';
 // Constants
@@ -57,6 +57,16 @@ export const ContentWrapper = styled.div `
   .layout-body__content {
     ${({ $noSpaceTopContent }) => $noSpaceTopContent && 'padding-top: 0;'}
   }
+
+  ${({ $showOnlyContent }) => $showOnlyContent &&
+    css `
+      padding: 0px;
+
+      .layout-body__content {
+        padding: 0px;
+        border-radius: 0px;
+      }
+    `}
 `;
 export const NotificationWrapper = styled.div `
   flex-shrink: 0;

package/es/locales/en/translation.json

@@ -555,7 +555,8 @@
         "toolbarActions": {
             "search": "Search",
             "column": "Column",
-            "explore": "Explore"
+            "explore": "Explore",
+            "groupBy": "Group by"
         }
     },
     "dataTableFilter": {

package/es/locales/i18n.d.ts

@@ -558,6 +558,7 @@ export declare const translationsJson: {
                     search: string;
                     column: string;
                     explore: string;
+                    groupBy: string;
                 };
             };
             dataTableFilter: {
@@ -781,6 +782,7 @@ export declare const translationsJson: {
                     search: string;
                     column: string;
                     explore: string;
+                    groupBy: string;
                 };
             };
             dataTableFilter: {

package/es/locales/translations.d.ts

@@ -558,6 +558,7 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             search: string;
             column: string;
             explore: string;
+            groupBy: string;
         };
     };
     dataTableFilter: {

package/es/locales/vi/translation.json

@@ -98,7 +98,8 @@
         "toolbarActions": {
             "search": "Tìm",
             "column": "Cột",
-            "explore": "Khám phá"
+            "explore": "Khám phá",
+            "groupBy": "Gom theo"
         }
     },
     "dataTableFilter": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.574",
+  "version": "1.3.5-beta.576",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -62,7 +62,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.51",
+    "@antscorp/icons": "0.27.52",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",