@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -0,0 +1,81 @@
+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;
+};
+import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
+import { cloneDeep } from 'lodash';
+// Libraries
+import React, { useRef } from 'react';
+// Styled
+import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
+const THUMB_SIZE = 4;
+const MARGIN = 3;
+export const Scrollbars = props => {
+    // Props
+    const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
+    // Refs
+    const ref = useRef(null);
+    /**
+     * Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
+     *
+     * @param {positionValues} values - An object containing the dimensions and scroll positions of the scrollable element:
+     *  - {number} clientHeight - The visible height of the scrollable content area.
+     *  - {number} clientWidth - The visible width of the scrollable content area.
+     *  - {number} scrollHeight - The total height of the scrollable content.
+     *  - {number} scrollWidth - The total width of the scrollable content.
+     *  - {number} scrollLeft - The horizontal scroll position.
+     *  - {number} scrollTop - The vertical scroll position.
+     */
+    const onUpdate = (values) => {
+        // Destructure the properties from the values object, using default values if undefined
+        const { clientHeight, clientWidth, scrollWidth, scrollHeight, scrollLeft, scrollTop } = values || {};
+        // Calculate the height of the vertical thumb, ensuring a minimum height of 30px
+        const thumbHeight = Math.max(Math.floor(clientHeight * (clientHeight / scrollHeight)), 30);
+        // Calculate the width of the horizontal thumb, ensuring a minimum width of 30px
+        const thumbWidth = Math.max(Math.floor(clientWidth * (clientWidth / scrollWidth)), 30);
+        // Calculate the vertical thumb's position based on the scrollTop value
+        const thumbVerticalPosition = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight) - MARGIN;
+        // Calculate the horizontal thumb's position based on the scrollLeft value
+        const thumbHorizontalPosition = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth) - MARGIN;
+        // If the ref.current element is available, update the thumb styles
+        if (ref.current) {
+            ref.current.thumbVertical.style.height = `${thumbHeight}px`;
+            ref.current.thumbVertical.style.transform = `translateY(${thumbVerticalPosition}px)`;
+            ref.current.thumbHorizontal.style.width = `${thumbWidth}px`;
+            ref.current.thumbHorizontal.style.transform = `translateX(${thumbHorizontalPosition}px)`;
+        }
+        // Handle show hide track bar
+        ref.current.trackVertical.style.visibility =
+            scrollHeight <= clientHeight ? 'hidden' : 'visible';
+        ref.current.trackHorizontal.style.visibility =
+            scrollWidth <= clientWidth ? 'hidden' : 'visible';
+    };
+    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, ref: ref, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
+            var { style } = _a, restOfProps = __rest(_a, ["style"]);
+            return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
+        }, renderTrackHorizontal: (_a) => {
+            var { style } = _a, restOfProps = __rest(_a, ["style"]);
+            return (React.createElement(HorizontalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
+        }, renderView: props => {
+            const { style } = props || {};
+            const newStyle = cloneDeep(style);
+            // Adjust the margins to account for the custom scrollbar size
+            newStyle.marginBottom = -THUMB_SIZE;
+            newStyle.marginRight = -THUMB_SIZE;
+            // Set a minimum height for the view to ensure space for the scrollbar
+            newStyle.minHeight = THUMB_SIZE;
+            // If autoHeightMax is defined, adjust the maxHeight to include space for the scrollbar
+            // if (autoHeightMax) {
+            //   newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
+            // }
+            // Return a div element with the adjusted styles and original props, applying a custom class for styling
+            return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));
+};

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

@@ -0,0 +1,2 @@
+export { Scrollbars } from './Scrollbars';
+export type { ScrollbarsProps } from './Scrollbars';

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

@@ -0,0 +1 @@
+export { Scrollbars } from './Scrollbars';

package/es/components/atoms/Scrollbars/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const ScrollbarsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/Scrollbars/styled.js

@@ -0,0 +1,29 @@
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ScrollbarsWrapper = styled.div ``;
+export const ThumbBar = styled.div `
+  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  border-radius: 4px;
+`;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 0px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
+`;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 0px;
+  left: 2px;
+  border-radius: 4px;
+`;

package/es/components/atoms/Spin/Spin.js

@@ -20,9 +20,9 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
     const { indicatorSize, children } = props, restOf = __rest(props, ["indicatorSize", "children"]);
-    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
+    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
                 fontSize: indicatorSize || 30,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), children));
+            }, spin: true })) }, restOf), children));
 };
 Spin.defaultProps = {};

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

@@ -1,4 +1,7 @@
-/// <reference types="react" />
-export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps/lib/Step").default;
+import React from 'react';
+import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
+export type StepsProps = AntdStepsProps & {
+    saveHighestStep?: boolean;
 };
+export type StepProps = AntdStepProps;
+export declare const Steps: React.FC<StepsProps>;

package/es/components/atoms/Steps/Steps.js

@@ -1,2 +1,51 @@
-import { Steps as AntdSteps } from 'antd';
-export const Steps = AntdSteps;
+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, { useEffect, useMemo, useState, memo } from 'react';
+import { isNumber } from 'lodash';
+// Styled
+import { SelectedIcon, StepsWrapper } from './styled';
+export const Steps = memo(props => {
+    const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
+    const { current, size = 'small' } = restOfProps;
+    const [highestStep, setHighestStep] = useState(0);
+    useEffect(() => {
+        if (saveHighestStep && current && current > highestStep) {
+            setHighestStep(current);
+        }
+    }, [current, saveHighestStep, highestStep]);
+    const customItems = useMemo(() => saveHighestStep
+        ? items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            let status;
+            let icon;
+            let className;
+            if (index > highestStep) {
+                status = 'wait';
+            }
+            else {
+                if (index === current) {
+                    status = 'process';
+                    icon = undefined;
+                }
+                else {
+                    status = 'finish';
+                    icon = React.createElement(SelectedIcon, null, index + 1);
+                    className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
+                }
+            }
+            return Object.assign({ status, icon, className }, item);
+        })
+        : items, [current, saveHighestStep, highestStep, items]);
+    /** Check whether the user has reactivated the previous step or not */
+    const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
+    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
+});

package/es/components/atoms/Steps/styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
+    Step: typeof import("rc-steps").Step;
+}, any, {
+    isReactivate: boolean;
+    highestStep: number;
+}, never>;

package/es/components/atoms/Steps/styled.js

@@ -0,0 +1,205 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+import styled from 'styled-components';
+import { Steps } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const STEP_SIZE = {
+    SMALL: 24,
+    DEFAULT: 32,
+};
+export const SelectedIcon = styled.div `
+  border: 1px solid #b8cfe6;
+  border-radius: 100%;
+  font-size: 14px;
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const StepsWrapper = styled(Steps) `
+  &.save-highest-step {
+    /** Steps Default */
+    &.antsomi-steps:not(.antsomi-steps-dot) {
+      &.antsomi-steps-small
+        .antsomi-steps-item
+        .antsomi-steps-item-container
+        .antsomi-steps-item-icon {
+        width: ${STEP_SIZE.SMALL}px;
+        height: ${STEP_SIZE.SMALL}px;
+      }
+
+      .antsomi-steps-item {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            box-sizing: border-box;
+            border-radius: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: ${STEP_SIZE.DEFAULT}px;
+            height: ${STEP_SIZE.DEFAULT}px;
+
+            .antsomi-steps-icon {
+              color: white;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
+            height: 2px;
+            background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw6};
+          }
+
+          & > .antsomi-steps-item-tail::after {
+            width: 2px;
+            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+          }
+        }
+
+        &:not(.antsomi-steps-item-active) > .antsomi-steps-item-container[role='button'] {
+          &:hover {
+            .antsomi-steps-item-icon {
+              background-color: white;
+            }
+            .antsomi-steps-item-content {
+              color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+            }
+          }
+        }
+
+        &.highest-step {
+          .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title::after,
+            & > .antsomi-steps-item-tail::after {
+              background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw6} !important;
+            }
+          }
+        }
+
+        &.antsomi-steps-item-selectable {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content .antsomi-steps-item-title:after {
+              background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
+            }
+
+            .antsomi-steps-item-tail::after {
+              background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+            }
+          }
+        }
+
+        &.antsomi-steps-item-process.antsomi-steps-item-active {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title {
+              &::after {
+                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+              }
+            }
+
+            & > .antsomi-steps-item-tail {
+              &::after {
+                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /** Steps dot */
+    &.antsomi-steps.antsomi-steps-dot {
+      &.antsomi-steps-horizontal .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          height: 2px;
+        }
+      }
+
+      &.antsomi-steps-vertical .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          width: 2px;
+        }
+      }
+
+      &.antsomi-steps-horizontal .antsomi-steps-item-tail::after,
+      &.antsomi-steps-vertical .antsomi-steps-item-tail::after {
+        background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6};
+      }
+
+      .antsomi-steps-item-selectable > .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorPrimary};
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-tail::after {
+            ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+          }
+        }
+      }
+
+      .highest-step {
+        .antsomi-steps-item-container > .antsomi-steps-item-tail::after {
+          background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6} !important;
+        }
+      }
+    }
+
+    /** Common */
+    &.antsomi-steps {
+      .antsomi-steps-item-wait {
+        color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw7};
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
+          background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw6};
+        }
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-content {
+          .antsomi-steps-item-title,
+          .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        font-weight: bold;
+        color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorPrimary};
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title,
+          & > .antsomi-steps-item-content > .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-selectable {
+        color: black;
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorPrimary};
+          }
+
+          & > .antsomi-steps-item-content {
+            .antsomi-steps-item-title,
+            .antsomi-steps-item-description {
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -32,12 +32,15 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';
+export * from './Scrollbars';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -32,9 +32,12 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';
+export * from './Scrollbars';

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -16,6 +16,7 @@ import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
 import localeData from 'dayjs/plugin/localeData';
+import relativeTime from 'dayjs/plugin/relativeTime';
 /** dayjs plugins for timezone */
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -28,11 +29,18 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
+// Providers
+// import {
+//   QueryClientProviderAntsomiUI,
+//   QueryDevtoolsAntsomiUI,
+//   queryClientAntsomiUI,
+// } from '@antscorp/antsomi-ui/es/queries';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(relativeTime);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -84,6 +84,17 @@ export const GlobalStyle = () => {
           width: 36px !important;
           height: 36px !important;
         }
+
+        &.antsomi-btn-icon-only.antsomi-btn-default {
+          width: 30px !important;
+          height: 30px !important;
+        }
+
+        &.antsomi-btn-icon-only.antsomi-btn-sm {
+          /* Important to override the above code before */
+          width: 24px !important;
+          height: 24px !important;
+        }
       }
 
       .antsomi-btn-text:disabled,
@@ -108,6 +119,19 @@ export const GlobalStyle = () => {
         background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2} !important;
       }
 
+      // NOTE: Just hot fix for easy looking
+      .antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
+        padding-right: 4px !important;
+      }
+      .antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
+        width: fit-content;
+        padding: 0px !important;
+        padding-right: 4px !important;
+        &::before {
+          width: 0px !important;
+        }
+      }
+
       /* Input */
       .antsomi-input,
       .antsomi-input-affix-wrapper {
@@ -800,9 +824,7 @@ export const GlobalStyle = () => {
       /* Tabs */
       .antsomi-tabs {
         .antsomi-tabs-tab {
-          &.antsomi-tabs-tab-active {
-            font-weight: bold;
-          }
+          font-weight: bold;
         }
       }
 
@@ -819,6 +841,10 @@ export const GlobalStyle = () => {
             }
           }
         }
+
+        .antsomi-form-item-explain-error {
+          font-size: 11px !important;
+        }
       }
 
       /* Popover */

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

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

package/es/components/icons/ExpandMoreRight.js

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

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

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

package/es/components/icons/index.js

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

package/es/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

package/es/components/index.js

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { AccountRecent } from '@antscorp/antsomi-ui/es/models/AccountListing';
+export interface AccountListingProps {
+    className?: string;
+    apiConfig: {
+        domain: string;
+        token: string;
+        userId: number;
+        portalId?: number;
+        languageCode?: string;
+        appCode?: string;
+        menuCode?: string;
+    };
+    showAllAccount?: boolean;
+    currentAccount?: string | 'all';
+    onChange?: (userId: number | string) => void;
+}
+interface AccountData {
+    email: any;
+    userId: any;
+    userName: any;
+    status: number;
+}
+export interface AccountListingHandle {
+    getUsers: () => {
+        recentData?: AccountRecent;
+        accountData: Array<AccountData>;
+    };
+}
+export declare const AccountListing: React.ForwardRefExoticComponent<AccountListingProps & React.RefAttributes<AccountListingHandle>>;
+export {};

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -0,0 +1,39 @@
+import Icon from '@antscorp/icons';
+import React, { useCallback, useImperativeHandle, useState } from 'react';
+import { Scrollbars, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Divider, Input } from 'antd';
+import { AccountItem } from './components';
+import { AccountSelectionStyled } from './styled';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { useAccountSelection } from './hooks';
+export const AccountListing = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
+    // States
+    const [searchValue, setSearchValue] = useState('');
+    const { accountData, recentData } = useAccountSelection(apiConfig);
+    const isAllAccount = currentAccount === 'all';
+    useImperativeHandle(ref, () => ({
+        getUsers() {
+            return { recentData, accountData };
+        },
+    }), [recentData, accountData]);
+    // Handlers
+    const handleSelectAccount = useCallback((userId) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(userId);
+    }, [onChange]);
+    return (React.createElement(AccountSelectionStyled, { className: className },
+        React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
+        React.createElement("div", { className: "account-list" },
+            React.createElement("ul", null,
+                React.createElement(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' } },
+                    ((_b = recentData === null || recentData === void 0 ? void 0 : recentData.value) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { className: "recent-text" }, "Recent"), recentData === null || recentData === void 0 ? void 0 :
+                        recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))),
+                        React.createElement(Divider, { style: { margin: '8px 0', color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3 } }))) : null, accountData === null || accountData === void 0 ? void 0 :
+                    accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
+                        searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId })))))),
+        showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },
+            React.createElement("strong", null, "All account"))) : null));
+});