@laser-ui/components 0.0.5 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1](https://github.com/laser-ui/laser-ui/compare/v0.1.0...v0.1.1) (2023-09-13)
+
+### Bug Fixes
+
+- **components:** fix `container` is null ([151da41](https://github.com/laser-ui/laser-ui/commit/151da41063f8e629ef18ece4d70c9a35cb38b2f8))
+
+# [0.1.0](https://github.com/laser-ui/laser-ui/compare/v0.0.5...v0.1.0) (2023-09-12)
+
+**Note:** Version bump only for package @laser-ui/components
+
 ## [0.0.5](https://github.com/laser-ui/laser-ui/compare/v0.0.4...v0.0.5) (2023-09-11)
 
 **Note:** Version bump only for package @laser-ui/components

package/README.md

@@ -1,15 +1,15 @@
 <p align="center">
-  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
+  <a href="//laser-ui.surge.sh/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
 </p>
 
-<h1 align="center">React DevUI</h1>
+<h1 align="center">Laser UI</h1>
 
 <div align="center">
 
 <!-- prettier-ignore-start -->
-[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
-[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
-[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
+[![npm latest package](http://img.shields.io/npm/v/@laser-ui/components/latest.svg?style=flat-square)](https://www.npmjs.com/package/@laser-ui/components)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@laser-ui/components?style=flat-square)](https://bundlephobia.com/package/@laser-ui/components)
+[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/laser-ui/laser-ui/main.yml?branch=main&style=flat-square)](https://github.com/laser-ui/laser-ui/actions/workflows/main.yml)
 <!-- prettier-ignore-end -->
 
 </div>
@@ -23,49 +23,48 @@ English | [简体中文](README.zh-CN.md)
 ## Installation
 
 ```bash
-yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
+npm install @laser-ui/components @laser-ui/hooks @laser-ui/themes @laser-ui/utils
 ```
 
 ## Getting Started
 
 ```tsx
-import type { DRootProps } from '@react-devui/ui';
+import type { LContextIn } from '@laser-ui/components/context';
 
+import { ConfigProvider, Root } from '@laser-ui/components';
 import { useMemo } from 'react';
 
-import { DRoot } from '@react-devui/ui';
-
 export default function App() {
-  const rootContext = useMemo<DRootProps['context']>(
+  const lContext = useMemo<LContextIn>(
     () => ({
-      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
+      layoutPageScrollEl: '#app-main',
+      layoutContentResizeEl: '#app-content',
     }),
-    []
+    [],
   );
 
   return (
-    <DRoot context={rootContext}>
-      <main id="app-main" style={{ overflow: 'auto' }}>
-        <section id="app-content" style={{ height: '200vh' }}>
-          Some content...
-        </section>
-      </main>
-    </DRoot>
+    <ConfigProvider context={lContext}>
+      <Root>
+        <main id="app-main" style={{ overflow: 'auto' }}>
+          <section id="app-content" style={{ height: '200vh' }}>
+            Some content...
+          </section>
+        </main>
+      </Root>
+    </ConfigProvider>
   );
 }
 ```
 
 ## Links
 
-- [react-devui.com](//react-devui.com)
-- [admin.react-devui.com](//admin.react-devui.com)
+- [laser-ui.surge.sh](//laser-ui.surge.sh)
 
 ## Contributing
 
 Please read our [contributing guide](/CONTRIBUTING.md) first.
 
-Need unit test support (Jest) 🤝.
-
 ## License
 
-[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)
+[![gitHub license](https://img.shields.io/github/license/laser-ui/laser-ui?style=flat-square)](/LICENSE)

package/affix/Affix.js

@@ -1,55 +1,65 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEvent, useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
 import { getOffsetToRoot, toPx } from '@laser-ui/utils';
 import { isFunction, isString, isUndefined } from 'lodash';
 import { cloneElement, forwardRef, useId, useImperativeHandle, useState } from 'react';
-import { useComponentProps, useLayout, useListenGlobalScrolling, useNamespace } from '../hooks';
+import { useComponentProps, useJSS, useLayout, useListenGlobalScrolling, useNamespace } from '../hooks';
 export const Affix = forwardRef((props, ref) => {
     const { children, top = 0, target, zIndex } = useComponentProps('Affix', props);
     const namespace = useNamespace();
+    const sheet = useJSS();
     const { pageScrollRef, contentResizeRef } = useLayout();
     const uniqueId = useId();
     const affixRef = useRefExtra(() => document.querySelector(`[data-l-affix="${uniqueId}"]`));
-    const referenceRef = useRefExtra(() => document.querySelector(`[data-l-affix-reference="${uniqueId}"]`));
+    const placeholderRef = useRefExtra(() => document.querySelector(`[data-l-affix-placeholder="${uniqueId}"]`));
     const targetRef = useRefExtra(isUndefined(target) ? () => pageScrollRef.current : target);
     const [sticky, setSticky] = useState(false);
-    const [positionStyle, setPositionStyle] = useState();
     const updatePosition = useEventCallback(() => {
-        const offsetEl = sticky ? referenceRef.current : affixRef.current;
-        if (targetRef.current && offsetEl) {
+        if (affixRef.current && placeholderRef.current && targetRef.current) {
+            const offsetEl = sticky ? placeholderRef.current : affixRef.current;
             const offsetRect = offsetEl.getBoundingClientRect();
             const targetTop = getOffsetToRoot(targetRef.current);
             const distance = isString(top) ? toPx(top, true) : top;
-            setSticky(Math.ceil(targetRef.current.scrollTop) + distance >= getOffsetToRoot(offsetEl) - targetTop);
-            setPositionStyle({
-                width: offsetRect.width,
-                height: offsetRect.height,
-                top: (isUndefined(target) ? targetTop : targetRef.current.getBoundingClientRect().top) + distance,
-                left: offsetRect.left,
-            });
+            const newSticky = Math.ceil(targetRef.current.scrollTop) + distance >= getOffsetToRoot(offsetEl) - targetTop;
+            setSticky(newSticky);
+            if (sheet.classes.position) {
+                affixRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            if (newSticky) {
+                sheet.replaceRule('position', {
+                    width: offsetRect.width,
+                    height: offsetRect.height,
+                    position: 'fixed',
+                    top: (isUndefined(target) ? targetTop : targetRef.current.getBoundingClientRect().top) + distance,
+                    left: offsetRect.left,
+                    zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : `var(--${namespace}-zindex-sticky)`,
+                });
+                affixRef.current.classList.toggle(sheet.classes.position, true);
+                placeholderRef.current.style.display = '';
+            }
+            else {
+                sheet.deleteRule('position');
+                placeholderRef.current.style.display = 'none';
+            }
         }
     });
-    useIsomorphicLayoutEffect(() => {
+    useMount(() => {
         updatePosition();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition);
     useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling);
     useEvent(targetRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling || isUndefined(target));
-    useResize(sticky ? referenceRef : affixRef, updatePosition);
+    useResize(sticky ? placeholderRef : affixRef, updatePosition);
     useResize(contentResizeRef, updatePosition);
     useImperativeHandle(ref, () => ({
         sticky,
         updatePosition,
     }), [sticky, updatePosition]);
-    const render = (el) => (_jsxs(_Fragment, { children: [sticky &&
-                cloneElement(el, {
-                    style: Object.assign(Object.assign({}, el.props.style), { visibility: 'hidden' }),
-                    'aria-hidden': true,
-                    'data-l-affix-reference': uniqueId,
-                }), cloneElement(el, {
-                style: sticky
-                    ? Object.assign(Object.assign(Object.assign({}, el.props.style), positionStyle), { position: 'fixed', zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : `var(--${namespace}-zindex-sticky)` }) : el.props.style,
+    const render = (el) => (_jsxs(_Fragment, { children: [cloneElement(el, {
+                style: Object.assign(Object.assign({}, el.props.style), { visibility: 'hidden' }),
+                'aria-hidden': true,
+                'data-l-affix-placeholder': uniqueId,
+            }), cloneElement(el, {
                 'data-l-affix': uniqueId,
             })] }));
     return isFunction(children) ? children(render) : render(children);

package/anchor/Anchor.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEvent, useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
 import { getOffsetToRoot, scrollTo, toPx } from '@laser-ui/utils';
 import { isArray, isString, isUndefined } from 'lodash';
-import { Fragment, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Fragment, forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES, DOT_INDICATOR, LINE_INDICATOR } from './vars';
 import { useComponentProps, useLayout, useListenGlobalScrolling, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
@@ -11,14 +11,13 @@ function AnchorFC(props, ref) {
     const _a = useComponentProps('Anchor', props), { styleOverrides, styleProvider, list, page, distance: distanceProp = 0, scrollBehavior = 'instant', indicator = DOT_INDICATOR, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "page", "distance", "scrollBehavior", "indicator", "onClick"]);
     const styled = useStyled(CLASSES, { anchor: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.anchor }, styleOverrides);
     const { pageScrollRef, contentResizeRef } = useLayout();
+    const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
     const anchorRef = useRef(null);
     const indicatorRef = useRef(null);
-    const activeLinkRef = useRef(null);
-    const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
     const dataRef = useRef({});
     const [active, setActive] = useState(null);
     const updateAnchor = useEventCallback(() => {
-        if (pageRef.current) {
+        if (pageRef.current && anchorRef.current && indicatorRef.current) {
             const pageTop = getOffsetToRoot(pageRef.current);
             let nearestEl;
             const reduceLinks = (arr) => {
@@ -44,19 +43,8 @@ function AnchorFC(props, ref) {
             reduceLinks(list);
             const href = nearestEl ? nearestEl[0] : null;
             setActive(href);
-        }
-    });
-    useIsomorphicLayoutEffect(() => {
-        updateAnchor();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const listenGlobalScrolling = useListenGlobalScrolling(updateAnchor);
-    useEvent(pageRef, 'scroll', updateAnchor, { passive: true }, listenGlobalScrolling);
-    useResize(contentResizeRef, updateAnchor);
-    useEffect(() => {
-        if (anchorRef.current && indicatorRef.current) {
-            if (activeLinkRef.current) {
-                const rect = activeLinkRef.current.getBoundingClientRect();
+            if (href) {
+                const rect = anchorRef.current.querySelector(`[data-l-href="${href}"]`).getBoundingClientRect();
                 const top = rect.top - anchorRef.current.getBoundingClientRect().top + rect.height / 2;
                 indicatorRef.current.style.cssText = `opacity:1;top:${top}px;`;
             }
@@ -65,6 +53,12 @@ function AnchorFC(props, ref) {
             }
         }
     });
+    useMount(() => {
+        updateAnchor();
+    });
+    const listenGlobalScrolling = useListenGlobalScrolling(updateAnchor);
+    useEvent(pageRef, 'scroll', updateAnchor, { passive: true }, listenGlobalScrolling);
+    useResize(contentResizeRef, updateAnchor);
     useImperativeHandle(ref, () => ({
         active,
         updateAnchor,
@@ -91,10 +85,9 @@ function AnchorFC(props, ref) {
     const linkNodes = (() => {
         const getNodes = (arr, level = 0) => arr.map((link) => {
             const { title: linkTitle, href: linkHref, target: linkTarget, children } = link;
-            const isActive = linkHref === active;
             return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('anchor__link', {
-                        'anchor__link.is-active': isActive,
-                    }), { ref: isActive ? activeLinkRef : undefined, children: _jsx("a", { style: { paddingLeft: 16 + level * 16 }, href: `#${linkHref}`, target: linkTarget, onClick: (e) => {
+                        'anchor__link.is-active': linkHref === active,
+                    }), { "data-l-href": linkHref, children: _jsx("a", { style: { paddingLeft: 16 + level * 16 }, href: `#${linkHref}`, target: linkTarget, onClick: (e) => {
                                 e.preventDefault();
                                 handleLinkClick(linkHref);
                                 onClick === null || onClick === void 0 ? void 0 : onClick(linkHref, link);

package/cascader/Cascader.js

@@ -12,7 +12,7 @@ import { CascaderPanel } from './internal/CascaderPanel';
 import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
 import { CLASSES } from './vars';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useControlled, useDesign, useFocusVisible, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
@@ -29,6 +29,7 @@ function CascaderFC(props, ref) {
     const _a = useComponentProps('Cascader', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { cascader: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.cascader, 'cascader-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['cascader-popup'] }, styleOverrides);
+    const sheet = useJSS();
     const { t } = useTranslation();
     const uniqueId = useId();
     const listId = `${namespace}-cascader-list-${uniqueId}`;
@@ -178,11 +179,7 @@ function CascaderFC(props, ref) {
     })();
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -192,12 +189,16 @@ function CascaderFC(props, ref) {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
                 maxWidth,
             });
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
@@ -453,7 +454,7 @@ function CascaderFC(props, ref) {
                             case 'entering':
                                 transitionStyle = {
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaving':
@@ -461,7 +462,7 @@ function CascaderFC(props, ref) {
                                     transform: 'scaleY(0.7)',
                                     opacity: 0,
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaved':
@@ -471,7 +472,7 @@ function CascaderFC(props, ref) {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {

package/date-picker/DatePicker.js

@@ -6,12 +6,12 @@ import { ReactComponent as CancelFilled } from '@material-design-icons/svg/fille
 import { ReactComponent as CalendarTodayOutlined } from '@material-design-icons/svg/outlined/calendar_today.svg';
 import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
 import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useControlled, useDesign, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -29,6 +29,7 @@ export const DatePicker = forwardRef((props, ref) => {
         'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'],
         'date-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker-popup'],
     }, styleOverrides);
+    const sheet = useJSS();
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
@@ -117,11 +118,7 @@ export const DatePicker = forwardRef((props, ref) => {
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -131,12 +128,16 @@ export const DatePicker = forwardRef((props, ref) => {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
                 maxWidth,
             });
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
@@ -314,7 +315,7 @@ export const DatePicker = forwardRef((props, ref) => {
                             case 'entering':
                                 transitionStyle = {
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaving':
@@ -322,7 +323,7 @@ export const DatePicker = forwardRef((props, ref) => {
                                     transform: 'scaleY(0.7)',
                                     opacity: 0,
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaved':
@@ -332,7 +333,7 @@ export const DatePicker = forwardRef((props, ref) => {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('date-picker-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {

package/dropdown/Dropdown.js

@@ -9,7 +9,7 @@ import { DropdownItem as DropdownItemFC } from './internal/DropdownItem';
 import { DropdownSub } from './internal/DropdownSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useFocusVisible, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -22,6 +22,7 @@ function DropdownFC(props, ref) {
     const namespace = useNamespace();
     const { t } = useTranslation();
     const styled = useStyled(CLASSES, { dropdown: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.dropdown, 'dropdown-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['dropdown-popup'] }, styleOverrides);
+    const sheet = useJSS();
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-${uniqueId}`;
     let triggerId;
@@ -91,26 +92,28 @@ function DropdownFC(props, ref) {
     };
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
-    const [placement, setPlacement] = useState(placementProp);
+    const transformOrigin = useRef();
+    const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
-        if (visible && triggerRef.current && popupRef.current) {
+        if (visible && triggerRef.current && dropdownRef.current && popupRef.current) {
             const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
             const position = getVerticalSidePosition(triggerRef.current, { width, height }, {
                 placement: placementProp,
                 placementFixed,
                 inWindow: WINDOW_SPACE,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            dropdownRef.current.classList.toggle(`${namespace}-dropdown--${placement.current}`, false);
+            placement.current = position.placement;
+            dropdownRef.current.classList.toggle(`${namespace}-dropdown--${placement.current}`, true);
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
             });
-            setPlacement(position.placement);
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const preventBlur = (e) => {
@@ -231,7 +234,7 @@ function DropdownFC(props, ref) {
                             else {
                                 dataRef.current.updatePosition.set(itemId, fn);
                             }
-                        }, namespace: namespace, styled: styled, dropdownRef: dropdownRef, id: id, level: level, icon: itemIcon, list: children && getNodes(children, 0, newSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
+                        }, namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, list: children && getNodes(children, 0, newSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
                             ? zIndex
                             : isNumber(zIndex)
                                 ? zIndex + 1 + subParents.length
@@ -339,7 +342,7 @@ function DropdownFC(props, ref) {
                                     case 'entering':
                                         transitionStyle = {
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaving':
@@ -347,7 +350,7 @@ function DropdownFC(props, ref) {
                                             transform: 'scaleY(0.7)',
                                             opacity: 0,
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaved':
@@ -356,7 +359,7 @@ function DropdownFC(props, ref) {
                                     default:
                                         break;
                                 }
-                                return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('dropdown', `dropdown--${placement}`), {
+                                return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('dropdown'), {
                                     className: restProps.className,
                                     style: restProps.style,
                                 }), { ref: dropdownRef, onMouseDown: (e) => {
@@ -368,7 +371,7 @@ function DropdownFC(props, ref) {
                                         (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                                         preventBlur(e);
                                     }, children: renderPopup(_jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
-                                        style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                                        style: Object.assign({ zIndex }, transitionStyle),
                                     }), { ref: popupRef, children: [_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No Data') })) : nodes })), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
                             } }) })] }));
         } }));

package/dropdown/internal/DropdownSub.d.ts

@@ -3,7 +3,6 @@ import type { Styled } from '../../hooks/useStyled';
 import type { CLASSES } from '../vars';
 interface DropdownSubProps {
     children: React.ReactNode;
-    dropdownRef: React.RefObject<HTMLDivElement>;
     namespace: string;
     styled: Styled<typeof CLASSES>;
     id: string;