@laser-ui/components 0.0.4 → 0.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
 ## [0.0.4](https://github.com/laser-ui/laser-ui/compare/v0.0.3...v0.0.4) (2023-09-11)
 
 **Note:** Version bump only for package @laser-ui/components

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) => {
@@ -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.js

@@ -3,8 +3,8 @@ import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
 import { isUndefined } from 'lodash';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useTranslation } from '../../hooks';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useJSS, useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
@@ -13,27 +13,28 @@ import { getHorizontalSidePosition, mergeCS } from '../../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
 export const DropdownSub = forwardRef((props, ref) => {
     const { children, namespace, styled, dropdownRef, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange, } = props;
+    const sheet = useJSS();
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
     const { t } = useTranslation();
     const visible = !isUndefined(popupState);
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && popupRef.current && triggerRef.current) {
             const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
-            const { top, left, transformOrigin } = getHorizontalSidePosition(triggerRef.current, { width, height }, {
+            const position = getHorizontalSidePosition(triggerRef.current, { width, height }, {
                 placement: 'right',
                 inWindow: WINDOW_SPACE,
             });
-            setPopupPositionStyle({
-                top,
-                left,
+            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,
             });
-            setTransformOrigin(transformOrigin);
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     useImperativeHandle(ref, () => updatePosition, [updatePosition]);
@@ -54,7 +55,7 @@ export const DropdownSub = 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':
@@ -62,7 +63,7 @@ export const DropdownSub = forwardRef((props, ref) => {
                                         transform: 'scale(0)',
                                         opacity: 0,
                                         transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                        transformOrigin,
+                                        transformOrigin: transformOrigin.current,
                                     };
                                     break;
                                 case 'leaved':
@@ -72,7 +73,7 @@ export const DropdownSub = forwardRef((props, ref) => {
                                     break;
                             }
                             return renderPopup(_jsx("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'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No Data') }))) : (list) })) })));
                         } }) })] })) }));
 });

package/hooks/index.d.ts

@@ -2,6 +2,7 @@ export { useComponentProps } from './useComponentProps';
 export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useFocusVisible } from './useFocusVisible';
+export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
 export { useListenGlobalScrolling } from './useListenGlobalScrolling';
 export { useLockScroll } from './useLockScroll';

package/hooks/index.js

@@ -2,6 +2,7 @@ export { useComponentProps } from './useComponentProps';
 export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useFocusVisible } from './useFocusVisible';
+export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
 export { useListenGlobalScrolling } from './useListenGlobalScrolling';
 export { useLockScroll } from './useLockScroll';

package/hooks/useJSS.d.ts

@@ -0,0 +1 @@
+export declare function useJSS<T extends string | number | symbol>(): import("jss").StyleSheet<T>;

package/hooks/useJSS.js

@@ -0,0 +1,15 @@
+import { create } from 'jss';
+import preset from 'jss-preset-default';
+import { useEffect, useMemo } from 'react';
+const jss = create();
+jss.setup(preset());
+export function useJSS() {
+    const sheet = useMemo(() => jss.createStyleSheet({}), []);
+    useEffect(() => {
+        sheet.attach();
+        return () => {
+            sheet.detach();
+        };
+    }, [sheet]);
+    return sheet;
+}

package/menu/internal/MenuSub.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useMaxIndex, useTranslation } from '../../hooks';
+import { cloneElement, forwardRef, useImperativeHandle, useRef } from 'react';
+import { useJSS, useMaxIndex, useTranslation } from '../../hooks';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
 import { CollapseTransition, Transition } from '../../internal/transition';
@@ -11,6 +11,7 @@ import { getHorizontalSidePosition, getVerticalSidePosition, mergeCS } from '../
 import { TTANSITION_DURING_BASE, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
 export const MenuSub = forwardRef((props, ref) => {
     const { children, namespace, styled, menuRef, id, level, space, step, icon, list, popupState, trigger, posinset, mode, inNav, active, includeActive, expand, empty, focus, disabled, onVisibleChange, onClick, } = props;
+    const sheet = useJSS();
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
     const dataRef = useRef({});
@@ -18,11 +19,7 @@ export const MenuSub = forwardRef((props, ref) => {
     const visible = !isUndefined(popupState);
     const inHorizontalNav = mode === 'horizontal' && inNav;
     const iconMode = mode === 'icon' && inNav;
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
-    const [transformOrigin, setTransformOrigin] = useState();
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && popupRef.current && triggerRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -30,7 +27,7 @@ export const MenuSub = forwardRef((props, ref) => {
             if (inHorizontalNav) {
                 width = triggerRef.current.offsetWidth - 32;
             }
-            const { top, left, transformOrigin } = inHorizontalNav
+            const position = inHorizontalNav
                 ? getVerticalSidePosition(triggerRef.current, { width, height }, {
                     placement: 'bottom',
                     gap: 12,
@@ -41,12 +38,16 @@ export const MenuSub = forwardRef((props, ref) => {
                     gap: inNav ? 10 : 14,
                     inWindow: WINDOW_SPACE,
                 });
-            setPopupPositionStyle({
-                top,
-                left,
+            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,
                 width: inHorizontalNav ? width : undefined,
             });
-            setTransformOrigin(transformOrigin);
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const maxZIndex = useMaxIndex(visible);
@@ -79,7 +80,7 @@ export const MenuSub = 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':
@@ -87,7 +88,7 @@ export const MenuSub = forwardRef((props, ref) => {
                                                 transform: inHorizontalNav ? 'scaleY(0.7)' : 'scale(0)',
                                                 opacity: 0,
                                                 transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                                transformOrigin,
+                                                transformOrigin: transformOrigin.current,
                                             };
                                             break;
                                         case 'leaved':
@@ -97,7 +98,7 @@ export const MenuSub = forwardRef((props, ref) => {
                                             break;
                                     }
                                     return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
-                                        style: Object.assign(Object.assign({ minWidth: inHorizontalNav ? undefined : 160, zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, popupPositionStyle), transitionStyle),
+                                        style: Object.assign({ minWidth: inHorizontalNav ? undefined : 160, zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, transitionStyle),
                                     }), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No Data') }))) : (list) })) })));
                                 } }) }))] })) }), _jsx(CollapseTransition, { originalSize: {
                     height: 'auto',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,9 +26,11 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.0.4",
-    "@laser-ui/utils": "0.0.4",
+    "@laser-ui/hooks": "0.1.0",
+    "@laser-ui/utils": "0.1.0",
     "@material-design-icons/svg": "^0.14.9",
+    "jss": "^10.10.0",
+    "jss-preset-default": "^10.10.0",
     "lodash": "^4.17.21",
     "rcl-store": "^2.1.0",
     "rxjs": "^7.8.1"
@@ -43,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "54a1e87b25b1e389aa2dcd19657b4c6a60bc06f2"
+  "gitHead": "2bb2f60dbb5d6b4f853132fe488d22c2843b6a17"
 }

package/popover/Popover.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
 import { isFunction, isString, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { cloneElement, forwardRef, useId, useImperativeHandle, useRef } from 'react';
 import { PopoverFooter } from './PopoverFooter';
 import { PopoverHeader } from './PopoverHeader';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useJSS, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -16,6 +16,7 @@ function PopoverFC(props, ref) {
     const trigger = modal ? 'click' : triggerProp;
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
+    const sheet = useJSS();
     const uniqueId = useId();
     let triggerId;
     const titleId = `${namespace}-popover-title-${uniqueId}`;
@@ -30,27 +31,29 @@ function PopoverFC(props, ref) {
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
-    const [transformOrigin, setTransformOrigin] = useState();
-    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 && popoverRef.current && popupRef.current) {
             const position = getPopupPosition(triggerRef.current, { width: popupRef.current.offsetWidth, height: popupRef.current.offsetHeight }, {
                 placement: placementProp,
-                placementFallback: placement,
+                placementFallback: placement.current,
                 placementFixed,
                 gap,
                 inWindow,
             });
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            popoverRef.current.classList.toggle(`${namespace}-popover--${placement.current}`, false);
+            placement.current = position.placement;
+            popoverRef.current.classList.toggle(`${namespace}-popover--${placement.current}`, true);
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPlacement(position.placement);
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     useLockScroll(modal && visible);
@@ -125,7 +128,7 @@ function PopoverFC(props, ref) {
                                     case 'entering':
                                         transitionStyle = {
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaving':
@@ -133,13 +136,13 @@ function PopoverFC(props, ref) {
                                             transform: 'scale(0.3)',
                                             opacity: 0,
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     default:
                                         break;
                                 }
-                                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover', `popover--${placement}`), {
+                                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover'), {
                                     className: restProps.className,
                                     style: Object.assign(Object.assign({}, restProps.style), { zIndex, display: state === 'leaved' ? 'none' : undefined }),
                                 }), { ref: popoverRef, tabIndex: -1, role: ((_a = restProps.role) !== null && _a !== void 0 ? _a : modal) ? 'alertdialog' : 'dialog', "aria-modal": modal, "aria-labelledby": headerNode ? titleId : undefined, "aria-describedby": bodyId, onKeyDown: (e) => {
@@ -158,7 +161,7 @@ function PopoverFC(props, ref) {
                                     }, children: [modal && (_jsx("div", Object.assign({}, styled('popover__mask'), { onClick: () => {
                                                 changeVisible(false);
                                             } }))), renderPopup(_jsxs("div", Object.assign({ ref: popupRef }, mergeCS(styled('popover__content'), {
-                                            style: Object.assign(Object.assign({}, popupPositionStyle), transitionStyle),
+                                            style: transitionStyle,
                                         }), { children: [arrow && _jsx("div", Object.assign({}, styled('popover__arrow'))), headerNode, _jsx("div", Object.assign({}, styled('popover__body'), { id: bodyId, children: content })), footer &&
                                                     cloneElement(footer, {
                                                         _onClose: () => {

package/select/Select.js

@@ -14,7 +14,7 @@ import { CLASSES, IS_CREATED } from './vars';
 import { Checkbox } from '../checkbox';
 import { Dropdown } from '../dropdown';
 import { Empty } from '../empty';
-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';
@@ -28,6 +28,7 @@ function SelectFC(props, ref) {
     const _a = useComponentProps('Select', props), { styleOverrides, styleProvider, formControl, list: listProp, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, monospaced = true, virtual = false, escClosable = true, customItem, customSelected, customSearch, createItem, inputRef: inputRefProp, inputRender, onModelChange, onVisibleChange, onSearch, onClear, onCreateItem, onScrollBottom, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "clearable", "loading", "size", "disabled", "monospaced", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "createItem", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onCreateItem", "onScrollBottom", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { select: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.select, 'select-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['select-popup'] }, styleOverrides);
+    const sheet = useJSS();
     const { t } = useTranslation();
     const uniqueId = useId();
     const listId = `${namespace}-select-list-${uniqueId}`;
@@ -171,11 +172,7 @@ function SelectFC(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) {
             if (monospaced) {
@@ -185,12 +182,16 @@ function SelectFC(props, ref) {
                     placement: 'bottom',
                     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,
                     width,
                 });
+                popupRef.current.classList.toggle(sheet.classes.position, true);
             }
             else {
                 const boxWidth = boxRef.current.offsetWidth;
@@ -201,13 +202,17 @@ function SelectFC(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,
                     minWidth: Math.min(boxWidth, maxWidth),
                     maxWidth,
                 });
+                popupRef.current.classList.toggle(sheet.classes.position, true);
             }
         }
     });
@@ -468,7 +473,7 @@ function SelectFC(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':
@@ -476,7 +481,7 @@ function SelectFC(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':
@@ -486,7 +491,7 @@ function SelectFC(props, ref) {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('select-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {

package/textarea/Textarea.js

@@ -4,11 +4,12 @@ import { useForkRef } from '@laser-ui/hooks';
 import { isFunction, isNumber, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useRef } from 'react';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useDesign, useJSS, useScopedProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 export const Textarea = forwardRef((props, ref) => {
     const _a = useComponentProps('Textarea', props), { styleOverrides, styleProvider, formControl, model, defaultModel, autoRows = false, resizable = true, showCount = false, size: sizeProp, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "autoRows", "resizable", "showCount", "size", "onModelChange"]);
     const styled = useStyled(CLASSES, { textarea: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.textarea }, styleOverrides);
+    const sheet = useJSS();
     const textareaRef = useRef(null);
     const combineTextareaRef = useForkRef(textareaRef, ref);
     const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : '', model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
@@ -50,10 +51,16 @@ export const Textarea = forwardRef((props, ref) => {
                     }
                 }
             }
-            textareaRef.current.style.height = isUndefined(height) ? '' : height + outerSize + 'px';
-            textareaRef.current.style.overflow = isUndefined(overflow) ? '' : 'hidden';
-            textareaRef.current.style.minHeight = isUndefined(minHeight) ? '' : minHeight + outerSize + 'px';
-            textareaRef.current.style.maxHeight = isUndefined(maxHeight) ? '' : maxHeight + outerSize + 'px';
+            if (sheet.classes.rows) {
+                textareaRef.current.classList.toggle(sheet.classes.rows, false);
+            }
+            sheet.replaceRule('rows', {
+                height: isUndefined(height) ? undefined : height + outerSize,
+                overflow: isUndefined(overflow) ? undefined : 'hidden',
+                minHeight: isUndefined(minHeight) ? undefined : minHeight + outerSize,
+                maxHeight: isUndefined(maxHeight) ? undefined : maxHeight + outerSize,
+            });
+            textareaRef.current.classList.toggle(sheet.classes.rows, true);
         }
     });
     const designProps = useDesign({ form: formControl });

package/time-picker/TimePicker.js

@@ -5,13 +5,13 @@ import { ReactComponent as CancelFilled } from '@material-design-icons/svg/fille
 import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
 import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
 import { isNull, isUndefined } from 'lodash';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';
 import { deepCompareDate, orderTime } from './utils';
 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';
@@ -23,6 +23,7 @@ export const TimePicker = forwardRef((props, ref) => {
     const _c = useComponentProps('TimePicker', props), { styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, escClosable = true, inputRef, inputRender, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "config", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { 'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'], 'time-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker-popup'] }, styleOverrides);
+    const sheet = useJSS();
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
@@ -104,11 +105,7 @@ export const TimePicker = 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;
@@ -118,12 +115,16 @@ export const TimePicker = 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);
@@ -304,7 +305,7 @@ export const TimePicker = 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':
@@ -312,7 +313,7 @@ export const TimePicker = 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':
@@ -322,7 +323,7 @@ export const TimePicker = forwardRef((props, ref) => {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('time-picker-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {

package/tooltip/Tooltip.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
 import { isFunction, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { cloneElement, forwardRef, useId, useImperativeHandle, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useJSS, useMaxIndex, useNamespace, useStyled } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -14,35 +14,38 @@ export const Tooltip = forwardRef((props, ref) => {
     const _b = useComponentProps('Tooltip', props), { children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, scrolling, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tooltip: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tooltip }, styleOverrides);
+    const sheet = useJSS();
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-tooltip-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.querySelector(`[aria-describedby="${id}"]`));
-    const popupRef = useRef(null);
+    const tooltipRef = useRef(null);
     const scrollingRef = useRefExtra(scrolling);
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [placement, setPlacement] = useState(placementProp);
+    const transformOrigin = useRef();
+    const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
-        if (visible && triggerRef.current && popupRef.current) {
-            const position = getPopupPosition(triggerRef.current, { width: popupRef.current.offsetWidth, height: popupRef.current.offsetHeight }, {
+        if (visible && triggerRef.current && tooltipRef.current) {
+            const position = getPopupPosition(triggerRef.current, { width: tooltipRef.current.offsetWidth, height: tooltipRef.current.offsetHeight }, {
                 placement: placementProp,
-                placementFallback: placement,
+                placementFallback: placement.current,
                 placementFixed,
                 gap,
                 inWindow,
             });
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, false);
+            placement.current = position.placement;
+            tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, true);
+            if (sheet.classes.position) {
+                tooltipRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPlacement(position.placement);
+            tooltipRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     useImperativeHandle(ref, () => ({
@@ -51,7 +54,7 @@ export const Tooltip = forwardRef((props, ref) => {
     return (_jsx(Popup, { visible: visible, trigger: trigger, mouseEnterDelay: mouseEnterDelay, mouseLeaveDelay: mouseLeaveDelay, updatePosition: {
             fn: updatePosition,
             triggerRef,
-            popupRef,
+            popupRef: tooltipRef,
             containerRefs: [scrollingRef],
         }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => renderTrigger(cloneElement(el, {
@@ -87,7 +90,7 @@ export const Tooltip = forwardRef((props, ref) => {
                                     case 'entering':
                                         transitionStyle = {
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaving':
@@ -95,7 +98,7 @@ export const Tooltip = forwardRef((props, ref) => {
                                             transform: 'scale(0.3)',
                                             opacity: 0,
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaved':
@@ -104,10 +107,10 @@ export const Tooltip = forwardRef((props, ref) => {
                                     default:
                                         break;
                                 }
-                                return renderPopup(_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip', `tooltip--${placement}`), {
+                                return renderPopup(_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip'), {
                                     className: restProps.className,
-                                    style: Object.assign(Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), popupPositionStyle), transitionStyle),
-                                }), { ref: popupRef, id: id, role: "tooltip", children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] })));
+                                    style: Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), transitionStyle),
+                                }), { ref: tooltipRef, id: id, role: "tooltip", children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] })));
                             } }) })] }));
         } }));
 });

package/tree-select/TreeSelect.js

@@ -11,7 +11,7 @@ import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef,
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';
 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';
@@ -33,6 +33,7 @@ function TreeSelectFC(props, ref) {
         tree: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tree,
         'tree-select-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['tree-select-popup'],
     }, styleOverrides);
+    const sheet = useJSS();
     const dataRef = useRef({
         expands: new Set(),
     });
@@ -179,11 +180,7 @@ function TreeSelectFC(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 boxWidth = boxRef.current.offsetWidth;
@@ -194,13 +191,17 @@ function TreeSelectFC(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,
                 minWidth: Math.min(boxWidth, maxWidth),
                 maxWidth,
             });
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
@@ -475,7 +476,7 @@ function TreeSelectFC(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':
@@ -483,7 +484,7 @@ function TreeSelectFC(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':
@@ -493,7 +494,7 @@ function TreeSelectFC(props, ref) {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('tree-select-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {