@antscorp/antsomi-ui 2.0.19 → 2.0.26

package/es/components/atoms/Image/Image.d.ts

@@ -0,0 +1,2 @@
+export { Image } from 'antd';
+export type { ImageProps } from 'antd';

package/es/components/atoms/Image/Image.js

@@ -0,0 +1 @@
+export { Image } from 'antd';

package/es/components/atoms/Image/index.d.ts

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

package/es/components/atoms/Image/index.js

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

package/es/components/atoms/Tag/Tag.d.ts

@@ -1,2 +1,11 @@
+import React from 'react';
+import { TagProps } from 'antd';
 import { TagType } from 'antd/lib';
-export declare const Tag: TagType;
+export interface TagListProps {
+    tags: string[];
+    tagProps?: TagProps;
+    limit?: number;
+}
+export declare const Tag: TagType & {
+    List: React.FC<TagListProps>;
+};

package/es/components/atoms/Tag/Tag.js

@@ -1,10 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+// Libraries
+import { useMemo, useState } from 'react';
 import { Tag as AntdTag } from 'antd';
 import styled from 'styled-components';
 // Icons
 import { CloseIcon } from '../../icons';
+// Components
+import { Flex } from '../Flex';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { SearchPopover } from '../../molecules';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Utils
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Scrollbars } from '../Scrollbars';
+const { Text } = Typography;
 const CloseBtn = styled.div `
   display: flex;
   align-items: center;
@@ -14,9 +27,36 @@ const CloseBtn = styled.div `
   background-color: #fff;
   border-radius: 100%;
 `;
+const AllTagsContainer = styled(Flex) `
+  padding: 10px;
+`;
 const OriginTag = props => {
     const { closable = false, closeIcon = (_jsx(CloseBtn, { children: _jsx(CloseIcon, { size: 14, color: globalToken?.colorPrimary }) })), ...restOfProps } = props;
     return _jsx(AntdTag, { ...restOfProps, closable: closable, closeIcon: closable ? closeIcon : null });
 };
+const TagList = props => {
+    const { tags, tagProps, limit = 2 } = props;
+    const [state, setState] = useState({
+        open: false,
+        searchValue: '',
+        selected: [],
+    });
+    const { searchValue } = state;
+    const filteredTags = useMemo(() => tags.filter(tag => searchStringQuery(tag, searchValue)), [tags, searchValue]);
+    const renderTags = () => tags.slice(0, limit).map((tag, index) => (_jsx(OriginTag, { ...tagProps, children: _jsx(Text, { ellipsis: { tooltip: true }, children: tag }) }, index)));
+    const renderAllTags = () => (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 300, children: _jsx(AllTagsContainer, { gap: "8px 0px", wrap: "wrap", children: filteredTags.map((tag, index) => (_jsx(OriginTag, { ...tagProps, children: _jsx(Text, { ellipsis: { tooltip: true }, children: tag }) }, index))) }) }));
+    const renderShowMoreTags = () => {
+        if (tags.length > limit) {
+            return (_jsx(SearchPopover, { content: renderAllTags(), overlayInnerStyle: { width: 300 }, inputSearchProps: {
+                    onAfterChange(value) {
+                        setState(prev => ({ ...prev, searchValue: value }));
+                    },
+                }, children: _jsx(Button, { type: "text", children: translate(translations.viewAll) }) }));
+        }
+        return null;
+    };
+    return (_jsxs(Flex, { children: [renderTags(), " ", renderShowMoreTags()] }));
+};
 export const Tag = OriginTag;
 Tag.CheckableTag = AntdTag.CheckableTag;
+Tag.List = TagList;

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

@@ -30,6 +30,7 @@ export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
+export { Image } from './Image';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
@@ -46,3 +47,4 @@ export * from './Avatar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';
+export type { ImageProps } from './Image';

package/es/components/atoms/index.js

@@ -30,6 +30,7 @@ export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
+export { Image } from './Image';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

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

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

package/es/components/icons/IdentityGraphIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const IdentityGraphIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsxs("svg", { viewBox: "0 0 30 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M12.5 8.5C14.1569 8.5 15.5 7.15685 15.5 5.5C15.5 3.84315 14.1569 2.5 12.5 2.5C10.8431 2.5 9.5 3.84315 9.5 5.5C9.5 7.15685 10.8431 8.5 12.5 8.5Z", fill: "#595959" }), _jsx("path", { d: "M7.5 13C8.88071 13 10 11.8807 10 10.5C10 9.11929 8.88071 8 7.5 8C6.11929 8 5 9.11929 5 10.5C5 11.8807 6.11929 13 7.5 13Z", stroke: "#585858" }), _jsx("path", { d: "M20.5 21C21.8807 21 23 19.8807 23 18.5C23 17.1193 21.8807 16 20.5 16C19.1193 16 18 17.1193 18 18.5C18 19.8807 19.1193 21 20.5 21Z", stroke: "#585858" }), _jsx("path", { d: "M20.5 6C21.8807 6 23 4.88071 23 3.5C23 2.11929 21.8807 1 20.5 1C19.1193 1 18 2.11929 18 3.5C18 4.88071 19.1193 6 20.5 6Z", stroke: "#585858" }), _jsx("path", { d: "M15.5 14.5C17.1569 14.5 18.5 13.1569 18.5 11.5C18.5 9.84315 17.1569 8.5 15.5 8.5C13.8431 8.5 12.5 9.84315 12.5 11.5C12.5 13.1569 13.8431 14.5 15.5 14.5Z", fill: "#595959" }), _jsx("path", { d: "M22.5 14.5C24.1569 14.5 25.5 13.1569 25.5 11.5C25.5 9.84315 24.1569 8.5 22.5 8.5C20.8431 8.5 19.5 9.84315 19.5 11.5C19.5 13.1569 20.8431 14.5 22.5 14.5Z", fill: "#595959" }), _jsx("path", { d: "M11.5 20.5C13.1569 20.5 14.5 19.1569 14.5 17.5C14.5 15.8431 13.1569 14.5 11.5 14.5C9.84315 14.5 8.5 15.8431 8.5 17.5C8.5 19.1569 9.84315 20.5 11.5 20.5Z", fill: "#595959" }), _jsx("path", { d: "M16 12L13 6", stroke: "#595959", strokeLinecap: "round" }), _jsx("path", { d: "M15.5883 11.5738L10.5 11.2578", stroke: "#595959", strokeLinecap: "round" }), _jsx("path", { d: "M16 12L11 17", stroke: "#595959", strokeLinecap: "round" }), _jsx("path", { d: "M18.9301 6.03716L16.6643 9.61607", stroke: "#595959", strokeLinecap: "round" }), _jsx("path", { d: "M16.5 13.5005L18.5 16.5006", stroke: "#595959", strokeLinecap: "round" }), _jsx("path", { d: "M16 12H23", stroke: "#595959", strokeLinecap: "round" })] }));
+});

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

@@ -196,6 +196,7 @@ export declare const LazyIcon: {
     HomeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     HowToRegIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     IdeaIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    IdentityGraphIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ImageIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     InactiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     InactiveVariantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -362,6 +363,7 @@ export declare const LazyIcon: {
     VisibilityOffEyeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Visitor30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     VisitorIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    VisitorInformationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WarningIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebAssetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -202,6 +202,7 @@ export const LazyIcon = {
     HomeIcon: lazy(() => import('../HomeIcon').then(m => ({ default: m.HomeIcon }))),
     HowToRegIcon: lazy(() => import('../HowToRegIcon').then(m => ({ default: m.HowToRegIcon }))),
     IdeaIcon: lazy(() => import('../IdeaIcon').then(m => ({ default: m.IdeaIcon }))),
+    IdentityGraphIcon: lazy(() => import('../IdentityGraphIcon').then(m => ({ default: m.IdentityGraphIcon }))),
     ImageIcon: lazy(() => import('../ImageIcon').then(m => ({ default: m.ImageIcon }))),
     InactiveIcon: lazy(() => import('../InactiveIcon').then(m => ({ default: m.InactiveIcon }))),
     InactiveVariantIcon: lazy(() => import('../InactiveVariantIcon').then(m => ({ default: m.InactiveVariantIcon }))),
@@ -368,6 +369,7 @@ export const LazyIcon = {
     VisibilityOffEyeIcon: lazy(() => import('../VisibilityOffEyeIcon').then(m => ({ default: m.VisibilityOffEyeIcon }))),
     Visitor30Icon: lazy(() => import('../Visitor30Icon').then(m => ({ default: m.Visitor30Icon }))),
     VisitorIcon: lazy(() => import('../VisitorIcon').then(m => ({ default: m.VisitorIcon }))),
+    VisitorInformationIcon: lazy(() => import('../VisitorInformationIcon').then(m => ({ default: m.VisitorInformationIcon }))),
     WarningIcon: lazy(() => import('../WarningIcon').then(m => ({ default: m.WarningIcon }))),
     WebAssetIcon: lazy(() => import('../WebAssetIcon').then(m => ({ default: m.WebAssetIcon }))),
     WebIcon: lazy(() => import('../WebIcon').then(m => ({ default: m.WebIcon }))),

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

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

package/es/components/icons/VisitorInformationIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const VisitorInformationIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsxs("svg", { viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M1.5 14.5V13.8782C1.53256 13.8236 1.58165 13.7466 1.64916 13.654C1.79858 13.4491 2.03697 13.1699 2.38474 12.8889C3.07347 12.3324 4.21363 11.75 6 11.75C7.78637 11.75 8.92653 12.3324 9.61526 12.8889C9.96303 13.1699 10.2014 13.4491 10.3508 13.654C10.4184 13.7466 10.4674 13.8236 10.5 13.8782V14.5H1.5ZM4 7.5C4 7.10444 4.1173 6.71777 4.33706 6.38887C4.55683 6.05996 4.86917 5.80362 5.23462 5.65225C5.60007 5.50087 6.00223 5.46126 6.39019 5.53843C6.77814 5.6156 7.1345 5.80608 7.41421 6.08579C7.69392 6.3655 7.8844 6.72186 7.96157 7.10981C8.03874 7.49777 7.99913 7.89993 7.84775 8.26539C7.69638 8.63083 7.44004 8.94317 7.11113 9.16294C6.78223 9.3827 6.39556 9.5 6 9.5C5.46957 9.5 4.96087 9.28928 4.58579 8.91421C4.21072 8.53913 4 8.03043 4 7.5Z", stroke: "#005EB8" }), _jsx("rect", { x: "14", y: "5", width: "5", height: "2", fill: "#595959" }), _jsx("rect", { x: "21", y: "5", width: "7", height: "2", fill: "#005EB8" }), _jsx("rect", { x: "14", y: "9", width: "5", height: "2", fill: "#595959" }), _jsx("rect", { x: "21", y: "9", width: "8", height: "2", fill: "#005EB8" }), _jsx("rect", { x: "14", y: "13", width: "5", height: "2", fill: "#595959" }), _jsx("rect", { x: "21", y: "13", width: "6", height: "2", fill: "#005EB8" })] }));
+});

package/es/components/icons/document/IconGallery.js

@@ -6,6 +6,7 @@ import { message } from 'antd';
 import { useMemo, useState } from 'react';
 import { Flex, Input, Typography } from '../../index';
 import { IconGalleryStyled } from './styled';
+import { queryClientAntsomiUI, QueryClientProviderAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 const REGEX_DATA_SEARCH = /(?<=\/\/ search tag: ).*/g;
 const requireContext = require.context('../', false, /\.tsx$/);
 const icons = requireContext
@@ -34,14 +35,14 @@ export const IconGallery = () => {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return (_jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx(Flex, { className: "grid-container", gap: 16, children: validIcons
-                        .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
-                        .map(item => {
-                        const { Component, name } = item;
-                        return (_jsxs("div", { className: "grid-item", onClick: () => {
-                                const copiedText = `<${name} />`;
-                                navigator.clipboard.writeText(copiedText);
-                                message.success(`${copiedText} copied to clipboard 🚀`);
-                            }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
-                    }) })] }) }));
+    return (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx(Flex, { className: "grid-container", gap: 16, children: validIcons
+                            .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
+                            .map(item => {
+                            const { Component, name } = item;
+                            return (_jsxs("div", { className: "grid-item", onClick: () => {
+                                    const copiedText = `<${name} />`;
+                                    navigator.clipboard.writeText(copiedText);
+                                    message.success(`${copiedText} copied to clipboard 🚀`);
+                                }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
+                        }) })] }) }) }));
 };

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

@@ -194,6 +194,7 @@ export { HomeHouse30Icon } from './HomeHouse30Icon';
 export { HomeIcon } from './HomeIcon';
 export { HowToRegIcon } from './HowToRegIcon';
 export { IdeaIcon } from './IdeaIcon';
+export { IdentityGraphIcon } from './IdentityGraphIcon';
 export { ImageIcon } from './ImageIcon';
 export { InactiveIcon } from './InactiveIcon';
 export { InactiveVariantIcon } from './InactiveVariantIcon';
@@ -358,6 +359,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { Visitor30Icon } from './Visitor30Icon';
 export { VisitorIcon } from './VisitorIcon';
+export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
 export { WebIcon } from './WebIcon';

package/es/components/icons/index.js

@@ -194,6 +194,7 @@ export { HomeHouse30Icon } from './HomeHouse30Icon';
 export { HomeIcon } from './HomeIcon';
 export { HowToRegIcon } from './HowToRegIcon';
 export { IdeaIcon } from './IdeaIcon';
+export { IdentityGraphIcon } from './IdentityGraphIcon';
 export { ImageIcon } from './ImageIcon';
 export { InactiveIcon } from './InactiveIcon';
 export { InactiveVariantIcon } from './InactiveVariantIcon';
@@ -358,6 +359,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { Visitor30Icon } from './Visitor30Icon';
 export { VisitorIcon } from './VisitorIcon';
+export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
 export { WebIcon } from './WebIcon';

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

@@ -1,4 +1,4 @@
-import { DatePicker } from 'src/components/molecules';
+import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
 import React, { ComponentProps } from 'react';
 type RangePickerProps = {} & ComponentProps<typeof DatePicker.RangePicker>;
 export declare const RangePicker: React.FC<RangePickerProps>;

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

@@ -28,7 +28,7 @@ export declare const getDefaultDate: () => {
 };
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
-    currentRangeValue: RangeValue[];
+    currentRangeValue?: RangeValue[];
     limitNumOfDays?: number;
 }) => RangeValue[];
 export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {

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

@@ -120,7 +120,12 @@ export const getDefaultDate = () => {
         yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd').toISOString(),
     };
 };
-export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = RANGE_LIMIT, }) => {
+export const getRangeValue = ({ rangeInfo, currentRangeValue = [
+    {
+        start: dayjs(getDefaultDate().last7Days).toISOString(),
+        end: dayjs(getDefaultDate().yesterday).toISOString(),
+    },
+], limitNumOfDays = RANGE_LIMIT, }) => {
     const defaultDates = getDefaultDate();
     const result = currentRangeValue.map(rangeValue => {
         const temp = {

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

@@ -6,7 +6,6 @@ import { Select } from '../Select';
 import { SettingWrapper } from '../SettingWrapper';
 // Constants
 import { OPTION_FONT_FAMILY } from './constants';
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 /**
  * Renders a select input for font family options.
  *
@@ -19,7 +18,6 @@ export const FontFamilySelect = (props) => {
     useEffect(() => {
         setSelected(value);
     }, [value]);
-    const { t } = i18nInstance;
     const filteredFontFamilyOptions = useMemo(() => {
         let filteredOptions = [...OPTION_FONT_FAMILY];
         if (showOptions?.length) {

package/es/components/molecules/IconSelection/components/Icon/index.js

@@ -6,7 +6,7 @@ export const IconSelectionRenderer = forwardRef((props, ref) => {
     const { iconType } = props;
     if (iconType === ICON_TYPE.FONT_AWESOME) {
         const { iconName, iconType, ...rest } = props;
-        return _jsx(FontAwesomeIcon, { ref: ref, ...rest, icon: iconName.split(' ') });
+        return (_jsx(FontAwesomeIcon, { ref: ref, ...rest, icon: iconName.split(' ') }));
     }
     if (iconType === ICON_TYPE.CUSTOM) {
         const { iconName, iconType, ...rest } = props;

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

@@ -3,6 +3,22 @@ import deepmerge from 'deepmerge';
 import { isEmpty, unionBy } from 'lodash';
 // Utils
 import { flatTree } from '@antscorp/antsomi-ui/es/utils';
+/**
+ * Creates a custom merge function for tree data structures.
+ *
+ * @param {string} key - The property name used to identify unique items in the tree.
+ * @returns {Function} A function that merges two arrays of MatchesAnyItem objects.
+ *
+ * @description
+ * This function returns a merge strategy for deepmerge that:
+ * 1. Merges items from the target and source arrays based on the specified key.
+ * 2. Recursively merges nested children using the same strategy.
+ * 3. Adds new items from the source that don't exist in the target.
+ *
+ * @example
+ * const mergeStrategy = customMergeTreeData('id');
+ * const mergedData = deepmerge(targetArray, sourceArray, { arrayMerge: mergeStrategy });
+ */
 const customMergeTreeData = (key) => (target, source) => {
     const merged = target.map(item => {
         const found = source.find(s => s[key] === item[key]);

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

@@ -4,8 +4,9 @@ import { Icon } from '../../atoms';
 import './styles.scss';
 import clsx from 'clsx';
 import { StyledInput } from './styled';
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 export const SearchPopover = (props) => {
     const { inputSearchProps = {}, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || 'Search...', bordered: false, ...inputSearchProps, addonAfter: _jsx(Icon, { type: "icon-ants-search-2" }), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(Icon, { type: "icon-ants-search-2" }), withWrapper: false }), content] }), children: children }));
 };

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

@@ -1,4 +1,7 @@
-export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType & {
+    List: import("react").FC<import("../../atoms/Tag/Tag").TagListProps>;
+}, any, {}, never>;
 export declare const TagCloseBtn: import("styled-components").StyledComponent<"div", any, {
     borderColor?: string | undefined;
 }, never>;

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

@@ -5,9 +5,10 @@ import { Select as AntdSelect } from 'antd';
 import { Text, Checkbox, Icon } from '../../atoms';
 // Styled
 import { StyledSelect, SelectWrapper as SelectMultiWrapper } from './styled';
+import { ExpandMoreIcon } from '../../icons';
 export const SelectMulti = props => {
     const { label, children, ...restOf } = props;
-    return (_jsxs(SelectMultiWrapper, { children: [label && (_jsx(Text, { style: { marginBottom: 5 }, color: "#666666", children: label })), _jsx(StyledSelect, { ...restOf, children: children }), _jsx(Icon, { type: "icon-antsomi-expand-more", className: "icon-arrow-down" })] }));
+    return (_jsxs(SelectMultiWrapper, { children: [label && (_jsx(Text, { style: { marginBottom: 5 }, color: "#666666", children: label })), _jsx(StyledSelect, { ...restOf, children: children }), _jsx(ExpandMoreIcon, { className: "icon-arrow-down", width: 20, height: 20 })] }));
 };
 export const SelectMultiOption = AntdSelect.Option;
 export const SelectMultOptGroup = AntdSelect.OptGroup;

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

@@ -12,7 +12,7 @@ export const SelectWrapper = styled.div `
   .icon-arrow-down {
     position: absolute;
     bottom: 4px;
-    right: 8px;
+    right: 4px;
   }
 `;
 export const StyledSelect = styled(AntdSelect) `

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

@@ -39,7 +39,7 @@ export declare const PEOPLE_ACTIONS: {
         readonly key: "to_owner";
     };
     readonly remove_acess: {
-        readonly label: "Remove Access";
+        readonly label: "Remove access";
         readonly key: "remove_acess";
     };
 };

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

@@ -57,7 +57,7 @@ export const PEOPLE_ACTIONS = {
         key: PEOPLE_ACTION_KEYS.TO_OWNER,
     },
     [PEOPLE_ACTION_KEYS.REMOVE_ACCESS]: {
-        label: 'Remove Access',
+        label: 'Remove access',
         key: PEOPLE_ACTION_KEYS.REMOVE_ACCESS,
     },
 };

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

@@ -13,7 +13,7 @@ export const { READONLY_TAG, INVALID_TAG } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,
-    '--tag--max-width': '230px',
+    '--tag--max-width': '170px',
     '--tag-border-radius': '999px',
     '--tag-bg': 'transparent',
     '--tag-hover': 'transparent',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;

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

@@ -84,3 +84,4 @@ export type { SearchPopoverProps, PopoverAddFieldProps } from './SearchPopover';
 export type { InputDropdownProps } from './Dropdown';
 export type { SelectProps } from './Select';
 export type { EditorTabItem } from './EditorTab';
+export type { CalendarSelectionValue } from './CalendarSelection';

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import axios from 'axios';
 import clsx from 'clsx';
@@ -37,7 +37,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
     const [logo, setLogo] = useState({ url: '' });
     const [logoManual, setLogoManual] = useState({ url: '' });
     const [openChangeEmail, setOpenChangeEmail] = useState(null);
-    const [apiEndpoint] = useState(`${iamDomain}api/account/index/${accountId}?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`);
+    const [apiEndpoint] = useState(`${iamDomain}/api/account/index/${accountId}?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`);
     const saveRef = useRef(false);
     const tempAccountRef = useRef({});
     const readyCheckRef = useRef(false);
@@ -860,15 +860,15 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         (logoManual && logoManual.url) ||
         (!loading ? Image : '');
     try {
-        return (_jsxs(Spin, { spinning: loading, children: [_jsxs(AccountDetail, { className: "wrap-table", children: [_jsxs("div", { className: "form-profile", children: [_jsxs("div", { className: "left-profile", children: [logo && _jsx("img", { src: avatarUrl, alt: "" }), _jsxs("div", { className: "preview mt-10", children: [isDisabledEdit || isPreview ? null : (_jsxs(_Fragment, { children: [_jsx("div", { className: "block-choose-input-file", children: _jsx(UploadAvatar
+        return (_jsxs(Spin, { spinning: loading, children: [_jsxs(AccountDetail, { className: "wrap-table", children: [_jsxs("div", { className: "form-profile", children: [_jsxs("div", { className: "left-profile", children: [logo && _jsx("img", { src: avatarUrl, alt: "" }), _jsxs("div", { className: "preview mt-10", children: [isDisabledEdit || isPreview ? null : (_jsxs("div", { className: "block-choose-input-file", children: [_jsx(UploadAvatar
+                                                        // ref={input => {
+                                                        //   this.fileInput = input;
+                                                        // }}
+                                                        , { 
                                                             // ref={input => {
                                                             //   this.fileInput = input;
                                                             // }}
-                                                            , { 
-                                                                // ref={input => {
-                                                                //   this.fileInput = input;
-                                                                // }}
-                                                                onFileUploading: onFileUploading, onFileUploaded: handleChangeLogo, callbackFileError: showFileError, dimensions: { width: 5000, height: 5000 }, extensions: ['png', 'jpg', 'PNG', 'JPG'], maxFileSize: 3072, iamDomain: iamDomain, authStr: `?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`, setLoading: setLoading }) }), _jsx("span", { className: "choose-file-text", children: "Change avatar" })] })), errors.avatar ? (_jsxs("div", { className: "error", style: {
+                                                            onFileUploading: onFileUploading, onFileUploaded: handleChangeLogo, callbackFileError: showFileError, dimensions: { width: 5000, height: 5000 }, extensions: ['png', 'jpg', 'PNG', 'JPG'], maxFileSize: 3072, iamDomain: iamDomain, authStr: `?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`, setLoading: setLoading }), _jsx("span", { className: "choose-file-text", children: "Change avatar" })] })), errors.avatar ? (_jsxs("div", { className: "error", style: {
                                                         width: 'fit-content',
                                                         textAlign: 'left',
                                                         margin: '0 auto',

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

@@ -64,6 +64,7 @@ export const AccountSharing = props => {
     const debounceSearch = useDebounce(accountSearch, 500);
     const [, setCookie] = useCookies();
     const domain = iamDomain.charAt(iamDomain.length - 1) === '/' ? iamDomain : `${iamDomain}/`;
+    const formatDomain = iamDomain.endsWith('/') ? iamDomain.slice(0, -1) : iamDomain;
     const translateLang = useMemo(() => translate(translateData, serverTranslateData, language), [serverTranslateData, language, translateData]);
     const getInfoAccount = () => {
         const params = {
@@ -519,5 +520,5 @@ export const AccountSharing = props => {
                     backgroundColor: THEME.token?.blue1_2,
                     padding: '20px 15px',
                     width: '400px',
-                }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: domain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
+                }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: formatDomain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
 };

package/es/components/organism/ActivityTimeline/ActivityTimeline.d.ts

@@ -0,0 +1,2 @@
+import { ActivityTimeLineProps } from './types';
+export declare const ActivityTimeline: (props: ActivityTimeLineProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-underscore-dangle */
+import { useMemo } from 'react';
+import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
+import { Flex, Spin } from '../../atoms';
+import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
+import { useInView } from 'react-intersection-observer';
+import { translate, translations } from '@antscorp/antsomi-locales';
+import { isEmpty } from 'lodash';
+import { differenceInMonths, formatDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
+import { EmptyData } from '../../molecules';
+export const ActivityTimeline = (props) => {
+    const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
+    let { timelineAvailable } = props;
+    timelineAvailable = (timelines.length > 0 && !!timelineAvailable) || false;
+    const eventTracking = useMemo(() => {
+        const list = [...eventTrackingProp];
+        const map = Object.fromEntries(list.map(item => [`${item.eventCategoryId}@@${item.eventActionId}`, item]));
+        return { list, map };
+    }, [eventTrackingProp]);
+    const [bottomRef] = useInView({
+        threshold: 0.7,
+        onChange: inView => {
+            if (!inView || isLoading || !timelineAvailable || !onFetchMore)
+                return;
+            onFetchMore();
+        },
+    });
+    const showBottomComponent = () => {
+        if (isEmpty(timelines) || isLoading)
+            return null;
+        return (_jsx(TimelineBottom, { align: "center", justify: "center", children: timelineAvailable && onFetchMore ? (_jsx(Flex, { ref: bottomRef, children: _jsx(Spin, { indicatorSize: 24 }) })) : (translate(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!')) }));
+    };
+    const showMainContent = (timelines, customerName) => {
+        const result = [];
+        if (timelines.length > 0) {
+            const startDate = startOfMonth(new Date()).getTime();
+            let firstDateEvent = startOfMonth(new Date(formatDateTZ(timelines[0].trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+            let diffTempt = differenceInMonths(new Date(startDate), new Date(firstDateEvent));
+            if (diffTempt === 0) {
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--${startDate}`));
+            }
+            else if (diffTempt === 1) {
+                result.push(_jsx(TimeLineTitle, { type: "nodata-single", data: { date: startDate } }, `time-heading--${startDate}`));
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--v2-${firstDateEvent}`));
+            }
+            else {
+                const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), -1)).getTime();
+                result.push(_jsx(TimeLineTitle, { type: "nodata-multi", data: { startDate, endDate: dateNextMonthEvent } }, `time-heading--${startDate}`));
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--v2-${firstDateEvent}`));
+            }
+            timelines.forEach((item, index) => {
+                const firstDateEventTempt = startOfMonth(new Date(formatDateTZ(item.trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+                if (firstDateEvent !== firstDateEventTempt) {
+                    diffTempt = differenceInMonths(new Date(firstDateEvent), new Date(firstDateEventTempt));
+                    if (diffTempt === 0) {
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading--${item.timestamp}`));
+                    }
+                    else if (diffTempt === 1) {
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading--${item.timestamp}`));
+                    }
+                    else if (diffTempt === 2) {
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(_jsx(TimeLineTitle, { type: "nodata-single", data: { date: dateNextMonthEvent } }, `time-heading--${item.timestamp}`));
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading-v2-${item.timestamp}`));
+                    }
+                    else {
+                        const datePrevMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), 1)).getTime();
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(_jsx(TimeLineTitle, { type: "nodata-multi", data: {
+                                startDate: datePrevMonthEvent,
+                                endDate: dateNextMonthEvent,
+                            } }, `time-heading--${item.timestamp}`));
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading-v2-${item.timestamp}`));
+                    }
+                    firstDateEvent = firstDateEventTempt;
+                }
+                const key = `${item.etype}-${item.timestamp}-${item.sectionKey}-${index}`;
+                if (item.data.totalActivityCount === 1) {
+                    result.push(_jsx(ItemEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                }
+                else if (item.data.totalActivityCount > 1) {
+                    result.push(_jsx(ItemGroupEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                }
+            });
+        }
+        return result;
+    };
+    const renderContent = () => {
+        if (isLoading) {
+            return (_jsxs(_Fragment, { children: [header, _jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) })] }));
+        }
+        if (!timelines.length) {
+            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) })] }));
+        }
+        return (_jsxs(_Fragment, { children: [header, showMainContent(timelines, objectName), showBottomComponent()] }));
+    };
+    return (_jsxs(StyledRoot, { className: className, children: [_jsx(StyldTitle, { children: title }), renderContent()] }));
+};