@antscorp/antsomi-ui 1.3.7-beta.67 → 1.3.7-beta.68

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

@@ -83,6 +83,11 @@ export const MAP_TITLE = {
     monToToDay: 'Mon-Today',
     monToSun: 'Mon-Sun',
 };
+export const MAP_TITLE_DISPLAY = {
+    ...MAP_TITLE,
+    [SELECTION_KEY.days_up_to_yesterday]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up to yesterday')`,
+    [SELECTION_KEY.days_up_to_today]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up today`,
+};
 export const RANGE_SELECTION_OPTIONS = {
     [SELECTION_KEY.today]: {
         key: SELECTION_KEY.today,
@@ -180,13 +185,3 @@ export const RANGE_SELECTION_OPTIONS = {
         isFixed: true,
     },
 };
-export const ACTION_TYPES = {
-    initState: 'init_state',
-    changeRangeType: 'change_range_type',
-    updateRangeInfo: 'update_range_info',
-    updateRangeValue: 'update_range_value',
-    changeAutoUpdateTo: 'change_auto_update_to',
-    togglePopover: 'toggle_popover',
-    apply: 'apply',
-    resetValue: 'reset_value',
-};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReducerState, ActionType } from './types';
 export declare const StateContext: import("react").Context<ReducerState>;
 export declare const ActionContext: import("react").Context<ActionType>;

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

@@ -55,7 +55,7 @@ export declare const CalendarSelectionUtils: {
     };
     getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
         rangeInfo: import("./types").RangeInfo;
-        currentRangeValue?: import("./types").RangeValue[] | undefined;
-        limitNumOfDays?: number | undefined;
+        currentRangeValue?: import("./types").RangeValue[];
+        limitNumOfDays?: number;
     }) => import("./types").RangeValue[];
 };

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

@@ -1,7 +1,8 @@
 import { produce } from 'immer';
-import { AUTO_UPDATE_TO_KEY, LOCAL_TIMEZONE, RANGE_LIMIT, SELECTION_KEY, TRIGGER_OUT_MODE, ACTION_TYPES, } from './constants';
+import { AUTO_UPDATE_TO_KEY, LOCAL_TIMEZONE, RANGE_LIMIT, SELECTION_KEY, TRIGGER_OUT_MODE, } from './constants';
 import { generateRangeInfo, getRangeValue, genTriggerOut } from './utils';
 import dayjs from 'dayjs';
+import { ACTION_TYPES } from './actions';
 const DEFAULT_VALUE = {
     rangeInfo: { type: SELECTION_KEY.today },
     rangeValue: [

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
 export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,14 +1,9 @@
 import { DatePickerProps, PopoverProps } from 'antd';
 import { Dispatch } from 'react';
 import { ValueOf } from 'type-fest';
-import { SELECTION_KEY, AUTO_UPDATE_TO_KEY, ACTION_TYPES } from './constants';
-export type TimeRangeDisplayProps = {
-    showType?: boolean;
-    formatStart?: string;
-    formatEnd?: string;
-    operator?: string;
-    render?: (value: CalendarSelectionValue, rangeSelectedTitle: string, rangeValueTitles: string[], handleOpenPopover: () => void) => React.ReactNode;
-};
+import { updateRangeInfo, changeRangeType, updateRangeValue, changeAutoUpdateTo, initState, togglePopover, apply, resetValue } from './actions';
+import { SELECTION_KEY, AUTO_UPDATE_TO_KEY } from './constants';
+import { TimeRangeDisplayProps } from './components/TimeRangeDisplay/TimeRangeDisplay';
 export type CalendarSelectionProps = Partial<{
     popoverProps: PopoverProps;
     rangeLimit: number;
@@ -37,41 +32,7 @@ export type ReducerState = {
     timezone: string;
     open: boolean;
 };
-export type Action = {
-    type: typeof ACTION_TYPES.initState;
-    payload: {
-        initData: CalendarSelectionValue;
-        needTriggerOut: boolean;
-    };
-} | {
-    type: typeof ACTION_TYPES.changeRangeType;
-    payload: {
-        rangeType: string;
-        callback?: (rangeInfo: RangeInfo) => void;
-    };
-} | {
-    type: typeof ACTION_TYPES.updateRangeInfo;
-    payload: {
-        updateValue: Partial<RangeInfo>;
-    };
-} | {
-    type: typeof ACTION_TYPES.updateRangeValue;
-    payload: {
-        rangeValue: RangeValue[];
-        options?: {
-            isManual: boolean;
-        };
-    };
-} | {
-    type: typeof ACTION_TYPES.changeAutoUpdateTo;
-    payload: Custom['autoUpdateTo'];
-} | {
-    type: typeof ACTION_TYPES.togglePopover;
-} | {
-    type: typeof ACTION_TYPES.apply;
-} | {
-    type: typeof ACTION_TYPES.resetValue;
-};
+export type Action = ReturnType<typeof changeRangeType> | ReturnType<typeof updateRangeInfo> | ReturnType<typeof updateRangeValue> | ReturnType<typeof changeAutoUpdateTo> | ReturnType<typeof initState> | ReturnType<typeof togglePopover> | ReturnType<typeof apply> | ReturnType<typeof resetValue>;
 type ToDay = {
     type: typeof SELECTION_KEY.today;
 };

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

@@ -1,4 +1,4 @@
-import { AutoUpdateTo, DaysUpToToday, DaysUpToYesterday, RangeInfo, RangeValue, ReducerState } from './types';
+import { AutoUpdateTo, RangeInfo, RangeValue, ReducerState } from './types';
 export declare const rangeInfoToStringType: (rangeInfo: RangeInfo) => string;
 export declare const serializeWeekStartsOn: (rangeType: string) => number | undefined;
 export declare const generateRangeInfo: (rangeType: string) => RangeInfo | null;
@@ -43,31 +43,10 @@ export declare const combineCurrentValue: (state: ReducerState) => {
     rangeValue: RangeValue[];
 };
 export declare const genTriggerOut: ({ mode, id, }: {
-    mode: ReducerState['triggerOut']['mode'];
+    mode: ReducerState["triggerOut"]["mode"];
     id?: number;
 }) => {
     mode: "auto" | "manual";
     id: number;
 };
 export declare const isAutoUpdateToOption: (value: unknown) => value is AutoUpdateTo;
-export declare const MAP_TITLE_DISPLAY: {
-    days_up_to_yesterday: (rangeInfo: DaysUpToYesterday) => string;
-    days_up_to_today: (rangeInfo: DaysUpToToday) => string;
-    today: string;
-    yesterday: string;
-    last_7_days: string;
-    last_14_days: string;
-    this_month: string;
-    last_30_days: string;
-    last_month: string;
-    all_time: string;
-    last_week: string;
-    this_week: string;
-    this_quarter: string;
-    last_quarter: string;
-    custom: string;
-    sundayToToDay: string;
-    sundayToSat: string;
-    monToToDay: string;
-    monToSun: string;
-};

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

@@ -284,8 +284,3 @@ export const isAutoUpdateToOption = (value) => {
     }
     return false;
 };
-export const MAP_TITLE_DISPLAY = {
-    ...MAP_TITLE,
-    [SELECTION_KEY.days_up_to_yesterday]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up to yesterday')`,
-    [SELECTION_KEY.days_up_to_today]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up today`,
-};

package/es/components/molecules/CaptureScreen/components/Cursor/styled.d.ts

@@ -1,7 +1,7 @@
 export declare const PlusCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipDrag: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DottedCursor: import("styled-components").StyledComponent<"div", any, {
-    bgColor?: string | undefined;
-    isPointerBox?: boolean | undefined;
+    bgColor?: string;
+    isPointerBox?: boolean;
     offset: number;
 }, never>;

package/es/components/molecules/CaptureScreen/components/Cursor/styled.js

@@ -13,7 +13,9 @@ export const PlusCursor = styled.div `
   /* border-radius: 50%; */
   background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
   background-position: center;
-  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
+  background-size:
+    90% 2px,
+    2px 90%; /*thickness = 2px, length = 50% (25px)*/
   background-repeat: no-repeat;
   box-sizing: border-box;
   cursor: none;

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

@@ -1,4 +1,6 @@
 import { CSSProperties } from 'react';
+import { BoxDimensionProps } from './components/CommentBox/types';
+import { DrawItemProps } from './types';
 export declare const OFFSET_CENTER = 20;
 export declare const SIZE_ADJUST = 1;
 export declare enum IGNORE_DRAW_ID_LIST {
@@ -7,10 +9,7 @@ export declare enum IGNORE_DRAW_ID_LIST {
     DRAW_ACTIONS = "antsomi-package-draw-action-options",
     CLASS_PREVENT_HOVER = "antsomi-package-ignore-hovering-draw"
 }
-export declare const COMMENT_BOX_DIMENSION_FIXED: {
-    readonly width: 330;
-    readonly height: 170;
-};
+export declare const COMMENT_BOX_DIMENSION_FIXED: BoxDimensionProps;
 export declare const styleDrawItem: {
     MEDIUM: number;
     SMALL: number;
@@ -39,25 +38,4 @@ export declare enum RECORD_KEYS {
     MUTED = "muted_recorder",
     TIMELINE = "timeline_recorder"
 }
-export declare const DRAW_ACTION_LIST: ({
-    key: DRAW_KEYS;
-    icon: string;
-    label: string;
-    isShowColorList: boolean;
-    colorList: string[];
-    type?: undefined;
-} | {
-    key: DRAW_KEYS;
-    icon: string;
-    type: string;
-    isShowColorList: boolean;
-    label?: undefined;
-    colorList?: undefined;
-} | {
-    key: DRAW_KEYS;
-    icon: string;
-    label: string;
-    isShowColorList: boolean;
-    colorList?: undefined;
-    type?: undefined;
-})[];
+export declare const DRAW_ACTION_LIST: Array<DrawItemProps>;

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

@@ -1,25 +1,24 @@
-/// <reference types="react" />
 export declare const ContainerCapture: import("styled-components").StyledComponent<"div", any, {
     isRecord: boolean;
-    imageURL?: string | undefined;
+    imageURL?: string;
 }, never>;
 export declare const BorderOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FlexColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FlexCenter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {
-    isRecord?: boolean | undefined;
+    isRecord?: boolean;
 }, never>;
 export declare const DrawerGroups: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperDraggable: import("styled-components").StyledComponent<"strong", any, {}, never>;
 export declare const DrawerGroupItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Divider: import("styled-components").StyledComponent<"div", any, {
-    isVertical?: boolean | undefined;
+    isVertical?: boolean;
 }, never>;
 export declare const PopupBySide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const WrapperColor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BoxColor: import("styled-components").StyledComponent<"div", any, {
-    bgColor?: string | undefined;
+    bgColor?: string;
 }, never>;
 export declare const ImageIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const OutlineRemoveContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,3 +1,3 @@
 export declare const ItemStyled: import("styled-components").StyledComponent<"div", any, {
-    $isActive?: boolean | undefined;
+    $isActive?: boolean;
 }, never>;

package/es/components/molecules/ChatBox/ChatBoxInsight/styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ChatBoxWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBoxBody: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -13,5 +12,5 @@ export declare const WrapperContentSuggest: import("styled-components").StyledCo
 export declare const WrapperHeader: import("styled-components").StyledComponent<"strong", any, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const WrapperBody: import("styled-components").StyledComponent<"div", any, {
-    types?: string | undefined;
+    types?: string;
 }, never>;

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

@@ -1,5 +1,5 @@
 export declare const ChatBoxWrapper: import("styled-components").StyledComponent<"div", any, {
-    withoutBox?: boolean | undefined;
+    withoutBox?: boolean;
 }, never>;
 export declare const ChatBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBoxBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
 export declare const CodeStructureWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BlockAbsolute: import("styled-components").StyledComponent<"div", any, {
-    left?: number | undefined;
+    left?: number;
 }, never>;

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

@@ -1,10 +1,10 @@
 import { CharacterType, CodeStructureData, SeparatorType } from './type';
 export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: {
-    characterType: CodeStructureData['characterType'];
-    digitalNumbers: CodeStructureData['digitalNumbers'];
-    alphabetLetters: CodeStructureData['alphabetLetters'];
-    capitalization: CodeStructureData['capitalization'];
-    characterOrder: CodeStructureData['characterOrder'];
+    characterType: CodeStructureData["characterType"];
+    digitalNumbers: CodeStructureData["digitalNumbers"];
+    alphabetLetters: CodeStructureData["alphabetLetters"];
+    capitalization: CodeStructureData["capitalization"];
+    characterOrder: CodeStructureData["characterOrder"];
 }) => string;
 export declare const generateCodeWithPrefixAndSuffix: (code: string, prefix: string, suffix: string, separator: SeparatorType) => string;
 export declare const calculateTotalCodes: ({ numberOfLetters, numberOfDigits, characterType, }: {

package/es/components/molecules/ColorPicker/ChromePicker/styled.js

@@ -5,8 +5,8 @@ import { ChromePicker } from 'react-color';
 export const StyledChromePicker = styled(ChromePicker) `
   padding: 0px !important;
   --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 
   div + div {
     padding-left: 0px !important;

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

@@ -42,7 +42,7 @@ const styleContainAlpha = {
 };
 const CustomPicker = props => {
     // Props
-    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors, ...restOf } = props;
+    const { className, style, children, onChange, onChangeComplete, presetColors, ...restOf } = props;
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -68,7 +68,7 @@ const CustomPicker = props => {
                                     width: '100%',
                                     height: 12,
                                     marginTop: 10,
-                                }, children: _jsx(Alpha, { ...restOf, pointer: HuePointer, onChange: onChange }) })] })] }), _jsxs("div", { style: { ...wrapperStyling, paddingBottom: 15 }, children: [_jsx(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }), isShowRgbaInput ? (_jsxs("div", { style: rgbaInputStyling, children: [_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "R" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "G" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "B" })] }), !isHideAlpha && (_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "A" })] }))] })) : (_jsxs(EditableInputWrapper, { children: [_jsx(EditableInput, { value: props.color, onChange: onChange }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "HEX" })] })), _jsx(Button, { onClick: () => {
+                                }, children: _jsx(Alpha, { ...restOf, pointer: HuePointer, onChange: onChange }) })] })] }), _jsxs("div", { style: { ...wrapperStyling, paddingBottom: 15 }, children: [_jsx(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }), isShowRgbaInput ? (_jsxs("div", { style: rgbaInputStyling, children: [_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "R" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "G" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "B" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "A" })] })] })) : (_jsxs(EditableInputWrapper, { children: [_jsx(EditableInput, { value: props.color, onChange: onChange }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "HEX" })] })), _jsx(Button, { onClick: () => {
                             setShowRgbaInput(true);
                             onChange('rgba(0, 0, 0, 0)');
                         }, children: "Clear" })] }), presetColors ? (_jsxs("div", { children: [_jsx(Divider, {}), presetColors] })) : null] }));

package/es/components/molecules/ColorPicker/CustomPicker/styled.d.ts

@@ -2,7 +2,7 @@ export declare const CustomPickerWrapper: import("styled-components").StyledComp
 export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
-    $color?: string | undefined;
+    $color?: string;
 }, never>;
 export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputNumberWrapper: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -56,8 +56,8 @@ export const EditableInputWrapper = styled.div `
     font-size: ${THEME.token?.fontSize}px;
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
+    box-shadow:
+      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
     &::placeholder {
       color: ${THEME.token?.accent5};
@@ -77,8 +77,8 @@ export const EditableInputWrapper = styled.div `
       background-color: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 #194e8d;
       --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow);
+      box-shadow:
+        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     }
 
     &:disabled {
@@ -86,8 +86,8 @@ export const EditableInputWrapper = styled.div `
       color: ${THEME.token?.accent5};
       --tw-shadow: 0 1px 0 0 #e0e0e0;
       --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow);
+      box-shadow:
+        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     }
   }
 `;

package/es/components/molecules/ColorPicker/SketchPicker/styled.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SketchPicker } from 'react-color';
 export const SketchPickerWrapper = styled(SketchPicker) `
   --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
   padding: 0px !important;
 `;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledColorPicker: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ColorPicker").ColorPickerProps>, any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;

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

@@ -53,12 +53,12 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
         if (defaultDateTypeKey) {
             const index = DATE_TYPES.findIndex(dateType => dateType.value === defaultDateTypeKey);
             if (index !== -1) {
-                return reorder([...DATE_TYPES], index, 0);
+                return reorder(DATE_TYPES, index, 0);
             }
         }
-        return [...DATE_TYPES];
+        return DATE_TYPES;
     }, [dateTypeKeysShow, defaultDateTypeKey]);
-    const newCalculationDates = useMemo(() => CALCULATION_DATES.filter(calculationDate => GRANULARITY_MAPPING[valueType].some(granularity => granularity === calculationDate.value)), [valueType]);
+    const newCalculationDates = useMemo(() => CALCULATION_DATES.filter(calculationDate => GRANULARITY_MAPPING[valueType].includes(calculationDate.value)), [valueType]);
     const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType);
     // State
     const [state, setState] = useState({

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

@@ -1,40 +1,8 @@
-export declare const DATE_TYPES: readonly [{
-    readonly value: "today";
-    readonly label: string;
-}, {
-    readonly value: "first_day_of_week_mon_sun";
-    readonly label: string;
-}, {
-    readonly value: "first_day_of_week_sun_sat";
-    readonly label: string;
-}, {
-    readonly value: "first_day_of_month";
-    readonly label: string;
-}, {
-    readonly value: "first_day_of_quarter";
-    readonly label: string;
-}, {
-    readonly value: "first_day_of_year";
-    readonly label: string;
-}, {
-    readonly value: "last_day_of_week_mon_sun";
-    readonly label: string;
-}, {
-    readonly value: "last_day_of_week_sun_sat";
-    readonly label: string;
-}, {
-    readonly value: "last_day_of_month";
-    readonly label: string;
-}, {
-    readonly value: "last_day_of_quarter";
-    readonly label: string;
-}, {
-    readonly value: "last_day_of_year";
-    readonly label: string;
-}, {
-    readonly value: "fixed";
-    readonly label: string;
-}];
+import { TAdvancedType, TCalculationDate, TDateType, ValueTypes } from './types';
+export declare const DATE_TYPES: Array<{
+    value: TDateType;
+    label: string;
+}>;
 export declare const DATE_TYPE_MAPPING: {
     first_day_of_week_mon_sun: string;
     first_day_of_week_sun_sat: string;
@@ -51,31 +19,10 @@ export declare const CALCULATION_TYPES: Array<{
     value: 'minus' | 'plus';
     label: string;
 }>;
-export declare const CALCULATION_DATES: readonly [{
-    readonly value: "seconds";
-    readonly label: string;
-}, {
-    readonly value: "minutes";
-    readonly label: string;
-}, {
-    readonly value: "hours";
-    readonly label: string;
-}, {
-    readonly value: "days";
-    readonly label: string;
-}, {
-    readonly value: "weeks";
-    readonly label: string;
-}, {
-    readonly value: "months";
-    readonly label: string;
-}, {
-    readonly value: "quarters";
-    readonly label: string;
-}, {
-    readonly value: "years";
-    readonly label: string;
-}];
+export declare const CALCULATION_DATES: Array<{
+    value: TCalculationDate;
+    label: string;
+}>;
 export declare const VALUE_TYPES: {
     readonly INPUT_TEXT: "INPUT_TEXT";
     readonly INPUT_NUMBER: "INPUT_NUMBER";
@@ -112,16 +59,10 @@ export declare const YEAR_PICKER_TYPE: {
     MONTH: string;
     QUARTER: string;
 };
-export declare const ADVANCED_PICKER_TYPE: {
-    readonly START_DATE: {
-        readonly value: "startDate";
-        readonly label: "datePicker.startDate";
-    };
-    readonly END_DATE: {
-        readonly value: "endDate";
-        readonly label: "datePicker.endDate";
-    };
-};
+export declare const ADVANCED_PICKER_TYPE: Record<string, {
+    value: TAdvancedType;
+    label: string;
+}>;
 export declare const MONTH_LABEL_FULL: string[];
 export declare const DAY_LABEL_SHORT: string[];
 export declare const WEEK_ARR: number[];
@@ -135,25 +76,5 @@ export declare const DAY_OF_MONTH: number[][];
 export declare const ANCHOR_LEAP_YEAR = 2024;
 export declare const HIDE_TIME_LABEL_ARR: string[];
 export declare const GRANULARITY_MAPPING: {
-    readonly YEAR: readonly ["years"];
-    readonly YEAR_QUARTER: readonly ["years", "quarters"];
-    readonly YEAR_MONTH: readonly ["years", "quarters", "months"];
-    readonly YEAR_WEEK: readonly ["years", "quarters", "months", "weeks"];
-    readonly YEAR_MONTH_DAY: readonly ["years", "quarters", "months", "weeks", "days"];
-    readonly YEAR_MONTH_DAY_HOUR: readonly ["years", "quarters", "months", "weeks", "days", "hours"];
-    readonly YEAR_MONTH_DAY_MINUTE: readonly ["years", "quarters", "months", "weeks", "days", "hours", "minutes"];
-    readonly YEAR_MONTH_DAY_SECOND: readonly ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"];
-    readonly QUARTER: readonly ["years", "quarters"];
-    readonly MONTH: readonly ["years", "quarters", "months"];
-    readonly WEEK: readonly ["years", "quarters", "months", "weeks"];
-    readonly MONTH_DAY: readonly ["years", "quarters", "months", "weeks", "days"];
-    readonly DAY_OF_WEEK: readonly ["years", "quarters", "months", "weeks", "days"];
-    /** Day of Month */
-    readonly DAY: readonly ["years", "quarters", "months", "weeks", "days"];
-    readonly HOUR: readonly ["years", "quarters", "months", "weeks", "days", "hours"];
-    readonly MINUTE: readonly ["years", "quarters", "months", "weeks", "days", "hours", "minutes"];
-    readonly INPUT_NUMBER: readonly ["years", "months", "weeks", "days"];
-    readonly INPUT_TEXT: readonly ["years", "months", "weeks", "days"];
-    readonly INPUT_TEXT_NO_FIELD: readonly ["years", "months", "weeks", "days"];
-    readonly MATCHES_ANY: readonly ["years", "months", "weeks", "days"];
+    [key in ValueTypes]: TCalculationDate[];
 };

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

@@ -1,5 +1,3 @@
-// Types
-// import { t } from 'i18next';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const { t } = i18nInstance;
 export const DATE_TYPES = [

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

@@ -12,5 +12,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;
+    $onlyShowFixed?: boolean;
 }, never>;