@antscorp/antsomi-ui 2.0.82 → 2.0.83-text-editor-beta.1

package/es/assets/css/main.scss

@@ -1,6 +1,8 @@
+@import url('../../components/index.scss');
+
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
+  --antsomi-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-
-

package/es/components/index.scss

@@ -0,0 +1 @@
+@import url('./organism/index.scss');

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@antscorp/icons';
-import React, { useCallback, useImperativeHandle, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Scrollbars, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Divider, Input } from 'antd';
 import { AccountItem } from './components';
@@ -12,13 +12,24 @@ export const AccountListing = React.forwardRef((props, ref) => {
     const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
     // States
     const [searchValue, setSearchValue] = useState('');
-    const { accountData, recentData, updateRecentAccount } = useAccountSelection(apiConfig);
+    const [stateAccountData, setStateAccountData] = useState([]);
+    const { accountData, recentData, updateRecentAccount, refetchRecentAccount } = useAccountSelection(apiConfig);
     const isAllAccount = currentAccount === 'all';
     useImperativeHandle(ref, () => ({
         getUsers() {
             return { recentData, accountData };
         },
     }), [recentData, accountData]);
+    useEffect(() => () => {
+        // fetch recent data when unmount this component
+        refetchRecentAccount();
+    }, []);
+    useEffect(() => {
+        if (!stateAccountData.length && Array.isArray(accountData) && accountData.length) {
+            const newSortAccountData = accountData.sort((a, b) => Number(+currentAccount === b.userId) - Number(+currentAccount === a.userId)); //  isSelected=true to top in list accounts
+            setStateAccountData(newSortAccountData);
+        }
+    }, [accountData, stateAccountData]);
     // Handlers
     const handleSelectAccount = useCallback((userId) => {
         const currentRecent = recentData?.value.filter(Boolean).slice(0, 2) || [];
@@ -36,7 +47,7 @@ export const AccountListing = React.forwardRef((props, ref) => {
     return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
                                         .map(accountId => accountData?.find(account => account.userId === accountId))
                                         .filter((accountId, index, self) => Boolean(accountId) && index === self.indexOf(accountId))
-                                        .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId))), _jsx(Divider, { style: { margin: '8px 0', color: THEME.token?.bw3 } })] })) : null, accountData
+                                        .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId))), _jsx(Divider, { style: { margin: '8px 0', color: THEME.token?.bw3 } })] })) : null, stateAccountData
                                 ?.filter(account => !recentData?.value.includes(account.userId) &&
                                 searchStringQuery(account.userName, searchValue))
                                 .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId)))] }) }) }), showAllAccount ? (_jsx(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all'), children: _jsx("strong", { children: "All accounts" }) })) : null] }));

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

@@ -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", 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) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FontSizeInputProps, HandlerRef } from './types';
+export declare const FontSizeInput: import("react").ForwardRefExoticComponent<FontSizeInputProps & import("react").RefAttributes<HandlerRef>>;

package/es/components/molecules/FontSizeInput/FontSizeInput.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, InputNumber } from 'antd';
+import { DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS } from './constants';
+import { forwardRef, useCallback, useState, useImperativeHandle, useEffect, useRef } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import clsx from 'clsx';
+const getFontSizeLabel = (value) => `${value} px`;
+export const FontSizeInput = forwardRef((props, ref) => {
+    const { delay = 400, value: valueProp, defaultValue = DEFAULT_FONT_SIZE, onChange = () => undefined, options = DEFAULT_FONT_SIZE_OPTIONS, placeholder, style, className, dropdownProps, onFocus, onBlur, } = props;
+    const mouseEnterDropdownItemRef = useRef(null);
+    const [value, setValue] = useState(defaultValue);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const handleInputFocus = (event) => {
+        onFocus?.(value, event);
+        setIsDropdownOpen(true);
+    };
+    const handleInputBlur = (event) => {
+        onBlur?.(value, event);
+        setIsDropdownOpen(false);
+    };
+    const debounceOnChangeCb = useDebouncedCallback(onChange, delay);
+    const handleOnChange = useCallback((newValue, info) => {
+        setValue(newValue);
+        debounceOnChangeCb(newValue, info);
+    }, [debounceOnChangeCb]);
+    useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+    useImperativeHandle(ref, () => ({
+        closeDropdown: () => setIsDropdownOpen(false),
+    }));
+    const fontSizeInput = (_jsx(InputNumber, { className: className, value: value, max: 300, min: 1, defaultValue: defaultValue, onChange: number => number && handleOnChange(number, { type: 'input' }), onFocus: handleInputFocus, onBlur: handleInputBlur, formatter: value => `${value} px`, parser: value => {
+            if (!value)
+                return defaultValue;
+            const parsed = parseInt(value.replace(/[^\d]/g, ''));
+            return isNaN(parsed) || parsed < 1 ? defaultValue : parsed;
+        }, placeholder: placeholder, style: style }));
+    const renderWithDropdown = useCallback((input, isSelected) => {
+        const items = options.map(option => ({
+            key: option,
+            className: clsx({
+                'ants-menu-item-selected': isSelected(option),
+            }),
+            label: getFontSizeLabel(option),
+            onMouseEnter: e => {
+                const { currentTarget } = e.domEvent;
+                if (currentTarget instanceof HTMLLIElement) {
+                    mouseEnterDropdownItemRef.current = {
+                        element: currentTarget,
+                        value: option,
+                    };
+                }
+            },
+            onMouseLeave: () => {
+                mouseEnterDropdownItemRef.current = null;
+            },
+        }));
+        return (_jsx(Dropdown, { arrow: false, open: isDropdownOpen, destroyPopupOnHide: true, menu: {
+                items,
+                style: {
+                    maxHeight: 200,
+                    overflow: 'auto',
+                },
+                onMouseDown: e => {
+                    e.preventDefault();
+                    setIsDropdownOpen(false);
+                    if (mouseEnterDropdownItemRef.current) {
+                        handleOnChange(mouseEnterDropdownItemRef.current.value, { type: 'dropdown' });
+                    }
+                },
+            }, getPopupContainer: () => dropdownProps?.getPopupContainer?.() || document.body, children: input }));
+    }, [dropdownProps, isDropdownOpen, options, handleOnChange]);
+    if (!options.length) {
+        return fontSizeInput;
+    }
+    return renderWithDropdown(fontSizeInput, opt => opt === value);
+});

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_FONT_SIZE_OPTIONS: number[];
+export declare const DEFAULT_FONT_SIZE: number;

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

@@ -0,0 +1,5 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const DEFAULT_FONT_SIZE_OPTIONS = [
+    8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72, 96,
+];
+export const DEFAULT_FONT_SIZE = THEME.token?.fontSize || 14;

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

@@ -0,0 +1,2 @@
+export * from './FontSizeInput';
+export type { FontSizeInputProps, HandlerRef as FontSizeInputHandlerRef } from './types';

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

@@ -0,0 +1 @@
+export * from './FontSizeInput';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface HandlerRef {
+    closeDropdown: () => void;
+}
+export interface FontSizeInputProps {
+    value: number;
+    defaultValue?: number;
+    options?: number[];
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    delay?: number;
+    onChange?: (value: number, info: {
+        type: 'input' | 'dropdown';
+    }) => void;
+    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    dropdownProps?: {
+        getPopupContainer?: () => HTMLElement | null;
+    };
+}

package/es/components/molecules/FontSizeInput/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,11 +7,10 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;
-        pathKey: import("./types").PathKey;
     }) => void;
     action: React.ReactNode | ((item: import("./types").ItemType) => React.ReactNode);
 }> & {