@antscorp/antsomi-ui 1.3.5-beta.55 → 1.3.5-beta.57

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

@@ -1,6 +1,4 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
-    size?: 'large' | 'medium';
-    backgroundColor?: string;
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size },
+        React.createElement(MobileInner, null,
             children,
             React.createElement(MobileBottomLine, null))));
 };

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

@@ -1,4 +1,3 @@
-import type { MobileFrameProps } from './MobileFrame';
 export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, MobileFrameProps, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,5 @@
 // Libraries
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 // Assets
 import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
 export const MobileWrapper = styled.div `
@@ -12,17 +12,12 @@ export const MobileWrapper = styled.div `
 export const MobileInner = styled.div `
   position: relative;
   width: 100%;
-  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
-  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
-  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
-  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
-  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  max-width: 336px;
+  height: 695px;
+  margin: 61px 23px 20px 24px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
   overflow: hidden;
-
-  ${props => props.backgroundColor &&
-    css `
-      background-color: ${props.backgroundColor};
-    `}
 `;
 export const MobileBottomLine = styled.div `
   width: 145px;

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

@@ -9,20 +9,15 @@ export const Slider = memo(props => {
     const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
-    // const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
-    const restProps = omit(props, ['tooltipVisible']);
+    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { tooltip: tooltipVisible !== 'default' && {
-                    open: tooltipVisible,
-                }, marks: {
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
                     0: ' ',
                 } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, restProps, { tooltip: tooltipVisible !== 'default' && {
-                open: tooltipVisible,
-            } }))));
+        React.createElement(AntdSlider, Object.assign({}, restProps))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps {
-    defaultSliderTrack?: boolean;
+export interface SliderProps extends SliderSingleProps {
 }
-export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;
+export declare const SliderV2: React.FC<SliderProps | SliderRangeProps>;

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

@@ -4,18 +4,20 @@ import React, { useState } from 'react';
 import { Slider as AntdSlider } from 'antd';
 // React.FC<SliderProps>
 export const SliderV2 = props => {
-    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
-    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
-    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
+    const [value, setValue] = useState(0);
+    // console.log('sliderRef:: ', sliderRef);
+    // const min = props.min || 0;
+    // const max = props.max || 100;
+    const { min, max, onChange, styles, range } = props;
+    if (min && max && min < 0 && max > 0 && !range) {
         const sliderWidth = max - min;
-        const calcValue = value || valueInternal;
-        const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
-        const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
-        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
-                setValueInternal(value);
+        const leftTrackPosition = `${(Math.abs(value > 0 ? min : min - value) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(value) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value, onChange: value => {
+                setValue(value);
                 if (onChange)
                     onChange(value);
-            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: { 0: ' ' } }, props)));
     }
     return React.createElement(AntdSlider, Object.assign({}, props));
 };

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

@@ -33,7 +33,6 @@ export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './SlideBar';

package/es/components/atoms/index.js

@@ -33,7 +33,6 @@ export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './SlideBar';

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

@@ -291,24 +291,25 @@ export const GlobalStyle = () => {
             }
           }
 
-          /* .antsomi-picker-date-panel {
+          .antsomi-picker-date-panel {
             position: relative;
-          } */
+          }
 
-          /* .antsomi-picker-date-panel::before {
+          .antsomi-picker-date-panel::before {
             content: 'Hours';
             position: absolute;
             top: 0;
             right: 0;
             transform: translateX(100%);
             width: 61px;
+            /* width: 53.5px; */
             font-weight: bold;
             border-right: 1px solid rgba(5, 5, 5, 0.06);
             height: 38px;
             display: flex;
             align-items: center;
             justify-content: center;
-          } */
+          }
 
           .antsomi-picker-time-panel {
             .antsomi-picker-time-panel-column:after {
@@ -335,94 +336,43 @@ export const GlobalStyle = () => {
               display: none;
             }
 
-            .antsomi-picker-time-panel-column {
-              width: 60px;
-              margin-top: 38px;
-              /* margin-top: 0; */
-              scrollbar-width: unset;
-              scrollbar-color: unset;
-
-              &::-webkit-scrollbar {
-                width: 6px;
-                background: transparent;
-              }
-              &::-webkit-scrollbar-track {
-                /* margin-top: 38px; */
-                border-radius: 10px;
-              }
-            }
-
-            /* ul.antsomi-picker-time-panel-column::before {
-              content: '';
-              position: absolute;
-              background: red;
-              top: 0;
-              right: 0;
-              width: 1px;
-              bottom: 0;
-            } */
-
-            /* .antsomi-picker-time-panel-column::before {
-              content: 'Hours';
-              position: sticky;
-              display: block;
-              top: 0;
-              height: 38px;
-              line-height: 38px;
-              text-align: center;
-              font-weight: bold;
-              background-color: #fff;
-            }
-
-            .antsomi-picker-time-panel-column:nth-child(1)::before {
-              content: 'Hours';
-            }
-            .antsomi-picker-time-panel-column:nth-child(2)::before {
-              content: 'Minutes';
-            }
-            .antsomi-picker-time-panel-column:nth-child(3)::before {
-              content: 'Seconds';
-            } */
-
-            /* .antsomi-picker-content {
+            .antsomi-picker-content {
               position: relative;
 
               .antsomi-picker-time-panel-column {
                 margin-top: 38px;
                 width: 60px;
               }
-            } */
-
-            .antsomi-picker-content {
-              position: relative;
             }
 
-            /* .antsomi-picker-content::after,
+            .antsomi-picker-content::after,
             .antsomi-picker-content::before {
               content: 'Minutes';
               position: absolute;
               top: 0;
               left: 61px;
+              /* left: 53.5px; */
               width: 60px;
+              /* width: 52.5px; */
               height: 38px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-weight: bold;
-            } */
+            }
 
-            /* .antsomi-picker-content::before {
+            .antsomi-picker-content::before {
               border-right: 1px solid rgba(5, 5, 5, 0.06);
-            } */
-            /* .antsomi-picker-content::after {
+            }
+            .antsomi-picker-content::after {
               content: 'Seconds';
               left: 120px;
-            } */
+            }
           }
 
           /* Custom css scrollbar */
           ul {
-            padding-left: 6px;
+            padding-left: 8px;
             scrollbar-gutter: stable;
           }
         }
@@ -465,16 +415,6 @@ export const GlobalStyle = () => {
               content: 'Hours';
               border: none;
               left: 0;
-
-              position: absolute;
-              top: 0;
-              /* left: 61px; */
-              width: 60px;
-              height: 38px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-weight: bold;
             }
           }
           &.is-minutes-picker {

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -53,7 +53,7 @@ const styleContainAlpha = {
 const CustomPicker = props => {
     var _a, _b, _c, _d;
     // Props
-    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "isHideAlpha", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -101,9 +101,9 @@ const CustomPicker = props => {
                 React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                !isHideAlpha && (React.createElement("div", { style: rgbaStyling },
+                React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A"))))) : (React.createElement(EditableInputWrapper, null,
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
                 React.createElement(EditableInput, { value: props.color, onChange: onChange }),
                 React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
             React.createElement(Button, { onClick: () => {

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

@@ -3,7 +3,6 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
-    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

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

@@ -21,7 +21,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -74,7 +74,7 @@ export const ColorPicker = props => {
     };
     return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
         showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
+        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
             React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
                     backgroundColor: color,
                     display: 'block',
@@ -88,7 +88,6 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
-    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

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

@@ -18,7 +18,7 @@ import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
 import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
 // Styled
-import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, TimeLabel, } from './styled';
+import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, } from './styled';
 // Constants
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -244,8 +244,7 @@ export const AdvancedPicker = props => {
     };
     const onClickNow = () => {
         try {
-            const currentDate = dayjs();
-            setState(state => (Object.assign(Object.assign({}, state), { date: currentDate.format(format) })));
+            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
         }
         catch (error) {
             handleError(error, {
@@ -382,7 +381,11 @@ export const AdvancedPicker = props => {
         !!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 },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, 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, 
+            React.createElement(DatePicker
+            // ref={ref}
+            , { 
+                // ref={ref}
+                disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
                 // style={{
                 //   width: 120,
                 // }}
@@ -392,22 +395,15 @@ export const AdvancedPicker = props => {
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
                     'is-minutes-picker': valueType === 'MINUTE',
                     'is-hours-picker': valueType === 'HOUR',
-                }), renderExtraFooter: () => {
-                    const timeFormat = getTimePickerRender(valueType);
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement(DatePickerHeader, null,
-                            React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
-                            renderDateTypeOptions()),
-                        React.createElement(DatePickerFooter, null,
-                            React.createElement("div", { style: { padding: '0 10px' } },
-                                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-                            renderDropdownFooter()),
-                        React.createElement(Divider, null),
-                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
-                            ['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));
-                }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
+                }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
+                    React.createElement(DatePickerHeader, null,
+                        React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
+                        renderDateTypeOptions()),
+                    React.createElement(DatePickerFooter, null,
+                        React.createElement("div", { style: { padding: '0 10px' } },
+                            React.createElement(ErrorMessage, { errorMessage: errorMessage })),
+                        renderDropdownFooter()),
+                    React.createElement(Divider, null))), picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
                         format: getTimePickerRender(valueType),
                     }

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

@@ -7,6 +7,3 @@ export declare const DatePickerCustomInput: import("styled-components").StyledCo
 export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../../../atoms/Input").InputProps, any>;
 export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
-    $width: number;
-}, never>;

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

@@ -98,26 +98,3 @@ export const CalendarIconWrapper = styled.div `
   cursor: pointer;
   pointer-events: all;
 `;
-export const TimeLabel = styled.div `
-  position: absolute;
-  right: 0;
-  top: 120px;
-  height: 39.1px;
-  width: ${props => `${props.$width}px`};
-  /* width: 180px; */
-  display: flex;
-  align-items: stretch;
-  justify-content: space-around;
-
-  span {
-    width: 60px;
-    display: block;
-    text-align: center;
-    font-weight: bold;
-    border-left: 1px solid rgba(5, 5, 5, 0.06);
-
-    &:first-child {
-      border-left-color: transparent;
-    }
-  }
-`;

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

@@ -30,7 +30,7 @@ export declare const getCellRender: (current: number | Dayjs, valueType: ValueTy
  * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
  */
 export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week' | 'month' | 'quarter' | 'year';
-export declare const getTimePickerRender: (valueType: ValueTypes) => 'HH' | 'HHmm' | 'HHmmss' | 'mm' | undefined;
+export declare const getTimePickerRender: (valueType: ValueTypes) => "HH" | "HHmm" | "HHmmss" | "mm" | undefined;
 export declare function getLabelQuarterRange(day: string, format: string, locale: string, showYear?: boolean): string;
 export declare function getLabelQuarterRange(quarter: number, year?: number): string;
 export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdvancedType, valueType?: ValueTypes, formatInputDisplay?: string) => {

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

@@ -13,7 +13,6 @@ export interface AdvancedRangePickerProps {
     showTime?: boolean;
     timezone?: string;
     separator?: ReactNode;
-    inputStyle?: React.CSSProperties;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

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

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,9 +55,9 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20, align: "end" },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
         separator || null,
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

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

@@ -37,7 +37,7 @@ export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) =
     [settings]);
     const filteredSetting = useMemo(() => {
         if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
-            return Object.keys(settingMap).map(keySetting => (React.createElement(React.Fragment, { key: keySetting }, settingMap[keySetting])));
+            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

package/es/components/molecules/RichMenu/RichMenuBlock/constants.js

@@ -721,7 +721,7 @@ export const SAMPLE_RICHMENU = {
         displayDefault: true,
     },
     image: {
-        imageUrl: 'https://s.cystack.net/portal/organizations/487b0f9dd9d8543312dc25e32ac71e4f/logo.jpg',
+        imageUrl: 'https://sandbox-st-media-template.antsomi.com/upload/2024/01/04/8d8cf39a-748f-435c-b6c6-b71b5facc739.gif',
         imageStyles: {
             borderTopLeftRadius: '0px',
             borderTopRightRadius: '0px',

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.d.ts

@@ -4,7 +4,6 @@ export interface RichMenuChatBarProps extends React.HtmlHTMLAttributes<HTMLDivEl
     showRichMenu?: boolean;
     showTypingChat?: boolean;
     disabled?: boolean;
-    size?: 'large' | 'medium';
     onToggleRichMenu?: (toggle: boolean) => void;
     onToggleTypingChat?: (toggle: boolean) => void;
 }

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -19,15 +19,14 @@ import { TypingChat } from './TypingChat';
 const defaultProps = {
     label: 'Menu',
     showRichMenu: true,
-    size: 'large',
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
+    const { disabled, label, showRichMenu, showTypingChat, className, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "onToggleRichMenu", "onToggleTypingChat"]);
+    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
         React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
         React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
             React.createElement(Typography.Text, { className: "ants-text-sm" }, label),
-            label && React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
+            React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
 };
 RichMenuChatBar.defaultProps = defaultProps;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.d.ts

@@ -3,7 +3,6 @@ interface ChatBarWrapperProps {
     $showRichMenu?: boolean;
     $showTypingChat?: boolean;
     $disabled?: boolean;
-    $size?: 'large' | 'medium';
 }
 export declare const ChatBarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ChatBarWrapperProps, never>;
 export declare const ChatBarMenuBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ChatBarWrapper = styled(Flex) `
   position: relative;
-  height: ${props => (props.$size === 'medium' ? 65 : 84)}px;
+  height: 84px;
   padding: 10px 20px;
   background-color: #fff;
   z-index: 10;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -3,14 +3,8 @@ import { RichMenu } from '@antscorp/antsomi-ui/es/types';
 interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     richMenu: RichMenu;
     isPreview?: boolean;
-    messagePreview?: {
-        show?: boolean;
-        text?: string;
-    };
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
-    size?: 'large' | 'medium';
-    backgroundColor?: string;
     reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;