From 0f3082bacf49f811111ac99eb0ba1c548a6fdf65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E7=86=B1?= Date: Tue, 24 Dec 2024 18:40:25 +0800 Subject: [PATCH] refactor: refactor Dropdown component (#4358) --- common/shared/package.json | 2 + common/shared/postcss/postcss.config.mjs | 1 + common/shared/tailwind/tailwind.config.ts | 2 + .../views/watermark/WatermarkTextSetting.tsx | 6 +- .../src/views/uni-controls/UniControls.tsx | 18 ++-- .../DropdownLegacy.stories.tsx | 42 +++++++++ .../DropdownLegacy.tsx} | 6 +- .../index.module.less | 0 .../src/components/dropdown-legacy/index.ts | 17 ++++ .../components/dropdown/Dropdown.stories.tsx | 26 ++++-- .../components/dropdown/DropdownContext.tsx | 35 ++++++++ .../components/dropdown/DropdownOverlay.tsx | 90 +++++++++++++++++++ .../components/dropdown/DropdownProvider.tsx | 49 ++++++++++ .../components/dropdown/DropdownTrigger.tsx | 43 +++++++++ .../design/src/components/dropdown/index.ts | 4 +- .../design/src/components/slider/Slider.tsx | 6 +- packages/design/src/index.ts | 3 +- .../views/image-popup-menu/ImagePopupMenu.tsx | 6 +- .../src/components/color-picker/index.tsx | 6 +- .../components/panel/rule-edit/iconSet.tsx | 50 +++++++++-- .../src/views/CustomSortPanel.tsx | 6 +- .../components/border-panel/BorderPanel.tsx | 10 +-- .../src/views/defined-name/DefinedName.tsx | 39 ++++++-- .../views/defined-name/DefinedNameOverlay.tsx | 67 +++++++++++--- .../src/views/defined-name/index.module.less | 34 +------ .../operate-container/AutoFillPopupMenu.tsx | 10 +-- .../sheet-bar/sheet-bar-menu/SheetBarMenu.tsx | 6 +- .../sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx | 6 +- .../image-popup-menu/ImagePopupMenu.tsx | 6 +- .../src/components/panels/FillPanel.tsx | 16 ++-- .../src/views/thread-comment-tree/index.tsx | 6 +- .../views/components/ribbon/ToolbarItem.tsx | 4 +- .../ribbon/TooltipButtonWrapper.tsx | 10 +-- pnpm-lock.yaml | 44 +++++++++ 34 files changed, 542 insertions(+), 134 deletions(-) create mode 100644 packages/design/src/components/dropdown-legacy/DropdownLegacy.stories.tsx rename packages/design/src/components/{dropdown/Dropdown.tsx => dropdown-legacy/DropdownLegacy.tsx} (96%) rename packages/design/src/components/{dropdown => dropdown-legacy}/index.module.less (100%) create mode 100644 packages/design/src/components/dropdown-legacy/index.ts create mode 100644 packages/design/src/components/dropdown/DropdownContext.tsx create mode 100644 packages/design/src/components/dropdown/DropdownOverlay.tsx create mode 100644 packages/design/src/components/dropdown/DropdownProvider.tsx create mode 100644 packages/design/src/components/dropdown/DropdownTrigger.tsx diff --git a/common/shared/package.json b/common/shared/package.json index 5568b9634a..fe9e733ea7 100644 --- a/common/shared/package.json +++ b/common/shared/package.json @@ -28,11 +28,13 @@ "@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-vue": "^5.2.1", "@vitest/coverage-istanbul": "^2.1.8", + "autoprefixer": "^10.4.20", "eslint-plugin-readable-tailwind": "^1.8.2", "fs-extra": "^11.2.0", "happy-dom": "15.0.0", "javascript-obfuscator": "^4.1.1", "sort-keys": "^5.1.0", + "tailwind-scrollbar": "^3.1.0", "tailwindcss": "^3.4.16", "tailwindcss-animate": "^1.0.7", "vite": "^6.0.3", diff --git a/common/shared/postcss/postcss.config.mjs b/common/shared/postcss/postcss.config.mjs index 6f943477c0..88ac03181c 100644 --- a/common/shared/postcss/postcss.config.mjs +++ b/common/shared/postcss/postcss.config.mjs @@ -2,6 +2,7 @@ const config = { plugins: { tailwindcss: {}, + autoprefixer: {}, }, }; diff --git a/common/shared/tailwind/tailwind.config.ts b/common/shared/tailwind/tailwind.config.ts index 21293bd65a..c2fb5ed4a8 100644 --- a/common/shared/tailwind/tailwind.config.ts +++ b/common/shared/tailwind/tailwind.config.ts @@ -15,6 +15,7 @@ */ import type { Config } from 'tailwindcss'; +import scrollbar from 'tailwind-scrollbar'; import animate from 'tailwindcss-animate'; const config: Omit = { @@ -163,6 +164,7 @@ const config: Omit = { }, plugins: [ animate, + scrollbar, ], }; diff --git a/packages-experimental/debugger/src/views/watermark/WatermarkTextSetting.tsx b/packages-experimental/debugger/src/views/watermark/WatermarkTextSetting.tsx index 2ed93856f8..59809c323d 100644 --- a/packages-experimental/debugger/src/views/watermark/WatermarkTextSetting.tsx +++ b/packages-experimental/debugger/src/views/watermark/WatermarkTextSetting.tsx @@ -16,7 +16,7 @@ import type { ITextWatermarkConfig } from '@univerjs/watermark'; import { LocaleService, useDependency } from '@univerjs/core'; -import { Checkbox, ColorPicker, Dropdown, Input, InputNumber, Select } from '@univerjs/design'; +import { Checkbox, ColorPicker, DropdownLegacy, Input, InputNumber, Select } from '@univerjs/design'; import { BoldSingle, FontColor, ItalicSingle } from '@univerjs/icons'; import clsx from 'clsx'; import React from 'react'; @@ -97,7 +97,7 @@ export const WatermarkTextSetting: React.FC = (props
- onChange({ ...config, color: val })} /> @@ -105,7 +105,7 @@ export const WatermarkTextSetting: React.FC = (props )} > - +
{ onChange({ ...config, bold: !config.bold }); }}> diff --git a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx index a9f0ed9777..e4618918c1 100644 --- a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx +++ b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ +import type { IProjectNode } from '../../services/unit-grid/unit-grid.service'; +import { useDependency } from '@univerjs/core'; +import { DropdownLegacy, Tooltip } from '@univerjs/design'; +import { CheckMarkSingle, FullscreenSingle, IncreaseSingle, ZoomReduceSingle } from '@univerjs/icons'; +import { ISidebarService } from '@univerjs/ui'; import { useReactFlow, } from '@xyflow/react'; -import React, { useCallback, useEffect, useLayoutEffect } from 'react'; -import { CheckMarkSingle, FullscreenSingle, IncreaseSingle, ZoomReduceSingle } from '@univerjs/icons'; -import { Dropdown, Tooltip } from '@univerjs/design'; import clsx from 'clsx'; -import { useDependency } from '@univerjs/core'; -import { ISidebarService } from '@univerjs/ui'; -import { UniDiv } from '../uni-toolbar/UniFloatToolbar'; -import type { IProjectNode } from '../../services/unit-grid/unit-grid.service'; +import React, { useCallback, useEffect, useLayoutEffect } from 'react'; import { IUnitGridService } from '../../services/unit-grid/unit-grid.service'; +import { UniDiv } from '../uni-toolbar/UniFloatToolbar'; import styles from './index.module.less'; export const UniControlButton = (props: { tooltips: string; children?: React.ReactElement; onClick: () => void; style?: React.CSSProperties }) => { @@ -128,7 +128,7 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: - @@ -158,7 +158,7 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: {zoomPercent} % - + diff --git a/packages/design/src/components/dropdown-legacy/DropdownLegacy.stories.tsx b/packages/design/src/components/dropdown-legacy/DropdownLegacy.stories.tsx new file mode 100644 index 0000000000..d50f7a4ad3 --- /dev/null +++ b/packages/design/src/components/dropdown-legacy/DropdownLegacy.stories.tsx @@ -0,0 +1,42 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta } from '@storybook/react'; +import React from 'react'; + +import { Button } from '../button/Button'; +import { DropdownLegacy } from './DropdownLegacy'; + +const meta: Meta = { + title: 'Components / Dropdown Legacy', + component: DropdownLegacy, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +}; + +export default meta; + +export const Playground = { + render() { + return ( + overlay
}> + + + ); + }, +}; diff --git a/packages/design/src/components/dropdown/Dropdown.tsx b/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx similarity index 96% rename from packages/design/src/components/dropdown/Dropdown.tsx rename to packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx index 10d5209bce..1f4a42d9e4 100644 --- a/packages/design/src/components/dropdown/Dropdown.tsx +++ b/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx @@ -15,14 +15,14 @@ */ import type { ActionType, AlignType } from '@rc-component/trigger'; -import RcDropdown from 'rc-dropdown'; import type Placements from 'rc-dropdown/lib/placements'; +import RcDropdown from 'rc-dropdown'; import React, { useContext } from 'react'; import { ConfigContext } from '../config-provider/ConfigProvider'; import styles from './index.module.less'; -export interface IDropdownProps { +export interface IDropdownLegacyProps { /** Semantic DOM class */ className?: string; @@ -79,7 +79,7 @@ export interface IDropdownProps { disabled?: boolean; } -export function Dropdown(props: IDropdownProps) { +export function DropdownLegacy(props: IDropdownLegacyProps) { const { className, placement, diff --git a/packages/design/src/components/dropdown/index.module.less b/packages/design/src/components/dropdown-legacy/index.module.less similarity index 100% rename from packages/design/src/components/dropdown/index.module.less rename to packages/design/src/components/dropdown-legacy/index.module.less diff --git a/packages/design/src/components/dropdown-legacy/index.ts b/packages/design/src/components/dropdown-legacy/index.ts new file mode 100644 index 0000000000..d0c7847f43 --- /dev/null +++ b/packages/design/src/components/dropdown-legacy/index.ts @@ -0,0 +1,17 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { DropdownLegacy, type IDropdownLegacyProps } from './DropdownLegacy'; diff --git a/packages/design/src/components/dropdown/Dropdown.stories.tsx b/packages/design/src/components/dropdown/Dropdown.stories.tsx index c394435edc..ae5631b5fa 100644 --- a/packages/design/src/components/dropdown/Dropdown.stories.tsx +++ b/packages/design/src/components/dropdown/Dropdown.stories.tsx @@ -17,12 +17,13 @@ import type { Meta } from '@storybook/react'; import React from 'react'; -import { Button } from '../button/Button'; -import { Dropdown } from './Dropdown'; +import { DropdownOverlay } from './DropdownOverlay'; +import { DropdownProvider } from './DropdownProvider'; +import { DropdownTrigger } from './DropdownTrigger'; -const meta: Meta = { +const meta: Meta = { title: 'Components / Dropdown', - component: Dropdown, + component: DropdownProvider, parameters: { layout: 'centered', }, @@ -34,9 +35,20 @@ export default meta; export const Playground = { render() { return ( - overlay
}> - - +
+ + + + Click me + + + +
Hello Univer
+ + +
); }, }; diff --git a/packages/design/src/components/dropdown/DropdownContext.tsx b/packages/design/src/components/dropdown/DropdownContext.tsx new file mode 100644 index 0000000000..56ed578c4f --- /dev/null +++ b/packages/design/src/components/dropdown/DropdownContext.tsx @@ -0,0 +1,35 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { RefObject } from 'react'; +import { createContext, useContext } from 'react'; + +interface IDropdownContextType { + isOpen: boolean; + setIsOpen: (value: boolean) => void; + overlayRef: RefObject; + triggerRef: RefObject; +} + +export const DropdownContext = createContext(null); + +export const useDropdown = () => { + const context = useContext(DropdownContext); + if (!context) { + throw new Error('useDropdown must be used within a DropdownProvider'); + } + return context; +}; diff --git a/packages/design/src/components/dropdown/DropdownOverlay.tsx b/packages/design/src/components/dropdown/DropdownOverlay.tsx new file mode 100644 index 0000000000..6ffeaa40a0 --- /dev/null +++ b/packages/design/src/components/dropdown/DropdownOverlay.tsx @@ -0,0 +1,90 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import canUseDom from 'rc-util/lib/Dom/canUseDom'; +import React, { useEffect, useState } from 'react'; +import { createPortal } from 'react-dom'; +import clsx from '../../helper/clsx'; +import { useDropdown } from './DropdownContext'; + +interface IDropdownOverlayProps { + children: React.ReactNode; + className?: string; + offset?: { + x?: number; + y?: number; + }; +} + +export function DropdownOverlay({ children, className, offset }: IDropdownOverlayProps) { + if (!canUseDom) { + return null; + } + + const { isOpen, setIsOpen, overlayRef, triggerRef } = useDropdown(); + const [position, setPosition] = useState({ top: 0, left: 0 }); + + useEffect(() => { + if (isOpen && triggerRef.current && overlayRef.current) { + const triggerRect = triggerRef.current.getBoundingClientRect(); + const overlayRect = overlayRef.current.getBoundingClientRect(); + const viewportWidth = document.documentElement.clientWidth; + const viewportHeight = document.documentElement.clientHeight; + + let top = triggerRect.bottom + window.scrollY; + let left = triggerRect.left + window.scrollX; + + if (top + overlayRect.height > viewportHeight + window.scrollY) { + top = triggerRect.top - overlayRect.height + window.scrollY; + } + + if (left + overlayRect.width > viewportWidth + window.scrollX) { + left = triggerRect.right - overlayRect.width + window.scrollX; + } + + top = Math.max(top, window.scrollY); + left = Math.max(left, window.scrollX); + + setPosition({ + top: top + (offset?.y ?? 0), + left: left + (offset?.x ?? 0), + }); + } + }, [isOpen, offset?.x, offset?.y, overlayRef, triggerRef]); + + if (!isOpen) return null; + + return createPortal( +
setIsOpen(false)} + > + {children} +
, + document.body + ); +} diff --git a/packages/design/src/components/dropdown/DropdownProvider.tsx b/packages/design/src/components/dropdown/DropdownProvider.tsx new file mode 100644 index 0000000000..1e7a8c33b4 --- /dev/null +++ b/packages/design/src/components/dropdown/DropdownProvider.tsx @@ -0,0 +1,49 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { ReactNode } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { DropdownContext } from './DropdownContext'; + +interface IDropdownProviderProps { + children: ReactNode; +} + +export function DropdownProvider({ children }: IDropdownProviderProps) { + const [isOpen, setIsOpen] = useState(false); + const triggerRef = useRef(null); + const overlayRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + const target = event.target as Node; + if (!triggerRef.current?.contains(target) && !overlayRef.current?.contains(target)) { + setIsOpen(false); + } + }; + + window.addEventListener('mousedown', handleClickOutside, true); + return () => window.removeEventListener('mousedown', handleClickOutside, true); + }, []); + + const contextValue = useMemo(() => ({ isOpen, setIsOpen, triggerRef, overlayRef }), [isOpen]); + + return ( + + {children} + + ); +} diff --git a/packages/design/src/components/dropdown/DropdownTrigger.tsx b/packages/design/src/components/dropdown/DropdownTrigger.tsx new file mode 100644 index 0000000000..41e0bd2c6a --- /dev/null +++ b/packages/design/src/components/dropdown/DropdownTrigger.tsx @@ -0,0 +1,43 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { ReactElement } from 'react'; +import { cloneElement, isValidElement } from 'react'; +import { useDropdown } from './DropdownContext'; + +interface IDropdownTriggerProps { + children: ReactElement; +} + +export function DropdownTrigger({ children }: IDropdownTriggerProps) { + const { setIsOpen, isOpen, triggerRef } = useDropdown(); + + if (!isValidElement(children)) { + throw new Error('DropdownTrigger children must be a valid React element'); + } + + // eslint-disable-next-line react/no-clone-element + return cloneElement(children, { + ref: triggerRef, + onClick: (e: React.MouseEvent) => { + e.stopPropagation(); + setIsOpen(!isOpen); + // eslint-disable-next-line ts/no-explicit-any + (children.props as React.HTMLProps)?.onClick?.(e as any); + }, + // eslint-disable-next-line ts/no-explicit-any + } as any); +} diff --git a/packages/design/src/components/dropdown/index.ts b/packages/design/src/components/dropdown/index.ts index 0fcc2e0270..d27cf0c367 100644 --- a/packages/design/src/components/dropdown/index.ts +++ b/packages/design/src/components/dropdown/index.ts @@ -14,4 +14,6 @@ * limitations under the License. */ -export { Dropdown, type IDropdownProps } from './Dropdown'; +export { DropdownOverlay } from './DropdownOverlay'; +export { DropdownProvider } from './DropdownProvider'; +export { DropdownTrigger } from './DropdownTrigger'; diff --git a/packages/design/src/components/slider/Slider.tsx b/packages/design/src/components/slider/Slider.tsx index b85d27df49..ace726ab94 100644 --- a/packages/design/src/components/slider/Slider.tsx +++ b/packages/design/src/components/slider/Slider.tsx @@ -20,7 +20,7 @@ import React, { useContext, useMemo, useRef } from 'react'; import { Button } from '../button/Button'; import { ConfigContext } from '../config-provider/ConfigProvider'; -import { Dropdown } from '../dropdown/Dropdown'; +import { DropdownLegacy } from '../dropdown-legacy/DropdownLegacy'; import { Tooltip } from '../tooltip/Tooltip'; import styles from './index.module.less'; @@ -176,7 +176,7 @@ export function Slider(props: ISliderProps) { - @@ -207,7 +207,7 @@ export function Slider(props: ISliderProps) { {value} % - + ); } diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index 835d9c4531..05dcf36ca5 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -26,7 +26,8 @@ export { ConfigContext, ConfigProvider, type IConfigProviderProps } from './comp export { Confirm, type IConfirmProps } from './components/confirm'; export { DatePanel, DatePicker, type IDatePanelProps, type IDatePickerProps } from './components/date-picker'; export { Dialog, type IDialogProps } from './components/dialog'; -export { Dropdown, type IDropdownProps } from './components/dropdown'; +export { DropdownLegacy, type IDropdownLegacyProps } from './components/dropdown-legacy'; +export { DropdownOverlay, DropdownProvider, DropdownTrigger } from './components/dropdown'; export { FormDualColumnLayout, FormLayout, type IFormDualColumnLayoutProps, type IFormLayoutProps } from './components/form-layout'; export { type IInputProps, type IInputWithSlotProps, Input, InputWithSlot } from './components/input'; export { type IInputNumberProps, InputNumber } from './components/input-number'; diff --git a/packages/drawing-ui/src/views/image-popup-menu/ImagePopupMenu.tsx b/packages/drawing-ui/src/views/image-popup-menu/ImagePopupMenu.tsx index 56450fdad5..5bfe25913c 100644 --- a/packages/drawing-ui/src/views/image-popup-menu/ImagePopupMenu.tsx +++ b/packages/drawing-ui/src/views/image-popup-menu/ImagePopupMenu.tsx @@ -16,7 +16,7 @@ import type { IDrawingSearch } from '@univerjs/core'; import { ICommandService, LocaleService, useDependency } from '@univerjs/core'; -import { Dropdown } from '@univerjs/design'; +import { DropdownLegacy } from '@univerjs/design'; import { Autofill, MoreDownSingle } from '@univerjs/icons'; import clsx from 'clsx'; import React, { useState } from 'react'; @@ -79,7 +79,7 @@ export const ImagePopupMenu: React.FC = (props: IImagePopu onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > - = (props: IImagePopu /> {showMore && } - + ); }; diff --git a/packages/sheets-conditional-formatting-ui/src/components/color-picker/index.tsx b/packages/sheets-conditional-formatting-ui/src/components/color-picker/index.tsx index ef98a1d849..60c4d15ce7 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/color-picker/index.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/color-picker/index.tsx @@ -15,7 +15,7 @@ */ import { ColorKit, useDependency } from '@univerjs/core'; -import { Dropdown, ColorPicker as OriginColorPicker } from '@univerjs/design'; +import { DropdownLegacy, ColorPicker as OriginColorPicker } from '@univerjs/design'; import { MoreDownSingle } from '@univerjs/icons'; import { ComponentManager } from '@univerjs/ui'; import React, { useMemo } from 'react'; @@ -40,7 +40,7 @@ export const ColorPicker = (props: IColorPickerProps) => { return Icon && (!disable ? ( - { {isNeedDropdownIcon && } - + ) : ); }; diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/iconSet.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/iconSet.tsx index 08f7e8d1dc..975c891ff9 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/iconSet.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/iconSet.tsx @@ -19,10 +19,21 @@ import type { IIconSet, IIconType } from '@univerjs/sheets-conditional-formattin import type { IStyleEditorProps } from './type'; import { get, IUniverInstanceService, LocaleService, set, Tools, UniverInstanceType, useDependency } from '@univerjs/core'; -import { Checkbox, Dropdown, InputNumber, Select } from '@univerjs/design'; +import { Checkbox, DropdownLegacy, InputNumber, Select } from '@univerjs/design'; import { MoreDownSingle, SlashSingle } from '@univerjs/icons'; -import { CFNumberOperator, CFRuleType, CFSubRuleType, CFValueType, compareWithNumber, createDefaultValue, EMPTY_ICON_TYPE, getOppositeOperator, iconGroup, iconMap } from '@univerjs/sheets-conditional-formatting'; +import { + CFNumberOperator, + CFRuleType, + CFSubRuleType, + CFValueType, + compareWithNumber, + createDefaultValue, + EMPTY_ICON_TYPE, + getOppositeOperator, + iconGroup, + iconMap, +} from '@univerjs/sheets-conditional-formatting'; import { FormulaEditor } from '@univerjs/sheets-formula-ui'; import { ILayoutService, useScrollYOverContainer, useSidebarClick } from '@univerjs/ui'; @@ -270,12 +281,12 @@ const IconSetRuleEdit = (props: { ${styles.width45} `} > - }> + }>
{icon ? : }
- + {!isEnd @@ -353,7 +364,13 @@ const IconSetRuleEdit = (props: { ${styles.width45} `} > - handleValueValueChange(v, index)} /> + handleValueValueChange(v, index)} + /> @@ -417,7 +434,15 @@ export const IconSet = (props: IStyleEditorProps) => { }); return (
- {list.map((icon, index) => (icon ? : ))} + {list.map((icon, index) => (icon + ? ( + + ) + : ))}
); }, [configList]); @@ -525,13 +550,22 @@ export const IconSet = (props: IStyleEditorProps) => { ${stylesBase.mTSm} `} > - !iconGroupListEl && el && setIconGroupListEl(el)} iconType={currentIconType} onClick={handleClickIconList} />}> + !iconGroupListEl && el && setIconGroupListEl(el)} + iconType={currentIconType} + onClick={handleClickIconList} + /> + )} + >
{previewIcon}
{/*
{previewIcon}
*/} - +
- {itemLabel}
- +
diff --git a/packages/sheets-ui/src/components/border-panel/BorderPanel.tsx b/packages/sheets-ui/src/components/border-panel/BorderPanel.tsx index 5b73de4f7d..f3dd3d3db3 100644 --- a/packages/sheets-ui/src/components/border-panel/BorderPanel.tsx +++ b/packages/sheets-ui/src/components/border-panel/BorderPanel.tsx @@ -15,7 +15,7 @@ */ import { BorderStyleTypes, useDependency } from '@univerjs/core'; -import { ColorPicker, Dropdown, Menu, MenuItem } from '@univerjs/design'; +import { ColorPicker, DropdownLegacy, Menu, MenuItem } from '@univerjs/design'; import { MoreDownSingle, PaintBucket } from '@univerjs/icons'; import { BorderStyleManagerService, type IBorderInfo } from '@univerjs/sheets'; import { ComponentManager } from '@univerjs/ui'; @@ -119,7 +119,7 @@ export function BorderPanel(props: IBorderPanelProps) {
- - +
- - +
diff --git a/packages/sheets-ui/src/views/defined-name/DefinedName.tsx b/packages/sheets-ui/src/views/defined-name/DefinedName.tsx index 21872abca3..5226e60bc4 100644 --- a/packages/sheets-ui/src/views/defined-name/DefinedName.tsx +++ b/packages/sheets-ui/src/views/defined-name/DefinedName.tsx @@ -16,16 +16,16 @@ import { useDependency } from '@univerjs/core'; -import { Dropdown, Input } from '@univerjs/design'; +import { DropdownOverlay, DropdownProvider, DropdownTrigger, Input } from '@univerjs/design'; import { IDefinedNamesService } from '@univerjs/engine-formula'; import { MoreDownSingle } from '@univerjs/icons'; import clsx from 'clsx'; -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { DefinedNameOverlay } from './DefinedNameOverlay'; import styles from './index.module.less'; export function DefinedName({ disable }: { disable: boolean }) { - const [rangeString, setRangeString] = React.useState(''); + const [rangeString, setRangeString] = useState(''); const definedNamesService = useDependency(IDefinedNamesService); useEffect(() => { @@ -41,13 +41,34 @@ export function DefinedName({ disable }: { disable: boolean }) { return (
- + - }> -
- -
- + + + + + + + + + + +
); } diff --git a/packages/sheets-ui/src/views/defined-name/DefinedNameOverlay.tsx b/packages/sheets-ui/src/views/defined-name/DefinedNameOverlay.tsx index 29e4c8301a..ea6578afa3 100644 --- a/packages/sheets-ui/src/views/defined-name/DefinedNameOverlay.tsx +++ b/packages/sheets-ui/src/views/defined-name/DefinedNameOverlay.tsx @@ -24,7 +24,6 @@ import { ISidebarService } from '@univerjs/ui'; import React, { useEffect, useState } from 'react'; import { SidebarDefinedNameOperation } from '../../commands/operations/sidebar-defined-name.operation'; import { DEFINED_NAME_CONTAINER } from './component-name'; -import styles from './index.module.less'; export interface IDefinedNameOverlayProps { @@ -97,20 +96,66 @@ export function DefinedNameOverlay(props: IDefinedNameOverlayProps) { }; return ( -
-
+
+
    {definedNames.map((definedName, index) => { return ( -
    { focusDefinedName(definedName); }}> -
    {definedName.name}
    -
    {definedName.formulaOrRefString}
    -
    +
  • { focusDefinedName(definedName); }} + > +
    +
    + {definedName.name} +
    +
    + {definedName.formulaOrRefString} +
    +
    +
    • ); })} -
-
-
{localeService.t('definedName.managerTitle')}
-
{localeService.t('definedName.managerDescription')}
+ + +
+
+ {localeService.t('definedName.managerTitle')} +
+
+ {localeService.t('definedName.managerDescription')} +
); diff --git a/packages/sheets-ui/src/views/defined-name/index.module.less b/packages/sheets-ui/src/views/defined-name/index.module.less index 12e19269dd..69484bb030 100644 --- a/packages/sheets-ui/src/views/defined-name/index.module.less +++ b/packages/sheets-ui/src/views/defined-name/index.module.less @@ -13,42 +13,10 @@ box-sizing: border-box; - &-drop-down { - display: flex; - align-items: center; - justify-content: center; - - padding: 0 var(--padding-xs); - - cursor: pointer; - - position: absolute; - - right: 0; - - height: 100%; - - &:hover { - background-color: rgb(var(--grey-50)); - color: rgb(var(--primary-color)); - } - - &-disable { - color: rgb(var(--grey-200)); - cursor: not-allowed; - - &:hover { - color: rgb(var(--grey-200)); - } - } - } - &-overlay { position: relative; - border: 1px solid rgb(var(--border-color)); width: 300px; background-color: rgb(var(--color-white)); - transform: translateX(-75px); &-container { position: relative; @@ -103,7 +71,7 @@ } &-manager { - position: absolute; + // position: absolute; display: flex; flex-direction: column; overflow-y: auto; diff --git a/packages/sheets-ui/src/views/operate-container/AutoFillPopupMenu.tsx b/packages/sheets-ui/src/views/operate-container/AutoFillPopupMenu.tsx index c01ebac15e..9fd35cd61a 100644 --- a/packages/sheets-ui/src/views/operate-container/AutoFillPopupMenu.tsx +++ b/packages/sheets-ui/src/views/operate-container/AutoFillPopupMenu.tsx @@ -16,7 +16,7 @@ import type { ICommandInfo, IExecutionOptions } from '@univerjs/core'; import { ICommandService, IUniverInstanceService, LocaleService, toDisposable, useDependency } from '@univerjs/core'; -import { Dropdown } from '@univerjs/design'; +import { DropdownLegacy } from '@univerjs/design'; import { IRenderManagerService } from '@univerjs/engine-render'; import { Autofill, CheckMarkSingle, MoreDownSingle } from '@univerjs/icons'; import clsx from 'clsx'; @@ -24,12 +24,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { RefillCommand } from '../../commands/commands/refill.command'; import { SetScrollOperation } from '../../commands/operations/scroll.operation'; +import { useActiveWorkbook } from '../../components/hook'; import { getSheetObject } from '../../controllers/utils/component-tools'; import { IAutoFillService } from '../../services/auto-fill/auto-fill.service'; import { APPLY_TYPE } from '../../services/auto-fill/type'; -import { SheetSkeletonManagerService } from '../../services/sheet-skeleton-manager.service'; -import { useActiveWorkbook } from '../../components/hook'; import { ISheetSelectionRenderService } from '../../services/selection/base-selection-render.service'; +import { SheetSkeletonManagerService } from '../../services/sheet-skeleton-manager.service'; import styles from './index.module.less'; export interface IAnchorPoint { @@ -186,7 +186,7 @@ export const AutoFillPopupMenu: React.FC<{}> = () => { onMouseLeave={handleMouseLeave} style={{ left: `${relativeX + 2}px`, top: `${relativeY + 2}px`, position: 'absolute' }} > - = () => { /> {showMore && }
- +
); }; diff --git a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-menu/SheetBarMenu.tsx b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-menu/SheetBarMenu.tsx index 7af0f61c03..105da959ce 100644 --- a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-menu/SheetBarMenu.tsx +++ b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-menu/SheetBarMenu.tsx @@ -16,7 +16,7 @@ import type { ICommandInfo, Workbook } from '@univerjs/core'; import { BooleanNumber, DisposableCollection, ICommandService, IUniverInstanceService, UniverInstanceType, useDependency } from '@univerjs/core'; -import { Dropdown } from '@univerjs/design'; +import { DropdownLegacy } from '@univerjs/design'; import { CheckMarkSingle, ConvertSingle, EyelashSingle } from '@univerjs/icons'; import { InsertSheetMutation, @@ -135,7 +135,7 @@ export function SheetBarMenu(props: ISheetBarMenuProps) { }, [setupStatusUpdate, sheetBarService, statusInit, workbook]); return ( -
- + ); } diff --git a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx index 791076ce56..edb75acf9f 100644 --- a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx +++ b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx @@ -19,7 +19,7 @@ import type { IUniverUIConfig } from '@univerjs/ui'; import type { IBaseSheetBarProps } from './SheetBarItem'; import type { IScrollState } from './utils/slide-tab-bar'; import { ICommandService, IConfigService, IPermissionService, LocaleService, nameCharacterCheck, Quantity, useDependency } from '@univerjs/core'; -import { Dropdown } from '@univerjs/design'; +import { DropdownLegacy } from '@univerjs/design'; import { LockSingle } from '@univerjs/icons'; import { @@ -412,7 +412,7 @@ export function SheetBarTabs() { }; return ( - - + ); } diff --git a/packages/slides-ui/src/components/image-popup-menu/ImagePopupMenu.tsx b/packages/slides-ui/src/components/image-popup-menu/ImagePopupMenu.tsx index 9036d4e5ab..25fd3d9ea7 100644 --- a/packages/slides-ui/src/components/image-popup-menu/ImagePopupMenu.tsx +++ b/packages/slides-ui/src/components/image-popup-menu/ImagePopupMenu.tsx @@ -16,7 +16,7 @@ import type { IDrawingSearch } from '@univerjs/core'; import { ICommandService, LocaleService, useDependency } from '@univerjs/core'; -import { Dropdown } from '@univerjs/design'; +import { DropdownLegacy } from '@univerjs/design'; import { Autofill, MoreDownSingle } from '@univerjs/icons'; import clsx from 'clsx'; import React, { useState } from 'react'; @@ -79,7 +79,7 @@ export const SlideImagePopupMenu: React.FC = (props: IImag onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > - = (props: IImag /> {showMore && } - + ); }; diff --git a/packages/slides-ui/src/components/panels/FillPanel.tsx b/packages/slides-ui/src/components/panels/FillPanel.tsx index 901ead8023..662fe47609 100644 --- a/packages/slides-ui/src/components/panels/FillPanel.tsx +++ b/packages/slides-ui/src/components/panels/FillPanel.tsx @@ -14,15 +14,15 @@ * limitations under the License. */ -import React from 'react'; - import type { Nullable } from '@univerjs/core'; -import { ICommandService, LocaleService, useDependency } from '@univerjs/core'; -import clsx from 'clsx'; -import { ColorPicker, Dropdown } from '@univerjs/design'; -import { MoreDownSingle, PaintBucket } from '@univerjs/icons'; import type { Rect } from '@univerjs/engine-render'; +import { ICommandService, LocaleService, useDependency } from '@univerjs/core'; +import { ColorPicker, DropdownLegacy } from '@univerjs/design'; +import { MoreDownSingle, PaintBucket } from '@univerjs/icons'; +import clsx from 'clsx'; + +import React from 'react'; import { UpdateSlideElementOperation } from '../../commands/operations/update-element.operation'; import { CanvasView } from '../../controllers/canvas-view'; import styles from './index.module.less'; @@ -84,7 +84,7 @@ export default function ArrangePanel(props: IProps) {
- - +
diff --git a/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx b/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx index 86ba1091b9..d1778e0ee8 100644 --- a/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx +++ b/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx @@ -18,7 +18,7 @@ import type { IAddCommentCommandParams, IThreadComment, IUpdateCommentCommandPar import type { IThreadCommentEditorInstance } from '../thread-comment-editor'; import { generateRandomId, useDependency } from '@univerjs/core'; import { ICommandService, type IUser, LocaleService, type UniverInstanceType, UserManagerService } from '@univerjs/core'; -import { Dropdown, Menu, MenuItem, Tooltip } from '@univerjs/design'; +import { DropdownLegacy, Menu, MenuItem, Tooltip } from '@univerjs/design'; import { DeleteSingle, MoreHorizontalSingle, ReplyToCommentSingle, ResolvedSingle, SolveSingle } from '@univerjs/icons'; import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, getDT, ResolveCommentCommand, ThreadCommentModel, UpdateCommentCommand } from '@univerjs/thread-comment'; import { useObservable } from '@univerjs/ui'; @@ -117,7 +117,7 @@ const ThreadCommentItem = (props: IThreadCommentItemProps) => { )} {isCommentBySelf && !isMock && !resolved ? ( - onEditingChange?.(true)}>{localeService.t('threadCommentUI.item.edit')} @@ -128,7 +128,7 @@ const ThreadCommentItem = (props: IThreadCommentItemProps) => {
- + ) : null} diff --git a/packages/ui/src/views/components/ribbon/ToolbarItem.tsx b/packages/ui/src/views/components/ribbon/ToolbarItem.tsx index 86c8a27484..cdf5089b6e 100644 --- a/packages/ui/src/views/components/ribbon/ToolbarItem.tsx +++ b/packages/ui/src/views/components/ribbon/ToolbarItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import type { IDropdownProps } from '@univerjs/design'; +import type { IDropdownLegacyProps } from '@univerjs/design'; import type { Ref } from 'react'; import type { IDisplayMenuItem, IMenuItem, IMenuSelectorItem, IValueOption } from '../../../services/menu/menu'; import { ICommandService, LocaleService, useDependency } from '@univerjs/core'; @@ -33,7 +33,7 @@ import { useToolbarItemStatus } from './hook'; import styles from './index.module.less'; import { DropdownWrapper, TooltipWrapper } from './TooltipButtonWrapper'; -export const ToolbarItem = forwardRef((props: IDisplayMenuItem & { align?: IDropdownProps['align'] }, ref: Ref) => { +export const ToolbarItem = forwardRef((props: IDisplayMenuItem & { align?: IDropdownLegacyProps['align'] }, ref: Ref) => { const { align } = props; const localeService = useDependency(LocaleService); diff --git a/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx b/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx index a163a3d11d..4e1b9383e8 100644 --- a/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx +++ b/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import type { IDropdownProps, ITooltipProps, NullableTooltipRef } from '@univerjs/design'; -import { Dropdown, Tooltip } from '@univerjs/design'; +import type { IDropdownLegacyProps, ITooltipProps, NullableTooltipRef } from '@univerjs/design'; +import { DropdownLegacy, Tooltip } from '@univerjs/design'; import React, { createContext, forwardRef, useContext, useMemo, useState } from 'react'; const TooltipWrapperContext = createContext({ @@ -64,7 +64,7 @@ export const TooltipWrapper = forwardRef((pro ); }); -export function DropdownWrapper(props: IDropdownProps) { +export function DropdownWrapper(props: IDropdownLegacyProps) { const { children, ...dropdownProps } = props; const { setDropdownVisible } = useContext(TooltipWrapperContext); @@ -74,13 +74,13 @@ export function DropdownWrapper(props: IDropdownProps) { } return ( -
e.stopPropagation()}> {children}
- + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1e89ccba1..c1aa7c13b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -119,6 +119,9 @@ importers: '@vitest/coverage-istanbul': specifier: ^2.1.8 version: 2.1.8(vitest@2.1.8(@types/node@22.10.1)(happy-dom@15.0.0)(jsdom@24.1.1)(less@4.2.1)(sass@1.77.5)(terser@5.31.6)) + autoprefixer: + specifier: ^10.4.20 + version: 10.4.20(postcss@8.4.49) eslint-plugin-readable-tailwind: specifier: ^1.8.2 version: 1.8.2(eslint@9.16.0(jiti@1.21.6))(tailwindcss@3.4.16) @@ -134,6 +137,9 @@ importers: sort-keys: specifier: ^5.1.0 version: 5.1.0 + tailwind-scrollbar: + specifier: ^3.1.0 + version: 3.1.0(tailwindcss@3.4.16) tailwindcss: specifier: ^3.4.16 version: 3.4.16 @@ -5745,6 +5751,13 @@ packages: atomically@2.0.3: resolution: {integrity: sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==} + autoprefixer@10.4.20: + resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -7272,6 +7285,9 @@ packages: resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} engines: {node: '>= 6'} + fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + franc-min@6.2.0: resolution: {integrity: sha512-1uDIEUSlUZgvJa2AKYR/dmJC66v/PvGQ9mWfI9nOr/kPpMFyvswK0gPXOwpYJYiYD008PpHLkGfG58SPjQJFxw==} @@ -8564,6 +8580,10 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} engines: {node: '>=8'} @@ -9904,6 +9924,12 @@ packages: tailwind-merge@2.5.5: resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==} + tailwind-scrollbar@3.1.0: + resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==} + engines: {node: '>=12.13.0'} + peerDependencies: + tailwindcss: 3.x + tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -13073,6 +13099,16 @@ snapshots: stubborn-fs: 1.2.5 when-exit: 2.1.3 + autoprefixer@10.4.20(postcss@8.4.49): + dependencies: + browserslist: 4.24.2 + caniuse-lite: 1.0.30001675 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.1.1 + postcss: 8.4.49 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -14847,6 +14883,8 @@ snapshots: combined-stream: 1.0.8 mime-types: 2.1.35 + fraction.js@4.3.7: {} + franc-min@6.2.0: dependencies: trigram-utils: 2.0.1 @@ -16314,6 +16352,8 @@ snapshots: normalize-path@3.0.0: {} + normalize-range@0.1.2: {} + npm-run-path@4.0.1: dependencies: path-key: 3.1.1 @@ -17844,6 +17884,10 @@ snapshots: tailwind-merge@2.5.5: {} + tailwind-scrollbar@3.1.0(tailwindcss@3.4.16): + dependencies: + tailwindcss: 3.4.16 + tailwindcss-animate@1.0.7(tailwindcss@3.4.16): dependencies: tailwindcss: 3.4.16