x-ui-design 1.0.29 → 1.0.31-gamma.1

package/lib/components/Menu/Menu.tsx

@@ -1,261 +0,0 @@
-'use client'
-
-import React, {
-  FC,
-  useMemo,
-  useState,
-  ReactNode,
-  useCallback,
-  createContext,
-  MouseEvent,
-  useRef
-} from "react";
-import { MenuMode, MenuProps } from "../../types/menu";
-import MenuItem from "./Item/Item";
-import SubMenu from "./SubMenu/SubMenu";
-import { prefixClsMenu } from "../../utils";
-import "./index.css";
-
-export const MenuContext = createContext<{
-  mode: MenuMode;
-  inlineIndent: number;
-  inlineCollapsed: boolean;
-  selectedKeys: string[];
-  openKeys: string[];
-  toggleOpen: (key: string, level?: "1" | "2") => void;
-  onItemClick: (key: string, domEvent?: MouseEvent) => void;
-  triggerSubMenuAction?: "hover" | "click";
-} | null>(null);
-
-const Menu: FC<MenuProps> & {
-  Item: typeof MenuItem;
-  SubMenu: typeof SubMenu;
-} = ({
-  prefixCls = prefixClsMenu,
-  className = "",
-  style,
-  defaultOpenKeys = [],
-  defaultSelectedKeys = [],
-  openKeys: openKeysProp,
-  selectedKeys: selectedKeysProp,
-  mode = "vertical",
-  multiple = false,
-  inlineCollapsed = false,
-  inlineIndent = 24,
-  triggerSubMenuAction = "hover",
-  onClick,
-  onSelect,
-  onDeselect,
-  onOpenChange,
-  selectable = true,
-  children,
-  items
-}) => {
-    const hasInteracted = useRef(false);
-
-    const [openKeys, setOpenKeys] = useState<string[]>(openKeysProp ?? defaultOpenKeys);
-    const [selectedKeys, setSelectedKeys] = useState<string[]>(selectedKeysProp ?? defaultSelectedKeys);
-
-    const _triggerSubMenuActionClick = useMemo(() => {
-      if (mode === 'inline') {
-        return "click";
-      }
-
-      return triggerSubMenuAction
-    }, [triggerSubMenuAction, mode]);
-
-    const toggleOpen = useCallback(
-      (key: string, level?: "1" | "2") => {
-        setOpenKeys((_openKeys) => {
-          const isOpen = _openKeys?.includes(key);
-
-          const openKeysData = level
-            ? [...(_triggerSubMenuActionClick === 'click' ? level === "2" ? [..._openKeys] : [] : _openKeys), key]
-            : [key];
-
-          const next = [...new Set(isOpen
-            ? _openKeys.filter((k) => k !== key)
-            : openKeysData)];
-
-          if (openKeysProp === undefined) {
-            _openKeys = next;
-          }
-
-          onOpenChange?.(next);
-
-          return _openKeys
-        })
-      },
-      [openKeysProp, hasInteracted, _triggerSubMenuActionClick]
-    );
-
-    const onItemClick = useCallback(
-      (key: string, domEvent?: MouseEvent) => {
-        if (!selectable) {
-          return;
-        }
-
-        let nextSelected = [...(selectedKeys || [])];
-        const already = nextSelected.includes(key);
-
-        if (multiple) {
-          nextSelected = already ? nextSelected.filter((k) => k !== key) : [...nextSelected, key];
-        } else {
-          nextSelected = [key];
-        }
-
-        if (selectedKeysProp === undefined) {
-          setSelectedKeys(nextSelected);
-        }
-
-        onSelect?.({ key, keyPath: [key], selectedKeys: nextSelected });
-        onClick?.({ key, keyPath: [key], domEvent: domEvent as MouseEvent });
-
-        if (already && multiple) {
-          onDeselect?.({ key, keyPath: [key] });
-        }
-      },
-      [multiple, onClick, onSelect, onDeselect, selectedKeys, selectable, selectedKeysProp]
-    );
-
-    const menuContext = useMemo(
-      () => ({
-        mode,
-        inlineIndent,
-        inlineCollapsed,
-        selectedKeys: selectedKeys || [],
-        openKeys: openKeys || [],
-        toggleOpen,
-        onItemClick,
-        triggerSubMenuAction: _triggerSubMenuActionClick,
-      }),
-      [
-        mode,
-        inlineIndent,
-        inlineCollapsed,
-        selectedKeys,
-        openKeys,
-        toggleOpen,
-        onItemClick,
-        _triggerSubMenuActionClick
-      ]
-    );
-
-    return (
-      <MenuContext.Provider value={menuContext}>
-        <ul
-          role="menu"
-          style={style}
-          className={`${prefixCls}-${mode} ${prefixCls || ''} ${className || ''}`}
-        >
-          {items
-            ? items.map((it, index) => {
-              if (it.type === 'divider') {
-                return (
-                  <span
-                    key={`${it.key}_${index}_divider`}
-                    className={`${prefixCls}-divider`}
-                  />
-                )
-              }
-
-              if (it.type === 'group') {
-                return (
-                  <div key={index + it.key}>
-                    <MenuItem
-                      key={`${it.key}_${index}_${it.label}_menu-item`}
-                      itemKey={it.key}
-                      label={it.label}
-                      icon={it.icon}
-                      className={`${prefixCls}-item-disabled`}
-                    />
-
-                    {(it.children || []).map((c, i) => (
-                      <MenuItem
-                        key={`${c.key}_${i}_menu-item`}
-                        itemKey={c.key}
-                        label={c.label}
-                        icon={c.icon}
-                        className={`${prefixCls}-item-group`}
-                      />
-                    ))}
-                  </div>
-                )
-              }
-
-              return it.children ? (
-                <SubMenu
-                  key={`${it.key}_${it.label}_${index}_sub_menu`}
-                  itemKey={it.key}
-                  title={it.label}
-                  icon={it.icon}
-                  level="1"
-                >
-                  {it.children.map((c, idx) => {
-                    if (c.type === 'group') {
-                      return (
-                        <div key={c.key + idx}>
-                          <MenuItem
-                            key={`${c.key}_${idx}_menu-item`}
-                            itemKey={c.key}
-                            label={c.label}
-                            icon={c.icon}
-                            className={`${prefixCls}-item-disabled`}
-                          />
-
-                          {(c.children || []).map((c, _i) => (
-                            <MenuItem
-                              key={`${c.key}_${_i}_menu-item`}
-                              itemKey={c.key}
-                              label={c.label}
-                              icon={c.icon}
-                              className={`${prefixCls}-item-group`}
-                            />
-                          ))}
-                        </div>
-                      )
-                    }
-
-                    return c.children ? <SubMenu
-                      key={`${c.key}_${c.label}_${idx}_sub_menu`}
-                      className={`${prefixCls}-sub-list-sub`}
-                      itemKey={c.key}
-                      title={c.label}
-                      icon={c.icon}
-                      level="2"
-                    >
-                      {c.children.map((c, _idx) => (
-                        <MenuItem
-                          key={`${c.key}_${_idx}_${c.label}_menu-item`}
-                          itemKey={c.key}
-                          label={c.label}
-                          icon={c.icon} 
-                        />
-                      ))}
-                    </SubMenu> :
-                      <MenuItem
-                        key={`${index}_${c.key}_${c.label}_menu-item`}
-                        itemKey={c.key}
-                        label={c.label}
-                        icon={c.icon} />
-                  })}
-                </SubMenu>
-              ) : (
-                <MenuItem
-                  key={`${index}_${it.key}_menu-item`}
-                  itemKey={it.key}
-                  label={it.label}
-                  icon={it.icon}
-                />
-              )
-            })
-            : children}
-        </ul>
-      </MenuContext.Provider>
-    );
-  };
-
-Menu.Item = MenuItem;
-Menu.SubMenu = SubMenu;
-
-export default Menu;

package/lib/components/Menu/SubMenu/SubMenu.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-import React, { FC, useCallback, useContext } from "react";
-import { MenuContext } from "../Menu";
-import { SubMenuItem } from "../../../types/menu";
-import { ArrowIcon } from "../../../components/Icons";
-import { prefixClsMenu } from "../../../utils";
-
-const SubMenu: FC<SubMenuItem> = ({
-    itemKey,
-    title,
-    icon,
-    children,
-    className = '',
-    level,
-    prefixCls = prefixClsMenu
-}) => {
-    const menuContext = useContext(MenuContext);
-
-    if (!menuContext) {
-        throw new Error('MenuItem must be used within a Menu');
-    }
-
-    const { openKeys, toggleOpen, triggerSubMenuAction } = menuContext;
-
-    const isOpen = openKeys.includes(itemKey);
-
-    const handleClick = useCallback(() => {
-        if (triggerSubMenuAction === "click") {
-            toggleOpen(itemKey, level);
-        }
-    }, [itemKey, level]);
-
-    const handleHover = useCallback((_: boolean) => {
-        if (triggerSubMenuAction === "hover") {
-            toggleOpen(itemKey, level);
-        }
-    }, [itemKey, level]);
-
-    return (
-        <li
-            className={`${prefixCls}-sub ${className}`}
-            {
-                ...(triggerSubMenuAction === "hover" ? {
-                    onMouseEnter: () => handleHover(true),
-                    onMouseLeave: () => handleHover(false)
-                } : {})
-            }
-        >
-            <div className={`${prefixCls}-sub-title`} onClick={handleClick}>
-                {icon && <span className={`${prefixCls}-sub-icon`}>
-                    {icon}
-                </span>}&nbsp;
-                <span className={`${prefixCls}-sub-label`}>{title}</span>
-                <span className={`${prefixCls}-sub-arrow`}>
-                    {<ArrowIcon isOpen={isOpen} />}
-                </span>
-            </div>
-
-            {!isOpen ? null :
-                <ul className={`${prefixCls}-sub-list`}>
-                    {children}
-                </ul>}
-        </li>
-    );
-};
-
-export default SubMenu;

package/lib/components/Menu/index.css

@@ -1,145 +0,0 @@
-.xUi-menu {
-    gap: 4px;
-    margin: 0;
-    padding: 4px;
-    display: flex;
-    font-size: 14px;
-    list-style: none;
-    border-radius: 4px;
-    flex-direction: column;
-    user-select: none;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
-}
-
-.xUi-menu-sub-list {
-    gap: 4px;
-    margin: 0;
-    padding: 4px;
-    display: flex;
-    list-style: none;
-    border-radius: 4px;
-    height: max-content;
-    flex-direction: column;
-    background: var(--xui-background-color);
-}
-
-.xUi-menu-item-group {
-    padding:  0 24px !important;
-}
-
-.xUi-menu-vertical .xUi-menu-sub-list {
-    top: 0;
-    z-index: 1;
-    left: 100%;
-    right: -100%;
-    width: min-content;
-    min-width: 160px;
-    position: absolute;
-    background-color: #fff;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
-}
-
-.xUi-menu-horizontal {
-    display: flex;
-    flex-direction: row;
-}
-
-.xUi-menu-item {
-    display: flex;
-    height: 40px;
-    padding: 0 12px;
-    cursor: pointer;
-    border-radius: 4px;
-    align-items: center;
-    transition: background 0.3s;
-    color: var(--xui-text-color);
-}
-
-.xUi-menu-item:hover {
-    background: rgba(0, 0, 0, 0.04);
-}
-
-.xUi-menu-item-icon {
-    margin-right: 8px;
-}
-
-.xUi-menu-sub {
-    position: relative;
-    border-radius: 6px;
-}
-
-.xUi-menu-sub-title {
-    height: 40px;
-    display: flex;
-    padding: 0 12px;
-    cursor: pointer;
-    align-items: center;
-
-    &:hover {
-        border-radius: 6px;
-        background-color: var(--xui-color-hover);
-    }
-}
-
-.xUi-menu-sub-label {
-    flex: 1;
-}
-
-.xUi-menu-sub-arrow {
-    margin-left: 8px;
-    transition: transform 0.2s;
-}
-
-.xUi-menu-vertical .xUi-menu-sub-arrow {
-    transform: rotate(-90deg);
-}
-
-.xUi-menu-group {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.xUi-menu-group-title {
-    font-size: 12px;
-    padding: 8px 12px;
-    color: rgba(0, 0, 0, 0.45);
-}
-
-.xUi-menu-group-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.xUi-menu-divider {
-    display: block;
-    margin: 0 auto;
-    width: calc(100% - 16px);
-    border-bottom: 1px solid var(--xui-color-disabled);
-}
-
-.xUi-menu-item.xUi-menu-item-disabled {
-    cursor: auto;
-    opacity: 0.6;
-
-    &:hover {
-        background-color: unset;
-    }
-}
-
-.xUi-menu-inline .xUi-menu-sub-list {
-    background-color: var(--xui-menu-inline-bg);
-}
-
-.xUi-menu-inline .xUi-menu-item {
-    padding: 0 24px;
-}
-
-.xUi-menu-inline .xUi-menu-sub-title {
-    padding: 0 20px;
-}
-
-.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item {
-    padding: 0 30px;
-}

package/lib/components/Menu/index.ts

@@ -1 +0,0 @@
-export { default as Menu } from './Menu';

package/lib/components/Popover/Popover.tsx

@@ -1,135 +0,0 @@
-import React, { useRef, useState, cloneElement, isValidElement, Children, useEffect, useMemo, useCallback } from "react";
-import { usePosition } from "../../hooks/usePosition";
-import { clsx } from '../../helpers';
-import { PopoverProps } from "../../types/popover";
-import { ConditionalWrapper } from '../ConditionalWrapper';
-import { createPortal } from 'react-dom';
-import { prefixClsPopover } from "../../utils";
-import './style.css';
-
-const Popover = ({
-    prefixCls = prefixClsPopover,
-    content,
-    children,
-    trigger = "click",
-    placement = "bottom",
-    open,
-    visible,
-    title,
-    style = {},
-    overlayClassName = '',
-    overlayStyle = {},
-    onVisibleChange,
-    getPopupContainer
-}: PopoverProps) => {
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const popupRef = useRef<HTMLDivElement>(null);
-
-    const [innerOpen, setInnerOpen] = useState(false);
-
-    const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
-    
-    const { dropdownPosition, showPlacement } = usePosition({
-        isOpen,
-        offset: 10,
-        popupRef,
-        placement,
-        triggerRef,
-        getPopupContainer: getPopupContainer?.(triggerRef.current as HTMLElement)
-    });
-
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (
-                popupRef.current &&
-                !popupRef.current.contains(e.target as Node) &&
-                triggerRef.current &&
-                !triggerRef.current.contains(e.target as Node)
-            ) {
-                setInnerOpen(false);
-                onVisibleChange?.(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-
-    const handleOnClick = useCallback(() => {
-        const newState = !isOpen;
-
-        onVisibleChange?.(newState);
-        setInnerOpen(newState);
-    }, [isOpen, trigger]);
-
-    const handleOnMouseEnter = useCallback(() => {
-        if (trigger === "hover") {
-            onVisibleChange?.(true);
-            setInnerOpen(true);
-        }
-    }, [trigger]);
-
-    const handleOnMouseLeave = useCallback(() => {
-        if (trigger === "hover") {
-            onVisibleChange?.(false);
-            setInnerOpen(false);
-        }
-    }, [trigger]);
-
-    const childProps = useMemo(() => trigger === "click"
-        ? { onClick: handleOnClick }
-        : { onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
-        [trigger]);
-
-    return (
-        <>
-            {Children.map(children, (child, index) => {
-                if (!isValidElement(child)) {
-                    child = <div>{child}</div>
-                }
-                
-                return cloneElement(child, {
-                    key: index,
-                    ...(index === 0 ? {
-                        style,
-                        ...childProps,
-                        ref: triggerRef,
-                        className: `${prefixCls}-wrapper-content`,
-                    } : {}),
-                })
-            })}
-
-            {isOpen && (
-                <ConditionalWrapper
-                    condition={!!getPopupContainer}
-                    wrapper={(element) =>
-                        getPopupContainer
-                            ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement))
-                            : <>{element}</>
-                    }
-                >
-                    <div
-                        ref={popupRef}
-                        {...childProps}
-                        className={clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName)}
-                        style={{
-                            zIndex: 1000,
-                            position: "absolute",
-                            ...overlayStyle,
-                            ...dropdownPosition
-                        }}
-                    >
-                        {title && <div className={`${prefixCls}-title`}>{title}</div>}
-                        <div className={`${prefixCls}-inner`}>{content}</div>
-                        <div className={`${prefixCls}-arrow ${showPlacement}`} />
-                    </div>
-                </ConditionalWrapper>
-            )}
-        </>
-    );
-};
-
-export default Popover;

package/lib/components/Popover/index.ts

@@ -1 +0,0 @@
-export { default as Popover } from '../Popover/Popover'

package/lib/components/Popover/style.css

@@ -1,82 +0,0 @@
-.xUi-popover {
-    &::before {
-        left: 0;
-        top: -10px;
-        content: "";
-        width: 100%;
-        height: 10px;
-        z-index: 10000;
-        position: absolute;
-    }
-}
-
-.xUi-popover-wrapper-content {
-    cursor: pointer;
-    max-width: fit-content;
-    width: -webkit-fill-available;
-}
-
-.xUi-popover {
-    width: max-content;
-    background: var(--xui-background-color);
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    padding: 8px 12px;
-    z-index: 1000;
-}
-
-.xUi-popover-title {
-    padding: 4px;
-}
-
-.xUi-popover-inner {
-    font-size: 14px;
-    color: var(--xui-text-color);
-}
-
-.xUi-popover-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    background: var(--xui-background-color);
-    border-left: 0.5px solid var(--xui-border-color);
-    border-top: 0.5px solid var(--xui-border-color);
-    transform: rotate(45deg);
-}
-
-.xUi-popover-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    background: var(--xui-background-color);
-    border-left: 0.5px solid var(--xui-border-color);
-    border-top: 0.5px solid var(--xui-border-color);
-    transform: rotate(45deg);
-}
-
-.xUi-popover-right .xUi-popover-arrow,
-.xUi-popover-topRight .xUi-popover-arrow,
-.xUi-popover-bottomRight .xUi-popover-arrow {
-    left: unset;
-    right: 12px;
-}
-
-.xUi-popover-arrow.bottom {
-    top: unset;
-    bottom: -6px;
-    border-left: unset;
-    border-top: unset;
-    border-right: 0.5px solid var(--xui-border-color);
-    border-bottom: 0.5px solid var(--xui-border-color);
-}
-
-.xUi-popover-arrow.center {
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-}
-