@antscorp/antsomi-ui 1.3.3-beta.7 → 1.3.3-beta.71

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

@@ -9,11 +9,45 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
+const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
+      /* Custom */
+      .antsomi-scrollbar-hidden {
+        -ms-overflow-style: none; /* for Internet Explorer, Edge */
+        scrollbar-width: none; /* for Firefox */
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      /* width */
+      ::-webkit-scrollbar {
+        width: ${scrollBarSize};
+        height: ${scrollBarSize};
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: ${accent6};
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: ${accent7};
+      }
+
+      .scrollbar--gutter-stable {
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        margin-right: -${scrollBarSize};
+        padding-right: -${scrollBarSize};
+      }
+
       /* Button */
       .antsomi-btn {
         font-weight: 700 !important;
@@ -170,6 +204,7 @@ export const GlobalStyle = () => {
 
       .antsomi-select-dropdown {
         padding: 0 !important;
+        z-index: 3002 !important;
       }
 
       .antsomi-select-selection-overflow {
@@ -247,13 +282,146 @@ export const GlobalStyle = () => {
           flex-direction: column-reverse;
           padding-bottom: 60px;
 
-          .antsomi-picker-date-panel {
+          .antsomi-picker-date-panel,
+          .antsomi-picker-quarter-panel {
             width: 280px !important;
 
             .antsomi-picker-cell {
               pointer-events: none !important;
             }
           }
+
+          .antsomi-picker-date-panel {
+            position: relative;
+          }
+
+          .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-cell-selected {
+              background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorPrimary};
+              color: #fff;
+            }
+            .antsomi-picker-time-panel-cell-selected:hover {
+              background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary};
+            }
+
+            .antsomi-picker-cell-inner {
+              text-align: center;
+              cursor: pointer;
+            }
+            .antsomi-picker-cell-inner:hover {
+              background: rgba(34, 34, 34, 0.04);
+            }
+
+            .antsomi-picker-header {
+              display: none;
+            }
+
+            .antsomi-picker-content {
+              position: relative;
+
+              .antsomi-picker-time-panel-column {
+                margin-top: 38px;
+                width: 60px;
+              }
+            }
+
+            .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 {
+              border-right: 1px solid rgba(5, 5, 5, 0.06);
+            }
+            .antsomi-picker-content::after {
+              content: 'Seconds';
+              left: 120px;
+            }
+          }
+
+          /* Custom css scrollbar */
+          ul {
+            padding-left: 8px;
+            scrollbar-gutter: stable;
+          }
+        }
+
+        &.hide-picker-header {
+          .antsomi-picker-month-panel,
+          .antsomi-picker-quarter-panel {
+            .antsomi-picker-header {
+              display: none;
+            }
+          }
+        }
+
+        &.only-show-time-picker {
+          .antsomi-picker-date-panel {
+            display: none;
+          }
+          .antsomi-picker-time-panel {
+            border: none;
+            /* NOTE: production prod show unexpected border */
+            border-inline-start: none !important;
+          }
+          > .antsomi-picker-panel-container > .antsomi-picker-panel-layout > .antsomi-picker-panel {
+            width: 250px;
+            .antsomi-picker-datetime-panel {
+              justify-content: center;
+            }
+
+            ul {
+              ::-webkit-scrollbar {
+                width: 0;
+              }
+              padding: 0;
+            }
+
+            .antsomi-picker-content::after {
+              display: none;
+            }
+            .antsomi-picker-content::before {
+              content: 'Hours';
+              border: none;
+              left: 0;
+            }
+          }
+          &.is-minutes-picker {
+            > .antsomi-picker-panel-container
+              > .antsomi-picker-panel-layout
+              > .antsomi-picker-panel {
+              .antsomi-picker-content::before {
+                content: 'Minutes';
+              }
+            }
+          }
         }
 
         &.--error
@@ -262,6 +430,25 @@ export const GlobalStyle = () => {
           > .antsomi-picker-panel {
           padding-bottom: 80px;
         }
+
+        &.antsomi-picker-dropdown {
+          .antsomi-picker-footer-extra {
+            padding: 0 !important;
+          }
+
+          /*
+          * NOTE: UI broken when add showTime props to <DatePicker />
+          * Unexpected header control (comment code below to see bug)
+          * Temporary solution: hide the verbose element
+          */
+          .antsomi-picker-ranges {
+            display: none;
+          }
+        }
+      }
+
+      .antsomi-advanced-picker-container .input__wrapper {
+        display: inline-block;
       }
 
       // Slider
@@ -288,14 +475,14 @@ export const GlobalStyle = () => {
         .antsomi-slider-rail {
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.accent1} !important;
+          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.accent1} !important;
         }
 
         .antsomi-slider-track {
           position: absolute !important;
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary} !important;
+          background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
         }
 
         .antsomi-slider-step {
@@ -329,16 +516,16 @@ export const GlobalStyle = () => {
         }
 
         .antsomi-slider-handle::after {
-          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.colorPrimary} !important;
+          background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.colorPrimary} !important;
         }
 
         &:hover {
           .antsomi-slider-track {
-            background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
+            background-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
           }
 
           .antsomi-slider-rail {
-            background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.accent1} !important;
+            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent1} !important;
           }
 
           .antsomi-slider-handle::after {
@@ -346,7 +533,7 @@ export const GlobalStyle = () => {
           }
 
           .antsomi-slider-handle {
-            border-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
+            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.colorPrimary} !important;
           }
         }
 
@@ -356,8 +543,8 @@ export const GlobalStyle = () => {
 
         &.antsomi-slider-disabled {
           .antsomi-slider-handle {
-            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent2} !important;
-            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.accent2} !important;
+            background-color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.accent2} !important;
+            border-color: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.accent2} !important;
           }
         }
       }
@@ -371,8 +558,8 @@ export const GlobalStyle = () => {
           padding-left: 20px;
           padding-right: 20px;
           font-family: 'Roboto';
-          color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.colorTextBase};
-          font-size: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.fontSize}px;
+          color: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.colorTextBase};
+          font-size: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.fontSize}px;
 
           &:focus-within {
             --tw-shadow: 0 0 #0000;
@@ -382,33 +569,39 @@ export const GlobalStyle = () => {
           }
 
           &:first-child {
-            border-top-left-radius: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.borderRadius}px;
-            border-bottom-left-radius: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.borderRadius}px;
+            border-top-left-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
+            border-bottom-left-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
           }
 
           &:last-child {
-            border-top-right-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
-            border-bottom-right-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
+            border-top-right-radius: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.borderRadius}px;
+            border-bottom-right-radius: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.borderRadius}px;
           }
 
           &.antsomi-radio-button-wrapper-checked {
-            border-color: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.accent1};
-            background-color: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.colorTextActive};
-            color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.colorPrimary};
+            border-color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.accent1};
+            background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.colorTextActive};
+            color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorPrimary};
             font-weight: 700;
 
             &::before {
-              background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.accent1};
+              background-color: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.accent1};
             }
           }
         }
 
         .antsomi-radio-wrapper {
           font-family: 'Roboto';
-          color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorTextBase};
-          font-size: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.fontSize}px;
+          color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorTextBase};
+          font-size: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.fontSize}px;
           margin-right: 0;
 
+          .antsomi-radio-disabled {
+            .antsomi-radio-inner {
+              border-color: #d9d9d9 !important;
+            }
+          }
+
           .antsomi-radio-inner {
             display: flex;
             justify-content: center;
@@ -431,12 +624,12 @@ export const GlobalStyle = () => {
             .antsomi-radio-inner {
               width: 16px;
               height: 16px;
-              border-color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorPrimary};
+              border-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
               border-width: 2px;
-              background-color: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.bw0};
+              background-color: ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.bw0};
 
               &::after {
-                background-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
+                background-color: ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary};
               }
             }
           }
@@ -474,10 +667,10 @@ export const GlobalStyle = () => {
           }
         }
         .antsomi-modal-footer {
-          padding: 10px 16px;
+          padding: 15px !important;
           text-align: right;
           background: transparent;
-          border-top: 1px solid #f0f0f0;
+          border-top: 1px solid #f0f0f0 !important;
           border-radius: 0 0 2px 2px;
         }
       }
@@ -486,5 +679,66 @@ export const GlobalStyle = () => {
       .ant-message {
         z-index: 999999 !important;
       }
+
+      /* Collapse */
+      .antsomi-collapse-header {
+        font-size: 14px;
+      }
+
+      .antsomi-collapse {
+        &.antsomi-collapse-borderless {
+          border-bottom: 1px solid ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.gray5};
+        }
+
+        > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
+          transition: all 200ms;
+        }
+      }
+
+      /* Switch */
+      .antsomi-switch {
+        border: 2px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.colorPrimary} !important;
+
+        &.antsomi-switch-checked {
+          > .antsomi-switch-handle {
+            &::before {
+              background-color: ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.bw0} !important;
+            }
+          }
+        }
+      }
+
+      /* Tabs */
+      .antsomi-tabs {
+        .antsomi-tabs-tab {
+          &.antsomi-tabs-tab-active {
+            font-weight: bold;
+          }
+        }
+      }
+
+      /* Form */
+      .antsomi-form {
+        .antsomi-form-item {
+          .antsomi-form-item-label {
+            > label.antsomi-form-item-required:not(.antsomi-form-item-required-mark-optional) {
+              &::before {
+                position: absolute;
+                right: 0px;
+                font-family: Roboto;
+              }
+            }
+          }
+        }
+      }
+
+      /* Popover */
+      .antsomi-popover {
+        &.no-padding-content {
+          .antsomi-popover-inner {
+            padding: 0 !important;
+          }
+        }
+      }
     ` }));
 };

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

@@ -1 +1,2 @@
-export declare const ArrowGrowIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const ArrowGrowIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const AudioRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AudioRecordIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const BugIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const BugIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const CameraIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CameraIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const CaptureIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CaptureIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const CheckSlimIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CheckSlimIcon: (props: any) => React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const CloseIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const CommentIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CommentIcon: (props: any) => React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const EventIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const FreeDrawIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const FreeDrawIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const GPTIcon: () => JSX.Element;
+import React from 'react';
+export declare const GPTIcon: () => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const GPTIconV2: () => JSX.Element;
+import React from 'react';
+export declare const GPTIconV2: () => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const GPTIconV3: (props: any) => JSX.Element;
+import React from 'react';
+export declare const GPTIconV3: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const HighlightIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const HighlightIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const IdeaIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const IdeaIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const InvisibleIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const InvisibleIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const MuteIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const MuteIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const OpenUrlIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const OpenUrlIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const PauseIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PauseIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const PlaneIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PlaneIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const RequestIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const RequestIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const StopRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const StopRecordIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const UserIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const UserIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const VerticalDotsIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const VerticalDotsIcon: (props: any) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare const WarningIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const WarningIcon: (props: any) => React.JSX.Element;

package/es/components/molecules/AddDynamicContent/AddDynamicContent.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { APIConfig, TDataType } from './types';
+export interface LabeledValue {
+    label: string;
+    value: string;
+    dataType?: TDataType;
+    disabled?: boolean;
+    status?: any;
+}
+export interface LabeledTreeValue extends LabeledValue {
+    [key: string]: any;
+    children: LabeledTreeValue[];
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    type: number | null;
+    status?: any;
+}
+interface AddDynamicContentProps {
+    defaultDynamicIndex?: number;
+    journeySettings: Record<string, any>;
+    contentSources: Record<string, any>;
+    additionalAttrProperties?: string[];
+    defaultData?: Record<string, any>;
+    visible: boolean;
+    showDisplayFormat?: boolean;
+    showIndex?: boolean;
+    onCancel?: () => void;
+    onOk?: (value: Record<string, any>) => void;
+    modalTitle?: string;
+    isShowCustomFunction?: boolean;
+    APIConfig: APIConfig;
+}
+export declare const AddDynamicContent: React.FC<AddDynamicContentProps>;
+export {};