@laser-ui/components 0.0.5 → 0.1.1

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';
@@ -12,28 +12,29 @@ import { Transition } from '../../internal/transition';
 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 { children, namespace, styled, 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]);
@@ -45,7 +46,15 @@ export const DropdownSub = forwardRef((props, ref) => {
         }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,
-                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () => dropdownRef.current, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
+                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () => {
+                        let el = document.getElementById(`${namespace}-dropdown-root`);
+                        if (!el) {
+                            el = document.createElement('div');
+                            el.id = `${namespace}-dropdown-root`;
+                            document.body.appendChild(el);
+                        }
+                        return el;
+                    }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
                             let transitionStyle = {};
                             switch (state) {
                                 case 'enter':
@@ -54,7 +63,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 +71,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 +81,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/Menu.js

@@ -116,7 +116,7 @@ function MenuFC(props, ref) {
         setFocusIds(ids.length === 0 ? (isUndefined(firstId) ? [] : [firstId]) : ids);
     };
     let handleKeyDown;
-    const nodes = (menuRef) => {
+    const nodes = (() => {
         const getNodes = (arr, level, subParents, inNav = false) => {
             const posinset = new Map();
             let noGroup = [];
@@ -295,7 +295,7 @@ function MenuFC(props, ref) {
                             else {
                                 dataRef.current.updatePosition.set(itemId, fn);
                             }
-                        }, namespace: namespace, styled: styled, menuRef: menuRef, id: id, level: level, space: space, step: step, icon: itemIcon, list: children && getNodes(children, mode === 'vertical' ? level + 1 : 0, nextSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: expandTrigger !== null && expandTrigger !== void 0 ? expandTrigger : (mode === 'vertical' ? 'click' : 'hover'), 
+                        }, namespace: namespace, styled: styled, id: id, level: level, space: space, step: step, icon: itemIcon, list: children && getNodes(children, mode === 'vertical' ? level + 1 : 0, nextSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: expandTrigger !== null && expandTrigger !== void 0 ? expandTrigger : (mode === 'vertical' ? 'click' : 'hover'), 
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                         posinset: posinset.get(itemId), mode: mode, inNav: inNav, active: (mode === 'vertical' ? !isExpand : isUndefined(popupState)) && actives.includes(itemId), includeActive: actives.includes(itemId), expand: isExpand, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, onVisibleChange: (visible) => {
                             if (visible) {
@@ -322,7 +322,7 @@ function MenuFC(props, ref) {
             });
         };
         return getNodes(list, 0, [], true);
-    };
+    })();
     useImperativeHandle(ref, () => ({
         updatePosition: () => {
             for (const fn of dataRef.current.updatePosition.values()) {
@@ -380,7 +380,7 @@ function MenuFC(props, ref) {
                     var _a;
                     (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     preventBlur(e);
-                }, children: nodes(menuRef) })));
+                }, children: nodes })));
         } }));
 }
 export const Menu = forwardRef(MenuFC);

package/menu/internal/MenuSub.d.ts

@@ -6,7 +6,6 @@ interface MenuSubProps {
     children: React.ReactNode;
     namespace: string;
     styled: Styled<typeof CLASSES>;
-    menuRef: React.RefObject<HTMLElement>;
     id: string;
     level: number;
     space: number;

package/menu/internal/MenuSub.js

@@ -2,15 +2,16 @@ 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';
 import { getHorizontalSidePosition, getVerticalSidePosition, mergeCS } from '../../utils';
 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 { children, namespace, styled, 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);
@@ -70,7 +71,15 @@ export const MenuSub = forwardRef((props, ref) => {
                                 }), { children: [_jsx("div", Object.assign({}, styled('menu__indicator-track', { 'menu__indicator-track--hidden': level === 0 }))), _jsx("div", Object.assign({}, styled('menu__indicator-thumb')))] })), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('menu__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('menu__item-content'), { children: children })), !inHorizontalNav && (_jsxs("div", Object.assign({}, styled('menu__sub-arrow', {
                                     'menu__sub-arrow--horizontal': mode !== 'vertical' && !inHorizontalNav,
                                     'menu__sub-arrow.is-expand': mode === 'vertical' && expand,
-                                }), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () => menuRef.current, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
+                                }), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () => {
+                                let el = document.getElementById(`${namespace}-menu-root`);
+                                if (!el) {
+                                    el = document.createElement('div');
+                                    el.id = `${namespace}-menu-root`;
+                                    document.body.appendChild(el);
+                                }
+                                return el;
+                            }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
                                     let transitionStyle = {};
                                     switch (state) {
                                         case 'enter':
@@ -79,7 +88,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 +96,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 +106,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.5",
+  "version": "0.1.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -23,12 +23,14 @@
   "sideEffects": false,
   "type": "module",
   "main": "./index.js",
-  "module": "./index.js",
+  "module": "./src/index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.0.5",
-    "@laser-ui/utils": "0.0.5",
-    "@material-design-icons/svg": "^0.14.9",
+    "@laser-ui/hooks": "0.1.1",
+    "@laser-ui/utils": "0.1.1",
+    "@material-design-icons/svg": "^0.14.12",
+    "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": "224e60913f28d29e6b7f6a62df7d4d4b345219ea"
+  "gitHead": "701d67d95868809a4cbff486b04d1a685e9d66ea"
 }

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 });