@antscorp/antsomi-ui 2.0.62 → 2.0.64

package/es/components/atoms/Switch/Switch.js

@@ -3,6 +3,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { StyledSwitch } from './styled';
 const Switch = props => {
     const { color = THEME.token?.colorPrimary || '#005eb8', style, ...rest } = props;
-    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': color }, ...rest });
+    const validatedColor = CSS.supports('color', color) ? color : THEME.token?.colorPrimary;
+    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': validatedColor }, ...rest });
 };
 export { Switch };

package/es/components/molecules/Dropdown/style.scss

@@ -1,9 +1,11 @@
 .antsomi-input-dropdown-overlay {
-  .antsomi-dropdown-menu {
-    overflow: hidden;
+  &.antsomi-dropdown {
+    .antsomi-dropdown-menu {
+      overflow: hidden;
 
-    &:hover {
-      overflow: auto;
+      &:hover {
+        overflow: auto;
+      }
     }
   }
 }

package/es/components/molecules/EditingList/EditingList.js

@@ -9,15 +9,15 @@ import { Action, List, Search, LazyComponent } from './components';
 import { CLS } from './utils';
 const { Popover, Title } = LazyComponent;
 export const EditingList = (props) => {
-    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, emptyDescription, onChange, } = props;
+    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, emptyDescription, popoverProps, onChange, } = props;
     const [search, setSearch] = useState('');
     const debounceSearch = useDebounce(search);
     const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
-    const filterdOptions = useMemo(() => selectedOptions.filter(opt => defaultPopoverSelectSearch(opt, debounceSearch)), [selectedOptions, debounceSearch]);
+    const filterdOptions = useMemo(() => selectedOptions.filter(opt => defaultPopoverSelectSearch(opt, debounceSearch, popoverProps?.inputSearchProps?.searchConfig)), [selectedOptions, debounceSearch, popoverProps?.inputSearchProps?.searchConfig]);
     const isSelectAll = selectedOptions.length === options.length;
     const handleRemove = (removedKey) => {
         const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
         onChange?.(selectedKeys);
     };
-    return (_jsxs(EditingListRoot, { className: clsx(CLS.Root.default, className), vertical: true, gap: 8, children: [title && (_jsx(Suspense, { children: _jsx(Title, { showNum: showNum, title: title, selectedAmount: selected.length, optionAmount: options.length }) })), _jsx(Search, { onChange: e => setSearch(e.target.value) }), _jsx(List, { isLoading: isLoading, filterdOptions: filterdOptions, emptyDescription: emptyDescription, renderAction: key => (_jsx(Action, { removable: removable, onClickRemove: () => handleRemove(key) })) }), !isSelectAll && !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { options: options, selected: selected, addBtnLabel: addBtnLabel, onChange: onChange }) }))] }));
+    return (_jsxs(EditingListRoot, { className: clsx(CLS.Root.default, className), vertical: true, gap: 8, children: [title && (_jsx(Suspense, { children: _jsx(Title, { showNum: showNum, title: title, selectedAmount: selected.length, optionAmount: options.length }) })), _jsx(Search, { onChange: e => setSearch(e.target.value) }), _jsx(List, { isLoading: isLoading, filterdOptions: filterdOptions, emptyDescription: emptyDescription, renderAction: key => (_jsx(Action, { removable: removable, onClickRemove: () => handleRemove(key) })) }), !isSelectAll && !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { options: options, selected: selected, addBtnLabel: addBtnLabel, onChange: onChange, ...popoverProps }) }))] }));
 };

package/es/components/molecules/EditingList/components/Loadable.d.ts

@@ -10,4 +10,4 @@ export declare const Popover: import("react").LazyExoticComponent<(props: {
     selected: string[];
     addBtnLabel: import("react").ReactNode;
     onChange?: ((selected: string[]) => void) | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
+} & Pick<import("../../SearchPopover/types").PopoverSelectProps, "inputSearchProps">) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingList/components/Popover/Popover.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Option } from '../../types';
+import { EditingListProps, Option } from '../../types';
 type PopoverProps = {
     options: Option[];
     selected: string[];
     addBtnLabel: React.ReactNode;
     onChange?: (selected: string[]) => void;
-};
+} & EditingListProps['popoverProps'];
 export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/es/components/molecules/EditingList/components/Popover/Popover.js

@@ -4,6 +4,6 @@ import { PopoverSelect } from '../../../SearchPopover';
 import { StyledAddBtn } from '../../styled';
 import { CLS } from '../../utils';
 export const Popover = (props) => {
-    const { options, selected, addBtnLabel, onChange } = props;
-    return (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { className: CLS.AddButton.default, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }));
+    const { options, selected, addBtnLabel, onChange, ...popoverSearchProps } = props;
+    return (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, ...popoverSearchProps, children: _jsxs(StyledAddBtn, { className: CLS.AddButton.default, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }));
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PopoverSelectProps } from '../SearchPopover/types';
 export type Option = {
     key: string;
     label: React.ReactNode;
@@ -14,5 +15,6 @@ export type EditingListProps = {
     isLoading?: boolean;
     emptyDescription?: string;
     removable?: boolean;
+    popoverProps?: Pick<PopoverSelectProps, 'inputSearchProps'>;
     onChange?: (selected: string[]) => void;
 };

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

@@ -15,7 +15,7 @@ export const PopoverSelect = (props) => {
     const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
-    const { value: searchValue, ...restInputSearchProps } = inputSearchProps;
+    const { value: searchValue, searchConfig, ...restInputSearchProps } = inputSearchProps;
     const refOnSearchPredicate = useRef(onSearchPredicate);
     useEffect(() => {
         refOnSearchPredicate.current = onSearchPredicate;
@@ -46,15 +46,15 @@ export const PopoverSelect = (props) => {
     const filteredOptions = useMemo(() => {
         let result = options.filter(field => {
             if (!refOnSearchPredicate.current) {
-                return defaultSearch(field, search);
+                return defaultSearch(field, search, searchConfig);
             }
-            return refOnSearchPredicate.current(field) || defaultSearch(field, search);
+            return refOnSearchPredicate.current(field) || defaultSearch(field, search, searchConfig);
         });
         if (showSelected) {
             result = result.filter(field => selectedKeys.has(field.key));
         }
         return result;
-    }, [options, search, showSelected, selectedKeys]);
+    }, [options, search, showSelected, selectedKeys, searchConfig]);
     const handleToggleField = (field, checked) => {
         const newSelectedKeys = new Set(selectedKeys);
         if (checked) {

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

@@ -2,8 +2,13 @@ import { PopoverProps } from 'antd';
 import { InputProps } from '../../atoms/Input';
 import React, { PropsWithChildren } from 'react';
 import { MenuInlineProps } from '../VirtualizedMenu/types';
+export type SearchConfig = {
+    searchWithKey?: boolean;
+};
 export type SearchPopoverProps = PropsWithChildren<{
-    inputSearchProps?: InputProps;
+    inputSearchProps?: InputProps & {
+        searchConfig?: SearchConfig;
+    };
     isAllowEmpty?: boolean;
 } & PopoverProps>;
 export type Option = {

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

@@ -1,5 +1,5 @@
-import { Option } from './types';
-export declare const defaultSearch: (opt: Option, search: string) => boolean;
+import { Option, SearchConfig } from './types';
+export declare const defaultSearch: (opt: Option, search: string, config?: SearchConfig) => boolean;
 export declare const calDefaultListHeightInPopover: (params: {
     listLength: number;
     itemSize: number;

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

@@ -1,8 +1,9 @@
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { calInlineListSize } from '../VirtualizedMenu/utils';
 import { min } from 'lodash';
-export const defaultSearch = (opt, search) => {
-    let text = opt.key;
+export const defaultSearch = (opt, search, config) => {
+    const { searchWithKey = false } = config || {};
+    let text = searchWithKey ? opt.key : '';
     if (typeof opt.label === 'string') {
         text = text.concat(opt.label);
     }

package/es/components/organism/TicketEditor/Content.d.ts

@@ -1,4 +1,4 @@
-declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }: {
+declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, domainUpload, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }: {
     apiKey: any;
     domain: any;
     portalId: any;
@@ -7,6 +7,7 @@ declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, lis
     ticketId: any;
     listUsers: any;
     domainTicket: any;
+    domainUpload: any;
     config: any;
     ticketDetails: any;
     listComment: any;

package/es/components/organism/TicketEditor/Content.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable react/no-unescaped-entities */
 import { useMemo, useEffect, useRef, useState } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
+import Editor from './components/Editor';
 import { Helmet } from 'react-helmet';
 import dayjs from 'dayjs';
 import DropdownComponent from './components/DropdownComponent';
@@ -24,7 +26,7 @@ const initValueInput = {
     isChanged: false,
     referenceUrl: window.location.href,
 };
-const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }) => {
+const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, domainUpload, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }) => {
     const [isOpenToast, setIsOpenToast] = useState({
         isOpen: false,
         status: 'error',
@@ -257,6 +259,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         }
     }, [isUpdate, openDrawer]);
     const handleEditorChange = content => {
+        console.log('Changed', content);
         setTextValue(content);
         updateValueInput({ message: content });
         setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
@@ -361,42 +364,11 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                                                         ? '--'
                                                         : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
                                                 // width="300px"
-                                                onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(Editor, { apiKey: apiKey, 
-                                                        // placeholder="Enter your comment..."
-                                                        value: textValue, init: {
-                                                            height: 238,
-                                                            width: '100%',
-                                                            max_height: 800,
-                                                            max_width: 800,
-                                                            menubar: false,
-                                                            plugins: [
-                                                                'advlist autolink lists link tinydrive image emoticons charmap print preview anchor',
-                                                                'searchreplace visualblocks code fullscreen',
-                                                                'insertdatetime media paste code help wordcount ', //
-                                                            ],
-                                                            toolbar: 'formatselect | bold italic underline strikethrough code | image emoticons | \
-                                  forecolor backcolor preview link |\
-                                  alignleft aligncenter alignright alignjustify outdent indent |\
-                                  numlist bullist checklist undo redo',
-                                                            tinydrive_token_provider: `//${domain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
-                                                            skin: 'snow',
-                                                            toolbar_mode: 'sliding',
-                                                            content_css: false,
-                                                            branding: false,
-                                                            resize: false,
-                                                            statusbar: false,
-                                                            setup(editor) {
-                                                                editor.on('init', e => {
-                                                                    editor.getBody().style.fontSize = '12px';
-                                                                });
-                                                            },
-                                                            placeholder: 'Enter your comment...',
-                                                            entity_encoding: 'raw',
-                                                            paste_data_images: true,
-                                                        }, 
-                                                        // disabled={!!props.disabled}
-                                                        // outputFormat='text'
-                                                        onEditorChange: handleEditorChange }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFile(file?.token), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile })] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
+                                                onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(Editor, { value: textValue, uploadService: Service.tickets.callApi.uploadImg({
+                                                            domain: domainUpload,
+                                                            token,
+                                                            userId,
+                                                        }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFile(file?.token), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile })] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                             background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                                 ? '#ccc'
                                                                                 : '#1f5fac'}`,

package/es/components/organism/TicketEditor/Service.d.ts

@@ -33,6 +33,11 @@ declare const API: {
             updateComment: (params: any, domain: any, token: any, config: any, userId: any, type: any, ticketId: any) => Promise<any>;
             updateFollowers: (params: any, domain: any, token: any, config: any, userId: any, ticketId: any) => Promise<any>;
             upload: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+            uploadImg: ({ domain, token, userId }: {
+                domain: any;
+                token: any;
+                userId: any;
+            }) => (params: any) => Promise<any>;
         };
     };
     accounts: {

package/es/components/organism/TicketEditor/Service.js

@@ -40,6 +40,17 @@ const API = {
             // const data = getEntriesV2(res, 0);
             // dataBackup[params.objectName] = data;
             res.data),
+            uploadImg: ({ domain, token, userId }) => params => {
+                const { files, mode } = params;
+                const formData = new FormData();
+                files.forEach(file => {
+                    formData.append('files', file);
+                });
+                const fileType = mode === 'video' ? 'origin-file' : 'file';
+                return callApiWithAuth(`api/v1/file-upload/${fileType}`, 'post', formData, domain, {
+                    contentType: 'multipart/form-data',
+                }, token, userId).then(res => res.data);
+            },
         },
     },
     accounts: {

package/es/components/organism/TicketEditor/components/Editor/EditorToolbar.d.ts

@@ -0,0 +1,22 @@
+interface QuillEditor {
+    quill: any;
+}
+declare function undoChange(this: QuillEditor): void;
+declare function redoChange(this: QuillEditor): void;
+export declare const modules: {
+    toolbar: {
+        container: string;
+        handlers: {
+            undo: typeof undoChange;
+            redo: typeof redoChange;
+        };
+    };
+    history: {
+        delay: number;
+        maxStack: number;
+        userOnly: boolean;
+    };
+};
+export declare const formats: string[];
+export declare const QuillToolbar: () => import("react/jsx-runtime").JSX.Element;
+export default QuillToolbar;

package/es/components/organism/TicketEditor/components/Editor/EditorToolbar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Quill from 'quill';
+import styled from 'styled-components';
+const CustomUndo = () => (_jsxs("svg", { viewBox: "0 0 18 18", children: [_jsx("polygon", { className: "ql-fill ql-stroke", points: "6 10 4 12 2 10 6 10" }), _jsx("path", { className: "ql-stroke", d: "M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9" })] }));
+const CustomRedo = () => (_jsxs("svg", { viewBox: "0 0 18 18", children: [_jsx("polygon", { className: "ql-fill ql-stroke", points: "12 10 14 12 16 10 12 10" }), _jsx("path", { className: "ql-stroke", d: "M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5" })] }));
+function undoChange() {
+    this.quill.history.undo();
+}
+function redoChange() {
+    this.quill.history.redo();
+}
+// const Size: any = Quill.import('formats/size');
+// Size.whitelist = ['small', 'medium', 'large']; // 'extra-small',
+// Quill.register(Size, true);
+const SizeStyle = Quill.import('attributors/style/size');
+SizeStyle.whitelist = [
+    '12px',
+    '14px',
+    '16px',
+    '18px',
+    '20px',
+    '22px',
+    '24px',
+    '26px',
+    '28px',
+    '30px',
+];
+Quill.register(SizeStyle, true);
+// const Font: any = Quill.import('formats/font');
+// Font.whitelist = ['arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
+// Quill.register(Font, true);
+export const modules = {
+    toolbar: {
+        container: '#toolbar',
+        handlers: {
+            undo: undoChange,
+            redo: redoChange,
+        },
+    },
+    history: {
+        delay: 500,
+        maxStack: 100,
+        userOnly: true,
+    },
+};
+export const formats = [
+    'header',
+    'font',
+    'size',
+    'bold',
+    'italic',
+    'underline',
+    'align',
+    'strike',
+    'script',
+    'blockquote',
+    'background',
+    'list',
+    // 'bullet',
+    'indent',
+    'link',
+    'image',
+    'color',
+    'code-block',
+];
+const ToolBarWrapper = styled.div `
+  border-radius: '10px 10px 0 0';
+  * {
+    font-weight: 400;
+  }
+`;
+export const QuillToolbar = () => (_jsxs(ToolBarWrapper, { id: "toolbar", children: [_jsxs("span", { className: "ql-formats", children: [_jsxs("select", { className: "ql-font", defaultValue: "false", children: [_jsx("option", { value: "false", children: "Sans Serif" }), _jsx("option", { value: "serif", children: "Serif" }), _jsx("option", { value: "monospace", children: "Monospace" })] }), _jsxs("select", { className: "ql-size", defaultValue: "12px", children: [_jsx("option", { value: "12px", children: "12px" }), _jsx("option", { value: "14px", children: "14px" }), _jsx("option", { value: "16px", children: "16px" }), _jsx("option", { value: "18px", children: "18px" }), _jsx("option", { value: "20px", children: "20px" }), _jsx("option", { value: "22px", children: "22px" }), _jsx("option", { value: "24px", children: "24px" }), _jsx("option", { value: "26px", children: "26px" }), _jsx("option", { value: "28px", children: "28px" }), _jsx("option", { value: "30px", children: "30px" })] }), _jsxs("select", { className: "ql-header", defaultValue: "3", children: [_jsx("option", { value: "1", children: "Heading1" }), _jsx("option", { value: "2", children: "Heading2" }), _jsx("option", { value: "3", children: "Heading3" })] })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-bold" }), _jsx("button", { className: "ql-italic" }), _jsx("button", { className: "ql-underline" }), _jsx("button", { className: "ql-strike" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-list", value: "ordered" }), _jsx("button", { className: "ql-list", value: "bullet" }), _jsx("button", { className: "ql-indent", value: "-1" }), _jsx("button", { className: "ql-indent", value: "+1" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-script", value: "super" }), _jsx("button", { className: "ql-script", value: "sub" }), _jsx("button", { className: "ql-blockquote" }), _jsx("button", { className: "ql-direction" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("select", { className: "ql-align" }), _jsx("select", { className: "ql-color" }), _jsx("select", { className: "ql-background" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-link" }), _jsx("button", { className: "ql-image" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-formula" }), _jsx("button", { className: "ql-code-block" }), _jsx("button", { className: "ql-clean" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-undo", children: _jsx(CustomUndo, {}) }), _jsx("button", { className: "ql-redo", children: _jsx(CustomRedo, {}) })] })] }));
+export default QuillToolbar;

package/es/components/organism/TicketEditor/components/Editor/index.d.ts

@@ -0,0 +1,10 @@
+import 'quill/dist/quill.snow.css';
+declare const Editor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, }: {
+    value: any;
+    onChange: any;
+    placeholder: any;
+    uploadService: any;
+    height: any;
+    maxImgHeight?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Editor;

package/es/components/organism/TicketEditor/components/Editor/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import { ImageHandler } from 'quill-upload';
+import debounce from 'lodash/debounce';
+import EditorToolbar, { modules, formats } from './EditorToolbar';
+Quill.register('modules/imageHandler', ImageHandler);
+const Block = Quill.import('blots/block');
+Block.tagName = 'DIV';
+Quill.register(Block, true);
+const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],
+    ['blockquote', 'code-block'],
+    ['link', 'image', 'video', 'formula'],
+    [{ header: 1 }, { header: 2 }],
+    [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+    [{ script: 'sub' }, { script: 'super' }],
+    [{ indent: '-1' }, { indent: '+1' }],
+    [{ direction: 'rtl' }],
+    [{ size: ['small', false, 'large', 'huge'] }],
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ color: [] }, { background: [] }],
+    [{ font: [] }],
+    [{ align: [] }],
+    ['clean'],
+];
+const Editor = ({ value, onChange, placeholder, uploadService, height, maxImgHeight = '300px', }) => {
+    const editor = useRef(null);
+    const debounceChange = debounce(onChange, 500);
+    // Upload handler function
+    const _onUpload = async (file, resolve) => {
+        try {
+            const result = await uploadService({ files: [file], mode: 'file' });
+            if (result?.data?.length) {
+                resolve(result.data[0].url);
+                editor.current.root.querySelectorAll('img.quill-upload-progress').forEach(el => {
+                    el.classList.remove('quill-upload-progress');
+                    el.style.maxHeight = maxImgHeight;
+                });
+            }
+            resolve('');
+        }
+        catch (error) {
+            resolve('');
+        }
+    };
+    useEffect(() => {
+        if (!value && editor.current) {
+            editor.current.setText('');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (editor.current)
+            return;
+        editor.current = new Quill('#editor', {
+            theme: 'snow',
+            modules: {
+                ...modules,
+                imageHandler: {
+                    imageClass: 'custom-image-class',
+                    upload: file => new Promise(resolve => {
+                        if (file.size > 10 * 1024 * 1024) {
+                            resolve('');
+                            return;
+                        }
+                        _onUpload(file, resolve);
+                    }),
+                },
+            },
+            formats,
+            placeholder,
+        });
+        editor.current.root.innerHTML = value || '';
+        editor.current.on('text-change', (delta, oldDelta, source) => {
+            // if (source === 'api') {}
+            if (source === 'user') {
+                debounceChange(editor.current?.root.innerHTML);
+            }
+        });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(EditorToolbar, {}), _jsx("div", { id: "editor", style: { height, color: '#000000' } })] }));
+};
+export default Editor;

package/es/components/organism/TicketEditor/index.js

@@ -29,7 +29,7 @@ const defaultProps = {
     useChat: false,
 };
 export const TicketEditor = props => {
-    const { isOpen, apiKey, portalId, token, domain, action, config: propsConfig, userId, ownerId, domainTicket, ticketId, domainAccount, useIcon, domainPermission, appCode, menuCode, fullParent, useChat, } = props;
+    const { isOpen, apiKey, portalId, token, domain, action, config: propsConfig, userId, ownerId, domainTicket, domainUpload, ticketId, domainAccount, useIcon, domainPermission, appCode, menuCode, fullParent, useChat, } = props;
     const [openDrawer, setOpenDrawer] = useState(false);
     const [isOpenPopover, setOpenPopover] = useState(false);
     const [openChat, setOpenChat] = useState(false);
@@ -238,7 +238,7 @@ export const TicketEditor = props => {
                 }, headerProps: {
                     // children: drawerHeader,
                     showBorderBottom: true,
-                }, name: "ticket-editor-drawer", children: openDrawer && (_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, setDrawerHeader: setDrawerHeader, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput })) }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
+                }, name: "ticket-editor-drawer", children: openDrawer && (_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, domainUpload: domainUpload, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, setDrawerHeader: setDrawerHeader, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput })) }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
                                         height: '28px',
                                         background: '#1f5fac',
                                         color: '#fff',

package/es/components/organism/TicketEditor/util.d.ts

@@ -1,7 +1,7 @@
 export declare function getObjectPropSafely(fn: any, defaultValue?: string): any;
 export declare function isNumeric(num: any): boolean;
 export declare function getUserLocaleLanguage(config: any): any;
-export declare function callApiWithAuth(endpoint: any, method: string | undefined, body: any, domain?: string, config?: {}, token?: string, userId?: string, isTicket?: boolean, type?: string, isAccount?: boolean, isPermission?: boolean, others?: {}): Promise<import("axios").AxiosResponse<any, any>>;
+export declare function callApiWithAuth(endpoint: any, method: string | undefined, body: any, domain?: string, config?: any, token?: string, userId?: string, isTicket?: boolean, type?: string, isAccount?: boolean, isPermission?: boolean, others?: {}): Promise<import("axios").AxiosResponse<any, any>>;
 export declare function isUrlEmbedded(): boolean;
 export declare const safeParse: (val: any, defaultVal: any) => any;
 export declare const safeParseInt: (val: any, defaultVal: any) => any;

package/es/components/organism/TicketEditor/util.js

@@ -85,14 +85,14 @@ export function callApiWithAuth(endpoint, method = 'GET', body, domain = '', con
         ownerId = userId;
     }
     const headers = {
-        'Content-Type': 'application/json; charset=utf-8',
+        'Content-Type': config.contentType || 'application/json; charset=utf-8',
         token: apiToken,
     };
     if (urlHasQueryString(endpoint)) {
-        endpoint += `&portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${userId}`;
+        endpoint += `&_token=${apiToken}&portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${userId}&_account_id=${userId}`;
     }
     else {
-        endpoint += `?portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${userId}`;
+        endpoint += `?_token=${apiToken}&portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${userId}&_account_id=${userId}`;
     }
     if (isNumeric(ownerId)) {
         endpoint += `&_owner_id=${ownerId}`;

package/es/components/template/Layout/Layout.js

@@ -223,12 +223,12 @@ export const Layout = memo(props => {
             : menu_item_name);
         setActiveMenu(activeMenuItem);
         onActiveMenuChange?.(menu_item_code);
-        console.log({
-            activeItemPath: cloneDeep(activeItemPath),
-            flattenPermissionList,
-            menuListPermission,
-            appItem: activeItemPath[0],
-        });
+        // console.log({
+        //   activeItemPath: cloneDeep(activeItemPath),
+        //   flattenPermissionList,
+        //   menuListPermission,
+        //   appItem: activeItemPath[0],
+        // });
         const hasRole = hasSelectAccountPermission({
             activeItemPath: cloneDeep(activeItemPath),
             flattenPermissionList,

package/es/locales/ja/google-sheet.json

@@ -47,7 +47,7 @@
     "_ACT_COPY_TO_CLIPBOARD": "クリップボードにコピー",
     "_ACT_CREATE": "作成する",
     "_ACT_CREATE_ASSIGN_ROLE": "役割の作成と割り当て",
-    "_ACT_CREATE_NEW_EVENT_ACTION": "新しいイベントアクションを作成する",
+    "_ACT_CREATE_NEW_EVENT_ACTION": "新しいイベントアクションの作成",
     "_ACT_CREATE_NEW_EVENT_CATEGORY": "新しいイベント カテゴリを作成する",
     "_ACT_CREATE_NEW_MODEL": "新しいモデルを作成する",
     "_ACT_CUSTOMER_SEGMENT": "顧客セグメント",
@@ -1352,7 +1352,7 @@
     "_USER_GUIDE_CLONE": "元のアイテムの設定を継承した新しいアイテムが作成されます。これは元のものには何も影響しません。 <br />\n新しいアイテムに名前を付けて、「保存」をクリックしてください。",
     "_USER_GUIDE_COLLECTION_CREATE_CRITERIA": "ファイルの を使用して、このコレクションに適したアイテムを見つけるための条件を作成します",
     "_USER_GUIDE_COLLECTION_CREATE_CRITERIA_INTRO": "このシステムは、条件を満たすアイテムを検索し、このコレクションに追加します。",
-    "_USER_GUIDE_COLLECTION_CREATE_CRITERIA_NOTE": "<b>注:</b>\n</br> - アップロードされたファイルから、本システム内に存在するIDのアイテムのみ作成するコレクションに追加できます\n</br> - アップロードされたファイルは最後に使用されてから 6 か月間保存され、その後は使用できなくなります。",
+    "_USER_GUIDE_COLLECTION_CREATE_CRITERIA_NOTE": "<b>注:</b>\n</br> - アップロードされたファイルから、このシステム内に存在するIDのアイテムのみを作成するコレクションに追加できます\n</br> - アップロードされたファイルは最後に使用されてから 6 か月間保存され、その後は使用できなくなります。",
     "_USER_GUIDE_FILE_STORAGE_LIMIT": "<b>注:</b> アップロードされたファイルは最後に使用されてから 6 か月間保存され、その後は使用できなくなります。",
     "_UPLOAD_FILE_DELETED_ERROR_MESSAGE": "アップロードされたファイルが削除されました",
     "_USER_GUIDE_CONFIRM_NEW_PASSWORD": "新しいパスワードを確認します",
@@ -1383,7 +1383,7 @@
     "_USER_GUIDE_NO_ASSIGN_EVENT": "まだイベントを割り当てていません。まずソースを作成する必要があります",
     "_USER_GUIDE_NO_ATTRIBUTE": "まだ属性を作成していません",
     "_USER_GUIDE_NO_DESTINATION_YET": "まだ目的地を作成していません",
-    "_USER_GUIDE_NO_SHARED_DESTINATION": "目的地が共有されていません",
+    "_USER_GUIDE_NO_SHARED_DESTINATION": "目的地は共有されていません",
     "_USER_GUIDE_NO_EVENT": "まだイベントを作成していません",
     "_USER_GUIDE_NO_EVENT_SOURCE": "まだイベント ソースを作成していません",
     "_USER_GUIDE_NO_EVENT_ASSIGN": "まだイベントを割り当てていません",
@@ -1480,7 +1480,7 @@
     "_WARN_SEGMENT_IN_QUEUE": "これは、キュー内で計算を待っているセグメントです。条件を編集したい場合は、計算を開始する前に無効にする必要があります。",
     "_WARN_SETTING_FIELD_INVALID": "設定フィールドが無効です。保存する前に設定フィールドを完了してください。",
     "_WARN_VALIDATE_END_DATE_PAST": "ジャーニーの終了日を過去 (end_date} {{end_time}}) に設定しているため、ジャーニーをアクティブ化できません。終了日を更新して、ジャーニーを再度アクティブ化してください。",
-    "_WARN_VALIDATE_LACK_DESTINATION": "有効な移動には少なくとも 1 つの目的地ノードが必要です",
+    "_WARN_VALIDATE_LACK_DESTINATION": "有効な行程には少なくとも 1 つの目的地ノードが必要です",
     "_WARN_VALIDATE_START_DATE_PAST": "旅の開始日を {{start_date}} の {{start_time}} に設定しましたが、すでに過ぎています。\nアクティブ化をキャンセルして開始時刻を更新することも、旅行を破棄してすぐにアクティブ化することもできます。",
     "_WARNING": "警告！",
     "_ZONE_TYPE_CSS_SELECTOR": "CSSセレクターを使用する",
@@ -1800,7 +1800,7 @@
     "_COMPUTATION_SEGMENT_PROPERTY_DELETED": "セグメントのプロパティで使用されているオブジェクトが存在しません",
     "_COMPUTATION_ATTRIBUTE_PROPERTY_ARCHIVED": "属性のプロパティで使用されるオブジェクトはアーカイブされています",
     "_COMPUTATION_ATTRIBUTE_PROPERTY_DELETED": "属性のプロパティで使用されているオブジェクトが存在しません",
-    "_MEASURE_TYPE_UC_APPROXIMATE_DATASKETCHES": "一意のおおよその数 (データスケッチ)",
+    "_MEASURE_TYPE_UC_APPROXIMATE_DATASKETCHES": "一意の数の概算 (データスケッチ)",
     "_TITL_ASSOCIATE_UTM": "UTMと連携する",
     "_TITL_PLANNING": "企画",
     "_TITLE_PLAN_ALL_PLANS": "すべてのプラン",
@@ -1956,7 +1956,7 @@
     "_WARN_ATTR_COMPUTATIONAL_LIMIT": "現在、計算制限に達しているため、システムは次の有効な時間にこの属性を計算します。",
     "_WARN_TITLE_AM_WARN_TOTAL": "警告 分析モデルの合計制限数",
     "_WARN_AM_WARN_TOTAL_CONTENT_CREATE": "分析モデルの数が制限に達しました。\n新しい分析モデルを作成する場合は、使用されていない分析モデルを削除してください。",
-    "_ACT_WARN_AM_GO_TO_LIST": "解析モデルリストに移動",
+    "_ACT_WARN_AM_GO_TO_LIST": "分析モデルのリストに移動",
     "_TITLE_SELECTED_AM": "選択した分析モデル",
     "_WARN_TITLE_AM_NAME": "解析モデル名",
     "_WARN_TITLE_AM_STATUS": "状態",
@@ -2566,7 +2566,7 @@
     "_LINE_RM_DEFAULT_OBJ_DES_3": "今後のイベント、ウェビナー、またはワークショップを宣伝する",
     "_LINE_RM_DEFAULT_OBJ_DES_4": "ユーザーを注目の記事、ビデオ、またはブログ投稿に誘導するオプションを提供します",
     "_LINE_RM_DEFAULT_OBJ_DES_5": "他のソーシャル メディア プラットフォームでコミュニティを拡大することで、ブランドの存在感を高めます。",
-    "_LINE_RM_DEFAULT_OBJ_DES_6": "メニューの選択に基づいて、さまざまな操作を通じてユーザーをガイドします。\n\n たとえば、「カスタマー サポート」のメニュー項目を選択すると、「技術サポート」や「請求に関する問い合わせ」など、必要なサポートの種類を選択するオプションがユーザーに表示される場合があります。",
+    "_LINE_RM_DEFAULT_OBJ_DES_6": "メニューの選択に基づいて、さまざまなインタラクションを通じてユーザーをガイドします。\n\n たとえば、「カスタマー サポート」のメニュー項目を選択すると、「技術サポート」や「請求に関する問い合わせ」など、必要なサポートの種類を選択するオプションがユーザーに表示される場合があります。",
     "_LINE_RM_DEFAULT_OBJ_DES_7": "購読フォームや登録プロンプトを備えたLDPにユーザーを誘導して、ユーザー情報を取得します。",
     "_LINE_RM_SINGLE_OBJ_DES_1": "各ユーザーの好み、行動、Line チャネルとの過去のやり取りに基づいて、各ユーザーに表示されるメニュー オプションとコンテンツをカスタマイズします。",
     "_LINE_RM_SINGLE_OBJ_DES_2": "各ユーザーの興味、閲覧履歴、人口統計に合わせたパーソナライズされた推奨事項や提案を提供し、関連性とエンゲージメントを強化します。",
@@ -2656,7 +2656,7 @@
     "_PROFILES_WIDGET_2": "アイテムのおすすめ",
     "_PROFILES_WIDGET_3": "ユーザーアクティビティ",
     "_PROFILES_WIDGET_4": "来場者情報",
-    "_PROFILES_WIDGET_5": "拡張された視覚化",
+    "_PROFILES_WIDGET_5": "拡張されたビジュアライゼーション",
     "_PROFILES_SETTINGS_TAB": "データ",
     "_PROFILES_SETTINGS_1": "アバター",
     "_PROFILES_SETTINGS_2": "フルネーム",
@@ -2686,7 +2686,7 @@
     "_COOKIE_DM_INSTRUCTION_1_DES_2": "これは、追跡するすべてのサブドメインのベース ドメインです。例: {{x}}",
     "_COOKIE_DM_INSTRUCTION_2_SUM": "Cookie ドメインを構成します。",
     "_COOKIE_DM_INSTRUCTION_2_DES_1": "すべてのサブドメインにわたってデータを追跡するには、「{{x}}」と入力します (例: {{y}} または {{z}})",
-    "_ZALO_TEMP_SELECT_1": "Zalo公式アカウントによる様々なスタイル",
+    "_ZALO_TEMP_SELECT_1": "Zalo公式アカウントによる多彩なスタイル",
     "_ZALO_TEMP_SELECT_2": "これらのテンプレートは、Zalo 公式アカウント専用です。クリック ",
     "_ZALO_TEMP_SELECT_3": "ここ",
     "_ZALO_TEMP_SELECT_4": "目的地を作成します。",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.62",
+  "version": "2.0.64",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -60,11 +60,10 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.56",
     "@antscorp/antsomi-locales": "1.0.49",
+    "@antscorp/icons": "0.27.56",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
-    "bignumber.js": "9.1.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -90,6 +89,7 @@
     "antd": "5.12.6",
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
+    "bignumber.js": "9.1.2",
     "commander": "^12.1.0",
     "currency-formatter": "1.5.9",
     "d3-interpolate": "^3.0.1",
@@ -111,6 +111,8 @@
     "moment": "2.29.2",
     "pako": "2.0.4",
     "qs": "6.10.3",
+    "quill": "2.0.3",
+    "quill-upload": "0.0.13",
     "react-ace": "9.5.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",
@@ -158,16 +160,17 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/manager-api": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-webpack5": "^8.4.6",
-    "@storybook/theming": "^8.4.6",
+    "@storybook/addon-docs": "^8.6.9",
+    "@storybook/addon-essentials": "^8.6.9",
+    "@storybook/addon-links": "^8.6.9",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/blocks": "^8.6.9",
+    "@storybook/manager-api": "^8.6.9",
+    "@storybook/react": "^8.6.9",
+    "@storybook/react-webpack5": "^8.6.9",
+    "@storybook/test": "^8.6.9",
+    "@storybook/theming": "^8.6.9",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -210,7 +213,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.12.0",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -228,7 +231,7 @@
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^8.4.2",
+    "storybook": "^8.6.9",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.10",