@antscorp/antsomi-ui 2.0.109 → 2.0.111

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const ColorSwatch = styled.div `
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: ${props => props.$color};
+  border: 1px solid #d9d9d9;
+  flex-shrink: 0;
+`;
+export const PopoverContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+`;
+export const ColorText = styled.span `
+  background-color: ${props => props.color};
+  color: ${props => (props.$isLight ? '#000' : '#fff')};
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+`;

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,134 @@
+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';
+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 [initialPopoverValue, setInitialPopoverValue] = 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: option.toString(),
+        className: clsx(CLS.PopoverListItem, {
+            [CLS.PopoverListItemSelected]: option === (value || initialPopoverValue),
+        }),
+    })), [options, value, initialPopoverValue]);
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setPopoverValue(null);
+        }
+        if (isPopoverOpen && popoverValue) {
+            popoverItemRefs.current.get(popoverValue)?.focus();
+        }
+    }, [popoverValue, isPopoverOpen]);
+    const handleInputFocus = (event) => {
+        onFocus?.(value, event);
+        setIsPopoverOpen(true);
+        if (!popoverValue && fontSizeOptions.some(item => item.size === value)) {
+            setInitialPopoverValue(value);
+        }
+    };
+    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': {
+                handleValueChange(uncontrolledValue, { type: 'input' });
+                inputRef.current?.blur();
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    // Infinite scroll: go to first item when reaching the end
+                    const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (firstFontSize) {
+                    setPopoverValue(firstFontSize.size);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    // Infinite scroll: go to last item when reaching the beginning
+                    const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (lastFontSize) {
+                    setPopoverValue(lastFontSize.size);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, inputRef, popoverValue, uncontrolledValue, value, handleValueChange]);
+    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': {
+                // Infinite scroll: go to first item when reaching the end
+                const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                // Infinite scroll: go to last item when reaching the beginning
+                const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
+                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;
+            setUncontrolledValue(Number(newValue));
+        }, onIncrement: () => handleValueChange(value + 1, { type: 'input' }), onDecrement: () => handleValueChange(value - 1, { type: 'input' }) }));
+    if (options.length) {
+        return (_jsx(FontSizeDropdown, { isOpen: isPopoverOpen, options: fontSizeOptions, popoverValue: popoverValue, initialPopoverValue: initialPopoverValue, 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 { InputNumber } from 'antd';
+import { forwardRef } from 'react';
+import { ControlButton, InputRoot } from '../styled';
+import { CLS } from '../utils';
+import clsx from 'clsx';
+import { AddIcon, MinusIcon } from '../../../icons';
+export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(ControlButton, { 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), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.max !== 'number' ||
+                rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] })));

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

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+type FontSizeOption = {
+    size: number;
+    label: string;
+    className: string;
+};
+interface FontSizeDropdownProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    options: FontSizeOption[];
+    popoverValue: number | null;
+    initialPopoverValue?: 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, initialPopoverValue, }: FontSizeDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { CLS } from '../utils';
+import { StyledListFont, StyledListItemFont } from '../styled';
+export const FontSizeDropdown = ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, initialPopoverValue, }) => {
+    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 || initialPopoverValue);
+            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 }, i.size));
+        }) }));
+    return (_jsx(Popover, { arrow: false, open: isOpen, overlayClassName: CLS.Popover, overlayInnerStyle: {
+            borderRadius: 4,
+        }, content: content, getPopupContainer: getPopupContainer, placement: "bottom", 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/index.scss

@@ -1,15 +1,15 @@
-.antsomi-font-size-input-popover {
-  &.antsomi-popover {
-    .antsomi-popover-inner {
-      padding: 0;
-
-      .antsomi-popover-inner-content {
-        overflow: auto;
-
-        > ul {
-          max-height: 240px;
-        }
-      }
-    }
-  }
-}
+.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/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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>;
+export declare const ControlButton: 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>;

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

@@ -0,0 +1,39 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { CLS } from './utils';
+export const StyledListFont = styled.ul `
+  &.${CLS.PopoverList} {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+`;
+export const StyledListItemFont = styled.li `
+  &.${CLS.PopoverListItem} {
+    padding: 6px 10px;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &.${CLS.PopoverListItemSelected} {
+      outline: none;
+      background-color: ${THEME.components?.Menu?.itemHoverBg};
+    }
+  }
+`;
+export const InputRoot = styled.div `
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+export const ControlButton = styled(Button) `
+  &.antsomi-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    padding: 0px;
+  }
+`;

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

@@ -0,0 +1,23 @@
+/// <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;
+    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/GradientSetting/styled.js

@@ -1,59 +1,59 @@
 import styled from 'styled-components';
-export const GradientSettingWrapper = styled.div `
-  .setting-container {
-    margin-top: 15px;
-
-    & .antsomi-select {
-      width: 112px;
-    }
-  }
-
-  & > button {
-    margin-top: 15px;
-  }
-
-  .color-setting__controller {
-    & > i {
-      align-self: flex-end;
-      margin-bottom: 10px;
-      font-size: 16px;
-      color: var(--primary-color);
-      cursor: pointer;
-    }
-
-    display: flex;
-    gap: 10px;
-
-    width: 100%;
-    margin-top: 15px;
-
-    /* Slider css selector */
-    & > div:first-child ~ div {
-      flex: 1;
-    }
-
-    /* Color picker select */
-    & > div:first-child {
-      flex-direction: column;
-      align-items: flex-start;
-
-      & .color-picker__label {
-        color: var(--text-base-color) !important;
-      }
-
-      & .antsomi-color-picker,
-      & .antsomi-popover-button {
-        margin: 0 !important;
-      }
-
-      & .antsomi-color-picker {
-        align-items: center;
-        gap: 10px;
-
-        input {
-          padding: 5px 6px;
-        }
-      }
-    }
-  }
+export const GradientSettingWrapper = styled.div `
+  .setting-container {
+    margin-top: 15px;
+
+    & .antsomi-select {
+      width: 112px;
+    }
+  }
+
+  & > button {
+    margin-top: 15px;
+  }
+
+  .color-setting__controller {
+    & > i {
+      align-self: flex-end;
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: var(--primary-color);
+      cursor: pointer;
+    }
+
+    display: flex;
+    gap: 10px;
+
+    width: 100%;
+    margin-top: 15px;
+
+    /* Slider css selector */
+    & > div:first-child ~ div {
+      flex: 1;
+    }
+
+    /* Color picker select */
+    & > div:first-child {
+      flex-direction: column;
+      align-items: flex-start;
+
+      & .color-picker__label {
+        color: var(--text-base-color) !important;
+      }
+
+      & .antsomi-color-picker,
+      & .antsomi-popover-button {
+        margin: 0 !important;
+      }
+
+      & .antsomi-color-picker {
+        align-items: center;
+        gap: 10px;
+
+        input {
+          padding: 5px 6px;
+        }
+      }
+    }
+  }
 `;

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

@@ -2,75 +2,75 @@
 import styled from 'styled-components';
 // Constants
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const LogoWrapper = styled.div `
-  height: 30px;
-  width: 30px;
-  cursor: pointer;
-
-  img {
-    height: 100%;
-    width: 100%;
-  }
+export const LogoWrapper = styled.div `
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
 `;
-export const HeaderV2Styled = styled.div `
-  height: ${THEME.token?.headerHeight};
-  background-color: #f6f8fc;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px;
-  box-sizing: border-box;
-
-  ${props => !props.$show && 'display: none;'}
-
-  .left-side,
-  .right-side {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  .left-side {
-    flex: 1;
-    overflow: hidden;
-
-    .logo-wrapper {
-      flex-shrink: 0;
-    }
-
-    .title-container {
-      flex: 1;
-      min-width: 0;
-      /* &:has(.header-breadcrumbs) {
-        height: 37px;
-      } */
-      input.antsomi-input {
-        height: 23px;
-      }
-    }
-  }
-
-  .header-breadcrumbs,
-  .header-breadcrumbs__item {
-    font-size: 12px;
-    line-height: 14px;
-    font-weight: bold;
-    color: ${THEME.token?.bw7};
-    user-select: none;
-  }
-
-  .header-breadcrumbs__item {
-    cursor: pointer;
-    &:hover {
-      color: ${THEME.token?.colorText};
-    }
-  }
-
-  .page-title {
-    font-size: 20px;
-    line-height: 23px;
-    height: 23px;
-    font-weight: bold;
-    color: ${globalToken?.colorTextBase};
-  }
+export const HeaderV2Styled = styled.div `
+  height: ${THEME.token?.headerHeight};
+  background-color: #f6f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  ${props => !props.$show && 'display: none;'}
+
+  .left-side,
+  .right-side {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .left-side {
+    flex: 1;
+    overflow: hidden;
+
+    .logo-wrapper {
+      flex-shrink: 0;
+    }
+
+    .title-container {
+      flex: 1;
+      min-width: 0;
+      /* &:has(.header-breadcrumbs) {
+        height: 37px;
+      } */
+      input.antsomi-input {
+        height: 23px;
+      }
+    }
+  }
+
+  .header-breadcrumbs,
+  .header-breadcrumbs__item {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: bold;
+    color: ${THEME.token?.bw7};
+    user-select: none;
+  }
+
+  .header-breadcrumbs__item {
+    cursor: pointer;
+    &:hover {
+      color: ${THEME.token?.colorText};
+    }
+  }
+
+  .page-title {
+    font-size: 20px;
+    line-height: 23px;
+    height: 23px;
+    font-weight: bold;
+    color: ${globalToken?.colorTextBase};
+  }
 `;