@ioca/react 1.5.19 → 1.5.21

package/lib/es/components/tree/item.js

@@ -1,34 +1,11 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { KeyboardArrowDownRound } from '@ricons/material';
 import classNames from 'classnames';
-import { useState } from 'react';
 import Checkbox from '../checkbox/checkbox.js';
 import Icon from '../icon/icon.js';
+import Loading from '../loading/loading.js';
 
-function TreeList(props) {
-    const { data = [], depth = 0, round, style, className, parent, nodeProps, ...restProps } = props;
-    const contents = data.map((item, i) => {
-        const { type } = item;
-        const title = item[nodeProps.title];
-        const itemKey = item[nodeProps.key] ||
-            (parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);
-        item.key = itemKey;
-        item.parent = parent;
-        if (type === "title") {
-            return (jsx("div", { className: 'i-tree-group-title', children: title }, i));
-        }
-        if (type && type !== "item") {
-            return (jsx("div", { className: `i-tree-type-${type}`, children: title }, i));
-        }
-        return (jsx(TreeItem, { index: i, item: item, depth: depth, nodeProps: nodeProps, ...restProps }, itemKey));
-    });
-    if (depth > 0)
-        return jsx(Fragment, { children: contents });
-    return (jsx("div", { className: classNames("i-tree", className, {
-            "i-tree-round": round,
-        }), style: style, children: contents }));
-}
-const Header = (props) => {
+const TreeItemHeader = (props) => {
     const { as: Tag = "a", href, selected, children, ...restProps } = props;
     const className = classNames("i-tree-item-header", {
         "i-tree-item-selected": selected,
@@ -38,36 +15,45 @@ const Header = (props) => {
     }
     return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
 };
-const TreeItem = (props) => {
-    const { item, depth = 0, index, selected, checked = [], partofs = {}, checkable, nodeProps, renderExtra, onItemClick, onItemSelect, onItemCheck, ...restProps } = props;
-    const { as, key = "", href, icon, title, expanded, disabled } = item;
-    const children = item[nodeProps.children];
-    const [expand, setExpand] = useState(expanded);
-    const handleExpand = (e, fromToggle) => {
-        if (fromToggle) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (disabled || !children?.length)
-            return;
-        setExpand((v) => !v);
-    };
-    const handleItemClick = (e) => {
-        if (disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        handleExpand(e);
-        onItemClick?.(item, e);
-        onItemSelect?.(key, item);
-    };
-    const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
-    const itemChecked = checked.includes(key);
-    return (jsxs("div", { className: classNames("i-tree-item", {
-            "i-tree-expand": expand,
-        }), children: [jsxs(Header, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: handleItemClick, children: [checkable && (jsx(Checkbox.Item, { value: itemChecked, partof: !itemChecked && partofs[key], className: 'i-tree-checkbox', onChange: handleItemCheck, onClick: (e) => e.stopPropagation() })), icon && jsx("span", { className: 'i-tree-item-icon', children: icon }), jsx("span", { className: 'i-tree-item-title', children: title }), renderExtra?.(item), children && (jsx(Icon, { icon: jsx(KeyboardArrowDownRound, {}), className: 'i-tree-toggle', onClick: (e) => handleExpand(e, true) }))] }), children?.length && (jsx("div", { className: 'i-tree-item-content', children: jsx(TreeList, { data: children, depth: depth + 1, selected: selected, checkable: checkable, parent: item, partofs: partofs, checked: checked, nodeProps: nodeProps, renderExtra: renderExtra, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck, ...restProps }) }))] }));
-};
+function TreeRow(props) {
+    const { flatNode, wrapperStyle, virtualMode, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, onExpand, onItemClick, onItemSelect, onItemCheck, } = props;
+    const { node, depth, isExpanded } = flatNode;
+    const { key = "", as, href, icon, title, disabled, type } = node;
+    const children = node[nodeProps.children];
+    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const loading = loadingKeys?.includes(key);
+    if (type === "title") {
+        return jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
+    }
+    if (type && type !== "item") {
+        return jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
+    }
+    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
+                if (disabled) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+                if (hasChildren)
+                    onExpand(key);
+                onItemClick?.(node, e);
+                onItemSelect?.(key, node);
+            }, children: [checkable && (jsx(Checkbox.Item, { value: checkedSet.has(key), partof: !checkedSet.has(key) && partofs[key], className: "i-tree-checkbox", onChange: () => onItemCheck?.(node, !checkedSet.has(key), []), onClick: (e) => e.stopPropagation() })), icon && jsx("span", { className: "i-tree-item-icon", children: icon }), jsx("span", { className: "i-tree-item-title", children: title }), renderExtra?.(node), hasChildren && (jsx(Icon, { icon: loading ? jsx(Loading, { size: ".86em" }) : jsx(KeyboardArrowDownRound, {}), className: classNames("i-tree-toggle", {
+                        "i-tree-expand": virtualMode ? isExpanded : false,
+                    }), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onExpand(key);
+                    } }))] }) }));
+}
+function TreeList(props) {
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, round, className, style, onItemClick, onItemSelect, onItemCheck } = props;
+    return (jsx("div", { className: classNames("i-tree", className, {
+            "i-tree-round": round,
+        }), style: style, children: flatNodes.map((flatNode) => {
+            const { key = "" } = flatNode.node;
+            return (jsx(TreeRow, { flatNode: flatNode, selected: selected, checkedSet: checkedSet, partofs: partofs, checkable: checkable, nodeProps: nodeProps, renderExtra: renderExtra, loadingKeys: loadingKeys, onExpand: onExpand, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck }, key));
+        }) }));
+}
 
-export { TreeItem, TreeList };
-//# sourceMappingURL=item.js.map
+export { TreeItemHeader, TreeList, TreeRow };

package/lib/es/components/tree/tree.js

@@ -1,20 +1,94 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import { flushSync } from 'react-dom';
+import { useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import './index.css';
 import { TreeList } from './item.js';
+import VirtualTree from './virtual.js';
 
 const defaultNodeProps = {
     key: "key",
     title: "title",
     children: "children",
 };
+function flattenTree(nodes, expandedMap, nodeProps, depth = 0, parentItem, asyncChildrenMap = {}) {
+    const result = [];
+    nodes.forEach((item, i) => {
+        const mapKey = item[nodeProps.key];
+        item.key = mapKey || `${parentItem?.key ?? ""}-${i}`;
+        item.parent = parentItem;
+        const isExpanded = !!expandedMap[item.key];
+        result.push({ node: item, depth, isExpanded });
+        const children = asyncChildrenMap[item.key] || item[nodeProps.children];
+        if (Array.isArray(children) && children.length) {
+            const childNodes = flattenTree(children, expandedMap, nodeProps, depth + 1, item, asyncChildrenMap);
+            if (isExpanded)
+                result.push(...childNodes);
+        }
+    });
+    return result;
+}
 const Tree = (props) => {
-    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
+    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, useVirtual, onItemSelect, onItemCheck, ...restProps } = props;
     const [selectedKey, setSelectedKey] = useState(selected);
     const [checkedKeys, setCheckedKeys] = useState(checked);
     const [partofs, setPartofs] = useState({});
+    const [loadingMap, setLoadingMap] = useState({});
+    const [asyncChildrenMap, setAsyncChildrenMap] = useState({});
     const nodeMapsRef = useRef(new Map());
-    const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
-    const isChecked = (key) => checkedKeys.includes(key || "");
+    const oNodeProps = useMemo(() => ({ ...defaultNodeProps, ...nodeProps }), [nodeProps]);
+    const checkedSet = useMemo(() => new Set(checkedKeys), [checkedKeys]);
+    const [expandedMap, setExpandedMap] = useState(() => {
+        const map = {};
+        const walk = (nodes, parentKey = "") => {
+            nodes.forEach((item, i) => {
+                const mapKey = item[oNodeProps.key];
+                const key = mapKey || `${parentKey}-${i}`;
+                if (item.expanded)
+                    map[key] = true;
+                const children = item[oNodeProps.children];
+                if (Array.isArray(children) && children.length)
+                    walk(children, key);
+            });
+        };
+        walk(data);
+        return map;
+    });
+    const handleExpand = (key) => {
+        if (loadingMap[key])
+            return;
+        const item = nodeMapsRef.current.get(key);
+        if (!item)
+            return;
+        const rawChildren = item[oNodeProps.children];
+        const isAsync = rawChildren instanceof Promise;
+        const isExpanded = !!expandedMap[key];
+        if (isAsync && !isExpanded) {
+            flushSync(() => {
+                setLoadingMap((prev) => ({ ...prev, [key]: true }));
+                setExpandedMap((prev) => ({ ...prev, [key]: true }));
+            });
+            rawChildren
+                .then((resolved) => {
+                item[oNodeProps.children] = resolved;
+                setAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));
+            })
+                .finally(() => {
+                setLoadingMap((prev) => {
+                    const next = { ...prev };
+                    delete next[key];
+                    return next;
+                });
+            });
+        }
+        else {
+            setExpandedMap((prev) => ({
+                ...prev,
+                [key]: !prev[key],
+            }));
+        }
+    };
+    const flatNodes = useMemo(() => flattenTree(data, expandedMap, oNodeProps, 0, undefined, asyncChildrenMap), [data, expandedMap, oNodeProps, asyncChildrenMap]);
+    const loadingKeys = useMemo(() => Object.keys(loadingMap).filter((k) => loadingMap[k]), [loadingMap]);
     const checkItem = (item, checked, direction) => {
         const { key = "", parent, children } = item;
         const shouldChanged = { [key]: checked };
@@ -23,7 +97,9 @@ const Tree = (props) => {
             return [shouldChanged];
         if (checked) {
             if (parent && direction !== "leaf") {
-                const hasUnchecked = parent.children?.some((o) => o.key !== key && !isChecked(o.key));
+                const hasUnchecked = Array.isArray(parent.children)
+                    ? parent.children.some((o) => o.key !== key && !checkedSet.has(o.key))
+                    : false;
                 const [changes, parts] = checkItem(parent, true, "root");
                 if (!hasUnchecked) {
                     Object.assign(shouldChanged, changes);
@@ -32,9 +108,9 @@ const Tree = (props) => {
                     [parent.key]: true,
                 });
             }
-            if (children?.length && direction !== "root") {
+            if (Array.isArray(children) && children.length && direction !== "root") {
                 children.map((o) => {
-                    if (isChecked(o.key))
+                    if (checkedSet.has(o.key))
                         return;
                     const [changes] = checkItem(o, true, "leaf");
                     Object.assign(shouldChanged, changes);
@@ -46,16 +122,18 @@ const Tree = (props) => {
         if (parent && direction !== "leaf") {
             const [changes, parts] = checkItem(parent, false, "root");
             Object.assign(shouldChanged, changes);
-            const hasChecked = parent.children?.some((o) => isChecked(o.key) && o.key !== key);
+            const hasChecked = Array.isArray(parent.children)
+                ? parent.children.some((o) => checkedSet.has(o.key) && o.key !== key)
+                : false;
             Object.assign(partofs, hasChecked ? {} : parts, {
                 [parent.key]: hasChecked,
                 [key]: false,
             });
         }
-        if (children?.length && direction !== "root") {
+        if (Array.isArray(children) && children.length && direction !== "root") {
             children.map((o) => {
                 const [changes] = checkItem(o, false, "leaf");
-                if (!isChecked(o.key))
+                if (!checkedSet.has(o.key))
                     return;
                 Object.assign(shouldChanged, changes);
                 partofs[o.key] = false;
@@ -66,9 +144,10 @@ const Tree = (props) => {
     const handleCheck = (item, checked) => {
         const [shouldChanged, partofs] = checkItem(item, checked);
         const changedKeys = Object.keys(shouldChanged);
+        const changedKeysSet = new Set(changedKeys);
         const nextChecked = checked
             ? Array.from(new Set([...checkedKeys, ...changedKeys]))
-            : checkedKeys.filter((k) => !changedKeys.includes(k));
+            : checkedKeys.filter((k) => !changedKeysSet.has(k));
         setCheckedKeys(nextChecked);
         setPartofs((p) => ({ ...p, ...partofs }));
         onItemCheck?.(item, checked, nextChecked);
@@ -86,15 +165,37 @@ const Tree = (props) => {
     }, [selected]);
     useEffect(() => {
         nodeMapsRef.current.clear();
-        const { key, children } = oNodeProps;
-        const recursive = (nodes) => {
-            nodes.map((o) => {
-                nodeMapsRef.current.set(o[key], o);
-                o[children]?.length > 0 && recursive(o[children]);
+        const { key: keyProp, children: childrenProp } = oNodeProps;
+        const walk = (nodes, parentKey = "") => {
+            nodes.forEach((item, i) => {
+                const mapKey = item[keyProp];
+                const key = (mapKey || `${parentKey}-${i}`);
+                nodeMapsRef.current.set(key, item);
+                const itemChildren = item[childrenProp];
+                if (Array.isArray(itemChildren) && itemChildren.length) {
+                    walk(itemChildren, key);
+                }
             });
         };
-        recursive(data);
-    }, [data]);
+        walk(data);
+    }, [data, oNodeProps, asyncChildrenMap]);
+    useEffect(() => {
+        if (!props.selected)
+            return;
+        const node = nodeMapsRef.current.get(props.selected);
+        if (!node)
+            return;
+        const toExpand = {};
+        let p = node.parent;
+        while (p) {
+            if (p.key)
+                toExpand[p.key] = true;
+            p = p.parent;
+        }
+        if (Object.keys(toExpand).length > 0) {
+            setExpandedMap((prev) => ({ ...prev, ...toExpand }));
+        }
+    }, [props.selected]);
     useImperativeHandle(ref, () => {
         return {
             getChecked: () => {
@@ -123,8 +224,10 @@ const Tree = (props) => {
             },
         };
     });
-    return (jsx(TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (useVirtual) {
+        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    }
+    return (jsx(TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
 export { Tree as default };
-//# sourceMappingURL=tree.js.map

package/lib/es/components/tree/virtual.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { List } from 'react-window';
+import { useResizeObserver } from '../../js/hooks.js';
+import { TreeRow } from './item.js';
+
+function VirtualTree(props) {
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const listRef = useRef(null);
+    const wrapRef = useRef(null);
+    const ro = useResizeObserver();
+    const [viewportHeight, setViewportHeight] = useState(0);
+    useEffect(() => {
+        const el = wrapRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const r = el.getBoundingClientRect();
+            setViewportHeight((prev) => (prev === r.height ? prev : r.height));
+        };
+        update();
+        ro.observe?.(el, update);
+        return () => ro.unobserve?.(el);
+    }, [ro]);
+    const listHeight = Math.max(0, (typeof height === "number" ? height : viewportHeight || 360));
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const rowComponent = useCallback(({ index, style, }) => {
+        const p = propsRef.current;
+        const flatNode = p.flatNodes[index];
+        if (!flatNode)
+            return null;
+        return (jsx(TreeRow, { flatNode: flatNode, wrapperStyle: style, virtualMode: true, selected: p.selected, checkedSet: p.checkedSet, partofs: p.partofs, checkable: p.checkable, nodeProps: p.nodeProps, renderExtra: p.renderExtra, loadingKeys: p.loadingKeys, onExpand: p.onExpand, onItemClick: p.onItemClick, onItemSelect: p.onItemSelect, onItemCheck: p.onItemCheck }));
+    }, []);
+    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List, { listRef: listRef, rowCount: flatNodes.length, rowHeight: useVirtual.rowHeight, overscanCount: Math.max(3, useVirtual.threshold ?? 8), rowProps: {}, style: {
+                width: "100%",
+                height: listHeight,
+                overflow: "auto",
+            }, rowComponent: rowComponent }) }));
+}
+
+export { VirtualTree as default };

package/lib/es/components/upload/dropbox.js

@@ -43,4 +43,3 @@ const Dropbox = (props) => {
 };
 
 export { Dropbox as default };
-//# sourceMappingURL=dropbox.js.map

package/lib/es/components/upload/index.js

@@ -3,4 +3,3 @@ import Upload from './upload.js';
 
 
 export { Upload as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/upload/renderFile.js

@@ -54,4 +54,3 @@ const FileListItem = memo((props) => {
 });
 
 export { ListContainer, FileListItem as default };
-//# sourceMappingURL=renderFile.js.map

package/lib/es/components/upload/upload.js

@@ -11,6 +11,7 @@ import Button from '../button/button.js';
 import Icon from '../icon/icon.js';
 import InputContainer from '../input/container.js';
 import Dropbox from './dropbox.js';
+import './index.css';
 import FileListItem, { ListContainer } from './renderFile.js';
 
 const normalizeFiles = (files) => (files ?? []).map((item) => {
@@ -152,4 +153,3 @@ const Upload = (props) => {
 };
 
 export { Upload as default };
-//# sourceMappingURL=upload.js.map

package/lib/es/components/utils/empty/index.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { InboxTwotone } from '@ricons/material';
 import classNames from 'classnames';
+import './index.css';
 
 function Empty(props) {
     const { className, ...restProps } = props;
@@ -8,4 +9,3 @@ function Empty(props) {
 }
 
 export { Empty as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/utils/helpericon/helpericon.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { uid } from 'radash';
 import { createElement } from 'react';
 import Icon from '../../icon/icon.js';
+import './index.css';
 
 const Helpericon = (props) => {
     const { as = "a", active, className, icon = jsx(CloseRound, {}), ...restProps } = props;
@@ -21,4 +22,3 @@ const Helpericon = (props) => {
 };
 
 export { Helpericon as default };
-//# sourceMappingURL=helpericon.js.map

package/lib/es/components/utils/helpericon/index.js

@@ -3,4 +3,3 @@ import Helpericon from './helpericon.js';
 
 
 export { Helpericon as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/video/index.js

@@ -3,4 +3,3 @@ import Video from './video.js';
 
 
 export { Video as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/video/video.js

@@ -9,6 +9,7 @@ import Button from '../button/button.js';
 import Icon from '../icon/icon.js';
 import Progress from '../progress/progress.js';
 import Text from '../text/text.js';
+import './index.css';
 
 const Video = (props) => {
     const { ref, style, hideControls, autoplay, muted, volume = 50, height, width, useOriginControls, timeProgressProps = {
@@ -170,4 +171,3 @@ const Video = (props) => {
 };
 
 export { Video as default };
-//# sourceMappingURL=video.js.map

package/lib/es/index.js

@@ -1,3 +1,4 @@
+import './css/index.css';
 export { default as Affix } from './components/affix/affix.js';
 export { default as Badge } from './components/badge/badge.js';
 export { default as Button } from './components/button/button.js';
@@ -41,4 +42,3 @@ export { default as Upload } from './components/upload/upload.js';
 export { default as Video } from './components/video/video.js';
 export { default as usePreview } from './js/usePreview/index.js';
 export { default as useTheme } from './js/useTheme/index.js';
-//# sourceMappingURL=index.js.map

package/lib/es/js/hooks.js

@@ -261,4 +261,3 @@ function useResizeObserver() {
 }
 
 export { useIntersectionObserver, useKeydown, useMouseMove, useMouseUp, useReactive, useResizeObserver, useSize };
-//# sourceMappingURL=hooks.js.map

package/lib/es/js/usePreview/content.js

@@ -11,7 +11,7 @@ import renderFile from './renderFile.js';
 import { TFileType } from './type.js';
 
 function Content(props) {
-    const { items = [], initial = 0, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
+    const { items = [], initial = 0, hideControl, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
     const state = useReactive({
         current: initial,
         rotate: 0,
@@ -147,10 +147,9 @@ function Content(props) {
                     transform: `translate(${state.translate
                         .map((n) => `${n}px`)
                         .join(",")}) rotate(${state.rotate}deg) scale(${state.scale})`,
-                }, onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation(), children: content }), jsxs("div", { className: classNames("i-preview-controls", {
+                }, onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation(), children: content }), !hideControl && (jsxs("div", { className: classNames("i-preview-controls", {
                     "i-preview-controls-hidden": state.controlHidden,
-                }), children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-2', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] })] }));
+                }), children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-2', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] }))] }));
 }
 
 export { Content as default };
-//# sourceMappingURL=content.js.map

package/lib/es/js/usePreview/index.js

@@ -3,6 +3,7 @@ import { useRef } from 'react';
 import HookModal from '../../components/modal/hookModal.js';
 import { renderNode } from '../utils.js';
 import Content from './content.js';
+import './index.css';
 
 function usePreview() {
     const ref = useRef(null);
@@ -20,4 +21,3 @@ function usePreview() {
 }
 
 export { usePreview as default };
-//# sourceMappingURL=index.js.map

package/lib/es/js/usePreview/renderFile.js

@@ -17,4 +17,3 @@ function renderFile(props) {
 }
 
 export { renderFile as default };
-//# sourceMappingURL=renderFile.js.map

package/lib/es/js/usePreview/type.js

@@ -10,4 +10,3 @@ var TFileType;
 })(TFileType || (TFileType = {}));
 
 export { TFileType };
-//# sourceMappingURL=type.js.map

package/lib/es/js/useRipple/index.js

@@ -1,3 +1,5 @@
+import './ripple.css';
+
 const TIMEOUT = 500;
 const useRipple = () => {
     if (!document)
@@ -44,4 +46,3 @@ function createRipple() {
 }
 
 export { useRipple as default };
-//# sourceMappingURL=index.js.map

package/lib/es/js/useTheme/index.js

@@ -148,4 +148,3 @@ const useTheme = (props) => {
 };
 
 export { useTheme as default };
-//# sourceMappingURL=index.js.map

package/lib/es/js/utils.js

@@ -283,4 +283,3 @@ const arrayMove = (array, fromIndex, toIndex) => {
 };
 
 export { animate, arrayMove, clamp, exitFullScreen, formatBytes, formatNumber, formatOption, formatTime, fullScreen, getFileType, getNextSorter, getPointPosition, getPosition, getSuffixByUrl, renderNode };
-//# sourceMappingURL=utils.js.map