@homecode/ui 5.3.10 → 5.3.12

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

@@ -1,4 +1,4 @@
-import { createElement, Component } from 'react';
+import { createElement, Component, createRef } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useStore } from 'justorm/react';
@@ -19,8 +19,69 @@ function getDeltaPos(p1, p2) {
     };
 }
 const TOUCH_MOVE_TRESHOLD = 50;
+const WHEEL_MOVE_THRESHOLD = 20;
+const WHEEL_RESET_MS = 150;
+const wheelGesture = {
+    itemId: null,
+    deltaX: 0,
+    deltaY: 0,
+    resetTimer: null,
+};
+function resetWheelGesture() {
+    wheelGesture.itemId = null;
+    wheelGesture.deltaX = 0;
+    wheelGesture.deltaY = 0;
+    if (wheelGesture.resetTimer) {
+        clearTimeout(wheelGesture.resetTimer);
+        wheelGesture.resetTimer = null;
+    }
+}
+function scheduleWheelGestureReset() {
+    if (wheelGesture.resetTimer) {
+        clearTimeout(wheelGesture.resetTimer);
+    }
+    wheelGesture.resetTimer = setTimeout(resetWheelGesture, WHEEL_RESET_MS);
+}
+function isHorizontalWheel(e, id) {
+    const absX = Math.abs(e.deltaX);
+    const absY = Math.abs(e.deltaY);
+    if (absX > absY)
+        return true;
+    return (wheelGesture.itemId === id && wheelGesture.deltaX >= wheelGesture.deltaY);
+}
+function handleNotificationWheel(id, e, unpause, close) {
+    scheduleWheelGestureReset();
+    if (wheelGesture.itemId !== null && wheelGesture.itemId !== id) {
+        return;
+    }
+    if (wheelGesture.itemId === null) {
+        wheelGesture.itemId = id;
+    }
+    wheelGesture.deltaX += Math.abs(e.deltaX);
+    wheelGesture.deltaY += Math.abs(e.deltaY);
+    if (wheelGesture.deltaX > wheelGesture.deltaY &&
+        wheelGesture.deltaX > WHEEL_MOVE_THRESHOLD) {
+        const closingId = wheelGesture.itemId;
+        unpause();
+        wheelGesture.deltaX = 0;
+        wheelGesture.deltaY = 0;
+        close(closingId);
+    }
+}
 class Item extends Component {
     startPos = null;
+    itemRef = createRef();
+    componentDidMount() {
+        this.itemRef.current?.addEventListener('wheel', this.onWheelNative, {
+            passive: false,
+            capture: true,
+        });
+    }
+    componentWillUnmount() {
+        this.itemRef.current?.removeEventListener('wheel', this.onWheelNative, {
+            capture: true,
+        });
+    }
     onTouchStart = e => {
         this.startPos = getTouchPos(e);
     };
@@ -43,6 +104,14 @@ class Item extends Component {
         this.startPos = null;
     };
     onTouchCancel = () => (this.startPos = null);
+    onWheelNative = (e) => {
+        const { id, unpause, close } = this.props;
+        if (isHorizontalWheel(e, id)) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        handleNotificationWheel(id, e, unpause, close);
+    };
     closeMe = () => {
         const { id, close } = this.props;
         close(id);
@@ -50,7 +119,7 @@ class Item extends Component {
     render() {
         const { type = 'default', title, content, visible, pause, unpause, } = this.props;
         const classes = cn(S.item, S[`type-${type}`], visible && S.visible);
-        return (jsx("div", { className: classes, onMouseOver: pause, onFocus: pause, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onMouseOut: unpause, onBlur: unpause, onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchCancel, children: jsxs("div", { className: S.itemInner, children: [(title || content) && (jsxs("div", { className: S.text, children: [title && jsx("div", { className: S.title, children: title }), content != null && (jsx("div", { className: S.content, children: typeof content === 'function' ? content() : content }))] })), jsx(Button, { className: S.close, variant: "clear", square: true, onClick: this.closeMe, children: jsx(Icon, { type: "close", size: "s" }) })] }) }));
+        return (jsx("div", { ref: this.itemRef, className: classes, onMouseOver: pause, onFocus: pause, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onMouseOut: unpause, onBlur: unpause, onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchCancel, children: jsxs("div", { className: S.itemInner, children: [(title || content) && (jsxs("div", { className: S.text, children: [title && jsx("div", { className: S.title, children: title }), content != null && (jsx("div", { className: S.content, children: typeof content === 'function' ? content() : content }))] })), jsx(Button, { className: S.close, variant: "clear", square: true, onClick: this.closeMe, children: jsx(Icon, { type: "close", size: "s" }) })] }) }));
     }
 }
 const NotificationsStore = STORE;

package/dist/esm/src/components/Notifications/Notifications.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--p-5);padding-right:var(--p-3)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--p-4)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4:first-child{margin-top:calc(var(--p-2)*-1)}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:var(--p-2)}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:var(--p-3);padding-right:var(--p-6);position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_itemInner__nEYAl button{margin-bottom:calc(var(--p-2)*-1);margin-top:calc(var(--p-2)*-1)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--p-3)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:2px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_close__-IUH3:before{background-color:var(--decent-color-alpha-400);border-radius:inherit;bottom:var(--p-2);content:\"\";left:var(--p-2);pointer-events:none;position:absolute;right:var(--p-2);top:var(--p-2);transition:background-color .1s ease-out}.Notifications_close__-IUH3 svg{transform:scale(.6)}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1}.Notifications_close__-IUH3:hover:before{background-color:var(--decent-color-alpha-800)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
+var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--p-5);padding-right:var(--p-3)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--p-4)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;overscroll-behavior-x:none;position:relative;touch-action:pan-y;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4:first-child{margin-top:calc(var(--p-2)*-1)}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:var(--p-2)}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:var(--p-3);padding-right:var(--p-6);position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_itemInner__nEYAl button{margin-bottom:calc(var(--p-2)*-1);margin-top:calc(var(--p-2)*-1)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--p-3)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:2px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_close__-IUH3:before{background-color:var(--decent-color-alpha-400);border-radius:inherit;bottom:var(--p-2);content:\"\";left:var(--p-2);pointer-events:none;position:absolute;right:var(--p-2);top:var(--p-2);transition:background-color .1s ease-out}.Notifications_close__-IUH3 svg{transform:scale(.6)}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1}.Notifications_close__-IUH3:hover:before{background-color:var(--decent-color-alpha-800)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
 var S = {"root":"Notifications_root__S3ujN","inner":"Notifications_inner__6v9e3","empty":"Notifications_empty__zCpOA","item":"Notifications_item__I3Up4","itemInner":"Notifications_itemInner__nEYAl","visible":"Notifications_visible__ln4-n","type-warning":"Notifications_type-warning__Nxg6C","type-danger":"Notifications_type-danger__zeIMt","icon":"Notifications_icon__nKs-X","type-loading":"Notifications_type-loading__N4EE5","text":"Notifications_text__7QZL6","title":"Notifications_title__Gu9bs","content":"Notifications_content__Zrvw2","close":"Notifications_close__-IUH3"};
 styleInject(css_248z);
 

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
-import cn from 'classnames';
 import { Paranja } from '../Paranja/Paranja.js';
+import S from './Table.styl.js';
 import { Scroll } from '../Scroll/Scroll.js';
 import { Spinner } from '../Spinner/Spinner.js';
-import S from './Table.styl.js';
+import cn from 'classnames';
 
 class Table extends Component {
     renderHeaderColumn = ({ id, label, sticky }) => (jsx("th", { className: cn(sticky && S.sticky), children: label }, id));
@@ -16,8 +16,8 @@ class Table extends Component {
         return (jsx("td", { className: cn(sticky && S.sticky), children: render ? render(data) : data[dataField || id] }, id));
     }
     render() {
-        const { className, columns, isLoading = false, loadingText, blur, data, } = this.props;
-        return (jsxs("div", { className: cn(S.root, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, className: S.scroll, xScrollbarClassName: S.xScrollbar, yScrollbarClassName: S.yScrollbar, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
+        const { className, columns, isLoading = false, loadingText, blur, data, clear, size = 'm', } = this.props;
+        return (jsxs("div", { className: cn(S.root, S[`size-${size}`], clear && S.clear, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, className: S.scroll, xScrollbarClassName: S.xScrollbar, yScrollbarClassName: S.yScrollbar, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
     }
 }
 

package/dist/esm/src/components/Table/Table.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);box-shadow:0 0 0 2px var(--accent-color-alpha-100);max-height:100%;overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--p-3);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{border-bottom-left-radius:var(--brad);border-bottom-right-radius:var(--brad);padding-bottom:var(--p-8)}.Table_scroll__a04XZ{position:static}.Table_xScrollbar__FODoD{transform:translateY(4px)}.Table_yScrollbar__KwMOv{transform:translateX(4px)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
-var S = {"root":"Table_root__PxLR-","scroll":"Table_scroll__a04XZ","xScrollbar":"Table_xScrollbar__FODoD","yScrollbar":"Table_yScrollbar__KwMOv","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
+var css_248z = ".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);max-height:100%;overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--cell-padding);text-align:left}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{border-bottom-left-radius:var(--brad);border-bottom-right-radius:var(--brad);padding-bottom:var(--last-row-padding-bottom)}.Table_root__PxLR-:not(.Table_clear__pGt1B){box-shadow:0 0 0 2px var(--accent-color-alpha-100)}.Table_root__PxLR-:not(.Table_clear__pGt1B) th{background-color:var(--accent-color-alpha-100)}.Table_root__PxLR-:not(.Table_clear__pGt1B) td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_size-xs__z1E3a{--cell-padding:2px;--last-row-padding-bottom:var(--p-4)}.Table_size-s__9PBIX{--cell-padding:var(--p-1);--last-row-padding-bottom:var(--p-5)}.Table_size-m__wNH3x{--cell-padding:var(--p-2);--last-row-padding-bottom:var(--p-5)}.Table_size-l__lCN-O{--cell-padding:var(--p-5);--last-row-padding-bottom:var(--p-8)}.Table_size-xl__QS-V3{--cell-padding:var(--p-8);--last-row-padding-bottom:var(--p-8)}.Table_scroll__a04XZ{position:static}.Table_xScrollbar__FODoD{transform:translateY(4px)}.Table_yScrollbar__KwMOv{transform:translateX(4px)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
+var S = {"root":"Table_root__PxLR-","clear":"Table_clear__pGt1B","size-xs":"Table_size-xs__z1E3a","size-s":"Table_size-s__9PBIX","size-m":"Table_size-m__wNH3x","size-l":"Table_size-l__lCN-O","size-xl":"Table_size-xl__QS-V3","scroll":"Table_scroll__a04XZ","xScrollbar":"Table_xScrollbar__FODoD","yScrollbar":"Table_yScrollbar__KwMOv","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,5 +1,5 @@
-import { Component } from 'react';
 import * as T from './Table.types';
+import { Component } from 'react';
 export declare class Table extends Component<T.Props> {
     renderHeaderColumn: ({ id, label, sticky }: T.Column) => JSX.Element;
     renderRow: (data: T.Data) => JSX.Element;

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

@@ -1,5 +1,5 @@
+import { ComponentType, Size } from 'uilib/types';
 import { ReactNode } from 'react';
-import { ComponentType } from 'uilib/types';
 export type Column = {
     id: string;
     label: ReactNode;
@@ -12,9 +12,11 @@ export type Data = {
     className?: string;
 } & any;
 export type Props = ComponentType & {
+    clear?: boolean;
     columns: Column[];
     data: Data[];
     isLoading?: boolean;
     loadingText?: ReactNode;
     blur?: boolean;
+    size?: Size;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.3.10",
+  "version": "5.3.12",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",