@antscorp/antsomi-ui 2.0.85 → 2.0.86-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,2 @@
+@import url('./organism/index.scss');
+@import url('./molecules/index.scss');

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,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useImperativeHandle, useEffect, useRef, useMemo, } from 'react';
+import clsx from 'clsx';
+import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
+import { DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS } from './constants';
+import { CLS } from './utils';
+import { FontSizeDropdown } from './components/FontSizeDropdown';
+import { FontSizeControl } from './components/FontSizeControl';
+const getFontSizeLabel = (value) => `${value} px`;
+export const FontSizeInput = forwardRef((props, ref) => {
+    const { min = 1, max = 300, value: valueProp, defaultValue = DEFAULT_FONT_SIZE, options = DEFAULT_FONT_SIZE_OPTIONS, placeholder, style, className, disabled, dropdownProps, onFocus, onBlur, onChange = () => undefined, } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [popoverValue, setPopoverValue] = useState(null);
+    const [inputRef, { width: inputWidth }] = useElementSize();
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? +valueProp : +uncontrolledValue;
+    const popoverItemRefs = useRef(new Map());
+    const fontSizeOptions = useMemo(() => options.map(option => ({
+        size: option,
+        label: getFontSizeLabel(option),
+        className: clsx(CLS.PopoverListItem, {
+            [CLS.PopoverListItemSelected]: option === value,
+        }),
+    })), [options, value]);
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setPopoverValue(null);
+        }
+        if (isPopoverOpen && popoverValue) {
+            popoverItemRefs.current.get(popoverValue)?.focus({
+                preventScroll: true,
+            });
+        }
+    }, [popoverValue, isPopoverOpen]);
+    const handleInputFocus = (event) => {
+        onFocus?.(value, event);
+        setIsPopoverOpen(true);
+    };
+    const handleInputBlur = (event) => {
+        onBlur?.(value, event);
+        if (!popoverValue) {
+            setIsPopoverOpen(false);
+        }
+    };
+    const handleValueChange = useCallback((newValue, info) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onChange(newValue, info);
+    }, [isControlled, onChange]);
+    const handleKeyDown = useCallback((e) => {
+        const currentSize = popoverValue ?? value;
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === currentSize);
+        const firstFontSize = fontSizeOptions.at(0);
+        const lastFontSize = fontSizeOptions.at(-1);
+        switch (e.key) {
+            case 'Enter': {
+                inputRef.current?.blur();
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    const nextFocusIndex = Math.min(fontSizeOptions.length - 1, currentFocusIndex + 1);
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (firstFontSize) {
+                    setPopoverValue(firstFontSize.size);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    const nextFocusIndex = Math.max(0, currentFocusIndex - 1);
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (lastFontSize) {
+                    setPopoverValue(lastFontSize.size);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, inputRef, value, popoverValue]);
+    const handleClickPopoverItem = useCallback((size) => {
+        handleValueChange(size, { type: 'dropdown' });
+        setIsPopoverOpen(false);
+        inputRef.current?.blur();
+    }, [handleValueChange, inputRef]);
+    const handlePopoverItemKeydown = useCallback((e, size) => {
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === popoverValue);
+        switch (e.key) {
+            case 'Enter': {
+                handleClickPopoverItem(size);
+                break;
+            }
+            case 'ArrowDown': {
+                const nextFocusIndex = Math.min(fontSizeOptions.length - 1, currentFocusIndex + 1);
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                const nextFocusIndex = Math.max(0, currentFocusIndex - 1);
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, popoverValue, handleClickPopoverItem]);
+    useImperativeHandle(ref, () => ({
+        closeDropdown: () => setIsPopoverOpen(false),
+    }));
+    const content = (_jsx(FontSizeControl, { disabled: disabled, ref: inputRef, className: className, value: popoverValue ?? value, max: max, min: min, keyboard: false, defaultValue: defaultValue, style: style, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, onChange: newValue => {
+            if (newValue === null)
+                return;
+            handleValueChange(Number(newValue), { type: 'input' });
+        }, onIncrement: () => handleValueChange(value + 1, { type: 'input' }), onDecrement: () => handleValueChange(value - 1, { type: 'input' }) }));
+    if (options.length) {
+        return (_jsx(FontSizeDropdown, { isOpen: isPopoverOpen, options: fontSizeOptions, popoverValue: popoverValue, width: inputWidth, itemRefs: popoverItemRefs, onItemClick: handleClickPopoverItem, onItemKeyDown: handlePopoverItemKeydown, onClose: () => setIsPopoverOpen(false), getPopupContainer: () => dropdownProps?.getPopupContainer?.() || document.body, children: content }));
+    }
+    return content;
+});

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd';
+interface FontSizeControlProps extends InputNumberProps {
+    onIncrement: () => void;
+    onDecrement: () => void;
+}
+export declare const FontSizeControl: import("react").ForwardRefExoticComponent<FontSizeControlProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, InputNumber } from 'antd';
+import { MinusIcon, PlusIcon } from 'lucide-react';
+import { forwardRef } from 'react';
+import { InputRoot } from '../styled';
+import { CLS } from '../utils';
+import clsx from 'clsx';
+export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(Button, { size: "small", type: "text", onClick: onDecrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.min !== 'number' ||
+                rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: ref, className: clsx(CLS.Input, rest.className), formatter: value => `${value} px`, parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(Button, { size: "small", type: "text", onClick: onIncrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.max !== 'number' ||
+                rest.value >= rest.max, children: _jsx(PlusIcon, { size: 14 }) })] })));

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

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+type FontSizeOption = {
+    size: number;
+    label: string;
+    className: string;
+};
+interface FontSizeDropdownProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    options: FontSizeOption[];
+    popoverValue: number | null;
+    width: number;
+    itemRefs: RefObject<Map<number, HTMLLIElement>>;
+    onItemClick: (size: number) => void;
+    onItemKeyDown: (e: React.KeyboardEvent, size: number) => void;
+    onClose: () => void;
+    getPopupContainer?: () => HTMLElement;
+}
+export declare const FontSizeDropdown: ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, }: FontSizeDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { StyledListFont, StyledListItemFont } from '../styled';
+import { CLS } from '../utils';
+export const FontSizeDropdown = ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, }) => {
+    const content = (_jsx(StyledListFont, { role: "list", className: CLS.PopoverList, style: { width: `${width}px` }, onMouseDown: e => e.preventDefault(), children: options.map((i, idx) => {
+            const isFocused = i.size === popoverValue;
+            return (_jsx(StyledListItemFont, { ref: el => {
+                    if (!el || !itemRefs.current)
+                        return;
+                    itemRefs.current.set(i.size, el);
+                }, role: "listitem", className: i.className, "aria-posinset": idx + 1, "aria-setsize": options.length, tabIndex: isFocused ? 0 : -1, onClick: () => onItemClick(i.size), onKeyDown: e => onItemKeyDown(e, i.size), ...(isFocused && {
+                    onBlur: onClose,
+                }), children: i.label }));
+        }) }));
+    return (_jsx(Popover, { arrow: false, open: isOpen, overlayClassName: CLS.Popover, content: content, getPopupContainer: getPopupContainer, children: children }));
+};

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/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledListFont: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListItemFont: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const InputRoot: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,22 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const StyledListFont = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+`;
+export const StyledListItemFont = styled.li `
+  padding: 6px 10px;
+  cursor: pointer;
+  text-align: center;
+
+  &:hover {
+    background-color: ${THEME.components?.Menu?.itemHoverBg};
+  }
+`;
+export const InputRoot = styled.div `
+  gap: 2px;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;

package/es/components/molecules/FontSizeInput/styles.scss

@@ -0,0 +1,15 @@
+.antsomi-font-size-input-popover {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-popover-inner-content {
+        overflow: auto;
+
+        > ul {
+          max-height: 240px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface HandlerRef {
+    closeDropdown: () => void;
+}
+export interface FontSizeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    defaultValue?: number;
+    options?: number[];
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    delay?: number;
+    disabled?: boolean;
+    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/FontSizeInput/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const CLS: {
+    Popover: string;
+    PopoverList: string;
+    PopoverListItem: string;
+    PopoverListItemSelected: string;
+    Input: string;
+};

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

@@ -0,0 +1,9 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+const componentCls = antsomiClsx('font-size-input');
+export const CLS = {
+    Popover: componentCls('popover'),
+    PopoverList: componentCls('popover-list'),
+    PopoverListItem: componentCls('popover-list-item'),
+    PopoverListItemSelected: componentCls('popover-list-item-selected'),
+    Input: componentCls('input'),
+};

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

@@ -7,13 +7,16 @@ 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;
+        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: import("./types").ItemType) => React.ReactNode);
+    action: React.ReactNode | ((item: import("./types").ItemType, others: {
+        expandEl: React.ReactNode;
+    }) => React.ReactNode);
 }> & {
     mode?: "inline" | undefined;
 } & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;