@antscorp/antsomi-ui 1.3.3-beta.82 → 1.3.3-beta.84

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -27,6 +27,7 @@ const defaultProps = {
     isViewMode: false,
     isRealTime: true,
     errors: [],
+    ms: 450,
     canMultipleLine: false,
     apiConfig: {
         domain: 'https://sandbox-media-template.antsomi.com/cdp',
@@ -44,7 +45,7 @@ const defaultProps = {
     addMessageToQueue: () => { },
 };
 export const InputDynamic = (props) => {
-    const { value, isViewMode, isRealTime, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
+    const { value, isViewMode, isRealTime, ms, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
     // States
     const [textValue, setTextValue] = useState(initialValue(value));
     const [initSelectedProperties, setInitSelectedProperties] = useState({
@@ -251,7 +252,7 @@ export const InputDynamic = (props) => {
         timerRef.current = setTimeout(() => {
             caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
             onTriggerChange();
-        }, 1000);
+        }, ms);
     };
     const handleKeyPress = (e) => {
         if (isRealTime) {

package/es/components/atoms/InputDynamic/types.d.ts

@@ -12,6 +12,7 @@ export type InputDynamicProps = {
     value: string;
     isViewMode?: boolean;
     isRealTime?: boolean;
+    ms?: number;
     errors?: string[];
     disabled?: boolean;
     disabledOpts?: DisableShortLinkTypeProps;

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

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { slideActionType } from './constants';
+export type SlideBarOptionProps = {
+    label: string;
+    value: string;
+};
+export type SlideBarLimitProps = {
+    max: number;
+    min: number;
+};
+export type ActionType = (typeof slideActionType)[keyof typeof slideActionType];
+export type SlideBarState = {
+    cacheInfoClicked: SlideBarOptionProps;
+    disabledPrev: boolean;
+    disabledNext: boolean;
+    notiUpdateScroll: number;
+};
+export interface SlideBarProps {
+    isViewMode?: boolean;
+    isShowLabelSequentially?: boolean;
+    isShowAdd?: boolean;
+    isDragDisabled?: boolean;
+    disabled?: boolean;
+    activeId: string;
+    prefix?: string;
+    options: SlideBarOptionProps[];
+    limit?: SlideBarLimitProps;
+    errors: any;
+    callback?: (type: ActionType, data?: SlideBarOptionProps | SlideBarOptionProps[]) => any;
+}
+export declare const SlideBar: FC<SlideBarProps>;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -0,0 +1,272 @@
+// Libraries
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import _ from 'lodash';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+// Components
+import { Icon } from '../Icon';
+import { Popover } from '../Popover';
+// Styled
+import { ContainerSlideBar, MainContent, MenuItem, MenuList, SlideItem, SliderWrapper, SlideText, WrapperDisable, WrapperOverflow, } from './styled';
+import { PlusCircleFilled } from '@ant-design/icons';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { BTN_ADD_SIZE, slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+// Utils
+import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const getItemStyle = (isDragging, draggableStyle) => (Object.assign({ 
+    // some basic styles to make the items look a bit nicer
+    userSelect: 'none', borderLeft: isDragging ? '1px solid #e0e0e0' : 'none' }, draggableStyle));
+const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
+export const SlideBar = props => {
+    var _a, _b, _c, _d;
+    const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
+    // States
+    const [state, setState] = useState({
+        cacheInfoClicked: {
+            label: '',
+            value: '',
+        },
+        disabledPrev: true,
+        disabledNext: true,
+        notiUpdateScroll: 1,
+    });
+    // Refs
+    const wrapperOverflowRef = useRef(null);
+    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)), [disabled, isViewMode, limit, options.length]);
+    const disabledDuplicate = useMemo(() => (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledDelete = useMemo(() => (limit && options.length <= (limit === null || limit === void 0 ? void 0 : limit.min)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    // Locales
+    const { t } = i18nInstance;
+    const handleClick = (event, slideInfo) => {
+        event.stopPropagation();
+        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: slideInfo })));
+    };
+    const reorder = (list, startIndex, endIndex) => {
+        const result = Array.from(list);
+        const [removed] = result.splice(startIndex, 1);
+        result.splice(endIndex, 0, removed);
+        return result;
+    };
+    const handleDragEnd = result => {
+        try {
+            // dropped outside the list
+            if (!result.destination) {
+                return;
+            }
+            const items = reorder(options, result.source.index, result.destination.index);
+            if (typeof callback === 'function') {
+                callback(slideActionType.RE_ORDERS, items);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDragEnd',
+                args: {
+                    error,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log('error :>', error);
+        }
+    };
+    const handleActiveSlide = (e, slideInfo) => {
+        try {
+            e.stopPropagation();
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo) && activeId !== slideInfo.value) {
+                callback(slideActionType.ACTIVE, slideInfo);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleActiveSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleDuplicateSlide = (slideInfo) => {
+        try {
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
+                callback(slideActionType.DUPLICATE, slideInfo);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDuplicateSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleDeleteSlide = (slideInfo) => {
+        try {
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
+                callback(slideActionType.DELETE, slideInfo);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDeleteSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleChangeScrollDirection = (type = '') => {
+        try {
+            if (_.isEmpty(wrapperOverflowRef.current))
+                return;
+            if (type === 'PREVIOUS') {
+                if (wrapperOverflowRef.current.scrollLeft < WIDTH_SLIDE_ITEM) {
+                    wrapperOverflowRef.current.scrollLeft = 0;
+                }
+                else {
+                    wrapperOverflowRef.current.scrollLeft -= WIDTH_SLIDE_ITEM;
+                }
+            }
+            else if (type === 'NEXT') {
+                wrapperOverflowRef.current.scrollLeft += WIDTH_SLIDE_ITEM;
+            }
+            setState(prev => (Object.assign(Object.assign({}, prev), { notiUpdateScroll: prev.notiUpdateScroll + 1 })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleChangePrev',
+                args: {
+                    type,
+                    error,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleAddSlide = () => {
+        try {
+            if (typeof callback === 'function') {
+                callback(slideActionType.ADD);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleAddSlide',
+                args: {
+                    error,
+                },
+            });
+        }
+    };
+    useEffect(() => () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
+    }, []);
+    // Calculator center selected template
+    useEffect(() => {
+        const selectedSlideEle = document.getElementById(`template-slide-${activeId}`);
+        if (selectedSlideEle instanceof HTMLElement &&
+            wrapperOverflowRef &&
+            wrapperOverflowRef.current) {
+            // Calculate the scroll position to center the element
+            const elementLeftOffset = selectedSlideEle.offsetLeft;
+            const containerWidth = wrapperOverflowRef.current.clientWidth;
+            const elementWidth = selectedSlideEle.clientWidth;
+            const scrollPosition = elementLeftOffset - (containerWidth - elementWidth) / 2;
+            // Set the scroll position of the container
+            wrapperOverflowRef.current.scrollLeft = scrollPosition;
+        }
+    }, [activeId]);
+    useEffect(() => {
+        if (!_.isEmpty(wrapperOverflowRef.current)) {
+            const isDisabledPrevTmp = getObjectPropSafely(() => { var _a; return ((_a = wrapperOverflowRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; });
+            const isDisabledNextTmp = getObjectPropSafely(() => {
+                const { scrollLeft = 0, offsetWidth = 0, scrollWidth = 0, } = wrapperOverflowRef.current || {};
+                return offsetWidth === scrollWidth || scrollWidth <= Math.ceil(scrollLeft) + offsetWidth;
+            });
+            setState(prev => (Object.assign(Object.assign({}, prev), { disabledPrev: isDisabledPrevTmp, disabledNext: isDisabledNextTmp })));
+        }
+    }, [options, state.notiUpdateScroll]);
+    const renderMainContent = () => options.map((item, index) => {
+        let { label } = _.cloneDeep(item);
+        if (isShowLabelSequentially) {
+            label = `${prefix} ${index + 1}`;
+        }
+        return (React.createElement(Draggable, { key: item.value, isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index }, (providedDraggable, snapshotDraggable) => {
+            var _a, _b;
+            return (React.createElement(SlideItem, Object.assign({ id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef }, providedDraggable.draggableProps, providedDraggable.dragHandleProps, { isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
+                    e.stopPropagation();
+                    handleActiveSlide(e, item);
+                } }),
+                React.createElement(SlideText, { isActive: activeId === item.value }, label),
+                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", content: React.createElement(MenuList, null,
+                        React.createElement(WrapperDisable, { disabled: disabledDuplicate },
+                            React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!disabledDuplicate) {
+                                        handleDuplicateSlide(state.cacheInfoClicked);
+                                    }
+                                } }, t(translations.duplicate.title))),
+                        React.createElement(WrapperDisable, { disabled: disabledDelete },
+                            React.createElement(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!disabledDelete) {
+                                        handleDeleteSlide(state.cacheInfoClicked);
+                                    }
+                                } }, t(translations.delete.title)))), arrow: false },
+                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false })))));
+        }));
+    });
+    const renderSliderDragDrop = () => (React.createElement(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow" },
+        React.createElement(DragDropContext, { onDragEnd: handleDragEnd },
+            React.createElement(Droppable, { droppableId: "droppable", direction: "horizontal" }, (providedDroppable, _snapshotDroppable) => (React.createElement(MainContent, Object.assign({ ref: providedDroppable.innerRef }, providedDroppable.droppableProps), renderMainContent()))))));
+    return (React.createElement(ContainerSlideBar, null,
+        React.createElement(SliderWrapper, { isViewMode: isViewMode },
+            React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+                    e.stopPropagation();
+                    handleChangeScrollDirection('PREVIOUS');
+                } }),
+            renderSliderDragDrop(),
+            React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
+                    e.stopPropagation();
+                    handleChangeScrollDirection('NEXT');
+                } })),
+        isShowAdd && (React.createElement(PlusCircleFilled, { style: {
+                fontSize: `${BTN_ADD_SIZE}px`,
+                cursor: disabledAdd ? 'not-allowed' : 'pointer',
+                color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
+            }, disabled: disabledAdd, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabledAdd) {
+                    handleAddSlide();
+                }
+            } }))));
+};
+SlideBar.defaultProps = {
+    isViewMode: false,
+    disabled: false,
+    isShowLabelSequentially: true,
+    isShowAdd: true,
+    isDragDisabled: false,
+    activeId: '',
+    prefix: 'Slide',
+    options: [],
+};

package/es/components/atoms/SlideBar/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const OFFSET_SIZE_SLIDE = 32;
+export declare const BTN_ADD_SIZE = 32;
+export declare const WIDTH_SLIDE_ITEM = 105;
+export declare const slideActionType: {
+    readonly ADD: "ADD_SLIDE";
+    readonly RE_ORDERS: "RE_ORDERS_SLIDE_LIST";
+    readonly ACTIVE: "ACTIVE_SLIDE";
+    readonly DUPLICATE: "DUPLICATE_SLIDE";
+    readonly DELETE: "DELETE_SLIDE";
+};

package/es/components/atoms/SlideBar/constants.js

@@ -0,0 +1,10 @@
+export const OFFSET_SIZE_SLIDE = 32;
+export const BTN_ADD_SIZE = 32;
+export const WIDTH_SLIDE_ITEM = 105;
+export const slideActionType = {
+    ADD: 'ADD_SLIDE',
+    RE_ORDERS: 'RE_ORDERS_SLIDE_LIST',
+    ACTIVE: 'ACTIVE_SLIDE',
+    DUPLICATE: 'DUPLICATE_SLIDE',
+    DELETE: 'DELETE_SLIDE',
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, {
+    isViewMode?: boolean | undefined;
+}, never>;
+export declare const WrapperOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SlideItem: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+    isSlideError?: boolean | undefined;
+}, never>;
+export declare const SlideText: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+}, never>;
+export declare const ContainerSlideBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDisable: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,136 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+/* eslint-disable indent */
+// Styled
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { BTN_ADD_SIZE, OFFSET_SIZE_SLIDE, WIDTH_SLIDE_ITEM } from './constants';
+export const SliderWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
+  box-sizing: border-box;
+  // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
+  width: calc(100% - ${BTN_ADD_SIZE}px - ${OFFSET_SIZE_SLIDE * 2}px);
+  flex: 1;
+  height: ${OFFSET_SIZE_SLIDE}px;
+  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+
+  .btn-action-slide-template {
+    width: ${OFFSET_SIZE_SLIDE}px !important;
+    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn-arrow-left {
+      position: absolute;
+      top: 0px;
+      left: 0;
+      border-right: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
+    }
+
+    &.btn-arrow-right {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      border-left: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.accent1};
+    }
+  }
+`;
+export const WrapperOverflow = styled.div `
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background-color: #eee;
+    width: 0px;
+    height: 0px;
+  }
+`;
+export const MainContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .slide-item {
+    border-right: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.accent1};
+  }
+`;
+export const SlideItem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+
+  border-top: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
+  border-bottom: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent1};
+  height: ${OFFSET_SIZE_SLIDE}px;
+  width: ${WIDTH_SLIDE_ITEM}px;
+  padding: 0px 10px;
+  cursor: pointer;
+  background-color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextActive : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0); }};
+
+  .icon-more-vertical {
+    font-weight: 600;
+  }
+
+  ${props => {
+    var _a;
+    return props.isSlideError &&
+        css `
+      border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8} !important;
+    `;
+}}
+`;
+export const SlideText = styled.div `
+  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  font-weight: 400;
+  line-height: ${OFFSET_SIZE_SLIDE}px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText); }};
+`;
+export const MenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+`;
+export const MenuItem = styled.div `
+  font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
+  line-height: 14px;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+
+  ${props => props.isDisabled &&
+    css `
+      pointer-events: none;
+    `}
+`;
+export const ContainerSlideBar = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  * > * {
+    box-sizing: border-box;
+  }
+`;
+export const WrapperDisable = styled.div `
+  cursor: pointer;
+
+  ${props => props.disabled &&
+    css `
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+`;

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

@@ -36,6 +36,7 @@ export * from './RateV2';
 export { InputDynamic } from './InputDynamic';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './SlideBar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -36,3 +36,4 @@ export * from './RateV2';
 export { InputDynamic } from './InputDynamic';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './SlideBar';

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

@@ -16,6 +16,9 @@ import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
 import localeData from 'dayjs/plugin/localeData';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
@@ -27,6 +30,8 @@ import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);

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

@@ -19,6 +19,7 @@ export interface AdvancedPickerProps {
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
+    timezone?: string;
     onUpdatedNewDate?: ({ date, option }: {
         date: string;
         option: TOption;

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

@@ -28,7 +28,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -60,11 +60,11 @@ export const AdvancedPicker = props => {
             calculationDate: newCalculationDates[0],
             value: 0,
         },
-        date: dayjs().format(format),
-        dateDisplay: dayjs().format(format),
+        date: dayjs().tz(timezone).format(format),
+        dateDisplay: dayjs().tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
-    const currDate = dayjs(date, format);
+    const currDate = dayjs(date, format).tz(timezone);
     const currWeek = currDate.isoWeek();
     const currDay = currDate.day();
     const currDayOfMonth = currDate.date();
@@ -97,9 +97,10 @@ export const AdvancedPicker = props => {
         boxShadow: token.boxShadowSecondary,
     };
     const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format)
+        .tz(timezone)
         .format(formatDisplay)
         .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay]);
+        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay, timezone]);
     const onChangeOption = (params) => {
         try {
             setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), params) })));
@@ -154,8 +155,8 @@ export const AdvancedPicker = props => {
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
-                        newDate = dayjs(propsDate, format, true).isValid()
-                            ? dayjs(propsDate, format).format(format)
+                        newDate = dayjs(propsDate, format, true).tz(timezone).isValid()
+                            ? dayjs(propsDate, format).tz(timezone).format(format)
                             : propsDate;
                         setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate, optionSelected: Object.assign(Object.assign({}, option), { dateType: newDateType }) })));
                     }
@@ -195,7 +196,8 @@ export const AdvancedPicker = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
-    const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
+    const disableDate = current => current > dayjs(disableAfterDate, format).tz(timezone) ||
+        current < dayjs(disableBeforeDate, format).tz(timezone);
     const toggleOpenDropdown = () => {
         try {
             setState(() => (Object.assign(Object.assign({}, state), { isOpen: !state.isOpen })));
@@ -238,7 +240,7 @@ export const AdvancedPicker = props => {
     };
     const onClickNow = () => {
         try {
-            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
+            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().tz(timezone).format(format) })));
         }
         catch (error) {
             handleError(error, {
@@ -288,15 +290,19 @@ export const AdvancedPicker = props => {
         const getNewDate = (item, index) => {
             switch (valueType) {
                 case 'WEEK':
-                    return dayjs(date).isoWeek(item);
+                    return dayjs(date).tz(timezone).isoWeek(item);
                 case 'DAY_OF_WEEK':
-                    return dayjs(date).day(index);
+                    return dayjs(date).tz(timezone).day(index);
                 case 'MONTH_DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(item);
+                    return dayjs(date)
+                        .tz(timezone)
+                        .year(ANCHOR_LEAP_YEAR)
+                        .month(currMonthSelected)
+                        .date(item);
                 case 'DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(item);
+                    return dayjs(date).tz(timezone).year(ANCHOR_LEAP_YEAR).month(0).date(item);
                 default:
-                    return dayjs(date);
+                    return dayjs(date).tz(timezone);
             }
         };
         return (React.createElement("div", { style: contentStyle },
@@ -313,7 +319,7 @@ export const AdvancedPicker = props => {
                             'custom-picker-item-selected': getCellSelected(item, index),
                         }), onClick: () => {
                             const newDate = getNewDate(item, index);
-                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
+                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).tz(timezone).format(format) })));
                         } }, item)))))) : (React.createElement(React.Fragment, null,
                     React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationTypes, value: option.calculationType.value, onChange: value => {
                             const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
@@ -330,7 +336,7 @@ export const AdvancedPicker = props => {
     const cellRender = useCallback((current, info) => {
         const onChangeDatePicker = (value) => {
             try {
-                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
+                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).tz(timezone).format(format) })));
             }
             catch (error) {
                 handleError(error, {
@@ -347,13 +353,13 @@ export const AdvancedPicker = props => {
                     let newDate;
                     switch (info.subType) {
                         case 'hour':
-                            newDate = dayjs(date).hour(current);
+                            newDate = dayjs(date).tz(timezone).hour(current);
                             break;
                         case 'minute':
-                            newDate = dayjs(date).minute(current);
+                            newDate = dayjs(date).tz(timezone).minute(current);
                             break;
                         case 'second':
-                            newDate = dayjs(date).second(current);
+                            newDate = dayjs(date).tz(timezone).second(current);
                             break;
                         default:
                             break;
@@ -370,14 +376,16 @@ export const AdvancedPicker = props => {
                 e.stopPropagation();
                 onChangeDatePicker(current);
             } }, getCellRender(current, valueType, info)));
-    }, [valueType, format, date]);
+    }, [valueType, format, date, timezone]);
     return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container" },
         !!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, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, style: {
-                    width: 120,
-                }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+            React.createElement(DatePicker, { 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,
+                // }}
+                disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
                     '--error': errorMessage,
                     'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),

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

@@ -3,10 +3,15 @@
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 /**
  * Calculates a new date based on the given parameters.
  * @param {string} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.

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

@@ -11,6 +11,7 @@ export interface AdvancedRangePickerProps {
     errorMessage?: string;
     showLabel?: boolean;
     showTime?: boolean;
+    timezone?: string;
     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, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,8 +55,8 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20 },
-        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, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
-        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, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+        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') }),
+        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/locales/en/translation.json

@@ -34,6 +34,12 @@
         "title": "Edit",
         "description": ""
     },
+    "duplicate": {
+        "title": "Duplicate"
+    },
+    "delete": {
+        "title": "Delete"
+    },
     "messageError": {
         "createColorProfile": {
             "message": "Create Color Profile Failed",

package/es/locales/i18n.d.ts

@@ -36,6 +36,12 @@ export declare const translationsJson: {
                 title: string;
                 description: string;
             };
+            duplicate: {
+                title: string;
+            };
+            delete: {
+                title: string;
+            };
             messageError: {
                 createColorProfile: {
                     message: string;

package/es/locales/translations.d.ts

@@ -36,6 +36,12 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         title: string;
         description: string;
     };
+    duplicate: {
+        title: string;
+    };
+    delete: {
+        title: string;
+    };
     messageError: {
         createColorProfile: {
             message: string;

package/es/test.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, } from './components';
+import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, SlideBar, } from './components';
 // Queries configs
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
 export const BACKGROUND_COLOR_STYLE = {
@@ -45,6 +45,23 @@ export const App = () => {
         color: 'green',
         customColors,
     });
+    const [stateSlideBar, setStateSlideBar] = useState({
+        errors: [],
+        disabled: true,
+        prefix: 'Item',
+        isViewMode: false,
+        isShowAdd: true,
+        limit: {
+            min: 1,
+            max: 2,
+        },
+        activeId: '1',
+        options: Array.from({ length: 5 }, (_, index) => ({
+            label: `Item ${index + 1}`,
+            value: `${index + 1}`,
+        })),
+        isShowLabelSequentially: false,
+    });
     const [radioValue, setRadioValue] = useState('color');
     const [sliderValue, setSliderValue] = useState(10);
     const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
@@ -79,6 +96,20 @@ export const App = () => {
     const handleSetIcon = value => {
         setIcon(value);
     };
+    const callbackSlideBar = (type, data) => {
+        console.log({ type, data });
+    };
+    // --------------------------- Test SlideBar start -------------------------------------------
+    return (React.createElement("div", { style: {
+            width: 500,
+            height: 500,
+            border: '1px solid black',
+            margin: '0 auto',
+            padding: 12,
+            borderRadius: '10px',
+        } },
+        React.createElement(SlideBar, Object.assign({}, stateSlideBar, { callback: callbackSlideBar }))));
+    // --------------------------- Test SlideBar end -------------------------------------------
     // ----------------------------  Test Input Dynamic start ------------------------------
     // return (
     //   <div
@@ -288,6 +319,5 @@ export const App = () => {
 };
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(ConfigProvider, { locale: "en" },
-        React.createElement(App, null))));
+root.render(React.createElement(ConfigProvider, { locale: "en" },
+    React.createElement(App, null)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.82",
+  "version": "1.3.3-beta.84",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -67,11 +67,15 @@
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@tanstack/react-query": "4.20.4",
+    "@tanstack/react-query-devtools": "4.20.4",
     "@tinymce/tinymce-react": "^3.7.0",
     "@types/currency-formatter": "1.5.1",
+    "ace-builds": "1.4.14",
     "antd": "5.12.6",
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
+    "currency-formatter": "1.5.9",
     "dayjs": "^1.11.10",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
@@ -79,17 +83,14 @@
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
     "i18next": "21.6.16",
-    "currency-formatter": "1.5.9",
-    "@tanstack/react-query": "4.20.4",
-    "@tanstack/react-query-devtools": "4.20.4",
-    "pako": "2.0.4",
-    "ace-builds": "1.4.14",
-    "react-ace": "9.5.0",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
+    "pako": "2.0.4",
     "qs": "6.10.3",
+    "react-ace": "9.5.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",
     "react-draggable": "^4.4.5",
     "react-markdown": "^8.0.7",
@@ -102,7 +103,6 @@
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/eslint-config-antsomi": "1.0.4",
-    "@types/pako": "2.0.0",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -132,7 +132,9 @@
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.10",
+    "@types/pako": "2.0.0",
     "@types/react": "^18.0.33",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "^5.1.26",