@homecode/ui 4.22.8 → 4.22.10

package/dist/esm/src/components/Flex/Flex.js

@@ -2,7 +2,19 @@ import { jsx } from 'react/jsx-runtime';
 import S from './Flex.styl.js';
 
 const Flex = ({ children, ...props }) => {
-    return (jsx("div", { className: S.root, ...props, children: children }));
+    return (jsx("div", { className: S.root, ...props, style: {
+            justifyContent: props.justifyContent,
+            alignItems: props.alignItems,
+            flexDirection: props.flexDirection,
+            flexWrap: props.flexWrap,
+            flexGrow: props.flexGrow,
+            flexShrink: props.flexShrink,
+            flexBasis: props.flexBasis,
+            flex: props.flex,
+            order: props.order,
+            alignSelf: props.alignSelf,
+            flexFlow: props.flexFlow,
+        }, children: children }));
 };
 
 export { Flex };

package/dist/esm/src/components/Gallery/Gallery.js

@@ -171,9 +171,9 @@ class Gallery extends Component {
                 props.onPointerLeave = this.onPointerUp;
             }
         }
-        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, 
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
                     // @ts-ignore
-                    loader: () => import('./Dots/Dots.js'), index: this.index % items.length, count: items.length }))] }));
+                    index: this.index % items.length, count: items.length }))] }));
     }
 }
 

package/dist/esm/src/components/Lazy/Lazy.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import Time from 'timen';
 import { createStore } from 'justorm/react';
-import { Container } from '../Container/Container.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { Flex } from '../Flex/Flex.js';
 
 function compare(cb1, cb2) {
     return cb1?.toString() === cb2?.toString();
@@ -11,23 +11,25 @@ function compare(cb1, cb2) {
 const loaded = new Map();
 class Lazy extends Component {
     store;
-    Node;
-    hasNode = false;
+    importData;
+    DefaultNode;
+    isLoaded = false;
     clearSpinnerTimeout;
     static defaultProps = {
         size: 'm',
     };
     constructor(props) {
         super(props);
-        this.Node = loaded.get(this.props.loader);
-        this.hasNode = Boolean(this.Node);
+        this.importData = loaded.get(this.props.loader);
+        this.DefaultNode = this.importData?.default;
+        const isLoaded = !!this.importData;
         this.store = createStore(this, {
-            loading: !this.hasNode,
-            spinnerTimeout: this.hasNode,
+            loading: !isLoaded,
+            spinnerTimeout: isLoaded,
         });
     }
     componentDidMount() {
-        if (!this.hasNode)
+        if (!this.importData)
             this.update();
     }
     componentDidUpdate({ loader }) {
@@ -38,27 +40,32 @@ class Lazy extends Component {
         }
     }
     update() {
-        const { loader } = this.props;
-        this.clearSpinnerTimeout = Time.after(500, () => this.setState({ spinnerTimeout: false }));
+        const { loader, spinnerTimeout = 500 } = this.props;
+        this.clearSpinnerTimeout = Time.after(spinnerTimeout, () => this.setState({ spinnerTimeout: false }));
         this.store.loading = true;
-        loader().then(({ default: Node }) => {
+        loader().then((data) => {
             if (!compare(this.props.loader, loader))
                 return;
-            this.Node = Node;
-            loaded.set(loader, Node);
+            this.importData = data;
+            this.DefaultNode = data.default;
+            loaded.set(loader, data);
             this.store.loading = false;
         });
     }
     render() {
-        const { Node } = this;
-        const { progressElem, loader, hideSpinner, ...props } = this.props;
+        const { DefaultNode, importData } = this;
+        const { progressElem, loader, render, children, hideSpinner, ...props } = this.props;
         const { loading, spinnerTimeout } = this.store;
-        if (Node)
-            return jsx(Node, { ...props });
-        if (!spinnerTimeout && loading && !hideSpinner) {
-            return (progressElem ?? (jsx(Container, { fullHeight: true, fullWidth: true, children: jsx(Spinner, { size: props.size }) })));
+        if (loading && !spinnerTimeout && !hideSpinner) {
+            return (progressElem ?? (jsx(Flex, { justifyContent: "center", alignItems: "center", flexGrow: 1, width: "100%", height: "100%", children: jsx(Spinner, { size: props.size }) })));
         }
-        return null;
+        if (render)
+            return render(importData);
+        if (typeof children === 'function')
+            return children(importData);
+        if (DefaultNode)
+            return jsx(DefaultNode, { ...props });
+        return children;
     }
 }
 

package/dist/esm/src/components/Tabs/Tabs.js

@@ -8,7 +8,7 @@ import S from './Tabs.styl.js';
 
 const isId = id => ['string', 'number'].includes(typeof id);
 function Tabs(props) {
-    const { size = 'm', className, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const { size = 'm', className, tabsWrapperClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
     const [activeId, setActiveId] = useState(isId(initialId) ? initialId : allowEmpty ? null : items[0].id);
     useEffect(() => {
         if (isId(initialId)) {
@@ -18,7 +18,7 @@ function Tabs(props) {
     const onTabClick = useCallback((e, { id, onClick } = {}) => {
         // @ts-ignore
         if (onClick && !onClick(e)) {
-            e.peventDefault();
+            e.preventDefault();
             return;
         }
         const newId = allowEmpty && id === activeId ? null : id;
@@ -35,7 +35,7 @@ function Tabs(props) {
         }
         return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
     });
-    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }) }));
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: tabsClassName, ...rest, children: tabsButtons }) }));
     if (typeof children === 'function') {
         return children({
             tabs,

package/dist/esm/types/src/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
-type FlexProps = HTMLAttributes<HTMLDivElement> & {
+import { CSSProperties, HTMLAttributes } from 'react';
+type FlexProps = HTMLAttributes<HTMLDivElement> & CSSProperties & {
     children: React.ReactNode;
 };
 export declare const Flex: ({ children, ...props }: FlexProps) => JSX.Element;

package/dist/esm/types/src/components/Lazy/Lazy.d.ts

@@ -3,8 +3,9 @@ import * as T from './Lazy.types';
 export type LazyProps = T.Props;
 export declare class Lazy extends Component<T.Props> {
     store: T.State;
-    Node?: ComponentType<any>;
-    hasNode: boolean;
+    importData?: T.ImportData;
+    DefaultNode?: ComponentType<any>;
+    isLoaded: boolean;
     clearSpinnerTimeout: null;
     static defaultProps: {
         size: string;

package/dist/esm/types/src/components/Lazy/Lazy.types.d.ts

@@ -1,10 +1,13 @@
 import type { ReactNode } from 'react';
 import type { Size } from 'uilib/types';
-export type Loader = () => Promise<{
-    default: ReactNode;
-}>;
+export type ImportData = Record<string | 'default', any>;
+export type Loader = () => Promise<ImportData>;
+type RenderFunction = (importData: ImportData) => ReactNode;
 export type Props = {
     loader: Loader;
+    render?: RenderFunction;
+    children?: ReactNode | RenderFunction;
+    spinnerTimeout?: number;
     size?: Size;
     progressElem?: ReactNode;
     hideSpinner?: boolean;
@@ -13,3 +16,4 @@ export type State = {
     loading: boolean;
     spinnerTimeout: boolean;
 };
+export {};

package/dist/esm/types/src/components/Tabs/Tabs.types.d.ts

@@ -16,6 +16,8 @@ export type RenderProps = {
 export type Props = {
     size?: Size;
     className?: string;
+    tabsWrapperClassName?: string;
+    tabsClassName?: string;
     contentClassName?: string;
     items: Item[];
     hideTabsIfSingle?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.22.8",
+  "version": "4.22.10",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",