@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/molecules/EditorTab/styled.js

@@ -1,159 +1,159 @@
 import styled from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const EditorTabStyled = styled.div `
-  position: relative;
-  height: 40px;
-  display: flex;
-  align-items: center;
-
-  /* Styled for icon button */
-  button.antsomi-btn-icon-only.antsomi-btn-sm {
-    margin-left: auto;
-    border: none !important;
-    background-color: transparent !important;
-    flex-shrink: 0;
-    width: 20px !important;
-    height: 20px !important;
-    &:hover {
-      background-color: ${globalToken?.blue} !important;
-    }
-  }
-
-  .left-block {
-    position: relative;
-    height: 100%;
-    /* width: 100%;
-    flex-grow: 1; */
-    flex-flow: nowrap;
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    font-size: 14px;
-    color: #222;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .tab-item {
-      position: relative;
-      box-sizing: border-box;
-
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      gap: 7px;
-      /* width: 150px; */
-      min-width: 150px;
-      max-width: 300px;
-
-      height: 40px;
-      padding: 0 10px;
-      overflow: hidden;
-      background-color: ${globalToken?.bw2};
-
-      /* &.active button, */
-      & button {
-        /* display: none !important; */
-        visibility: hidden;
-      }
-
-      &:hover {
-        background-color: ${globalToken?.blue};
-        & button {
-          /* display: flex !important; */
-          visibility: visible;
-        }
-      }
-
-      white-space: nowrap;
-
-      transition: background-color 300ms ease-in-out;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-        color: #666;
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 3px;
-        width: 100%;
-        background-color: #1f5fac;
-
-        transform-origin: center;
-        transform: scaleX(0);
-        transition: transform 300ms ease-in-out;
-      }
-
-      &.active {
-        &::after {
-          transform: scaleX(1);
-        }
-        background-color: #fff;
-        & button.antsomi-dropdown-open {
-          display: flex !important;
-        }
-      }
-    }
-
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-      display: none !important;
-    }
-    ::-webkit-scrollbar-thumb {
-      display: none !important;
-    }
-  }
-
-  button.new-query-button {
-    margin-left: 10px;
-    border: none;
-  }
-
-  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
-  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .navigate-button {
-    /* Structure Block */
-    flex-shrink: 0;
-    height: 100%;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${globalToken?.blue7};
-    border-radius: ${globalToken?.borderRadius}px;
-    border: 5px solid transparent;
-
-    /* Typography Block */
-    font-size: 12px;
-
-    cursor: pointer;
-
-    /* &:last-child {
-      border-right: 1px solid #e0e0e0;
-    } */
-
-    &:hover {
-      border: 5px solid transparent;
-      background-color: ${globalToken?.blue};
-    }
-
-    /* &.--disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-      opacity: 0.7;
-    } */
-  }
+export const EditorTabStyled = styled.div `
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  /* Styled for icon button */
+  button.antsomi-btn-icon-only.antsomi-btn-sm {
+    margin-left: auto;
+    border: none !important;
+    background-color: transparent !important;
+    flex-shrink: 0;
+    width: 20px !important;
+    height: 20px !important;
+    &:hover {
+      background-color: ${globalToken?.blue} !important;
+    }
+  }
+
+  .left-block {
+    position: relative;
+    height: 100%;
+    /* width: 100%;
+    flex-grow: 1; */
+    flex-flow: nowrap;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    font-size: 14px;
+    color: #222;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tab-item {
+      position: relative;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 7px;
+      /* width: 150px; */
+      min-width: 150px;
+      max-width: 300px;
+
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      background-color: ${globalToken?.bw2};
+
+      /* &.active button, */
+      & button {
+        /* display: none !important; */
+        visibility: hidden;
+      }
+
+      &:hover {
+        background-color: ${globalToken?.blue};
+        & button {
+          /* display: flex !important; */
+          visibility: visible;
+        }
+      }
+
+      white-space: nowrap;
+
+      transition: background-color 300ms ease-in-out;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: #1f5fac;
+
+        transform-origin: center;
+        transform: scaleX(0);
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.active {
+        &::after {
+          transform: scaleX(1);
+        }
+        background-color: #fff;
+        & button.antsomi-dropdown-open {
+          display: flex !important;
+        }
+      }
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      display: none !important;
+    }
+    ::-webkit-scrollbar-thumb {
+      display: none !important;
+    }
+  }
+
+  button.new-query-button {
+    margin-left: 10px;
+    border: none;
+  }
+
+  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
+  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .navigate-button {
+    /* Structure Block */
+    flex-shrink: 0;
+    height: 100%;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${globalToken?.blue7};
+    border-radius: ${globalToken?.borderRadius}px;
+    border: 5px solid transparent;
+
+    /* Typography Block */
+    font-size: 12px;
+
+    cursor: pointer;
+
+    /* &:last-child {
+      border-right: 1px solid #e0e0e0;
+    } */
+
+    &:hover {
+      border: 5px solid transparent;
+      background-color: ${globalToken?.blue};
+    }
+
+    /* &.--disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.7;
+    } */
+  }
 `;

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -16,7 +16,7 @@ import { COMMON_TAB_COLLECTION, MIN_VISIBLE_COUNT, SMILEYS_BODY } from './consta
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
-const CommonCollection = ({ onEmojiClick }) => {
+const CommonCollection = ({ onEmojiClick, getPopupContainer }) => {
     // States
     const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
@@ -93,7 +93,7 @@ const CommonCollection = ({ onEmojiClick }) => {
         });
         return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
     }, [emojiCollection, visibleCount, onScroll, onEmojiClick]);
-    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
+    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect, getPopupContainer: getPopupContainer })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
 };
 CommonCollection.defaultProps = {
     onEmojiClick: () => { },

package/es/components/molecules/EmojiCollections/styled.js

@@ -5,31 +5,31 @@ import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { Empty } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperCollection = styled.section `
-  margin-top: 15px;
+export const WrapperCollection = styled.section `
+  margin-top: 15px;
 `;
-export const EmojiList = styled.section `
-  margin-top: 20px;
+export const EmojiList = styled.section `
+  margin-top: 20px;
 `;
-export const Emoji = styled(Button) `
-  width: ${({ $width }) => $width || 50}px !important;
-  min-width: ${({ $width }) => $width || 50}px !important;
-  height: ${({ $height }) => $height || 50}px !important;
-
+export const Emoji = styled(Button) `
+  width: ${({ $width }) => $width || 50}px !important;
+  min-width: ${({ $width }) => $width || 50}px !important;
+  height: ${({ $height }) => $height || 50}px !important;
+
   ${({ $active }) => $active &&
-    css `
-      background-color: ${globalToken?.blue1_1} !important;
-    `}
+    css `
+      background-color: ${globalToken?.blue1_1} !important;
+    `}
 `;
-export const EmojiImage = styled.img `
-  width: 100%;
-  height: 100%;
-  max-width: 30px;
+export const EmojiImage = styled.img `
+  width: 100%;
+  height: 100%;
+  max-width: 30px;
 `;
-export const EmptyEmoji = styled(Empty) `
-  min-height: 133px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
+export const EmptyEmoji = styled(Empty) `
+  min-height: 133px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 `;

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

@@ -1,3 +1,4 @@
 export interface EmojiCollectionProps {
     onEmojiClick: (newEmoji: string) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }

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

@@ -9,7 +9,9 @@ interface EmojiPopoverProps {
     collections?: CollectionItemProps[];
     isForceHide?: boolean;
     children?: React.ReactNode;
+    destroyTooltipOnHide?: boolean;
     onEmojiClick?: (emoji: string | TagDataCustomize) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 declare const _default: React.NamedExoticComponent<EmojiPopoverProps>;
 export default _default;

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -11,7 +11,7 @@ import { EMOJI_COLLECTIONS, } from '@antscorp/antsomi-ui/es/components/molecules
 import { EmojiTabs, EmojiPopoverStyled } from './styled';
 // Utils
 import { handleGetTextToReplace } from './utils';
-const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, }) => {
+const EmojiPopover = ({ disabled, collections, isForceHide, children, destroyTooltipOnHide, onEmojiClick, getPopupContainer, }) => {
     const [state, setState] = useImmer({
         isOpen: false,
         collectionActive: collections ? collections[0]?.key : EMOJI_COLLECTIONS.COMMON,
@@ -47,16 +47,16 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
     const renderCollection = useCallback((collectionCurrent = '') => {
         switch (collectionCurrent) {
             case EMOJI_COLLECTIONS.VIBER: {
-                return _jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             case EMOJI_COLLECTIONS.LINE: {
-                return _jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             default: {
-                return _jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
         }
-    }, [handleGetCodeEmoji]);
+    }, [handleGetCodeEmoji, getPopupContainer]);
     const emojiCollections = useMemo(() => {
         if (!collections)
             return [];
@@ -66,7 +66,11 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
             children: renderCollection(collection.key),
         }));
     }, [collections, renderCollection]);
-    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+    let content = (_jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }));
+    if (emojiCollections.length <= 1) {
+        content = emojiCollections.at(0)?.children;
+    }
+    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", destroyTooltipOnHide: destroyTooltipOnHide, trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

package/es/components/molecules/EmojiPopover/styled.js

@@ -1,11 +1,11 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
-export const EmojiTabs = styled(TabsUI) `
-  .antsomi-tabs-tab {
-    padding: 5.5px 20px !important;
-  }
+import { Popover } from '../../atoms/Popover';
+export const EmojiTabs = styled(TabsUI) `
+  .antsomi-tabs-tab {
+    padding: 5.5px 20px !important;
+  }
 `;
 export const EmojiPopoverStyled = styled(Popover) ``;

package/es/components/molecules/EmptyData/styled.js

@@ -5,32 +5,32 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
-export const EmptyWrapper = styled(Flex) `
-  width: 100%;
-  height: 100%;
-  padding: 20px 0px;
-  text-align: center;
-
-  .title {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.41px;
-    color: black;
-  }
-
-  .subTitle {
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 14.06px;
-    color: black;
-  }
-
-  .description {
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 13px;
-    color: ${THEME.token?.bw8};
-  }
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+  padding: 20px 0px;
+  text-align: center;
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.41px;
+    color: black;
+  }
+
+  .subTitle {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 14.06px;
+    color: black;
+  }
+
+  .description {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 13px;
+    color: ${THEME.token?.bw8};
+  }
 `;
 EmptyWrapper.defaultProps = {
     vertical: true,
@@ -38,36 +38,36 @@ EmptyWrapper.defaultProps = {
     justify: 'center',
     gap: 20,
 };
-export const EmptyIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: ${THEME.token?.bw2};
-  color: ${THEME.token?.bw5};
-
-  /* Handle Size */
+export const EmptyIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${THEME.token?.bw2};
+  color: ${THEME.token?.bw5};
+
+  /* Handle Size */
   ${({ $size }) => {
     if ($size) {
-        return css `
-        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
-        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
-
-        i {
-          font-size: ${EMPTY_ICON_SIZE[$size]}px;
-        }
+        return css `
+        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
+        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
+
+        i {
+          font-size: ${EMPTY_ICON_SIZE[$size]}px;
+        }
       `;
     }
-}}
-
-  i {
-    color: ${THEME.token?.bw5};
-  }
+}}
+
+  i {
+    color: ${THEME.token?.bw5};
+  }
 `;
-export const ImageWrapper = styled.div `
-  img {
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-  }
+export const ImageWrapper = styled.div `
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
 `;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface EyedropperButtonProps {
+    onColorPick?: (color: string) => void;
+    size?: 'small' | 'middle' | 'large';
+    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+    disabled?: boolean;
+    className?: string;
+    showIcon?: boolean;
+}
+export declare const EyedropperButton: React.FC<EyedropperButtonProps>;
+export {};

package/es/components/molecules/EyedropperButton/EyedropperButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Button, Popover, Typography } from 'antd';
+import tinycolor from 'tinycolor2';
+import { useEyedropper } from '@antscorp/antsomi-ui/es/hooks';
+import { ColorizeIcon } from '../../icons';
+import { ColorSwatch, ColorText, PopoverContent } from './styled';
+const { Text } = Typography;
+export const EyedropperButton = ({ onColorPick, size = 'middle', type = 'text', disabled = false, className, showIcon = true, }) => {
+    const { isLoading, apiSupported, pickColor, copyToClipboard } = useEyedropper();
+    const [popoverVisible, setPopoverVisible] = useState(false);
+    const [currentColor, setCurrentColor] = useState(null);
+    const handlePickColor = useCallback(async () => {
+        const color = await pickColor();
+        if (color) {
+            setCurrentColor(color);
+            const copySuccess = await copyToClipboard(color);
+            if (copySuccess) {
+                setPopoverVisible(true);
+                setTimeout(() => {
+                    setPopoverVisible(false);
+                }, 2000);
+            }
+            onColorPick?.(color);
+        }
+    }, [copyToClipboard, onColorPick, pickColor]);
+    const renderPopoverContent = useCallback(() => {
+        if (!currentColor)
+            return null;
+        const isLight = tinycolor(currentColor).isLight();
+        return (_jsxs(PopoverContent, { children: [_jsx(ColorSwatch, { "$color": currentColor }), _jsxs("div", { children: [_jsx(Text, { type: "secondary", style: { fontSize: '12px' }, children: "\u0110\u00E3 copy:" }), _jsx("br", {}), _jsx(ColorText, { color: currentColor, "$isLight": isLight, children: currentColor })] })] }));
+    }, [currentColor]);
+    return (_jsx(Popover, { content: renderPopoverContent(), title: "M\u00E0u \u0111\u00E3 tr\u00EDch xu\u1EA5t", trigger: ['click'], open: popoverVisible, onOpenChange: setPopoverVisible, placement: "top", children: _jsx(Button, { type: type, size: size, icon: showIcon ? _jsx(ColorizeIcon, { size: 16 }) : undefined, onClick: handlePickColor, loading: isLoading, disabled: disabled || isLoading || !apiSupported, className: className, title: !apiSupported ? 'Trình duyệt không hỗ trợ EyeDropper API' : 'Trích xuất màu từ màn hình' }) }));
+};

package/es/components/molecules/EyedropperButton/index.js

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

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

@@ -0,0 +1,7 @@
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;
+export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorText: import("styled-components").StyledComponent<"span", any, {
+    $isLight: boolean;
+}, never>;