@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import type { MODE } from './config';
-import type { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { MODE } from './config';
 export type Mode = (typeof MODE)[keyof typeof MODE];
 export type ItemKey = string;
 export type ItemType = {
@@ -12,6 +11,11 @@ export type ItemType = {
     errorMessage?: string | undefined;
     disabled?: boolean;
 };
+export type SerializedItemType = ItemType & {
+    level: number;
+    pathKey: PathKey;
+    parent: ItemType | null;
+};
 type VirtualizedMenuBaseProps = Partial<{
     items: ItemType[];
     inlineIndent: number;
@@ -20,43 +24,22 @@ type VirtualizedMenuBaseProps = Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string | string[];
+    selected: string[];
     expanded: string[];
     onClick: (args: {
         item: ItemType;
-        domEvent?: React.MouseEvent;
-        elKey: 'item' | 'item-expand-el';
+        pathKey: PathKey;
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: React.ReactNode | ((item: ItemType) => React.ReactNode);
 }>;
 export type VirtualizedMenuBaseHandle = {
     expandAll: () => void;
 };
+export type PathKey = (string | number)[];
 export type MenuInlineHandle = VirtualizedMenuBaseHandle;
 export type MenuInlineProps = VirtualizedMenuBaseProps & {
     mode?: typeof MODE.Inline;
 };
 export type VirtualizedMenuHandle = MenuInlineHandle;
 export type VirtualizedMenuProps = MenuInlineProps;
-export type MemoryData = {
-    itemSpacing: number;
-    inlineIndent: number;
-    inlinePadding: number;
-    selectedKeys: Set<string>;
-    expandedKeys: Set<string>;
-    items: NormalizedNode<ItemType & {
-        ref: (el: HTMLLIElement) => void;
-    }>[];
-    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
-    action: MenuInlineProps['action'];
-    focusId: string | null;
-    onClick: (args: {
-        item: NormalizedNode<ItemType>;
-        index: number;
-        elKey: 'item' | 'item-expand-el';
-        domEvent: React.MouseEvent;
-    }) => void;
-};
 export {};

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

@@ -1,10 +1,8 @@
 /// <reference types="lodash" />
-import { ItemType } from './types';
-import { NormalizedTreeState } from '@antscorp/antsomi-ui/es/utils/tree';
-export declare const itemToTreeNode: (item: ItemType) => any;
-export declare const serializeItems: (args: {
+import { ItemType, SerializedItemType } from './types';
+export declare const getFlattenItems: (args: {
     items: ItemType[];
-}) => NormalizedTreeState<ItemType>;
+}) => SerializedItemType[];
 export declare const CLS: {
     readonly Root: {
         readonly default: string;
@@ -29,8 +27,7 @@ export declare const CLS: {
         readonly disabled: string;
         readonly selected: string;
         readonly expanded: string;
-        readonly selectedDescendant: string;
     };
 };
-export declare const getItemSize: ((itemSize?: number, itemSpacing?: number) => (index: number) => number) & import("lodash").MemoizedFunction;
-export declare const calInlineListSize: (itemLength: number, itemSize?: number, itemSpacing?: number) => number;
+export declare const getItemSize: ((itemSize: number, itemSpacing: number) => (index: number) => number) & import("lodash").MemoizedFunction;
+export declare const calInlineListSize: (itemLength: number, itemSize: number, itemSpacing: number) => number;

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

@@ -1,16 +1,22 @@
 import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
-import { COMPONENT_NAME, ITEM_SIZE, ITEM_SPACING, MODE } from './config';
+import { COMPONENT_NAME, MODE } from './config';
 import { memoize } from 'lodash';
-import { normalizeTreeData } from '@antscorp/antsomi-ui/es/utils/tree';
-export const itemToTreeNode = (item) => ({
-    id: item.key,
-    data: item,
-    children: item.children?.map(itemToTreeNode),
-});
-export const serializeItems = (args) => {
+export const getFlattenItems = (args) => {
     const { items } = args;
-    const nodes = items.map(itemToTreeNode);
-    return normalizeTreeData(nodes);
+    const result = [];
+    function recursively(items, level, pathKey, parent) {
+        items.forEach((item, idx) => {
+            const currentPathKey = [...pathKey, idx, item.key.toString()];
+            result.push({ ...item, level, pathKey: currentPathKey, parent });
+            if (item.children && item.children.length > 0) {
+                recursively(item.children, level + 1, currentPathKey, item);
+            }
+        });
+    }
+    if (items.length) {
+        recursively(items, 1, [], null);
+    }
+    return result;
 };
 const componentCls = antsomiClsx(COMPONENT_NAME);
 export const CLS = {
@@ -37,16 +43,15 @@ export const CLS = {
         disabled: componentCls('item-disabled'),
         selected: componentCls('item-selected'),
         expanded: componentCls('item-expanded'),
-        selectedDescendant: componentCls('item-selected-descendant'),
     },
 };
-export const getItemSize = memoize((itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => (index) => {
+export const getItemSize = memoize((itemSize, itemSpacing) => (index) => {
     if (index === 0) {
         return itemSize;
     }
     return itemSize + itemSpacing;
 });
-export const calInlineListSize = (itemLength, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => {
+export const calInlineListSize = (itemLength, itemSize, itemSpacing) => {
     let result = 0;
     const calItemSize = getItemSize(itemSize, itemSpacing);
     for (let i = 0; i < itemLength; i++) {

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

@@ -67,7 +67,6 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export * from './CodeStructure';
-export * from './FontSizeInput';
 export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';

package/es/components/molecules/index.js

@@ -67,7 +67,6 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export * from './CodeStructure';
-export * from './FontSizeInput';
 export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';

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

@@ -15,5 +15,4 @@ export { AccountProfile, type AccountSettingProps } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
-export { TextEditor, TextEditorProvider, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, type TextEditorProviderProps, type TextEditorProviderRefHandler, type TextEditorComponentsRender, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -15,5 +15,4 @@ export { AccountProfile } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
-export { TextEditor, TextEditorProvider, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/constants/api.js

@@ -26,9 +26,9 @@ export const ANTALYSER_API = {
     [ENV.DEV]: 'https://sandbox-antalyser.antsomi.com',
     [ENV.SANDBOX]: 'https://sandbox-antalyser.antsomi.com',
     [ENV.SANDBOX_CDP]: 'https://sandbox-antalyser.antsomi.com',
-    [ENV.STAGING]: 'https://sandbox-antalyser.ants.vn',
-    [ENV.PROD]: 'https://sandbox-antalyser.ants.vn',
-    [ENV.PRO_VN]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.STAGING]: 'https://staging-insights.antsomi.com',
+    [ENV.PROD]: 'https://insights.antsomi.com',
+    [ENV.PRO_VN]: 'https://insights.antsomi.com',
 };
 export const CDP_ROUTE = {
     [ENV.DEV]: 'https://sandbox-cdp.antsomi.com',

package/es/hooks/index.d.ts

@@ -26,7 +26,3 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
-export * from './useElementSize';
-export * from './useIsMounted';
-export * from './useBroadcastedLocalStorage';
-export * from './useEyedropper';

package/es/hooks/index.js

@@ -45,7 +45,3 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
-export * from './useElementSize';
-export * from './useIsMounted';
-export * from './useBroadcastedLocalStorage';
-export * from './useEyedropper';

package/es/locales/i18n.d.ts

@@ -10663,6 +10663,6 @@ export declare const translationsJson: {
         };
     };
 };
-declare const i18nInstance: import("node_modules/i18next").i18n;
+declare const i18nInstance: import("i18next").i18n;
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;
 export default i18nInstance;

package/es/utils/common.d.ts

@@ -66,14 +66,17 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare function generateKey(): string;
+export declare function generateKey(): any;
 export declare const formatUserId: (userId?: number) => string;
 /**
- * Checks string matching based on a query, supporting fuzzy matching,
- * where the query characters must appear in order within the target string.
- * Allows for missing characters in the query relative to the target,
- * and ignores case, diacritics, and spaces.
- *
+ * Function to remove accent
+ * @param str - String want to remove accent
+ * @returns {string} - Result after remove accent
+ */
+export declare const removeAccent: (str: string) => string;
+/** Remove all accents and convert string to lower case, remove leading and trailing white space */
+export declare const simplifyString: (str: string) => string;
+/**
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
@@ -162,11 +165,3 @@ export declare const convertNumberByDisplayFormat: (value: number | string, grou
 export declare function numberWithCommas(n: number): string;
 export declare const multiPercentageValue: (value?: string) => string;
 export declare const antsomiClsx: (componentName: string) => (className: string) => string;
-/**
- * Take an array of data attribute key/value pairs and return an object which
- * can be spread into a component's definition
- *
- * @param attributes
- * @returns A spreadable object of data-attributes
- */
-export declare const dataAttrArrayToObject: (attributes?: DataAttributes) => Record<string, string>;

package/es/utils/common.js

@@ -430,56 +430,35 @@ export function generateKey() {
 }
 export const formatUserId = (userId) => String(userId || '').replace(/(\d{3})(\d{3})(\d{0,})/, `$1-$2-$3`);
 /**
- * Normalizes a string for searching by:
- * 1. Converting to NFD Unicode form and removing diacritics.
- * 2. Converting to lowercase.
- * 3. Removing all whitespace.
- * @param str The string to normalize.
- * @returns The normalized string.
+ * Function to remove accent
+ * @param str - String want to remove accent
+ * @returns {string} - Result after remove accent
  */
-function normalizeStringForSearch(str) {
-    if (!str) {
-        return ''; // Handle null, undefined, or empty string inputs
-    }
-    return str
-        .normalize('NFD') // Decompose accented characters (e.g., "á" -> "a" + "´")
-        .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
-        .toLowerCase() // Convert to lowercase
-        .replace(/\s+/g, ''); // Remove all whitespace
-}
+export const removeAccent = (str) => {
+    str = str.replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, 'a');
+    str = str.replace(/[èéẹẻẽêềếệểễ]/g, 'e');
+    str = str.replace(/[ìíịỉĩ]/g, 'i');
+    str = str.replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, 'o');
+    str = str.replace(/[ùúụủũưừứựửữ]/g, 'u');
+    str = str.replace(/[ỳýỵỷỹ]/g, 'y');
+    str = str.replace(/đ/g, 'd');
+    str = str.replace(/[ÀÁẠẢÃÂẦẤẬẨẪĂẰẮẶẲẴ]/g, 'A');
+    str = str.replace(/[ÈÉẸẺẼÊỀẾỆỂỄ]/g, 'E');
+    str = str.replace(/[ÌÍỊỈĨ]/g, 'I');
+    str = str.replace(/[ÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠ]/g, 'O');
+    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
+    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
+    str = str.replace(/Đ/g, 'D');
+    return str;
+};
+/** Remove all accents and convert string to lower case, remove leading and trailing white space */
+export const simplifyString = (str) => removeAccent(`${str || ''}`.toLowerCase().trim()) || '';
 /**
- * Checks string matching based on a query, supporting fuzzy matching,
- * where the query characters must appear in order within the target string.
- * Allows for missing characters in the query relative to the target,
- * and ignores case, diacritics, and spaces.
- *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
  */
-export const searchStringQuery = (str, queryStr) => {
-    const normalizedQuery = normalizeStringForSearch(queryStr);
-    const normalizedItem = normalizeStringForSearch(str);
-    // Optimization: if normalized query is longer than normalized item,
-    // it cannot be a subsequence.
-    if (normalizedQuery.length > normalizedItem.length) {
-        return false;
-    }
-    // Subsequence check:
-    // Iterate through both normalized strings.
-    // If characters match, advance the query pointer.
-    // Always advance the item pointer.
-    let queryIndex = 0;
-    let itemIndex = 0;
-    while (queryIndex < normalizedQuery.length && itemIndex < normalizedItem.length) {
-        if (normalizedQuery[queryIndex] === normalizedItem[itemIndex]) {
-            queryIndex++;
-        }
-        itemIndex++;
-    }
-    // If queryIndex reached the end of normalizedQuery, all its characters were found in order.
-    return queryIndex === normalizedQuery.length;
-};
+export const searchStringQuery = (str, queryStr) => simplifyString(str).includes(simplifyString(queryStr || ''));
 /**
  * Checks if any of the provided values match the search value.
  *
@@ -763,19 +742,3 @@ export const antsomiClsx = (componentName) => (className) => {
     });
     return clsx(classNames);
 };
-/**
- * Take an array of data attribute key/value pairs and return an object which
- * can be spread into a component's definition
- *
- * @param attributes
- * @returns A spreadable object of data-attributes
- */
-export const dataAttrArrayToObject = (attributes = []) => attributes.reduce((output, current) => {
-    // Ensure we follow the correct syntax so we will just return the output if not
-    if (!/^data-([a-z]+-)*[a-z]+$/g.test(current.key))
-        return output;
-    // Assign the key/value pair to the output object
-    output[current.key] = current.value;
-    // return the object
-    return output;
-}, {});

package/es/utils/index.d.ts

@@ -9,4 +9,3 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
-export * from './web';

package/es/utils/index.js

@@ -9,4 +9,3 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
-export * from './web';

package/es/utils/web.d.ts

@@ -8,18 +8,3 @@ export declare const getPreventKeyboardAction: (actions?: Array<'undo' | 'copy'
     onKeyDown: (e: React.KeyboardEvent | KeyboardEvent) => false | undefined;
     onKeyUp: (e: React.KeyboardEvent | KeyboardEvent) => void;
 };
-export declare const getPlatform: () => "mac" | "window" | "linux" | "unknown";
-export declare const isMacOS: () => boolean;
-export declare const isWindows: () => boolean;
-export declare const isLinux: () => boolean;
-/**
- * Gets the modifier key based on the platform
- * @returns Platform-appropriate modifier key
- */
-export declare const getModifierKey: () => "⌘" | "Ctrl";
-/**
- * Formats a hotkey string with the appropriate modifier
- * @param key The key to format
- * @returns Formatted hotkey string
- */
-export declare const formatHotkey: (key: string) => string;

package/es/utils/web.js

@@ -24,42 +24,3 @@ export const getPreventKeyboardAction = (actions = []) => ({
         }
     },
 });
-export const getPlatform = () => {
-    // Modern API (userAgentData)
-    const navAny = navigator;
-    if (navAny.userAgentData && typeof navAny.userAgentData.platform === 'string') {
-        const platform = navAny.userAgentData.platform.toLowerCase();
-        if (platform.includes('mac'))
-            return 'mac';
-        if (platform.includes('win'))
-            return 'window';
-        if (platform.includes('linux') || platform.includes('x11'))
-            return 'linux';
-    }
-    // Fallback for older browsers
-    const ua = navigator.userAgent.toLowerCase();
-    if (ua.includes('mac'))
-        return 'mac';
-    if (ua.includes('win'))
-        return 'window';
-    if (ua.includes('linux') || ua.includes('x11'))
-        return 'linux';
-    return 'unknown';
-};
-export const isMacOS = () => getPlatform() === 'mac';
-export const isWindows = () => getPlatform() === 'window';
-export const isLinux = () => getPlatform() === 'linux';
-/**
- * Gets the modifier key based on the platform
- * @returns Platform-appropriate modifier key
- */
-export const getModifierKey = () => (isMacOS() ? '⌘' : 'Ctrl');
-/**
- * Formats a hotkey string with the appropriate modifier
- * @param key The key to format
- * @returns Formatted hotkey string
- */
-export const formatHotkey = (key) => {
-    const modifier = getModifierKey();
-    return `${modifier}+${key}`;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.92-text-editor-beta.6",
+  "version": "2.0.93",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -36,7 +36,7 @@
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "ts-compile": "tsc -p tsconfig.esm.json",
-    "copy-files": "copyfiles -u 1 \"src/**/*.json\" \"src/**/*.svg\" \"src/**/*.png\" \"src/**/*.scss\" es",
+    "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es",
     "icons:export": "sh -e scripts/generate-export-icon.sh",
     "icons:format": "prettier --loglevel warn --write \"src/components/icons/*.tsx\"",
     "icons:update": "sh -e scripts/update-icons.sh",
@@ -69,7 +69,6 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
-    "@floating-ui/react": "^0.27.8",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
@@ -79,18 +78,6 @@
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
     "@tinymce/tinymce-react": "^3.7.0",
-    "@tiptap/core": "3.0.7",
-    "@tiptap/extension-link": "3.0.7",
-    "@tiptap/extension-strike": "3.0.7",
-    "@tiptap/extension-subscript": "3.0.7",
-    "@tiptap/extension-superscript": "3.0.7",
-    "@tiptap/extension-text-align": "3.0.7",
-    "@tiptap/extension-text-style": "3.0.7",
-    "@tiptap/extensions": "3.0.7",
-    "@tiptap/pm": "3.0.7",
-    "@tiptap/react": "3.0.7",
-    "@tiptap/starter-kit": "3.0.7",
-    "@tiptap/suggestion": "3.0.7",
     "@types/currency-formatter": "1.5.1",
     "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-frame-component": "^4.1.6",
@@ -116,7 +103,6 @@
     "html-react-parser": "^5.1.12",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
-    "html2canvas-pro": "^1.5.11",
     "i18next": "23.7.9",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
@@ -126,8 +112,8 @@
     "pako": "2.0.4",
     "qs": "6.10.3",
     "quill": "2.0.3",
-    "quill-image-drop-and-paste": "^2.0.1",
     "quill-upload": "0.0.13",
+    "quill-image-drop-and-paste": "^2.0.1",
     "react-ace": "9.5.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",
@@ -135,7 +121,6 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-device-detect": "^2.2.3",
     "react-draggable": "^4.4.5",
-    "react-fast-compare": "^3.2.1",
     "react-frame-component": "^5.2.6",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
@@ -152,11 +137,9 @@
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
     "swiper": "^11.0.7",
-    "tinycolor2": "^1.6.0",
     "tui-image-editor": "^3.15.3",
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
-    "use-debounce": "^10.0.4",
     "use-image": "^1.1.1",
     "use-immer": "^0.4.1",
     "zustand": "^4.5.2"
@@ -205,8 +188,6 @@
     "@types/react-resizable": "^3.0.7",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/styled-components": "^5.1.26",
-    "@types/tinycolor2": "^1.4.6",
-    "@types/uniqid": "^5.3.4",
     "@types/yaireo__tagify": "^4.27.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
@@ -246,6 +227,7 @@
     "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-fast-compare": "^3.2.1",
     "react-i18next": "11.16.7",
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",

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

@@ -1,2 +0,0 @@
-import { EyedropperProps } from './types';
-export declare const Eyedropper: (props: EyedropperProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/atoms/Eyedropper/Eyedropper.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Typography, message } from 'antd';
-import { BgColorsOutlined } from '@ant-design/icons'; // Icon hình giọt nước
-import { ColorSwatch, StyledButton, StyledColorTag, StyledEyedropperContainer } from './styled';
-import tinycolor from 'tinycolor2';
-import clsx from 'clsx';
-const { Text } = Typography;
-export const Eyedropper = (props) => {
-    const { defaultColor, onColorPick, className } = props;
-    const [pickedColor, setPickedColor] = useState(defaultColor);
-    const [isLoading, setIsLoading] = useState(false);
-    const apiSupported = 'EyeDropper' in window;
-    // Cập nhật màu mặc định nếu prop thay đổi
-    useEffect(() => {
-        setPickedColor(defaultColor);
-    }, [defaultColor]);
-    const handlePickColor = async () => {
-        if (!apiSupported) {
-            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
-            return;
-        }
-        setIsLoading(true);
-        try {
-            const eyeDropper = new window.EyeDropper();
-            const { sRGBHex } = await eyeDropper.open();
-            setPickedColor(sRGBHex);
-            message.success(`Đã chọn màu: ${sRGBHex}`);
-            onColorPick?.(sRGBHex);
-        }
-        catch (e) {
-            if (e instanceof Error && e.name === 'AbortError') {
-                message.info('Người dùng đã hủy chọn màu.');
-            }
-            else if (e instanceof Error) {
-                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
-            }
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const isCurrentColorLight = tinycolor(pickedColor).isLight();
-    return (_jsxs(StyledEyedropperContainer, { className: className, children: [_jsxs(Typography.Title, { level: 4, children: [_jsx(BgColorsOutlined, {}), " C\u00F4ng c\u1EE5 tr\u00EDch xu\u1EA5t m\u00E0u"] }), _jsx(Text, { type: "secondary", children: "B\u1EA5m n\u00FAt b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 k\u00EDch ho\u1EA1t c\u00F4ng c\u1EE5 Eyedropper c\u1EE7a tr\u00ECnh duy\u1EC7t v\u00E0 ch\u1ECDn m\u00E0u t\u1EEB b\u1EA5t k\u1EF3 \u0111\u00E2u tr\u00EAn m\u00E0n h\u00ECnh." }), _jsx(StyledButton, { type: "primary", icon: _jsx(BgColorsOutlined, {}), onClick: handlePickColor, loading: isLoading, disabled: isLoading || !apiSupported, size: "large", children: "Ch\u1ECDn M\u00E0u" }), pickedColor && (_jsxs("div", { style: {
-                    marginTop: '20px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    gap: '10px',
-                }, children: [_jsx(Text, { children: "M\u00E0u \u0111\u00E3 ch\u1ECDn:" }), _jsx(StyledColorTag, { color: pickedColor, className: clsx({
-                            'is-lightcolor': isCurrentColorLight,
-                        }), children: pickedColor }), _jsx(ColorSwatch, { "$color": pickedColor })] })), !apiSupported && (_jsx(Text, { type: "danger", style: { marginTop: '15px', display: 'block' }, children: "Tr\u00ECnh duy\u1EC7t hi\u1EC7n t\u1EA1i kh\u00F4ng h\u1ED7 tr\u1EE3 EyeDropper API. Vui l\u00F2ng s\u1EED d\u1EE5ng Chrome, Edge ho\u1EB7c c\u00E1c tr\u00ECnh duy\u1EC7t d\u1EF1a tr\u00EAn Chromium." }))] }));
-};

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

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const StyledEyedropperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
-export declare const StyledColorTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
-export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;

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

@@ -1,45 +0,0 @@
-import { Button, Tag } from 'antd';
-import styled from 'styled-components';
-export const StyledEyedropperContainer = styled.div `
-  padding: 20px;
-  border: 1px solid #e8e8e8;
-  border-radius: 8px;
-  max-width: 450px;
-  margin: 20px auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  text-align: center; /* Căn giữa nội dung */
-
-  h4 {
-    margin-bottom: 15px;
-    color: #333;
-    display: flex;
-    align-items: center;
-    justify-content: center; /* Căn giữa icon và tiêu đề */
-    gap: 8px; /* Khoảng cách giữa icon và chữ */
-  }
-`;
-export const StyledButton = styled(Button) `
-  margin-top: 20px;
-  width: auto; /* Để nút không bị giãn full chiều rộng */
-`;
-export const StyledColorTag = styled(Tag) `
-  padding: 4px 8px;
-  font-size: 1em;
-  font-weight: bold;
-  min-width: 100px;
-  text-align: center;
-  border: none;
-  color: white;
-
-  &.is-lightcolor {
-    border: 1px solid #d9d9d9;
-    color: #333;
-  }
-`;
-export const ColorSwatch = styled.div `
-  width: 30px;
-  height: 30px;
-  background-color: ${props => props.$color || 'transparent'}; /* Nhận prop $color */
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-`;