@antscorp/antsomi-ui 2.0.0 → 2.0.2

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

@@ -0,0 +1,2 @@
+export { Avatar } from 'antd';
+export type { AvatarProps } from 'antd';

package/es/components/atoms/Avatar/Avatar.js

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

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

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

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

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

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

@@ -42,6 +42,7 @@ export * from './Button';
 export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
+export * from './Avatar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -42,3 +42,4 @@ export * from './Button';
 export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
+export * from './Avatar';

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

@@ -238,6 +238,7 @@ export declare const LazyIcon: {
     PersonAddDisabledIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PersonUserAccountIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PhoneCallbackIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    PhoneIphoneIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PivotTableChartIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PlaneIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Plannings30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -242,6 +242,7 @@ export const LazyIcon = {
     PersonAddDisabledIcon: lazy(() => import('../PersonAddDisabledIcon').then(m => ({ default: m.PersonAddDisabledIcon }))),
     PersonUserAccountIcon: lazy(() => import('../PersonUserAccountIcon').then(m => ({ default: m.PersonUserAccountIcon }))),
     PhoneCallbackIcon: lazy(() => import('../PhoneCallbackIcon').then(m => ({ default: m.PhoneCallbackIcon }))),
+    PhoneIphoneIcon: lazy(() => import('../PhoneIphoneIcon').then(m => ({ default: m.PhoneIphoneIcon }))),
     PivotTableChartIcon: lazy(() => import('../PivotTableChartIcon').then(m => ({ default: m.PivotTableChartIcon }))),
     PlaneIcon: lazy(() => import('../PlaneIcon').then(m => ({ default: m.PlaneIcon }))),
     Plannings30Icon: lazy(() => import('../Plannings30Icon').then(m => ({ default: m.Plannings30Icon }))),

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

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

package/es/components/icons/PhoneIphoneIcon.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const PhoneIphoneIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        React.createElement("path", { d: "M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z" })));
+});

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

@@ -234,6 +234,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PhoneIphoneIcon } from './PhoneIphoneIcon';
 export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { Plannings30Icon } from './Plannings30Icon';

package/es/components/icons/index.js

@@ -234,6 +234,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PhoneIphoneIcon } from './PhoneIphoneIcon';
 export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { Plannings30Icon } from './Plannings30Icon';

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -22,6 +22,10 @@ export interface AdvancedPickerProps {
     showTime?: boolean;
     timezone?: string;
     isViewMode?: boolean;
+    /**
+     * Only show fixed calendar (hide dynamic and )
+     */
+    onlyShowFixed?: boolean;
     onUpdatedNewDate?: ({ date, option }: {
         date: string;
         option: TOption;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -30,7 +30,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -66,6 +66,7 @@ export const AdvancedPicker = props => {
         dateDisplay: dayjs().tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
+    const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
     const currDate = dayjs(date, format);
     const currWeek = currDate.isoWeek();
     const currDay = currDate.day();
@@ -219,13 +220,9 @@ export const AdvancedPicker = props => {
         try {
             const draftOption = {
                 dateType: option.dateType.value,
-                calculationDate: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationDate.value,
-                calculationType: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationType.value,
-                value: option.dateType.value === 'fixed' ? 0 : option.value,
+                calculationDate: isShowFixed ? '' : option.calculationDate.value,
+                calculationType: isShowFixed ? '' : option.calculationType.value,
+                value: isShowFixed ? 0 : option.value,
             };
             setState(state => (Object.assign(Object.assign({}, state), { optionSelected: option, dateDisplay: date, isOpen: false })));
             if (typeof onApply === 'function') {
@@ -262,8 +259,8 @@ export const AdvancedPicker = props => {
             React.createElement(Space, null,
                 React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
                 React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
-            option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
+            isShowFixed && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
+    const renderDateTypeOptions = () => onlyShowFixed ? null : (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
             const dateType = newDateTypes.find(dateType => dateType.value === value);
             onChangeOption({ dateType });
             // toggleOpenDropdown(true);
@@ -312,7 +309,7 @@ export const AdvancedPicker = props => {
                 React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay })),
             React.createElement(DropdownContent, { className: "dropdown-content" },
                 renderDateTypeOptions(),
-                option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
+                isShowFixed ? (React.createElement(React.Fragment, null,
                     valueType === 'MONTH_DAY' ? (React.createElement("div", { className: "month-controller" },
                         React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }),
                         MONTH_LABEL_FULL[currMonthSelected],
@@ -383,10 +380,9 @@ export const AdvancedPicker = props => {
         return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
             !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
             React.createElement("span", { className: "date-picker__title--view-mode" }, selectedDateTitle)));
-    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
+    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: onlyShowFixed ? undefined : ref },
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
-        option.dateType.value === 'fixed' &&
-            !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
+        isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
             React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
                 // style={{
                 //   width: 120,
@@ -408,7 +404,7 @@ export const AdvancedPicker = props => {
                                 React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                             renderDropdownFooter()),
                         React.createElement(Divider, null),
-                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between' },
+                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between', "$onlyShowFixed": onlyShowFixed },
                             ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
                             ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
                             timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -10,4 +10,5 @@ export declare const CalendarIconWrapper: import("styled-components").StyledComp
 export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
     $width: number;
     $isRangePicker: boolean;
+    $onlyShowFixed?: boolean | undefined;
 }, never>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -102,7 +102,7 @@ export const TimeLabel = styled.div `
   position: absolute;
   right: 0;
   /* top: 120px; */
-  top: ${props => (props.$isRangePicker ? '140px' : '120px')};
+  top: ${({ $isRangePicker, $onlyShowFixed }) => $onlyShowFixed ? '81px' : $isRangePicker ? '140px' : '120px'};
   height: 39.1px;
   width: ${props => `${props.$width}px`};
   /* width: 180px; */

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

@@ -11,13 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Popover } from 'antd';
-import { Input, Icon } from '../../atoms';
+import { Icon } from '../../atoms';
 import './styles.scss';
 import clsx from 'clsx';
+import { StyledInput } from './styled';
 export const SearchPopover = (props) => {
     const { inputSearchProps = {} } = props, popoverProps = __rest(props, ["inputSearchProps"]);
     const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
     return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
-            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
+            React.createElement(StyledInput, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
             content) }), children));
 };

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

@@ -9,16 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { renderIconField } from '../../utils';
 import { PopoverSelect } from '../PopoverSelect';
+import { Typography } from 'antd';
 export const PopoverAddField = (props) => {
     const { fields, onSearchPredicate, className } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className"]);
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
-    const options = useMemo(() => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
-            field.dataType && renderIconField(field.dataType),
-            field.label)) }))), [fields]);
     const handleOnSearchPredicate = (field) => {
         const originalField = originalFieldByKey.get(field.key);
         if (!originalField)
@@ -28,5 +26,14 @@ export const PopoverAddField = (props) => {
         }
         return true;
     };
+    const options = useCallback((params) => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
+            field.dataType && renderIconField(field.dataType),
+            typeof field.label === 'string' && (React.createElement(Typography.Text, { ellipsis: {
+                    tooltip: true,
+                } }, field.label)),
+            typeof field.label === 'function' &&
+                field.label({
+                    selected: params.selected.includes(field.key),
+                }))) }))), [fields]);
     return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') })));
 };

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

@@ -12,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { SearchPopover } from '../../SearchPopover';
-import { Button, Checkbox, Menu } from 'antd';
 import './styles.scss';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
-import { Icon } from '../../../../atoms';
-import Scrollbars from 'react-custom-scrollbars';
+import { Button, Checkbox, Icon } from '../../../../atoms';
+import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
+import { List } from 'antd';
 export const PopoverSelect = (props) => {
     var _a, _b;
-    const { open: openProp, selected, options = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
+    const { open: openProp, selected, options: optionsProp = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
     const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
     const refOnSearchPredicate = useRef(onSearchPredicate);
     useEffect(() => {
@@ -30,6 +30,9 @@ export const PopoverSelect = (props) => {
     const [search, setSearch] = useState('');
     const [showSelected, setShowSelected] = useState(false);
     const applyDisabled = selectedKeys.size === 0;
+    const options = useMemo(() => typeof optionsProp === 'function'
+        ? optionsProp({ selected: [...selectedKeys] })
+        : optionsProp, [optionsProp, selectedKeys]);
     useEffect(() => {
         if (openProp !== undefined) {
             setOpen(openProp);
@@ -114,15 +117,13 @@ export const PopoverSelect = (props) => {
         return option.label;
     };
     return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
-            !!options.length && (React.createElement("div", { className: "actions" },
+            !!optionsProp.length && (React.createElement(StyledAction, null,
                 React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
-                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
-            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
-                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(option => ({
-                        key: option.key,
-                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option))),
-                    })) }))),
-            React.createElement("div", { className: "footer" },
+                selectedKeys.size === optionsProp.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
+            !!filteredField.length && (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(List, { bordered: false, dataSource: filteredField, renderItem: option => (React.createElement(List.Item, null,
+                        React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option)))) }))),
+            React.createElement(StyledFooter, null,
                 React.createElement(Button, { onClick: handleCancel }, "Cancel"),
                 React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
             '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,

package/es/components/molecules/SearchPopover/components/PopoverSelect/styled.d.ts

@@ -0,0 +1,4 @@
+import Scrollbars from 'react-custom-scrollbars';
+export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<typeof Scrollbars, any, {}, never>;

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

@@ -0,0 +1,53 @@
+var _a, _b;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import Scrollbars from 'react-custom-scrollbars';
+import styled from 'styled-components';
+export const StyledFooter = styled.div `
+  gap: 10px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+export const StyledAction = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 0px;
+
+  > button {
+    height: 30px;
+    padding: 0 10px;
+  }
+`;
+export const StyledListFieldsWrapper = styled(Scrollbars) `
+  .antsomi-list-items {
+    border-bottom: 1px solid var(--divider-1);
+
+    > .antsomi-list-item {
+      padding: 0;
+      border-bottom: 0;
+      height: ${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemHeight) || 35}px;
+
+      > .antsomi-checkbox-wrapper {
+        padding: 0 var(--item-padding);
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+
+        span:nth-child(2) {
+          > i {
+            min-width: 20px;
+            text-align: center;
+          }
+
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+      }
+    }
+  }
+`;

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

@@ -2,58 +2,6 @@
   &.antsomi-popover {
     .antsomi-popover-inner {
       min-width: 300px;
-
-      .antsomi-popover-inner-content {
-        .antsomi-menu.list-fields {
-          border-bottom: 1px solid var(--divider-1);
-
-          > .antsomi-menu-item {
-            padding: 0;
-
-            > .antsomi-menu-title-content {
-              > .antsomi-checkbox-wrapper {
-                padding: 0 var(--item-padding);
-                display: flex;
-                align-items: center;
-                width: 100%;
-                height: 100%;
-
-                span:nth-child(2) {
-                  > i {
-                    min-width: 20px;
-                    text-align: center;
-                  }
-
-                  display: flex;
-                  align-items: center;
-                  gap: 6px;
-                }
-              }
-            }
-          }
-        }
-
-        > .actions {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 10px;
-          padding: 5px 0px;
-
-          > button {
-            height: 30px;
-            padding: 0 10px;
-          }
-        }
-
-        > .footer {
-          gap: 10px;
-          padding: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-        }
-      }
     }
   }
 }

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Input } from '../../atoms';
+export const StyledInput = styled(Input) `
+  &.antsomi-input-group-wrapper {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--divider-1);
+
+    .antsomi-input {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .antsomi-input-group-addon {
+      border: none;
+      background: transparent;
+      font-size: 20px;
+      padding: 0;
+      min-width: 25px;
+
+      > i {
+        font-size: 24px;
+        color: #595959;
+        cursor: pointer;
+      }
+    }
+  }
+`;

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

@@ -2,30 +2,6 @@
   &.antsomi-popover {
     .antsomi-popover-inner {
       padding: 0;
-
-      .antsomi-input-group-wrapper {
-        padding: 8px 10px;
-        border-bottom: 1px solid var(--divider-1);
-
-        .antsomi-input {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        .antsomi-input-group-addon {
-          border: none;
-          background: transparent;
-          font-size: 20px;
-          padding: 0;
-          min-width: 25px;
-
-          > i {
-            font-size: 24px;
-            color: #595959;
-            cursor: pointer;
-          }
-        }
-      }
     }
   }
 }

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

@@ -14,7 +14,9 @@ export type Field = Option & {
     dataType?: string | number;
 };
 export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverProps & Partial<{
-    options: TOption[];
+    options: TOption[] | ((info: {
+        selected: string[];
+    }) => TOption[]);
     selected: string[];
     onCancel: () => void;
     onApply: (selected: string[]) => void;

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

@@ -21,5 +21,5 @@ export const Item = memo((props) => {
             'item-disabled': item === null || item === void 0 ? void 0 : item.disabled,
         }, className), style: style, onClick: handleOnClick },
         React.createElement("div", { className: "item-label" }, renderLabel()),
-        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "sub-menu-arrow" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
+        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "item-actions" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
 });

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

@@ -96,8 +96,17 @@ export const MenuInline = (props) => {
         const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, top: Number(style.top) + itemSpacing, height: Number(style.height) - itemSpacing });
         return (React.createElement(Item, { className: clsx({
                 'item-selected': selectedKeys.has(item.key),
+                'item-expanded': openKeys.has(item.key),
             }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
-    }, [flattenItems, handleClickItem, inlinePadding, inlineIndent, itemSpacing, selectedKeys]);
+    }, [
+        flattenItems,
+        handleClickItem,
+        inlinePadding,
+        inlineIndent,
+        itemSpacing,
+        selectedKeys,
+        openKeys,
+    ]);
     // console.log('render');
-    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.scaledHeight, width: autoSize.scaledWidth, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
+    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
 };

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

@@ -35,7 +35,7 @@ export const MenuItemRoot = styled.div `
     overflow: hidden;
   }
 
-  > .sub-menu-arrow {
+  > .item-actions {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,15 +50,20 @@ export const MenuItemRoot = styled.div `
     background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Menu) === null || _f === void 0 ? void 0 : _f.itemActiveBg};
   }
 
+  &.item-expanded {
+    > .item-actions {
+      > i[type='icon-ants-expand-more'] {
+        rotate: 180deg;
+        transition: rotate 2s;
+      }
+    }
+  }
+
   &:hover:not(.item-disabled, .item-selected) {
     background-color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Menu) === null || _h === void 0 ? void 0 : _h.itemHoverBg};
   }
 `;
 export const VirtualizedMenuContainer = styled(VariableSizeList) `
   font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
-  overflow: hidden !important;
-
-  &:hover {
-    overflow: auto !important;
-  }
+  scrollbar-gutter: stable;
 `;

package/es/components/organism/Login/Login.js

@@ -694,7 +694,7 @@ export const Login = props => {
         }
     };
     return (React.createElement(CookiesProvider, null,
-        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start' },
-            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef }, renderMain()),
+        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start', id: "login_container" },
+            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef, id: "login_main" }, renderMain()),
             !isMobile && React.createElement(LoginBannerZone, { className: "login-banner-zone", id: "login_banner_zone" }))));
 };

package/es/components/organism/Login/components/ForgotPassword/ForgotPassword.js

@@ -177,16 +177,16 @@ const ForgotPassword = props => {
                                 });
                                 errorRef.current.email = false;
                                 setLoginError('');
-                            } }),
+                            }, status: errorRef.current.email && state.errors.email ? 'error' : undefined }),
                         errorRef.current.email && state.errors.email ? (React.createElement(Text, { type: "danger", style: { marginTop: 5 } }, state.errors.email)) : null,
                         state.loginError && (React.createElement(Text, { type: "danger", style: { marginTop: 5 } }, state.loginError))),
-                    React.createElement(Flex, { vertical: true, gap: 15 },
+                    React.createElement(Flex, { vertical: true, gap: 5 },
                         React.createElement(Flex, { justify: "center", style: {
                                 transform: isMobile ? 'scale(1)' : `scale(${scaleCaptcha})`,
                                 transformOrigin: !isMobile ? '' : '0 0',
                             } },
                             React.createElement(ReCAPTCHA, { sitekey: reCaptchaKey, onChange: onCaptchaChange, onExpired: onExpiredCaptcha, size: "normal" })),
-                        state.errors.captcha && (React.createElement(Text, { type: "danger", style: { marginTop: 10 } }, "Please verify you are human"))),
+                        state.errors.captcha && React.createElement(Text, { type: "danger" }, "Please verify you are human")),
                     React.createElement(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { paddingBottom: 40 } },
                         React.createElement(StyleButton, { isMobile: isMobile, onClick: signIn, type: "primary" }, "Continue"),
                         React.createElement(StyleButton, { isMobile: isMobile, type: "text", onClick: handleBack }, "Back to login"))))), isShowLogo: false, footer: null }));

package/es/components/organism/Login/components/LoginSelectPortal/Item/styled.js

@@ -19,8 +19,8 @@ export const WrapperItem = styled.div `
     object-fit: contain;
   }
 
-  :hover {
-    background-color: #f2f9ff;
+  &:hover {
+    background-color: #f2f9ff !important;
   }
 
   .antsomi-typography {

package/es/components/organism/Login/components/LoginSelectPortal/LoginSelectPortal.js

@@ -178,8 +178,9 @@ export const LoginSelectPortal = props => {
                             color: '#595959',
                             fontSize: 11,
                         } }, "No portal matches your keyword"))) : (React.createElement(Scrollbars, { style: {
-                        height: 514,
+                        height: `calc(100vh - 410px)`,
                         width: '100%',
+                        minHeight: `145px`,
                     } },
                     React.createElement(WrapperList, null,
                         React.createElement(Row, { gutter: [20, 20] }, filterListNetworks.map((network) => (React.createElement(Col, { span: 12 },

package/es/components/organism/Login/components/LoginStep2/LoginStep2.js

@@ -125,14 +125,15 @@ export const LoginStep2 = props => {
                             React.createElement(Text, { isMobile: isMobile },
                                 "Open Google Authenticator and enter the code from ",
                                 React.createElement("b", null, "antsomi.com"))) })),
-                React.createElement(Flex, { vertical: true, gap: isMobile ? 20 : 5 },
-                    React.createElement(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
-                            setState(draft => {
-                                draft.code = e.target.value;
-                            });
-                            errorRef.current = true;
-                        } }),
-                    errorRef.current && state.codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null,
+                React.createElement(Flex, { vertical: true, gap: isMobile ? 20 : 11 },
+                    React.createElement(Flex, { vertical: true, gap: 10 },
+                        React.createElement(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
+                                setState(draft => {
+                                    draft.code = e.target.value;
+                                });
+                                errorRef.current = true;
+                            }, status: errorRef.current && state.codeError ? 'error' : undefined }),
+                        errorRef.current && state.codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null),
                     React.createElement(Checkbox, { checked: state.isTrust, onChange: e => {
                             setState(draft => {
                                 draft.isTrust = e.target.checked;

package/es/components/organism/Login/components/SetupGGAuthenticator/SetupGGAuthenticator.js

@@ -114,7 +114,7 @@ const SetupGGAuthenticator = props => {
                         if (e.target.value.trim().length) {
                             setCodeError(false);
                         }
-                    } }),
+                    }, status: errorRef.current && codeError ? 'error' : '' }),
                 errorRef.current && codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null)), footer: React.createElement(Flex, { vertical: true, gap: 92 },
             React.createElement(Flex, { vertical: true, gap: isMobile ? 30 : 15 },
                 React.createElement(StyleButton, { isMobile: isMobile, loading: isLoading, type: "primary", onClick: updateG2FA }, "Complete"),

package/es/components/organism/Login/components/SignIn/SignIn.js

@@ -86,7 +86,7 @@ export const SignIn = props => {
                         } })) : (React.createElement(Icon, { type: "icon-ants-invisible", style: {
                             color: '#595959',
                         } })) })),
-            loginError && React.createElement("span", { style: { color: 'red' } }, "Email or password is invalid"),
+            loginError && (React.createElement("span", { style: { color: 'red', fontSize: 11 } }, "Email or password is invalid")),
             React.createElement(Flex, { style: { width: '100%', marginTop: '40px' }, vertical: true, className: "" },
                 React.createElement(Form.Item, null,
                     React.createElement(StyleButton, { isMobile: isMobile, type: "primary", htmlType: "submit", style: { width: '100%', marginBottom: isMobile ? 15 : 0 }, loading: isLoading }, "Sign in")),

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

@@ -2,21 +2,31 @@ import { Button, Flex, Form, Input } from 'antd';
 import styled from 'styled-components';
 export const LoginMain = styled(Flex) `
   background: #eaf1fb;
+
   height: 100vh;
+  max-height: 100vh;
+
   width: 100%;
+
+  overflow: hidden;
 `;
 export const LoginBannerZone = styled.div `
   display: flex;
   flex: 2;
+  z-index: 1;
+
+  min-width: calc(100vw - 404px);
+  max-width: calc(100vw - 300px);
 `;
 export const WrapperLogin = styled(Flex) `
   height: 100%;
   overflow-y: auto;
   background-color: white;
+  z-index: 5;
 
   width: ${props => (props.isMobile ? '100%' : '')};
   min-width: ${props => (props.isMobile ? '100%' : '300px')};
-  max-width: ${props => (props.isMobile ? '100%' : '400px')};
+  max-width: ${props => (props.isMobile ? '100%' : '404px')};
 
   ${(props) => !props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : ''}
 `;
@@ -63,8 +73,12 @@ export const AvatarImage = styled.img `
 `;
 export const StyledForm = styled(Form) `
   input {
-    height: ${(props) => (props.isMobile ? ' 44px' : '30px')};
-    font-size: ${(props) => (props.isMobile ? ' 16px !important' : '12px')};
+    height: ${(props) => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   input:-webkit-autofill,
@@ -76,12 +90,20 @@ export const StyledForm = styled(Form) `
   }
 
   .antsomi-input-password-icon {
-    font-size: ${(props) => (props.isMobile ? ' 24px' : '15px')};
+    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   .antsomi-input-affix-wrapper {
     padding: 0 10px !important;
-    font-size: ${(props) => (props.isMobile ? ' 16px !important' : '12px')};
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   .antsomi-form-item-explain-error {
@@ -91,6 +113,10 @@ export const StyledForm = styled(Form) `
 export const StyleInput = styled(Input) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '36px !important'};
   font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+  &::placeholder {
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  }
 `;
 export const StyleButton = styled(Button) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '40px !important'};

package/package.json

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