@laser-ui/components 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.1](https://github.com/laser-ui/laser-ui/compare/v0.6.0...v0.6.1) (2024-04-26)
+
+**Note:** Version bump only for package @laser-ui/components
+
 # [0.6.0](https://github.com/laser-ui/laser-ui/compare/v0.5.0...v0.6.0) (2024-03-06)
 
 ### Bug Fixes

package/dialog-service.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface DialogInstance<P extends object> {
+    key: string | number;
+    node: React.FunctionComponentElement<P>;
+    close: () => void;
+    rerender: (props: P) => void;
+}
+export declare class DialogService {
+    private _key;
+    private _dialogs;
+    private _emitChange;
+    constructor(emitChange: (dialogs: DialogInstance<any>[]) => void);
+    open<P extends object>(type: React.FC<P>, props: Omit<P, 'visible'>, key?: string | number): DialogInstance<P>;
+    close(key: string | number): void;
+    rerender(key: string | number, props: any): void;
+    closeAll(animation?: boolean): void;
+}

package/dialog-service.js

@@ -0,0 +1,85 @@
+import { cloneElement, createElement } from 'react';
+export class DialogService {
+    constructor(emitChange) {
+        Object.defineProperty(this, "_key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: -1
+        });
+        Object.defineProperty(this, "_dialogs", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_emitChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._emitChange = () => {
+            emitChange([].concat(this._dialogs));
+        };
+    }
+    open(type, props, key) {
+        const dialogKey = key !== null && key !== void 0 ? key : `l_#${++this._key}`;
+        const dialogProps = Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, onClose: () => {
+                var _a, _b;
+                this.close(dialogKey);
+                (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }, afterVisibleChange: (visible) => {
+                var _a, _b;
+                (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
+                if (!visible) {
+                    const index = this._dialogs.findIndex((dialog) => dialog.key === dialogKey);
+                    if (index !== -1) {
+                        this._dialogs.splice(index, 1);
+                        this._emitChange();
+                    }
+                }
+            } });
+        const node = createElement(type, Object.assign({ key: dialogKey }, dialogProps));
+        const instance = {
+            key: dialogKey,
+            node,
+            close: () => {
+                this.close(dialogKey);
+            },
+            rerender: (props) => {
+                this.rerender(dialogKey, props);
+            },
+        };
+        this._dialogs.push(instance);
+        this._emitChange();
+        return instance;
+    }
+    close(key) {
+        const index = this._dialogs.findIndex((dialog) => dialog.key === key);
+        if (index !== -1) {
+            const instance = this._dialogs[index];
+            instance.node = cloneElement(instance.node, { visible: false });
+            this._emitChange();
+        }
+    }
+    rerender(key, props) {
+        const index = this._dialogs.findIndex((dialog) => dialog.key === key);
+        if (index !== -1) {
+            const instance = this._dialogs[index];
+            instance.node = cloneElement(instance.node, props);
+            this._emitChange();
+        }
+    }
+    closeAll(animation = true) {
+        if (animation) {
+            this._dialogs.forEach((dialog) => {
+                dialog.node = cloneElement(dialog.node, { visible: false });
+            });
+        }
+        else {
+            this._dialogs = [];
+        }
+        this._emitChange();
+    }
+}

package/drawer/Drawer.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString, isUndefined } from 'lodash';
-import { cloneElement, useContext, useEffect, useId, useMemo, useRef } from 'react';
+import { cloneElement, useCallback, useContext, useEffect, useId, useRef } from 'react';
 import { DrawerFooter } from './DrawerFooter';
 import { DrawerHeader } from './DrawerHeader';
 import { CLASSES, DrawerContext } from './vars';
@@ -17,6 +17,7 @@ export const Drawer = (props) => {
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
     const drawerRef = useRef(null);
+    const drawerContentRef = useRef(null);
     const dataRef = useRef({
         prevActiveEl: null,
     });
@@ -24,21 +25,8 @@ export const Drawer = (props) => {
     const titleId = `${namespace}-drawer-title-${uniqueId}`;
     const bodyId = `${namespace}-drawer-content-${uniqueId}`;
     const drawerContext = useContext(DrawerContext);
-    const ancestryIds = [];
-    if (visible) {
-        drawerContext.forEach((ancestry) => {
-            if (ancestry.placement === placement) {
-                ancestryIds.push(ancestry.uniqueId);
-            }
-        });
-    }
-    const drawerContextValue = useMemo(() => drawerContext.concat({ uniqueId, placement }), [drawerContext, placement, uniqueId]);
-    useEffect(() => {
-        let offset = 0;
-        document.querySelectorAll(`[data-l-drawer-ancestry~="${uniqueId}"]`).forEach((el) => {
-            offset += placement === 'top' || placement === 'bottom' ? el.offsetHeight : el.offsetWidth;
-        });
-        offset = (offset / 3) * 2;
+    const drawerContextValue = useCallback((offsets) => {
+        const offset = (offsets[placement].reduce((v, r) => v + r, 0) / 3) * 2;
         if (drawerRef.current) {
             drawerRef.current.style.transform =
                 placement === 'top'
@@ -49,7 +37,31 @@ export const Drawer = (props) => {
                             ? `translateY(-${offset}px)`
                             : `translateX(${offset}px)`;
         }
-    });
+        if (drawerContentRef.current) {
+            drawerContext(Object.assign(Object.assign({}, offsets), { [placement]: [
+                    placement === 'top' || placement === 'bottom' ? drawerContentRef.current.offsetHeight : drawerContentRef.current.offsetWidth,
+                ].concat(offsets[placement]) }));
+        }
+    }, [drawerContext, placement]);
+    const handleVisibleChange = (visible) => {
+        if (drawerContentRef.current) {
+            drawerContext(Object.assign({ top: [], right: [], bottom: [], left: [] }, {
+                [placement]: visible
+                    ? [
+                        placement === 'top' || placement === 'bottom'
+                            ? drawerContentRef.current.offsetHeight
+                            : drawerContentRef.current.offsetWidth,
+                    ]
+                    : [],
+            }));
+        }
+    };
+    useEffect(() => {
+        if (!visible) {
+            handleVisibleChange(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp)
         ? zIndexProp
@@ -98,7 +110,9 @@ export const Drawer = (props) => {
                 }
                 return el;
             }
-            : container, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterEnter: () => {
+            : container, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterRender: () => {
+                handleVisibleChange(true);
+            }, afterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
                 dataRef.current.prevActiveEl = document.activeElement;
                 if (drawerRef.current) {
@@ -129,7 +143,7 @@ export const Drawer = (props) => {
                                 }
                             } })), _jsxs("div", Object.assign({}, mergeCS(styled('drawer__content'), {
                             style: Object.assign({ width: placement === 'left' || placement === 'right' ? width : undefined, height: placement === 'bottom' || placement === 'top' ? height : undefined }, transitionStyles[state]),
-                        }), { "data-l-drawer-ancestry": ancestryIds.join(' '), children: [headerNode, _jsx("div", Object.assign({}, styled('drawer__body'), { id: bodyId, children: _jsx(DrawerContext.Provider, { value: drawerContextValue, children: children }) })), footer &&
+                        }), { ref: drawerContentRef, children: [headerNode, _jsx("div", Object.assign({}, styled('drawer__body'), { id: bodyId, children: _jsx(DrawerContext.Provider, { value: drawerContextValue, children: children }) })), footer &&
                                     cloneElement(footer, {
                                         _onClose: () => {
                                             onClose === null || onClose === void 0 ? void 0 : onClose();

package/drawer/types.d.ts

@@ -34,3 +34,9 @@ export interface DrawerFooterProps extends BaseProps<'drawer', typeof CLASSES>,
     onCancelClick?: () => any | Promise<any>;
     onOkClick?: () => any | Promise<any>;
 }
+export interface Offsets {
+    top: number[];
+    right: number[];
+    bottom: number[];
+    left: number[];
+}

package/drawer/vars.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Offsets } from './types';
 export declare const CLASSES: {
     drawer: string;
     'drawer--top': string;
@@ -15,7 +16,4 @@ export declare const CLASSES: {
     'drawer__footer--center': string;
     'drawer__footer--right': string;
 };
-export declare const DrawerContext: import("react").Context<{
-    uniqueId: string;
-    placement: 'top' | 'right' | 'bottom' | 'left';
-}[]>;
+export declare const DrawerContext: import("react").Context<(offsets: Offsets) => void>;

package/drawer/vars.js

@@ -15,4 +15,4 @@ export const CLASSES = {
     'drawer__footer--center': '^drawer__footer--center',
     'drawer__footer--right': '^drawer__footer--right',
 };
-export const DrawerContext = createContext([]);
+export const DrawerContext = createContext(() => { });

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/useDesign.d.ts

@@ -8,5 +8,5 @@ export declare function useDesign(opts: {
 }): {
     'data-l-compose-active': boolean | undefined;
     'data-l-compose-disabled': boolean | undefined;
-    'data-l-form-invalid': false | "error" | "warning" | undefined;
+    'data-l-form-invalid': false | "warning" | "error" | undefined;
 };

package/hooks/useDialogService.d.ts

@@ -0,0 +1,3 @@
+import type { DialogInstance } from '../dialog-service';
+import { DialogService } from '../dialog-service';
+export declare function useDialogService(): readonly [DialogService, DialogInstance<any>[]];

package/hooks/useDialogService.js

@@ -0,0 +1,10 @@
+import { useImmer } from '@laser-ui/hooks';
+import { useMemo } from 'react';
+import { DialogService } from '../dialog-service';
+export function useDialogService() {
+    const [dialogs, setDialogs] = useImmer([]);
+    const service = useMemo(() => new DialogService((dialogs) => {
+        setDialogs(dialogs);
+    }), [setDialogs]);
+    return [service, dialogs];
+}

package/index.d.ts

@@ -1,3 +1,4 @@
+export { useDialogService } from './hooks';
 export { Root, DialogService } from './root';
 export { ConfigProvider } from './config-provider';
 export { Accordion } from './accordion';

package/index.js

@@ -1,3 +1,4 @@
+export { useDialogService } from './hooks';
 export { Root, DialogService } from './root';
 export { ConfigProvider } from './config-provider';
 export { Accordion } from './accordion';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,8 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.6.0",
-    "@laser-ui/utils": "0.6.0",
+    "@laser-ui/hooks": "0.6.1",
+    "@laser-ui/utils": "0.6.1",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -42,5 +42,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "b131bc22712979a5de35f237d1b0ef2d490ae62e"
+  "gitHead": "156633eb28f7306ce633cea5bf5a094045aa4ad8"
 }

package/root/Root.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import { isString, set } from 'lodash';
 import { useStore } from 'rcl-store';
-import { createElement, useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { ROOT_DATA, RootContext, Store } from './vars';
 import dayjs from '../dayjs';
 import { Portal } from '../internal/portal';
@@ -84,5 +84,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props)))] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
 }

package/root/dialog-service.d.ts

@@ -1,12 +1,2 @@
-/// <reference types="react" />
-export interface DialogInstance<P extends object> {
-    key: string | number;
-    close: () => void;
-    rerender: (props: P) => void;
-}
-export declare class DialogService {
-    static open<P extends object>(type: React.FC<P>, props: Omit<P, 'visible'>, key?: string | number): DialogInstance<P>;
-    static close(key: string | number): void;
-    static rerender(key: string | number, type: any, props: any): void;
-    static closeAll(animation?: boolean): void;
-}
+import { DialogService as InternalDialogService } from '../dialog-service';
+export declare const DialogService: InternalDialogService;

package/root/dialog-service.js

@@ -1,66 +1,5 @@
 import { Store } from './vars';
-let _key = 0;
-export class DialogService {
-    static open(type, props, key) {
-        const dialogKey = key !== null && key !== void 0 ? key : ++_key;
-        Store.set('dialogs', (draft) => {
-            draft.push({
-                key: dialogKey,
-                type,
-                props: Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, onClose: () => {
-                        var _a, _b;
-                        (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        DialogService.close(dialogKey);
-                    }, afterVisibleChange: (visible) => {
-                        var _a, _b;
-                        (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
-                        if (!visible) {
-                            const index = Store.get('dialogs').findIndex((dialog) => dialog.key === dialogKey);
-                            if (index !== -1) {
-                                Store.set('dialogs', (draft) => {
-                                    draft.splice(index, 1);
-                                });
-                            }
-                        }
-                    } }),
-            });
-        });
-        return {
-            key: dialogKey,
-            close: () => {
-                DialogService.close(dialogKey);
-            },
-            rerender: (props) => {
-                DialogService.rerender(dialogKey, type, props);
-            },
-        };
-    }
-    static close(key) {
-        const index = Store.get('dialogs').findIndex((dialog) => dialog.key === key);
-        if (index !== -1) {
-            Store.set('dialogs', (draft) => {
-                draft[index].props.visible = false;
-            });
-        }
-    }
-    static rerender(key, type, props) {
-        const index = Store.get('dialogs').findIndex((dialog) => dialog.key === key);
-        if (index !== -1) {
-            Store.set('dialogs', (draft) => {
-                draft.splice(index, 1, { key, type, props: Object.assign(draft[index].props, props) });
-            });
-        }
-    }
-    static closeAll(animation = true) {
-        if (animation) {
-            Store.set('dialogs', (draft) => {
-                draft.forEach((dialog) => {
-                    dialog.props.visible = false;
-                });
-            });
-        }
-        else {
-            Store.set('dialogs', []);
-        }
-    }
-}
+import { DialogService as InternalDialogService } from '../dialog-service';
+export const DialogService = new InternalDialogService((dialogs) => {
+    Store.set('dialogs', dialogs);
+});

package/root/vars.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
+import type { DialogInstance } from '../dialog-service';
 import type { Lang } from '../types';
 import resources from '../resources.json';
 export declare const Store: import("rcl-store").Store<{
-    dialogs: {
-        type: any;
-        key: string | number;
-        props: any;
-    }[];
+    dialogs: DialogInstance<any>[];
 }, "dialogs">;
 export declare const ROOT_DATA: {
     clickEvent?: {